@vkontakte/vkui 4.20.0 → 4.22.1

package/src/components/SubnavigationBar/Readme.md

@@ -1,7 +1,7 @@
 В режиме `fixed` может потребоваться уменьшить размер шрифта у `SubnavigationButton`, чтобы текст показывался полностью.
 За это отвечает свойство `textLevel` у `SubnavigationButton`.
 
-```jsx
+```jsx { "props": { "layout": false, "adaptivity": true } }
 import { useState } from 'react';
 
 const MODAL_NAME = 'filters';
@@ -122,91 +122,95 @@ const SubnavigationBarExample = () => {
   );
 
   return (
-    <View activePanel={activePanel} modal={modal}>
-      <Panel id="example">
-        <PanelHeader>SubnavigationBar</PanelHeader>
-        <Group>
-          <SubnavigationBar>
-            <SubnavigationButton
-              before={<Icon24Filter/>}
-              selected={filtersCount > 0}
-              expandable
-              after={filtersCount > 0 && <Counter mode="primary" size="s">{filtersCount}</Counter>}
-              onClick={openModal}
-            >
-              Фильтры
-            </SubnavigationButton>
-
-            <SubnavigationButton
-              selected={sizeSelected}
-              onClick={() => setSizeSelected(!sizeSelected)}
-            >
-              Мой размер
-            </SubnavigationButton>
-
-            <SubnavigationButton
-              selected={inStockSelected}
-              onClick={() => setInStockSelected(!inStockSelected)}
-            >
-              В наличии
-            </SubnavigationButton>
-
-            <SubnavigationButton
-              selected={highRatingSelected}
-              onClick={() => setHighRatingSelected(!highRatingSelected)}
-            >
-              Высокий рейтинг
-            </SubnavigationButton>
-
-            <SubnavigationButton
-              before={<Icon24FavoriteOutline/>}
-              selected={faveSelected}
-              onClick={() => setFaveSelected(!faveSelected)}
-            >
-              Избранное
-            </SubnavigationButton>
-          </SubnavigationBar>
-        </Group>
-
-        <Group>
-          <SubnavigationBar mode="fixed">
-            <SubnavigationButton
-              before={<Icon24ScanViewfinderOutline />}
-              size="l"
-              textLevel={viewWidth <= ViewWidth.MOBILE ? 3 : 1}
-              onClick={() => setActivePanel('add_friend')}
-            >
-              Сканировать QR
-            </SubnavigationButton>
-
-            <SubnavigationButton
-              before={<Icon24UserAddOutline />}
-              size="l"
-              textLevel={viewWidth <= ViewWidth.MOBILE ? 3 : 1}
-              onClick={() => setActivePanel('add_friend')}
-            >
-              Добавить друга
-            </SubnavigationButton>
-          </SubnavigationBar>
-
-          <Header>Важные</Header>
-          <SimpleCell before={<Avatar src={getAvatarUrl('user_wayshev')} />}>Иван Барышев</SimpleCell>
-          <SimpleCell before={<Avatar src={getAvatarUrl('user_lihachyov')} />}>Михаил Лихачёв</SimpleCell>
-          <SimpleCell before={<Avatar src={getAvatarUrl('user_arthurstam')} />}>Artur Stambultsian</SimpleCell>
-        </Group>
-      </Panel>
-      <Panel id="add_friend">
-        <PanelHeader
-          left={<PanelHeaderBack onClick={() => setActivePanel('example')} />}
-        >Добавить друга</PanelHeader>
-
-        <Group>
-          <SimpleCell before={<Avatar src={getAvatarUrl('user_wayshev')} />}>Иван Барышев</SimpleCell>
-          <SimpleCell before={<Avatar src={getAvatarUrl('user_lihachyov')} />}>Михаил Лихачёв</SimpleCell>
-          <SimpleCell before={<Avatar src={getAvatarUrl('user_arthurstam')} />}>Artur Stambultsian</SimpleCell>
-        </Group>
-      </Panel>
-    </View>
+    <SplitLayout modal={modal}>
+      <SplitCol>
+      <View activePanel={activePanel}>
+        <Panel id="example">
+          <PanelHeader>SubnavigationBar</PanelHeader>
+          <Group>
+            <SubnavigationBar>
+              <SubnavigationButton
+                before={<Icon24Filter/>}
+                selected={filtersCount > 0}
+                expandable
+                after={filtersCount > 0 && <Counter mode="primary" size="s">{filtersCount}</Counter>}
+                onClick={openModal}
+              >
+                Фильтры
+              </SubnavigationButton>
+
+              <SubnavigationButton
+                selected={sizeSelected}
+                onClick={() => setSizeSelected(!sizeSelected)}
+              >
+                Мой размер
+              </SubnavigationButton>
+
+              <SubnavigationButton
+                selected={inStockSelected}
+                onClick={() => setInStockSelected(!inStockSelected)}
+              >
+                В наличии
+              </SubnavigationButton>
+
+              <SubnavigationButton
+                selected={highRatingSelected}
+                onClick={() => setHighRatingSelected(!highRatingSelected)}
+              >
+                Высокий рейтинг
+              </SubnavigationButton>
+
+              <SubnavigationButton
+                before={<Icon24FavoriteOutline/>}
+                selected={faveSelected}
+                onClick={() => setFaveSelected(!faveSelected)}
+              >
+                Избранное
+              </SubnavigationButton>
+            </SubnavigationBar>
+          </Group>
+
+          <Group>
+            <SubnavigationBar mode="fixed">
+              <SubnavigationButton
+                before={<Icon24ScanViewfinderOutline />}
+                size="l"
+                textLevel={viewWidth <= ViewWidth.MOBILE ? 3 : 1}
+                onClick={() => setActivePanel('add_friend')}
+              >
+                Сканировать QR
+              </SubnavigationButton>
+
+              <SubnavigationButton
+                before={<Icon24UserAddOutline />}
+                size="l"
+                textLevel={viewWidth <= ViewWidth.MOBILE ? 3 : 1}
+                onClick={() => setActivePanel('add_friend')}
+              >
+                Добавить друга
+              </SubnavigationButton>
+            </SubnavigationBar>
+
+            <Header>Важные</Header>
+            <SimpleCell before={<Avatar src={getAvatarUrl('user_wayshev')} />}>Иван Барышев</SimpleCell>
+            <SimpleCell before={<Avatar src={getAvatarUrl('user_lihachyov')} />}>Михаил Лихачёв</SimpleCell>
+            <SimpleCell before={<Avatar src={getAvatarUrl('user_arthurstam')} />}>Artur Stambultsian</SimpleCell>
+          </Group>
+        </Panel>
+        <Panel id="add_friend">
+          <PanelHeader
+            left={<PanelHeaderBack onClick={() => setActivePanel('example')} />}
+          >Добавить друга</PanelHeader>
+
+          <Group>
+            <SimpleCell before={<Avatar src={getAvatarUrl('user_wayshev')} />}>Иван Барышев</SimpleCell>
+            <SimpleCell before={<Avatar src={getAvatarUrl('user_lihachyov')} />}>Михаил Лихачёв</SimpleCell>
+            <SimpleCell before={<Avatar src={getAvatarUrl('user_arthurstam')} />}>Artur Stambultsian</SimpleCell>
+          </Group>
+        </Panel>
+      </View>
+      </SplitCol>
+    </SplitLayout>
   );
 };
 

