@vkontakte/vkui 4.22.2 → 4.25.1

package/src/components/Textarea/Textarea.tsx

@@ -1,74 +1,80 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import { FormField } from '../FormField/FormField';
-import { HasRef, HasRootRef } from '../../types';
-import { withAdaptivity, AdaptivityProps } from '../../hoc/withAdaptivity';
-import { getClassName } from '../../helpers/getClassName';
-import { useEnsuredControl } from '../../hooks/useEnsuredControl';
-import { useExternRef } from '../../hooks/useExternRef';
-import { usePlatform } from '../../hooks/usePlatform';
-import './Textarea.css';
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { FormField } from "../FormField/FormField";
+import { HasRef, HasRootRef } from "../../types";
+import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+import { getClassName } from "../../helpers/getClassName";
+import { useEnsuredControl } from "../../hooks/useEnsuredControl";
+import { useExternRef } from "../../hooks/useExternRef";
+import { usePlatform } from "../../hooks/usePlatform";
+import "./Textarea.css";
 
-export interface TextareaProps extends
-  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-  HasRef<HTMLTextAreaElement>,
-  HasRootRef<HTMLElement>,
-  AdaptivityProps {
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    HasRef<HTMLTextAreaElement>,
+    HasRootRef<HTMLElement>,
+    AdaptivityProps {
   grow?: boolean;
   onResize?(el: HTMLTextAreaElement): void;
   defaultValue?: string;
 }
 
-const Textarea: React.FC<TextareaProps> = React.memo(({
-  defaultValue = '',
-  grow = true,
-  style,
-  onResize,
-  className,
-  getRootRef,
-  getRef,
-  sizeY,
-  rows = 2,
-  ...restProps
-}: TextareaProps) => {
-  const [value, onChange] = useEnsuredControl(restProps, { defaultValue });
-  const currentScrollHeight = React.useRef<number>();
-  const elementRef = useExternRef(getRef);
-  const platform = usePlatform();
+const Textarea: React.FC<TextareaProps> = React.memo(
+  ({
+    defaultValue = "",
+    grow = true,
+    style,
+    onResize,
+    className,
+    getRootRef,
+    getRef,
+    sizeY,
+    rows = 2,
+    ...restProps
+  }: TextareaProps) => {
+    const [value, onChange] = useEnsuredControl(restProps, { defaultValue });
+    const currentScrollHeight = React.useRef<number>();
+    const elementRef = useExternRef(getRef);
+    const platform = usePlatform();
 
-  // autosize input
-  React.useEffect(() => {
-    const el = elementRef.current;
+    // autosize input
+    React.useEffect(() => {
+      const el = elementRef.current;
 
-    if (grow && el.offsetParent) {
-      el.style.height = null;
-      el.style.height = `${el.scrollHeight}px`;
+      if (grow && el?.offsetParent) {
+        el.style.height = "";
+        el.style.height = `${el.scrollHeight}px`;
 
-      if (el.scrollHeight !== currentScrollHeight.current && onResize) {
-        onResize(el);
-        currentScrollHeight.current = el.scrollHeight;
+        if (el.scrollHeight !== currentScrollHeight.current && onResize) {
+          onResize(el);
+          currentScrollHeight.current = el.scrollHeight;
+        }
       }
-    }
-  }, [grow, value, sizeY]);
+    }, [grow, value, sizeY, elementRef, onResize]);
 
-  return (
-    <FormField
-      vkuiClass={classNames(getClassName('Textarea', platform), `Textarea--sizeY-${sizeY}`)}
-      className={className}
-      style={style}
-      getRootRef={getRootRef}
-      disabled={restProps.disabled}
-    >
-      <textarea
-        {...restProps}
-        rows={rows}
-        vkuiClass="Textarea__el"
-        value={value}
-        onChange={onChange}
-        ref={elementRef}
-      />
-    </FormField>
-  );
-});
+    return (
+      <FormField
+        vkuiClass={classNames(
+          getClassName("Textarea", platform),
+          `Textarea--sizeY-${sizeY}`
+        )}
+        className={className}
+        style={style}
+        getRootRef={getRootRef}
+        disabled={restProps.disabled}
+      >
+        <textarea
+          {...restProps}
+          rows={rows}
+          vkuiClass="Textarea__el"
+          value={value}
+          onChange={onChange}
+          ref={elementRef}
+        />
+      </FormField>
+    );
+  }
+);
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(Textarea, { sizeY: true });

package/src/components/Tooltip/Readme.md

@@ -2,98 +2,112 @@
 хочется представить новый функционал. Это достаточно сложный с точки зрения управления компонент, поэтому он
 требует подробной документации.
 
+Для показа тултипа по ховеру, воспользуйтесь [`RichTooltip`](#/RichTooltip) или [`TextTooltip`](#/TextTooltip).
+
 ### Концепция
+
 Этот тултип служит для ознакомительных целей. То есть показывать его надо один раз, запоминая факт показа между
 сессиями. Рекомендуется показывать тултип сразу после того, как нуждающийся в нем элемент появился в зоне видимости.
 Это значит, что если, например, до элемента нужно скроллить, то показывать тултип нужно не сразу при попадании
 на страницу, а именно в момент, когда пользователь доскроллил до элемента.
 
-> **Важно** 
+> **Важно**
 >
->На странице не может быть два одновременно показанных тултипа. Они всегда должны показываться
-последовательно: следующий показывается при закрытии текущего и так до конца.
-
+> На странице не может быть два одновременно показанных тултипа. Они всегда должны показываться
+> последовательно: следующий показывается при закрытии текущего и так до конца.
 
 ### API
 
 Если хочется снабдить какой-то элемент интерфейса подсказкой, достаточно просто «обернуть» его тултипом:
-``` jsx static
-import { Tooltip, Button } from '@vkontakte/vkui';
+
+```jsx static
+import { Tooltip, Button } from "@vkontakte/vkui";
 
 <Tooltip text="Обновлённый раздел поможет найти друзей">
   <Button>Друзья</Button>
-</Tooltip>
+</Tooltip>;
 ```
+
 О возможностях тултипа можно прочитать в описании свойств и методов.
 
 ```jsx
-  class Example extends React.Component {
-
-    constructor () {
-      this.state = {
-        tooltip: true,
-        tooltip2: true,
-        tooltip3: false,
-        activePanel: 'tooltip',
-      }
-    }
-
-    render () {
-      return (
-        <View activePanel={this.state.activePanel}>
-
-          <Panel id="tooltip">
-            <PanelHeader>Tooltip</PanelHeader>
-            <Group>
-              <List>
-                <Cell>Музыка</Cell>
-                <Cell>Видео</Cell>
-                <Cell>Игры</Cell>
-                <Cell>Закладки</Cell>
-                <Cell>Документы</Cell>
-                <Cell>Денежные переводы</Cell>
-              </List>
-            </Group>
-            <Group>
-              <Tooltip
-                mode="light"
-                text="У нас тут brand new функционал подвезли. Зацените!"
-                isShown={this.state.tooltip}
-                onClose={() => this.setState({ tooltip: false })}
-                offsetX={10}
-              >
-                <Cell onClick={() => this.setState({ activePanel: 'tooltip2' })}>VK Pay</Cell>
-              </Tooltip>
-            </Group>
-          </Panel>
-
-          <Panel id="tooltip2">
-            <PanelHeader
-              left={
-                <PanelHeaderButton onClick={() => this.setState({ activePanel: 'tooltip' })}>
-                  {(this.props.platform === ANDROID || this.props.platform === VKCOM) ? <Icon24Back/> : <Icon28ChevronBack/>}
-                </PanelHeaderButton>
-              }
-              right={
-                <PanelHeaderButton>
-                  <Tooltip
-                    isShown={this.state.tooltip2}
-                    onClose={() => this.setState({ tooltip2: false, tooltip3: true })}
-                    cornerOffset={-10}
-                    offsetX={7}
-                    text="Обновлённый раздел поможет найти друзей"
-                    header="Рекомендации друзей"
-                  >
-                    <Icon24Add/>
-                  </Tooltip>
-                </PanelHeaderButton>
-              }
+class Example extends React.Component {
+  constructor() {
+    this.state = {
+      tooltip: true,
+      tooltip2: true,
+      tooltip3: false,
+      activePanel: "tooltip",
+    };
+  }
+
+  render() {
+    return (
+      <View activePanel={this.state.activePanel}>
+        <Panel id="tooltip">
+          <PanelHeader>Tooltip</PanelHeader>
+          <Group>
+            <List>
+              <Cell>Музыка</Cell>
+              <Cell>Видео</Cell>
+              <Cell>Игры</Cell>
+              <Cell>Закладки</Cell>
+              <Cell>Документы</Cell>
+              <Cell>Денежные переводы</Cell>
+            </List>
+          </Group>
+          <Group>
+            <Tooltip
+              mode="light"
+              text="У нас тут brand new функционал подвезли. Зацените!"
+              isShown={this.state.tooltip}
+              onClose={() => this.setState({ tooltip: false })}
+              offsetX={10}
             >
-              Tooltip
-            </PanelHeader>
-            <Group>
-              <List>
-                <Cell before={
+              <Cell onClick={() => this.setState({ activePanel: "tooltip2" })}>
+                VK Pay
+              </Cell>
+            </Tooltip>
+          </Group>
+        </Panel>
+
+        <Panel id="tooltip2">
+          <PanelHeader
+            left={
+              <PanelHeaderButton
+                onClick={() => this.setState({ activePanel: "tooltip" })}
+              >
+                {this.props.platform === ANDROID ||
+                this.props.platform === VKCOM ? (
+                  <Icon24Back />
+                ) : (
+                  <Icon28ChevronBack />
+                )}
+              </PanelHeaderButton>
+            }
+            right={
+              <PanelHeaderButton>
+                <Tooltip
+                  isShown={this.state.tooltip2}
+                  onClose={() =>
+                    this.setState({ tooltip2: false, tooltip3: true })
+                  }
+                  cornerOffset={-10}
+                  offsetX={7}
+                  text="Обновлённый раздел поможет найти друзей"
+                  header="Рекомендации друзей"
+                >
+                  <Icon24Add />
+                </Tooltip>
+              </PanelHeaderButton>
+            }
+          >
+            Tooltip
+          </PanelHeader>
+          <Group>
+            <List>
+              <Cell
+                before={
                   <Tooltip
                     text="Теперь у нас появились аватарки в списках. Правда круто?"
                     isShown={this.state.tooltip3}
@@ -101,104 +115,146 @@ import { Tooltip, Button } from '@vkontakte/vkui';
                     cornerOffset={-6}
                   >
                     <Avatar />
-                  </Tooltip>}
-                  description="Веб-сайт"
-                >Команда ВКонтакте</Cell>
-                <Cell before={<Avatar />} description="Музыкант">Robbie Williams</Cell>
-                <Cell before={<Avatar />} description="Издательский дом">ПостНаука</Cell>
-                <Cell before={<Avatar />} description="Издательский дом">ПостНаука</Cell>
-                <Cell before={<Avatar />} description="Издательский дом">ПостНаука</Cell>
-                <Cell before={<Avatar />} description="Издательский дом">ПостНаука</Cell>
-                <Cell before={<Avatar />} description="Издательский дом">ПостНаука</Cell>
-              </List>
-            </Group>
-          </Panel>
-
-        </View>
-      )
-    }
+                  </Tooltip>
+                }
+                description="Веб-сайт"
+              >
+                Команда ВКонтакте
+              </Cell>
+              <Cell before={<Avatar />} description="Музыкант">
+                Robbie Williams
+              </Cell>
+              <Cell before={<Avatar />} description="Издательский дом">
+                ПостНаука
+              </Cell>
+              <Cell before={<Avatar />} description="Издательский дом">
+                ПостНаука
+              </Cell>
+              <Cell before={<Avatar />} description="Издательский дом">
+                ПостНаука
+              </Cell>
+              <Cell before={<Avatar />} description="Издательский дом">
+                ПостНаука
+              </Cell>
+              <Cell before={<Avatar />} description="Издательский дом">
+                ПостНаука
+              </Cell>
+            </List>
+          </Group>
+        </Panel>
+      </View>
+    );
   }
+}
 
-  const ExampleWithPlatform = withPlatform(Example);
+const ExampleWithPlatform = withPlatform(Example);
 
-  <ExampleWithPlatform />
+<ExampleWithPlatform />;
 ```
 
 ## TooltipContainer
 
 Чтобы использовать тултип без `Panel` / `PanelHeader` / `FixedLayout`:
+
 - в скроллящемся контейнере — замените какой-нибудь элемент, внутри которого нет скролла, на `<TooltipContainer>` и добавьте ему `position: relative` (или другую не-static).
 - внутри `position: fixed` — `<TooltipContainer fixed>`
 
 ```jsx { "props": { "layout": false, "frame": true } }
 <>
-  <TooltipContainer style={{ minHeight: '120vh' }}>
+  <TooltipContainer style={{ minHeight: "120vh" }}>
     <Tooltip text="Я скроллюсь">
-      <div style={{ display: 'inline-block' }}>
+      <div style={{ display: "inline-block" }}>
         <Avatar />
       </div>
     </Tooltip>
     <Tooltip text="Двигаем стрелочку" cornerOffset={20}>
-      <div style={{ display: 'inline-block', marginLeft: 100 }}>
+      <div style={{ display: "inline-block", marginLeft: 100 }}>
         <Avatar />
       </div>
     </Tooltip>
   </TooltipContainer>
   <TooltipContainer
     fixed
-    style={{ 
-      minHeight: '30px', 
-      border: '1px solid', 
-      margin: '100px 100px 0', 
-      position: 'relative', 
-      background: 'var(--background_content)',
+    style={{
+      minHeight: "30px",
+      border: "1px solid",
+      margin: "100px 100px 0",
+      position: "relative",
+      background: "var(--background_content)",
       zIndex: 1,
     }}
   >
     <Tooltip text="Я вылезаю (fixed)">
-      <div style={{ display: 'inline-block' }}>
+      <div style={{ display: "inline-block" }}>
         <Avatar />
       </div>
     </Tooltip>
   </TooltipContainer>
-  <TooltipContainer style={{ 
-    minHeight: '100vh', 
-    border: '1px solid', 
-    margin: '64px 100px 100px', 
-    position: 'relative', 
-    background: 'var(--background_content)',
-    zIndex: 1,
-  }}>
+  <TooltipContainer
+    style={{
+      minHeight: "100vh",
+      border: "1px solid",
+      margin: "64px 100px 100px",
+      position: "relative",
+      background: "var(--background_content)",
+      zIndex: 1,
+    }}
+  >
     <Tooltip text="Я прилип слева">
-      <div style={{ display: 'inline-block', position: 'absolute', right: 0 }}>
+      <div style={{ display: "inline-block", position: "absolute", right: 0 }}>
         <Avatar />
       </div>
     </Tooltip>
     <Tooltip text="Я прилип справа">
-      <div style={{ display: 'inline-block' }}>
+      <div style={{ display: "inline-block" }}>
         <Avatar />
       </div>
     </Tooltip>
     <Tooltip text="Я прилип слева">
-      <div style={{ display: 'inline-block', position: 'absolute', left: 0, bottom: 0 }}>
+      <div
+        style={{
+          display: "inline-block",
+          position: "absolute",
+          left: 0,
+          bottom: 0,
+        }}
+      >
         <Avatar />
       </div>
     </Tooltip>
     <Tooltip text="Я прилип справа">
-      <div style={{ display: 'inline-block', position: 'absolute', right: 0, bottom: 0 }}>
+      <div
+        style={{
+          display: "inline-block",
+          position: "absolute",
+          right: 0,
+          bottom: 0,
+        }}
+      >
         <Avatar />
       </div>
     </Tooltip>
     <Tooltip text="Я по центру 😎">
-      <div style={{ display: 'inline-block', position: 'absolute', left: '50%', top: '50%', transform: 'translate(50%, 50%)' }}>
+      <div
+        style={{
+          display: "inline-block",
+          position: "absolute",
+          left: "50%",
+          top: "50%",
+          transform: "translate(50%, 50%)",
+        }}
+      >
         <Avatar />
       </div>
     </Tooltip>
   </TooltipContainer>
-  <div style={{ height: '100vh' }}></div>
-  <TooltipContainer fixed style={{ position: 'fixed', bottom: 0, width: '100%' }}>
+  <div style={{ height: "100vh" }}></div>
+  <TooltipContainer
+    fixed
+    style={{ position: "fixed", bottom: 0, width: "100%" }}
+  >
     <Tooltip text="Я прибит к низу">
-      <div style={{ display: 'inline-block' }}>
+      <div style={{ display: "inline-block" }}>
         <Avatar />
       </div>
     </Tooltip>

package/src/components/Tooltip/Tooltip.css

@@ -12,31 +12,31 @@
   position: absolute;
 }
 
-.Tooltip__container[data-popper-placement^='bottom'] .Tooltip__corner {
+.Tooltip__container[data-popper-placement^="bottom"] .Tooltip__corner {
   top: -8px;
 }
 
-.Tooltip__container[data-popper-placement^='top'] .Tooltip__corner {
+.Tooltip__container[data-popper-placement^="top"] .Tooltip__corner {
   bottom: -8px;
 }
 
-.Tooltip__container[data-popper-placement^='top'] .Tooltip__corner::before {
+.Tooltip__container[data-popper-placement^="top"] .Tooltip__corner::before {
   transform: rotate(180deg);
 }
 
-.Tooltip__container[data-popper-placement^='left'] .Tooltip__corner {
+.Tooltip__container[data-popper-placement^="left"] .Tooltip__corner {
   right: -14px;
 }
 
-.Tooltip__container[data-popper-placement^='left'] .Tooltip__corner::before {
+.Tooltip__container[data-popper-placement^="left"] .Tooltip__corner::before {
   transform: rotate(90deg);
 }
 
-.Tooltip__container[data-popper-placement^='right'] .Tooltip__corner {
+.Tooltip__container[data-popper-placement^="right"] .Tooltip__corner {
   left: -14px;
 }
 
-.Tooltip__container[data-popper-placement^='right'] .Tooltip__corner::before {
+.Tooltip__container[data-popper-placement^="right"] .Tooltip__corner::before {
   transform: rotate(-90deg);
 }
 
@@ -47,7 +47,7 @@
 }
 
 .Tooltip__corner::before {
-  content: '';
+  content: "";
   display: block;
   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDIwIDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+dG9vbHRpcF90aXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iTWFzdGVyLUtpdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8cGF0aCBkPSJNMTAsMCBDMTMuNSwwIDE1LjUsOCAyMCw4IEwwLDggQzQuNSw4IDYuNSwwIDEwLDAgWiIgaWQ9InRvb2x0aXBfdGlwIiBmaWxsPSIjNDdhM2ZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4gICAgPC9nPjwvc3ZnPg==);
   width: 20px;
@@ -60,7 +60,7 @@
 
 .Tooltip__content {
   background-color: #47a3ff;
-  box-shadow: 0 4px 32px 0 rgba(0, 0, 0, .16), 0 0 4px 0 rgba(0, 0, 0, .04);
+  box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.16), 0 0 4px 0 rgba(0, 0, 0, 0.04);
   padding: 8px 12px 10px;
   border-radius: 10px;
   color: #fff;