@vkontakte/vkui 4.22.0 → 4.24.0

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 0.07s var(--ios-easing);
+}
+
+.TabbarItem--ios .TabbarItem__tappable--active + .TabbarItem__in {
+  transform: scale(0.96);
+}

package/src/components/TabbarItem/TabbarItem.tsx

@@ -1,12 +1,18 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import Counter from '../Counter/Counter';
-import { classNames } from '../../lib/classNames';
-import { usePlatform } from '../../hooks/usePlatform';
-import { hasReactNode } from '../../lib/utils';
-import './TabbarItem.css';
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+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,25 +28,53 @@ 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';
 
+  // @ts-ignore ругается на то, что у AllHTMLAttributes type это строка, а button не любую строку считает валидным значением
   return (
     <Component
       {...restProps}
-      vkuiClass={classNames(getClassName('TabbarItem', platform), {
-        'TabbarItem--selected': selected,
-        'TabbarItem--text': !!text,
+      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>}
+            {!indicator && label && (
+              <Counter size="s" mode="prominent">
+                {label}
+              </Counter>
+            )}
           </div>
         </div>
         {text && <div vkuiClass="TabbarItem__text">{text}</div>}

package/src/components/Tabs/Readme.md

@@ -1,214 +1,274 @@
 ```jsx
-  class Example extends React.Component {
+class Example extends React.Component {
+  constructor(props) {
+    super(props);
 
-    constructor (props) {
-      super(props);
+    this.state = {
+      activePanel: "panel1",
+      contextOpened: false,
+      mode: "all",
+      activeTab1: "recomendations",
+      activeTab2: "music",
+      activeTab3: "news",
+      activeTab4: "all",
+      activeTab5: "all",
+    };
 
-      this.state = {
-        activePanel: 'panel1',
-        contextOpened: false,
-        mode: 'all',
-        activeTab1: 'recomendations',
-        activeTab2: 'music',
-        activeTab3: 'news',
-        activeTab4: 'all',
-        activeTab5: 'all',
-      };
-
-      this.select = this.select.bind(this);
-    }
+    this.select = this.select.bind(this);
+  }
 
-    select(e) {
-      const mode = e.currentTarget.dataset.mode;
-      this.setState({ mode, contextOpened: false });
-    }
+  select(e) {
+    const mode = e.currentTarget.dataset.mode;
+    this.setState({ mode, contextOpened: false });
+  }
 
-    render () {
-      return (
-        <View activePanel={this.state.activePanel}>
-          <Panel id="panel1">
-            <PanelHeader
-              left={<PanelHeaderButton><Icon28CameraOutline /></PanelHeaderButton>}
-              right={<PanelHeaderButton><Icon28AddOutline /></PanelHeaderButton>}
-              separator={this.props.sizeX === SizeType.REGULAR}
+  render() {
+    return (
+      <View activePanel={this.state.activePanel}>
+        <Panel id="panel1">
+          <PanelHeader
+            left={
+              <PanelHeaderButton>
+                <Icon28CameraOutline />
+              </PanelHeaderButton>
+            }
+            right={
+              <PanelHeaderButton>
+                <Icon28AddOutline />
+              </PanelHeaderButton>
+            }
+            separator={this.props.sizeX === SizeType.REGULAR}
+          >
+            <Tabs>
+              <TabsItem
+                onClick={() => {
+                  if (this.state.activeTab1 === "news") {
+                    this.setState({ contextOpened: !this.state.contextOpened });
+                  }
+                  this.setState({ activeTab1: "news" });
+                }}
+                selected={this.state.activeTab1 === "news"}
+                after={
+                  <Icon16Dropdown
+                    style={{
+                      transform: `rotate(${
+                        this.state.contextOpened ? "180deg" : "0"
+                      }) translateY(1px)`,
+                    }}
+                  />
+                }
+              >
+                Новости
+              </TabsItem>
+              <TabsItem
+                onClick={() => {
+                  this.setState({
+                    activeTab1: "recomendations",
+                    contextOpened: false,
+                  });
+                }}
+                selected={this.state.activeTab1 === "recomendations"}
+              >
+                Интересное
+              </TabsItem>
+            </Tabs>
+          </PanelHeader>
+          <PanelHeaderContext
+            opened={this.state.contextOpened}
+            onClose={() => {
+              this.setState({ contextOpened: false });
+            }}
+          >
+            <List>
+              <Cell
+                before={<Icon28UsersOutline />}
+                after={
+                  this.state.mode === "all" ? (
+                    <Icon24Done fill="var(--accent)" />
+                  ) : null
+                }
+                onClick={this.select}
+                data-mode="all"
+              >
+                Communities
+              </Cell>
+              <Cell
+                before={<Icon28SettingsOutline />}
+                after={
+                  this.state.mode === "managed" ? (
+                    <Icon24Done fill="var(--accent)" />
+                  ) : null
+                }
+                onClick={this.select}
+                data-mode="managed"
+              >
+                Managed Communities
+              </Cell>
+            </List>
+          </PanelHeaderContext>
+          <Group>
+            <CellButton
+              onClick={() => this.setState({ activePanel: "panel2" })}
             >
-              <Tabs>
-                <TabsItem
-                  onClick={() => {
-                    if (this.state.activeTab1 === 'news') {
-                      this.setState({ contextOpened: !this.state.contextOpened });
-                    }
-                    this.setState({ activeTab1: 'news' })
-                  }}
-                  selected={this.state.activeTab1 === 'news'}
-                  after={<Icon16Dropdown style={{
-                    transform: `rotate(${this.state.contextOpened ? '180deg' : '0'}) translateY(1px)`
-                  }}/>}
-                >
-                  Новости
-                </TabsItem>
-                <TabsItem
-                  onClick={() => {
-                    this.setState({ activeTab1: 'recomendations', contextOpened: false })
-                  }}
-                  selected={this.state.activeTab1 === 'recomendations'}
-                >
-                  Интересное
-                </TabsItem>
-              </Tabs>
-            </PanelHeader>
-            <PanelHeaderContext
-              opened={this.state.contextOpened}
-              onClose={() => { this.setState({ contextOpened: false }) }}
+              Под шапкой
+            </CellButton>
+          </Group>
+        </Panel>
+        <Panel id="panel2">
+          <PanelHeader
+            left={
+              <PanelHeaderBack
+                onClick={() => this.setState({ activePanel: "panel1" })}
+              />
+            }
+            separator={this.props.sizeX === SizeType.REGULAR}
+          >
+            Музыка
+          </PanelHeader>
+          <Group>
+            <Tabs>
+              <TabsItem
+                onClick={() => this.setState({ activeTab2: "music" })}
+                selected={this.state.activeTab2 === "music"}
+              >
+                Моя музыка
+              </TabsItem>
+              <TabsItem
+                onClick={() => this.setState({ activeTab2: "recomendations" })}
+                selected={this.state.activeTab2 === "recomendations"}
+              >
+                Рекомендации
+              </TabsItem>
+            </Tabs>
+            <CellButton
+              onClick={() => this.setState({ activePanel: "panel3" })}
             >
-              <List>
-                <Cell
-                  before={<Icon28UsersOutline />}
-                  after={this.state.mode === 'all' ? <Icon24Done fill="var(--accent)" /> : null}
-                  onClick={this.select}
-                  data-mode="all"
-                >
-                  Communities
-                </Cell>
-                <Cell
-                  before={<Icon28SettingsOutline />}
-                  after={this.state.mode === 'managed' ? <Icon24Done fill="var(--accent)" /> : null}
-                  onClick={this.select}
-                  data-mode="managed"
-                >
-                  Managed Communities
-                </Cell>
-              </List>
-            </PanelHeaderContext>
-            <Group>
-              <CellButton onClick={() => this.setState({ activePanel: 'panel2' })}>Под шапкой</CellButton>
-            </Group>
-          </Panel>
-          <Panel id="panel2">
-            <PanelHeader
-              left={<PanelHeaderBack onClick={() => this.setState({ activePanel: 'panel1' })}/>}
-              separator={this.props.sizeX === SizeType.REGULAR}
-            >
-              Музыка
-            </PanelHeader>
-            <Group>
-              <Tabs>
+              Со скроллом
+            </CellButton>
+          </Group>
+        </Panel>
+        <Panel id="panel3">
+          <PanelHeader
+            left={
+              <PanelHeaderBack
+                onClick={() => this.setState({ activePanel: "panel2" })}
+              />
+            }
+            separator={this.props.sizeX === SizeType.REGULAR}
+          >
+            Новости
+          </PanelHeader>
+          <Group>
+            <Tabs>
+              <HorizontalScroll>
                 <TabsItem
-                  onClick={() => this.setState({ activeTab2: 'music' })}
-                  selected={this.state.activeTab2 === 'music'}
+                  onClick={() => this.setState({ activeTab3: "news" })}
+                  selected={this.state.activeTab3 === "news"}
                 >
-                  Моя музыка
+                  Лента
                 </TabsItem>
                 <TabsItem
-                  onClick={() => this.setState({ activeTab2: 'recomendations' })}
-                  selected={this.state.activeTab2 === 'recomendations'}
+                  onClick={() =>
+                    this.setState({ activeTab3: "recomendations" })
+                  }
+                  selected={this.state.activeTab3 === "recomendations"}
                 >
                   Рекомендации
                 </TabsItem>
-              </Tabs>
-              <CellButton onClick={() => this.setState({ activePanel: 'panel3' })}>Со скроллом</CellButton>
-            </Group>
-          </Panel>
-          <Panel id="panel3">
-            <PanelHeader
-              left={<PanelHeaderBack onClick={() => this.setState({ activePanel: 'panel2' })}/>}
-              separator={this.props.sizeX === SizeType.REGULAR}
-            >
-              Новости
-            </PanelHeader>
-            <Group>
-              <Tabs>
-                <HorizontalScroll>
-                  <TabsItem
-                    onClick={() => this.setState({ activeTab3: 'news' })}
-                    selected={this.state.activeTab3 === 'news'}
-                  >
-                    Лента
-                  </TabsItem>
-                  <TabsItem
-                    onClick={() => this.setState({ activeTab3: 'recomendations' })}
-                    selected={this.state.activeTab3 === 'recomendations'}
-                  >
-                    Рекомендации
-                  </TabsItem>
-                  <TabsItem
-                    onClick={() => this.setState({ activeTab3: 'friends' })}
-                    selected={this.state.activeTab3 === 'friends'}
-                  >
-                    Друзья
-                  </TabsItem>
-                  <TabsItem
-                    onClick={() => this.setState({ activeTab3: 'photos' })}
-                    selected={this.state.activeTab3 === 'photos'}
-                  >
-                    Фотографии
-                  </TabsItem>
-                  <TabsItem
-                    onClick={() => this.setState({ activeTab3: 'groups' })}
-                    selected={this.state.activeTab3 === 'groups'}
-                  >
-                    Сообщества
-                  </TabsItem>
-                </HorizontalScroll>
-              </Tabs>
-              <CellButton onClick={() => this.setState({ activePanel: 'panel4' })}>Табы-кнопки</CellButton>
-            </Group>
-          </Panel>
-          <Panel id="panel4">
-            <PanelHeader
-              left={<PanelHeaderBack onClick={() => this.setState({ activePanel: 'panel2' })}/>}
-            >
-              Кнопки
-            </PanelHeader>
-            <Group>
-              <Tabs mode="buttons">
-                <TabsItem
-                  onClick={() => this.setState({ activeTab4: 'all' })}
-                  selected={this.state.activeTab4 === 'all'}
-                >
-                  Все записи
-                </TabsItem>
                 <TabsItem
-                  onClick={() => this.setState({ activeTab4: 'user' })}
-                  selected={this.state.activeTab4 === 'user'}
+                  onClick={() => this.setState({ activeTab3: "friends" })}
+                  selected={this.state.activeTab3 === "friends"}
                 >
-                  Записи Павла
+                  Друзья
                 </TabsItem>
-              </Tabs>
-              <CellButton onClick={() => this.setState({ activePanel: 'panel5' })}>Segmented (iOS only)</CellButton>
-            </Group>
-          </Panel>
-          <Panel id="panel5">
-            <PanelHeader
-              left={<PanelHeaderBack onClick={() => this.setState({ activePanel: 'panel4' })}/>}
-              separator={this.props.sizeX === SizeType.REGULAR}
-            >
-              Лента
-            </PanelHeader>
-            <Group>
-              <Tabs mode="segmented">
                 <TabsItem
-                  onClick={() => this.setState({ activeTab5: 'all' })}
-                  selected={this.state.activeTab5 === 'all'}
+                  onClick={() => this.setState({ activeTab3: "photos" })}
+                  selected={this.state.activeTab3 === "photos"}
                 >
-                  Все записи
+                  Фотографии
                 </TabsItem>
                 <TabsItem
-                  onClick={() => this.setState({ activeTab5: 'user' })}
-                  selected={this.state.activeTab5 === 'user'}
-                  after={<Counter>3</Counter>}
+                  onClick={() => this.setState({ activeTab3: "groups" })}
+                  selected={this.state.activeTab3 === "groups"}
                 >
-                  Записи Павла
+                  Сообщества
                 </TabsItem>
-              </Tabs>
-            </Group>
-          </Panel>
-        </View>
-      )
-    }
+              </HorizontalScroll>
+            </Tabs>
+            <CellButton
+              onClick={() => this.setState({ activePanel: "panel4" })}
+            >
+              Табы-кнопки
+            </CellButton>
+          </Group>
+        </Panel>
+        <Panel id="panel4">
+          <PanelHeader
+            left={
+              <PanelHeaderBack
+                onClick={() => this.setState({ activePanel: "panel2" })}
+              />
+            }
+          >
+            Кнопки
+          </PanelHeader>
+          <Group>
+            <Tabs mode="buttons">
+              <TabsItem
+                onClick={() => this.setState({ activeTab4: "all" })}
+                selected={this.state.activeTab4 === "all"}
+              >
+                Все записи
+              </TabsItem>
+              <TabsItem
+                onClick={() => this.setState({ activeTab4: "user" })}
+                selected={this.state.activeTab4 === "user"}
+              >
+                Записи Павла
+              </TabsItem>
+            </Tabs>
+            <CellButton
+              onClick={() => this.setState({ activePanel: "panel5" })}
+            >
+              Segmented (iOS only)
+            </CellButton>
+          </Group>
+        </Panel>
+        <Panel id="panel5">
+          <PanelHeader
+            left={
+              <PanelHeaderBack
+                onClick={() => this.setState({ activePanel: "panel4" })}
+              />
+            }
+            separator={this.props.sizeX === SizeType.REGULAR}
+          >
+            Лента
+          </PanelHeader>
+          <Group>
+            <Tabs mode="segmented">
+              <TabsItem
+                onClick={() => this.setState({ activeTab5: "all" })}
+                selected={this.state.activeTab5 === "all"}
+              >
+                Все записи
+              </TabsItem>
+              <TabsItem
+                onClick={() => this.setState({ activeTab5: "user" })}
+                selected={this.state.activeTab5 === "user"}
+                after={<Counter>3</Counter>}
+              >
+                Записи Павла
+              </TabsItem>
+            </Tabs>
+          </Group>
+        </Panel>
+      </View>
+    );
   }
-  
-  const AdaptivityExample = withAdaptivity(Example, { sizeX: true });
+}
+
+const AdaptivityExample = withAdaptivity(Example, { sizeX: true });
 
-  <AdaptivityExample />
+<AdaptivityExample />;
 ```