package/src/components/SubnavigationBar/SubnavigationBar.tsx

@@ -2,29 +2,51 @@ import * as React from 'react';
 import { usePlatform } from '../../hooks/usePlatform';
 import { classNames } from '../../lib/classNames';
 import { getClassName } from '../../helpers/getClassName';
-import HorizontalScroll from '../HorizontalScroll/HorizontalScroll';
+import HorizontalScroll, { HorizontalScrollProps, ScrollPositionHandler } from '../HorizontalScroll/HorizontalScroll';
 import './SubnavigationBar.css';
 
-export interface SubnavigationBarProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface SubnavigationBarProps extends
+  React.HTMLAttributes<HTMLDivElement>,
+  Pick<HorizontalScrollProps, 'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'> {
   mode?: 'fixed' | 'overflow';
 }
 
-export const SubnavigationBar: React.FC<SubnavigationBarProps> = (props: SubnavigationBarProps) => {
+const defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;
+
+const defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;
+
+export const SubnavigationBar: React.FC<SubnavigationBarProps> = ({
+  mode = 'overflow',
+  children,
+  showArrows = true,
+  getScrollToLeft = defaultScrollToLeft,
+  getScrollToRight = defaultScrollToRight,
+  scrollAnimationDuration,
+  ...restProps
+}: SubnavigationBarProps) => {
   const platform = usePlatform();
-  const {
-    mode,
-    children,
-    ...restProps
-  } = props;
 
-  const ScrollWrapper = mode === 'fixed' ? 'div' : HorizontalScroll;
+  let ScrollWrapper: React.ElementType;
+  let scrollWrapperProps = {};
+
+  if (mode === 'fixed') {
+    ScrollWrapper = 'div';
+  } else {
+    ScrollWrapper = HorizontalScroll;
+    scrollWrapperProps = {
+      showArrows,
+      getScrollToLeft,
+      getScrollToRight,
+      scrollAnimationDuration,
+    };
+  }
 
   return (
     <div
       {...restProps}
       vkuiClass={classNames(getClassName('SubnavigationBar', platform), `SubnavigationBar--${mode}`)}
     >
-      <ScrollWrapper vkuiClass="SubnavigationBar__in">
+      <ScrollWrapper vkuiClass="SubnavigationBar__in" {...scrollWrapperProps}>
         <div vkuiClass="SubnavigationBar__scrollIn">
           {children}
         </div>
@@ -32,7 +54,3 @@ export const SubnavigationBar: React.FC<SubnavigationBarProps> = (props: Subnavi
     </div>
   );
 };
-
-SubnavigationBar.defaultProps = {
-  mode: 'overflow',
-};

package/src/components/SubnavigationButton/SubnavigationButton.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { HasComponent } from '../../types';
 import { classNames } from '../../lib/classNames';
 import { getClassName } from '../../helpers/getClassName';
 import { getTitleFromChildren, hasReactNode } from '../../lib/utils';
@@ -27,9 +28,7 @@ export interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {
   expandable?: boolean;
 }
 
-interface SubnavButtonTypographyProps extends Pick<SubnavigationButtonProps, 'textLevel'> {
-  Component?: React.ElementType;
-}
+type SubnavButtonTypographyProps = Pick<SubnavigationButtonProps, 'textLevel'> & HasComponent;
 
 const SubnavigationButtonTypography: React.FC<SubnavButtonTypographyProps> = ({ textLevel, ...restProps }: SubnavButtonTypographyProps) => {
   if (textLevel === 1) {

package/src/components/Switch/Readme.md

@@ -7,25 +7,25 @@
         Switch
       </PanelHeader>
       <Group>
-        <Cell disabled after={<Switch />}>
+        <Cell role={null} disabled after={<Switch aria-label="Комментарии к записям" />}>
           Комментарии к записям
         </Cell>
-        <Cell disabled after={<Switch defaultChecked />}>
+        <Cell role={null} disabled after={<Switch defaultChecked aria-label="Ссылки" />}>
           Ссылки
         </Cell>
-        <Cell disabled after={<Switch disabled />}>
+        <Cell role={null} disabled after={<Switch disabled aria-label="Фотоальбомы" />}>
           Фотоальбомы
         </Cell>
       </Group>
       <Group header={<Header mode="secondary">Компактный вид</Header>}>
         <AdaptivityProvider sizeY="compact">
-          <Cell disabled after={<Switch />}>
+          <Cell role={null} disabled after={<Switch aria-label="Комментарии к записям" />}>
             Комментарии к записям
           </Cell>
-          <Cell disabled after={<Switch defaultChecked />}>
+          <Cell role={null} disabled after={<Switch defaultChecked aria-label="Ссылки" />}>
             Ссылки
           </Cell>
-          <Cell disabled after={<Switch disabled />}>
+          <Cell role={null} disabled after={<Switch disabled aria-label="Фотоальбомы" />}>
             Фотоальбомы
           </Cell>
         </AdaptivityProvider>

package/src/components/Switch/Switch.css

@@ -1,9 +1,19 @@
 .Switch {
+  position: relative;
   display: block;
+  cursor: pointer;
 }
 
 .Switch__self {
-  display: none;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  overflow: hidden;
+  opacity: 0;
 }
 
 .Switch__pseudo {
@@ -17,6 +27,8 @@
 .Switch__pseudo::before {
   position: absolute;
   content: '';
+  top: -3px;
+  left: -3px;
   border-radius: 50%;
   box-sizing: border-box;
 }
@@ -38,9 +50,6 @@
   border: 2px solid transparent;
   background: var(--placeholder_icon_background);
   border-radius: 15px;
-  transition:
-    background-color .2s ease,
-    border-color .2s ease;
 }
 
 .Switch--ios.Switch--sizeY-compact .Switch__pseudo {
@@ -63,7 +72,6 @@
     0 3px 8px rgba(0, 0, 0, .15),
     0 3px 1px rgba(0, 0, 0, .06),
     inset 0 0 0 .5px rgba(0, 0, 0, .04);
-  transition: transform .2s cubic-bezier(.36, -.24, .26, 1.32);
 }
 
 .Switch--ios.Switch--sizeY-compact .Switch__pseudo::before {
@@ -71,10 +79,6 @@
   height: 23px;
 }
 
-.Switch--ios .Switch__self:checked + .Switch__pseudo::before {
-  transform: translateX(20px);
-}
-
 /**
  * Android & VKCOM
  */
@@ -89,7 +93,6 @@
   display: block;
   width: 100%;
   height: 100%;
-  transition: background-color .1s ease;
 }
 
 .Switch--android .Switch__self:checked + .Switch__pseudo::after,
@@ -121,13 +124,10 @@
 }
 
 .Switch--android .Switch__pseudo::before {
-  top: -3px;
-  left: -3px;
   width: 20px;
   height: 20px;
   background: #f1f1f1; /* todo: 1077 replace w/ a proper variable */
   box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24);
-  transition: transform .1s ease;
 }
 
 .Switch--android.Switch--sizeY-compact .Switch__pseudo::before {
@@ -158,13 +158,11 @@
 }
 
 .Switch--vkcom .Switch__pseudo::before {
-  top: -3px;
   left: -2px;
   width: 16px;
   height: 16px;
   background: var(--background_light);
   border: 1px solid var(--icon_tertiary);
-  transition: transform .1s ease;
   z-index: 1;
 }
 
@@ -173,3 +171,36 @@
   border: none;
   transform: translateX(16px);
 }
