@vkontakte/vkui 4.22.0 → 4.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.22.0",
+  "version": "4.22.1",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/CardScroll/CardScroll.tsx

@@ -46,7 +46,10 @@ const CardScroll: React.FC<CardScrollProps> = ({ children, size, sizeX, ...restP
 
   function getScrollToRight(offset: number): number {
     const containerWidth = refContainer.current.offsetWidth;
-    const slide = Array.from(refContainer.current.children).find((el: HTMLElement) => el.offsetLeft + el.offsetWidth - offset > containerWidth) as HTMLElement;
+    const slide = Array.prototype.find.call(
+      refContainer.current.children,
+      (el: HTMLElement) => el.offsetLeft + el.offsetWidth - offset > containerWidth,
+    ) as HTMLElement;
 
     if (!slide) {
       return offset;

package/src/components/Cell/useDraggable.tsx

@@ -28,7 +28,7 @@ export const useDraggable = ({ onDragFinish }: Pick<CellProps, 'onDragFinish'>)
 
     setDragging(true);
 
-    const _siblings: HTMLElement[] = Array.from(rootEl.parentElement.childNodes);
+    const _siblings: HTMLElement[] = [...rootEl.parentElement.childNodes];
     const idx = _siblings.indexOf(rootEl);
 
     setDragStartIndex(idx);

package/src/components/Epic/Readme.md

@@ -135,6 +135,7 @@ const Example = withAdaptivity(({ viewWidth }) => {
               onClick={onStoryChange}
               selected={activeStory === 'profile'}
               data-story="profile"
+              indicator={<Badge mode="prominent" />}
               text="Профиль"
             ><Icon28UserCircleOutline /></TabbarItem>
           </Tabbar>

package/src/components/FocusTrap/FocusTrap.tsx

@@ -54,14 +54,17 @@ export const FocusTrap: React.FC<FocusTrapProps> = ({
     }
 
     const nodes: HTMLElement[] = [];
-    // eslint-disable-next-line no-restricted-properties
-    ref.current?.querySelectorAll(FOCUSABLE_ELEMENTS).forEach((focusableEl) => {
-      const { display, visibility } = window.getComputedStyle(focusableEl);
-
-      if (display !== 'none' && visibility !== 'hidden') {
-        nodes.push(focusableEl as HTMLElement);
-      }
-    });
+    Array.prototype.forEach.call(
+      // eslint-disable-next-line no-restricted-properties
+      ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),
+      (focusableEl: Element) => {
+        const { display, visibility } = window.getComputedStyle(focusableEl);
+
+        if (display !== 'none' && visibility !== 'hidden') {
+          nodes.push(focusableEl as HTMLElement);
+        }
+      },
+    );
 
     if (nodes?.length) {
       setFocusableNodes(nodes);

package/src/components/Tabbar/Tabbar.css

@@ -5,14 +5,21 @@
   left: 0;
   width: 100%;
   height: var(--tabbar_height);
-  display: flex;
-  align-items: stretch;
-  justify-content: center;
+  padding-bottom: var(--safe-area-inset-bottom);
   box-sizing: content-box;
   background: var(--header_alternate_background);
-  padding-bottom: var(--safe-area-inset-bottom);
 }
 
+.Tabbar__in {
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+}
+
+/**
+ * iOS
+ */
+
 .Tabbar--ios.Tabbar--shadow::before {
   position: absolute;
   bottom: 100%;
@@ -36,6 +43,10 @@
   }
 }
 
+/**
+ * Android & VKCOM
+ */
+
 .Tabbar--android.Tabbar--shadow,
 .Tabbar--vkcom.Tabbar--shadow {
   box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, .06), 0 0 2px 0 rgba(0, 0, 0, .08);

package/src/components/Tabbar/Tabbar.tsx

@@ -33,7 +33,9 @@ const Tabbar: React.FunctionComponent<TabbarProps> = (props: TabbarProps) => {
       })}
       {...restProps}
     >
-      {children}
+      <div vkuiClass="Tabbar__in">
+        {children}
+      </div>
     </div>
   );
 };

package/src/components/TabbarItem/Readme.md

@@ -1 +1,73 @@
 Элемент [Tabbar](#!/Tabbar). В качестве `children` рекомендуется использовать [иконку](https://vkcom.github.io/icons) 28 размера.
+
+```jsx { "props": { "layout": false, "iframe": false } }
+const [simple, setSimple] = useState('one');
+const [text, setText] = useState('one');
+const [horizontalText, setHorizontalText] = useState('one');
+const [indicator, setIndicator] = useState('one');
+
+<div style={{background: 'var(--background_page)', padding: '10px 0'}}>
+  <div style={{maxWidth: 768, margin: 'auto'}}>
+    <Tabbar style={{position: 'static', margin: '0 0 10px'}}>
+      <TabbarItem selected={simple === 'one'} onClick={() => setSimple('one')}><Icon28NewsfeedOutline/></TabbarItem>
+      <TabbarItem selected={simple === 'two'} onClick={() => setSimple('two')}><Icon28UserCircleOutline/></TabbarItem>
+    </Tabbar>
+
+    <Tabbar style={{position: 'static', margin: '10px 0'}}>
+      <TabbarItem selected={text === 'one'} onClick={() => setText('one')} text="Новости"><Icon28NewsfeedOutline/></TabbarItem>
+      <TabbarItem selected={text === 'two'} onClick={() => setText('two')} text="Профиль"><Icon28UserCircleOutline/></TabbarItem>
+      <TabbarItem selected={text === 'three'} onClick={() => setText('three')} text="Мессенджер"><Icon28MessageOutline/></TabbarItem>
+    </Tabbar>
+
+    <Tabbar itemsLayout="horizontal" style={{position: 'static', margin: '10px 0'}}>
+      <TabbarItem
+        selected={horizontalText === 'one'}
+        onClick={() => setHorizontalText('one')}
+        text="Новости"
+      >
+        <Icon28NewsfeedOutline/>
+      </TabbarItem>
+      <TabbarItem
+        selected={horizontalText === 'two'}
+        onClick={() => setHorizontalText('two')}
+        text="Профиль"
+      >
+        <Icon28UserCircleOutline/>
+      </TabbarItem>
+      <TabbarItem
+        selected={horizontalText === 'three'}
+        onClick={() => setHorizontalText('three')}
+        text="Мессенджер"
+      >
+        <Icon28MessageOutline/>
+      </TabbarItem>
+    </Tabbar>
+
+    <Tabbar style={{position: 'static', margin: '10px 0 0'}}>
+      <TabbarItem
+        selected={indicator === 'one'}
+        onClick={() => setIndicator('one')}
+        indicator={<Badge mode="prominent" />}
+        text="Новости"
+      >
+        <Icon28NewsfeedOutline />
+      </TabbarItem>
+      <TabbarItem
+        selected={indicator === 'two'}
+        onClick={() => setIndicator('two')}
+        text="Профиль"
+      >
+        <Icon28UserCircleOutline />
+      </TabbarItem>
+      <TabbarItem
+        selected={indicator === 'three'}
+        onClick={() => setIndicator('three')}
+        text="Мессенджер"
+        indicator={<Counter size="s" mode="prominent">3</Counter>}
+      >
+        <Icon28MessageOutline />
+      </TabbarItem>
+    </Tabbar>
+  </div>
+</div>
+```

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;