@vkontakte/vkui 4.20.0 → 4.22.1

package/src/components/TabbarItem/TabbarItem.css

@@ -1,42 +1,54 @@
 .TabbarItem {
-  flex-shrink: 0;
-  max-width: 100%;
-  flex-grow: 1;
-  flex-basis: 0;
-  overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--tabbar_inactive_icon);
   text-decoration: none;
+  border: none;
+  outline: none;
+  padding: 0;
+  background: transparent;
+  height: var(--tabbar_height);
+  position: relative;
 }
 
-.Tabbar--l-vertical .TabbarItem.TabbarItem--text {
-  position: relative;
-  top: 2px;
+.Tabbar .TabbarItem {
+  flex-shrink: 0;
+  max-width: 100%;
+  min-width: 0;
+  flex-grow: 1;
+  flex-basis: 0;
 }
 
 .TabbarItem--selected {
   color: var(--tabbar_active_icon);
 }
 
+.TabbarItem__tappable {
+  position: absolute;
+}
+
 .TabbarItem__in {
-  align-self: center;
   display: flex;
-  max-width: 100%;
   padding: 0 2px;
-  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  height: 100%;
+  overflow: hidden;
+}
+
+.Tabbar--l-vertical .TabbarItem--text .TabbarItem__in {
+  position: relative;
+  top: 2px;
 }
 
 .Tabbar--l-vertical .TabbarItem__in {
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
 }
 
 .Tabbar--l-horizontal .TabbarItem__in {
   flex-direction: row;
-  align-items: center;
 }
 
 .TabbarItem__icon {
@@ -74,3 +86,42 @@
   font-weight: 500;
   margin-left: 8px;
 }
+
+/**
+ * Android
+ */
+
+.TabbarItem--android .TabbarItem__tappable {
+  width: calc(100% + 16px);
+  padding-bottom: calc(100% + 16px);
+  border-radius: 50%;
+}
+
+.TabbarItem--android:first-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.TabbarItem--android:last-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/**
+ * iOS
+ */
+
+.TabbarItem--ios .TabbarItem__tappable {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.TabbarItem--ios .TabbarItem__in {
+  transition: transform .07s var(--ios-easing);
+}
+
+.TabbarItem--ios .TabbarItem__tappable--active + .TabbarItem__in {
+  transform: scale(.96);
+}

package/src/components/TabbarItem/TabbarItem.tsx

@@ -4,9 +4,15 @@ import Counter from '../Counter/Counter';
 import { classNames } from '../../lib/classNames';
 import { usePlatform } from '../../hooks/usePlatform';
 import { hasReactNode } from '../../lib/utils';
+import Tappable from '../Tappable/Tappable';
+import { Platform } from '../../lib/platform';
+import { HasComponent, HasRootRef } from '../../types';
 import './TabbarItem.css';
 
-export interface TabbarItemProps extends React.HTMLAttributes<HTMLElement>, React.AnchorHTMLAttributes<HTMLElement> {
+export interface TabbarItemProps extends
+  Omit<React.AllHTMLAttributes<HTMLElement>, 'label'>, // TODO убрать Omit после удаления свойства label
+  HasRootRef<HTMLElement>,
+  HasComponent {
   selected?: boolean;
   /**
    * Тест рядом с иконкой
@@ -22,31 +28,49 @@ export interface TabbarItemProps extends React.HTMLAttributes<HTMLElement>, Reac
   label?: React.ReactNode;
 }
 
-const TabbarItem: React.FunctionComponent<TabbarItemProps> = (props: TabbarItemProps) => {
-  const { children, selected, label, indicator, text, ...restProps } = props;
+const TabbarItem: React.FunctionComponent<TabbarItemProps> = ({
+  children,
+  selected,
+  label,
+  indicator,
+  text,
+  href,
+  Component = href ? 'a' : 'button',
+  disabled,
+  ...restProps
+}: TabbarItemProps) => {
   const platform = usePlatform();
-  const Component: React.ElementType = restProps.href ? 'a' : 'div';
 
-  return (
-    <Component
-      {...restProps}
-      vkuiClass={classNames(getClassName('TabbarItem', platform), {
-        'TabbarItem--selected': selected,
-        'TabbarItem--text': !!text,
-      })}
-    >
-      <div vkuiClass="TabbarItem__in">
-        <div vkuiClass="TabbarItem__icon">
-          {children}
-          <div vkuiClass="TabbarItem__label">
-            {hasReactNode(indicator) && indicator}
-            {!indicator && label && <Counter size="s" mode="prominent">{label}</Counter>}
-          </div>
+  // @ts-ignore ругается на то, что у AllHTMLAttributes type это строка, а button не любую строку считает валидным значением
+  return (<Component
+    {...restProps}
+    disabled={disabled}
+    href={href}
+    vkuiClass={classNames(getClassName('TabbarItem', platform), {
+      'TabbarItem--selected': selected,
+      'TabbarItem--text': !!text,
+    })}
+  >
+    <Tappable
+      role="presentation"
+      Component="div"
+      disabled={disabled}
+      activeMode={platform === Platform.IOS ? 'TabbarItem__tappable--active' : 'background'}
+      activeEffectDelay={platform === Platform.IOS ? 0 : 300}
+      hasHover={false}
+      vkuiClass="TabbarItem__tappable"
+    />
+    <div vkuiClass="TabbarItem__in">
+      <div vkuiClass="TabbarItem__icon">
+        {children}
+        <div vkuiClass="TabbarItem__label">
+          {hasReactNode(indicator) && indicator}
+          {!indicator && label && <Counter size="s" mode="prominent">{label}</Counter>}
         </div>
-        {text && <div vkuiClass="TabbarItem__text">{text}</div>}
       </div>
-    </Component>
-  );
+      {text && <div vkuiClass="TabbarItem__text">{text}</div>}
+    </div>
+  </Component>);
 };
 
 export default TabbarItem;

package/src/components/Tappable/Tappable.tsx

@@ -8,7 +8,7 @@ import { getClassName } from '../../helpers/getClassName';
 import { ANDROID } from '../../lib/platform';
 import { getOffsetRect } from '../../lib/offset';
 import { coordX, coordY } from '../../lib/touch';
-import { HasRootRef } from '../../types';
+import { HasComponent, HasRootRef } from '../../types';
 import { withAdaptivity, AdaptivityProps } from '../../hoc/withAdaptivity';
 import { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
@@ -18,8 +18,7 @@ import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
 import './Tappable.css';
 
-export interface TappableProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, AdaptivityProps {
-  Component?: React.ElementType;
+export interface TappableProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, AdaptivityProps, HasComponent {
   /**
    * Длительность показа active-состояния
    */

package/src/components/Textarea/Readme.md

@@ -10,6 +10,9 @@
         <FormItem top="Любимая музыка">
           <Textarea placeholder="Группы, исполнители, продюсеры" />
         </FormItem>
+        <FormItem top="Увлечения">
+          <Textarea cols={4} placeholder="Музыка, спорт" defaultValue="Музыка\nСпорт\nФотография\nПлавание\nПрограммирование" />
+        </FormItem>
         <FormItem top="Прикидываемся Input">
           <Textarea rows={1} placeholder="Once upon a time" />
         </FormItem>

package/src/components/Textarea/Textarea.tsx

@@ -7,7 +7,6 @@ import { getClassName } from '../../helpers/getClassName';
 import { useEnsuredControl } from '../../hooks/useEnsuredControl';
 import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import './Textarea.css';
 
 export interface TextareaProps extends
@@ -33,19 +32,24 @@ const Textarea: React.FC<TextareaProps> = React.memo(({
   ...restProps
 }: TextareaProps) => {
   const [value, onChange] = useEnsuredControl(restProps, { defaultValue });
+  const currentScrollHeight = React.useRef<number>();
   const elementRef = useExternRef(getRef);
   const platform = usePlatform();
 
   // autosize input
-  useIsomorphicLayoutEffect(() => {
+  React.useEffect(() => {
     const el = elementRef.current;
-    if (grow) {
+
+    if (grow && el.offsetParent) {
       el.style.height = null;
       el.style.height = `${el.scrollHeight}px`;
-      // TODO: call only when height changed?
-      onResize && onResize(el);
+
+      if (el.scrollHeight !== currentScrollHeight.current && onResize) {
+        onResize(el);
+        currentScrollHeight.current = el.scrollHeight;
+      }
     }
-  }, [grow, value]);
+  }, [grow, value, sizeY]);
 
   return (
     <FormField

package/src/components/Touch/Touch.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { getSupportedEvents, coordX, coordY, touchEnabled, VKUITouchEvent } from '../../lib/touch';
-import { HasRootRef } from '../../types';
+import { HasComponent, HasRootRef } from '../../types';
 import { useDOM } from '../../lib/dom';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useEventListener } from '../../hooks/useEventListener';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 
-export interface TouchProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {
+export interface TouchProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
   /**
    * Привязать onEnter и onLeave через pointer-events - работает на disabled-инпутах
    */
@@ -14,7 +14,6 @@ export interface TouchProps extends React.AllHTMLAttributes<HTMLElement>, HasRoo
   useCapture?: boolean;
   slideThreshold?: number;
   noSlideClick?: boolean;
-  Component?: React.ElementType;
   onEnter?: HoverHandler;
   onLeave?: HoverHandler;
   onStart?: TouchEventHandler;
@@ -30,20 +29,20 @@ export interface TouchProps extends React.AllHTMLAttributes<HTMLElement>, HasRoo
 }
 
 export interface Gesture {
-  startX?: number;
-  startY?: number;
-  startT?: Date;
-  duration?: number;
-  isPressed?: boolean;
-  isY?: boolean;
-  isX?: boolean;
-  isSlideX?: boolean;
-  isSlideY?: boolean;
-  isSlide?: boolean;
-  shiftX?: number;
-  shiftY?: number;
-  shiftXAbs?: number;
-  shiftYAbs?: number;
+  startX: number;
+  startY: number;
+  startT: Date;
+  duration: number;
+  isPressed: boolean;
+  isY: boolean;
+  isX: boolean;
+  isSlideX: boolean;
+  isSlideY: boolean;
+  isSlide: boolean;
+  shiftX: number;
+  shiftY: number;
+  shiftXAbs: number;
+  shiftYAbs: number;
 }
 
 export interface TouchEvent extends Gesture {
@@ -80,24 +79,19 @@ export const Touch: React.FC<TouchProps> = ({
   const { document } = useDOM();
   const events = React.useMemo(getSupportedEvents, []);
   const didSlide = React.useRef(false);
-  const gesture = React.useRef<Partial<Gesture>>({});
+  const gesture = React.useRef<Partial<Gesture>>(null);
   const handle = (e: VKUITouchEvent, handers: TouchEventHandler[]) => {
     stopPropagation && e.stopPropagation();
     handers.forEach((cb) => {
       const duration = Date.now() - gesture.current.startT.getTime();
-      cb && cb({ ...gesture.current, duration, originalEvent: e });
+      cb && cb({ ...gesture.current as Gesture, duration, originalEvent: e });
     });
   };
 
   const enterHandler = useEventListener(usePointerHover ? 'pointerenter' : 'mouseenter', onEnter);
   const leaveHandler = useEventListener(usePointerHover ? 'pointerleave' : 'mouseleave', onLeave);
   const startHandler = useEventListener(events[0], (e: VKUITouchEvent) => {
-    gesture.current = {
-      startX: coordX(e),
-      startY: coordY(e),
-      startT: new Date(),
-      isPressed: true,
-    };
+    gesture.current = initGesture(coordX(e), coordY(e));
 
     handle(e, [onStart, onStartX, onStartY]);
     // 1 line, 2 bad specs, 2 workarounds:
@@ -232,3 +226,22 @@ export const Touch: React.FC<TouchProps> = ({
     />
   );
 };
+
+function initGesture(startX: number, startY: number): Gesture {
+  return {
+    startX,
+    startY,
+    startT: new Date(),
+    duration: 0,
+    isPressed: true,
+    isY: false,
+    isX: false,
+    isSlideX: false,
+    isSlideY: false,
+    isSlide: false,
+    shiftX: 0,
+    shiftY: 0,
+    shiftXAbs: 0,
+    shiftYAbs: 0,
+  };
+}

package/src/components/Typography/Caption/Caption.tsx

@@ -1,20 +1,20 @@
 import * as React from 'react';
+import { HasComponent } from '../../../types';
 import { usePlatform } from '../../../hooks/usePlatform';
 import { classNames } from '../../../lib/classNames';
 import { getClassName } from '../../../helpers/getClassName';
 import './Caption.css';
 
-export interface CaptionProps extends React.AllHTMLAttributes<HTMLElement> {
+export interface CaptionProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {
   weight: 'regular' | 'medium' | 'semibold' | 'bold';
   level: '1' | '2' | '3' | '4';
   caps?: boolean;
-  Component?: React.ElementType;
 }
 
 const Caption: React.FC<CaptionProps> = ({
   children,
-  weight,
-  level,
+  weight = 'regular',
+  level = '1',
   caps,
   Component = 'span',
   ...restProps

package/src/components/Typography/Headline/Headline.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
+import { HasComponent } from '../../../types';
 import { usePlatform } from '../../../hooks/usePlatform';
 import { classNames } from '../../../lib/classNames';
 import { getClassName } from '../../../helpers/getClassName';
 import './Headline.css';
 
-export interface HeadlineProps extends React.AllHTMLAttributes<HTMLElement> {
+export interface HeadlineProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {
   weight: 'regular' | 'medium' | 'semibold';
-  Component?: React.ElementType;
 }
 
 const Headline: React.FC<HeadlineProps> = ({
   children,
-  weight,
+  weight = 'regular',
   Component = 'h3',
   ...restProps
 }: HeadlineProps) => {

package/src/components/Typography/Subhead/Subhead.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
+import { HasComponent } from '../../../types';
 import { usePlatform } from '../../../hooks/usePlatform';
 import { classNames } from '../../../lib/classNames';
 import { getClassName } from '../../../helpers/getClassName';
 import './Subhead.css';
 
-export interface SubheadProps extends React.AllHTMLAttributes<HTMLElement> {
+export interface SubheadProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {
   weight: 'regular' | 'medium' | 'semibold' | 'bold';
-  Component?: React.ElementType;
 }
 
 const Subhead: React.FC<SubheadProps> = ({
   children,
-  weight,
+  weight = 'regular',
   Component = 'h4',
   ...restProps
 }: SubheadProps) => {

package/src/components/Typography/Text/Text.tsx

@@ -2,19 +2,18 @@ import * as React from 'react';
 import { usePlatform } from '../../../hooks/usePlatform';
 import { classNames } from '../../../lib/classNames';
 import { getClassName } from '../../../helpers/getClassName';
-import { HasRootRef } from '../../../types';
+import { HasComponent, HasRootRef } from '../../../types';
 import { warnOnce } from '../../../lib/warnOnce';
 import './Text.css';
 
-export interface TextProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement> {
+export interface TextProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
   weight: 'regular' | 'medium' | 'semibold';
-  Component?: React.ElementType;
 }
 
 const warn = warnOnce('Text');
 const Text: React.FC<TextProps> = ({
   children,
-  weight,
+  weight = 'regular',
   Component = 'span',
   getRootRef,
   ...restProps

package/src/components/Typography/Title/Title.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { HasComponent } from '../../../types';
 import { usePlatform } from '../../../hooks/usePlatform';
 import { classNames } from '../../../lib/classNames';
 import { getClassName } from '../../../helpers/getClassName';
@@ -6,21 +7,24 @@ import { ANDROID } from '../../../lib/platform';
 import Headline, { HeadlineProps } from '../Headline/Headline';
 import './Title.css';
 
-export interface TitleProps extends React.AllHTMLAttributes<HTMLElement> {
+export interface TitleProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {
   weight: 'heavy' | 'bold' | 'semibold' | 'medium' | 'regular';
   level: '1' | '2' | '3';
-  Component?: React.ElementType;
 }
 
 const Title: React.FC<TitleProps> = ({
   children,
-  weight,
-  level,
-  Component = ('h' + level) as React.ElementType,
+  weight = 'regular',
+  level = '1',
+  Component,
   ...restProps
 }: TitleProps) => {
   const platform = usePlatform();
 
+  if (!Component) {
+    Component = ('h' + level) as React.ElementType;
+  }
+
   if (platform === ANDROID && level === '3') {
     const headlineWeight: HeadlineProps['weight'] = weight === 'regular' ? weight : 'medium';
 

package/src/components/View/Readme.md

@@ -46,66 +46,52 @@ const [activePanel, setActivePanel] = useState('panel1');
 В iOS есть возможность свайпнуть от левого края назад, чтобы перейти на предыдущую панель. Для того, чтобы
 повторить такое поведение в VKUI нужно:
 
-- Передать во `View` свойство `onSwipeBack`. Это callback, срабатывающий при завершении анимации свайпа.
-Как правило в нём прописывают логику, которая выставит нужный `activePanel` и обновит свойство `history`.
-- Передать во `View` свойство `history`. Это массив, состоящий из id панелей, которые были открыты на текущий момент.
-Например, если пользователь из `main` перешел в `profile`, а оттуда попал в `education`, то
-`history=['main', 'profile', 'education']`.
-- Убедиться, что приложение открыто внутри webview (так как внутри обычного мобильного браузера
-как правило есть свой swipe back). Для этого достаточно обернуть ваше приложение компонентом `ConfigProvider`.
-Он внутри себя определяет, открыто приложение внутри webview или в мобильном браузере. Для тестов в браузере
-можно явно передать в `СonfigProvider` свойство `isWebView={true}`.
-- При попадании на первую панель слать `vk-bridge` событие `VKWebAppEnableSwipeBack`. При уходе с первой панели –
-слать `VKWebAppDisableSwipeBack`. Таким образом VKUI свайп не будет конфликтовать со свайпом нативного клиента.
+- Передать во `View` коллбек `onSwipeBack` — он сработает при завершении анимации свайпа. Поменяйте в нем `activePanel` и обновите `history`.
+- Передать во `View` проп `history` — массив из id панелей в порядке открытия. Например, если пользователь из `main` перешел в `profile`, а оттуда попал в `education`, то `history=['main', 'profile', 'education']`.
+- Обернуть ваше приложение в `ConfigProvider` — он определит, открыто приложение в webview клиента VK или в браузере (там есть свой swipe back, который будет конфликтовать с нашим). Для проверки в браузере форсируйте определение webview: `<СonfigProvider isWebView>`.
+- На первой панели должен включаться свайпбек нативного клиента, чтобы пользователь смог выйти из приложения — для этого используют `vk-bridge`. __Если вы не из ВК,__ при переходах отправляйте [событие `VKWebAppSetSwipeSettings`](https://vk.com/dev.php?method=vk_bridge_events_10&f=Включение%20swipe%20как%20в%20браузере) с `history: true` на первой панели или `history: false` на других. __Если вы из ВК,__ при переходе на первую панель отправляйте событие `VKWebAppEnableSwipeBack`, на любую другую — `VKWebAppDisableSwipeBack`.
+- Компоненты, которые сами обрабатывают жесты (например, карта), могут конфликтовать со свайпбеком — повесьте на них свойство `data-vkui-swipe-back={false}`
 
-Пример:
-
-```jsx static
-import React from 'react';
-import { View, Panel, ConfigProvider } from '@vkontakte/vkui';
+```jsx
 import vkBridge from '@vkontakte/vk-bridge';
 
-class App extends React.Component {
-
-  state = {
-    activePanel: 'main',
-    history: ['main']
-  }
-
-  goBack = () => {
-    const history = [...this.state.history];
-    history.pop();
-    const activePanel = history[history.length - 1];
-    if (activePanel === 'main') {
-      vkBridge.send('VKWebAppEnableSwipeBack');
-    }
-    this.setState({ history, activePanel });
-  }
+const [history, setHistory] = useState(['main']);
+const activePanel = history[history.length - 1];
+const isFirst = history.length === 1;
 
-  goForward = (activePanel) => {
-    const history = [...this.state.history];
-    history.push(activePanel);
-    if (this.state.activePanel === 'main') {
-      vkBridge.send('VKWebAppDisableSwipeBack');
-    }
-    this.setState({ history, activePanel });
-  }
+React.useEffect(() => {
+  // Если вы из ВК, делайте так
+  vkBridge.send(isFirst
+    ? 'VKWebAppEnableSwipeBack'
+    : 'VKWebAppDisableSwipeBack');
+  // Если вы не из ВК, то так:
+  vkBridge.send('VKWebAppSetSwipeSettings', { history: isFirst });
+}, [isFirst]);
 
-  render () {
-    return (
-      <ConfigProvider isWebView={true}>
-        <View
-          onSwipeBack={this.goBack}
-          history={this.state.history}
-          activePanel={this.state.activePanel}
-        >
-          <Panel id="main"/>
-          <Panel id="profile"/>
-          <Panel id="education"/>
-        </View>
-      </ConfigProvider>
-    )
-  }
-}
+const goBack = () => setHistory(history.slice(0, -1));
+const go = (panel) => setHistory([...history, panel]);
 
+<ConfigProvider platform={IOS} isWebView>
+  <View
+    onSwipeBack={goBack}
+    history={history}
+    activePanel={activePanel}
+  >
+    <Panel id="main">
+      <PanelHeader>Main</PanelHeader>
+      <Group>
+        <CellButton onClick={() => go('profile')}>profile</CellButton>
+      </Group>
+    </Panel>
+    <Panel id="profile">
+      <PanelHeader>Профиль</PanelHeader>
+      <Group>
+        <Placeholder>Теперь свайпните от левого края направо, чтобы вернуться</Placeholder>
+        <Div style={{ height: 50, background: '#eee' }} data-vkui-swipe-back={false}>
+          Здесь свайпбек отключен
+        </Div>
+      </Group>
+    </Panel>
+  </View>
+</ConfigProvider>
 ```