+
+/**
+ * [a11y]
+ * add animation for browsers that support prefers-reduced-motion
+ * so that users with vestibular motion disorders have no problem
+ * navigating accessible vkui apps via keyboard
+ */
+@media (prefers-reduced-motion: no-preference) {
+  .Switch__pseudo::before {
+    transition: transform .1s ease;
+  }
+
+  .Switch--ios .Switch__pseudo {
+    transition: background-color .2s ease, border-color .2s ease;
+  }
+
+  .Switch--ios .Switch__pseudo::before {
+    transition: transform .2s cubic-bezier(.36, -.24, .26, 1.32);
+  }
+
+  .Switch--android .Switch__pseudo::after,
+  .Switch--vkcom .Switch__pseudo::after {
+    transition: background-color .1s ease;
+  }
+}
+
+/**
+ * CMP:
+ * SimpleCell
+ */
+.SimpleCell .Switch {
+  margin-left: 10px;
+}

package/src/components/Switch/Switch.tsx

@@ -3,31 +3,39 @@ import { getClassName } from '../../helpers/getClassName';
 import { classNames } from '../../lib/classNames';
 import { usePlatform } from '../../hooks/usePlatform';
 import { HasRef, HasRootRef } from '../../types';
-import { withAdaptivity, AdaptivityProps } from '../../hoc/withAdaptivity';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
+import { FocusVisible } from '../FocusVisible/FocusVisible';
 import './Switch.css';
 
 export interface SwitchProps extends
   React.InputHTMLAttributes<HTMLInputElement>,
   HasRootRef<HTMLLabelElement>,
-  HasRef<HTMLInputElement>,
-  AdaptivityProps { }
+  HasRef<HTMLInputElement> {};
 
-export const Switch: React.FunctionComponent<SwitchProps> = withAdaptivity(({
+export const Switch: React.FC<SwitchProps> = ({
   style,
   className,
   getRef,
   getRootRef,
-  sizeY,
   ...restProps
 }: SwitchProps) => {
   const platform = usePlatform();
+  const { sizeY } = useAdaptivity();
+
   const inputRef = useExternRef(getRef);
 
   return (
-    <label vkuiClass={classNames(getClassName('Switch', platform), `Switch--sizeY-${sizeY}`)} className={className} style={style} ref={getRootRef}>
+    <label
+      vkuiClass={classNames(getClassName('Switch', platform), `Switch--sizeY-${sizeY}`)}
+      className={className}
+      style={style}
+      ref={getRootRef}
+      role="presentation"
+    >
       <input {...restProps} type="checkbox" vkuiClass="Switch__self" ref={inputRef} />
-      <span vkuiClass="Switch__pseudo" />
+      <span role="presentation" vkuiClass="Switch__pseudo" />
+      <FocusVisible mode="outside" />
     </label>
   );
-}, { sizeY: true });
+};

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>
+```