@vkontakte/vkui 4.19.0 → 4.22.0

package/src/components/ScreenSpinner/Readme.md

@@ -4,7 +4,7 @@
 
 Рекомендуется использовать в случаях, когда требуется заблокировать интерфейс до завершения асинхронного процесса.
 
-```jsx
+```jsx { "props": { "layout": false, "adaptivity": true } }
 class Example extends React.Component {
 
   constructor (props) {
@@ -21,14 +21,18 @@ class Example extends React.Component {
 
   render () {
     return (
-      <View popout={this.state.popout} activePanel="spinner">
-        <Panel id="spinner">
-          <PanelHeader>ScreenSpinner</PanelHeader>
-          <Group>
-            <CellButton onClick={this.onClick.bind(this)}>Запустить долгий процесс</CellButton>
-          </Group>
-        </Panel>
-      </View>
+      <SplitLayout popout={this.state.popout}>
+        <SplitCol>
+        <View activePanel="spinner">
+          <Panel id="spinner">
+            <PanelHeader>ScreenSpinner</PanelHeader>
+            <Group>
+              <CellButton onClick={this.onClick.bind(this)}>Запустить долгий процесс</CellButton>
+            </Group>
+          </Panel>
+        </View>
+        </SplitCol>
+      </SplitLayout>
     )
   }
 }

package/src/components/Search/Search.css

@@ -30,7 +30,7 @@
 }
 
 .Search__input {
-  -webkit-appearance: textfield;
+  -webkit-appearance: none; /* не используем textfield из-за бага в iOS 15.1 http://www.openradar.me/FB9744107 */
   border: none;
   margin: 0;
   height: var(--search_default_height);

package/src/components/Search/Search.tsx

@@ -117,9 +117,9 @@ const Search: React.FC<SearchProps> = ({
             }
             {!!value &&
               <Touch onStart={onIconCancelClickStart} vkuiClass="Search__icon">
-                {platform === VKCOM
-                  ? <Icon24Cancel />
-                  : <Icon16Clear />
+                {platform === IOS
+                  ? <Icon16Clear />
+                  : <Icon24Cancel />
                 }
               </Touch>
             }

package/src/components/Select/Select.css

@@ -1,5 +1,6 @@
 .Select {
   position: relative;
+  cursor: pointer;
   box-sizing: border-box;
 }
 
@@ -25,7 +26,6 @@
   box-sizing: border-box;
   position: relative;
   z-index: 2;
-  cursor: pointer;
   overflow: hidden;
 }
 

package/src/components/SelectMimicry/SelectMimicry.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { classNames } from '../../lib/classNames';
-import { Icon24Dropdown, Icon20Dropdown } from '@vkontakte/icons';
+import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
 import { FormField } from '../FormField/FormField';
 import { HasAlign, HasRootRef } from '../../types';
 import { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';
@@ -51,7 +51,7 @@ const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
       getRootRef={getRootRef}
       onClick={disabled ? null : onClick}
       disabled={disabled}
-      after={sizeY === SizeType.COMPACT ? <Icon20Dropdown /> : <Icon24Dropdown />}
+      after={<DropdownIcon />}
     >
       <TypographyComponent Component="div" weight="regular" vkuiClass="Select__container">
         <span vkuiClass="Select__title">{children || placeholder}</span>

package/src/components/SimpleCell/SimpleCell.css

@@ -5,12 +5,8 @@
   white-space: nowrap;
   text-decoration: none;
   color: var(--text_primary);
-}
-
-.FormItem .SimpleCell {
-  width: 100%;
-  box-sizing: content-box;
-  margin: 0 calc(-1 * var(--formitem_padding));
+  padding-left: 16px;
+  padding-right: 16px;
 }
 
 .SimpleCell--mult {
@@ -26,7 +22,6 @@
   max-width: 100%;
   flex-grow: 1;
   min-width: 0;
-  flex-shrink: initial;
   overflow: hidden;
 }
 
@@ -57,7 +52,6 @@
 
 .SimpleCell:not(.SimpleCell--mult) .SimpleCell__content {
   display: flex;
-  flex-flow: row nowrap;
   align-content: flex-start;
   align-items: center;
   justify-content: flex-start;
@@ -120,10 +114,6 @@
   padding-right: 2px;
 }
 
-.SimpleCell .Switch {
-  padding-left: 10px;
-}
-
 .SimpleCell__after .IconButton .Icon--28,
 .SimpleCell__after .IconButton .Icon--28 ~ * {
   margin-right: -8px;
@@ -189,12 +179,6 @@
  * Android & VKCOM
  */
 
-.SimpleCell--android,
-.SimpleCell--vkcom {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
 .SimpleCell--android .SimpleCell__main,
 .SimpleCell--android .SimpleCell__indicator,
 .SimpleCell--vkcom .SimpleCell__main,
@@ -246,3 +230,11 @@
 .SimpleCell--sizeY-compact .SimpleCell__badge .Badge {
   transform: translateY(.5px);
 }
+
+/**
+ * CMP:
+ * FormItem
+ */
+.FormItem > .SimpleCell {
+  margin: 0 calc(-1 * var(--formitem_padding));
+}

package/src/components/SimpleCell/SimpleCell.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 Tappable, { TappableProps } from '../Tappable/Tappable';
@@ -13,7 +14,7 @@ import Text from '../Typography/Text/Text';
 import Subhead from '../Typography/Subhead/Subhead';
 import './SimpleCell.css';
 
-export interface SimpleCellOwnProps {
+export interface SimpleCellOwnProps extends HasComponent {
   /**
    * Иконка 28 или `<Avatar size={28|32|40|48|72} />`
    */
@@ -43,14 +44,11 @@ export interface SimpleCellOwnProps {
    */
   expandable?: boolean;
   multiline?: boolean;
-  Component?: React.ElementType;
 }
 
 export interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}
 
-interface SimpleCellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {
-  Component?: React.ElementType;
-}
+type SimpleCellTypographyProps = React.HTMLAttributes<HTMLDivElement> & HasComponent;
 
 const SimpleCellTypography: React.FC<SimpleCellTypographyProps> = (props: SimpleCellTypographyProps) => {
   const { sizeY } = useAdaptivity();

package/src/components/SplitCol/SplitCol.tsx

@@ -13,9 +13,9 @@ export const SplitColContext = React.createContext<SplitColContextProps>({
 });
 
 export interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {
-  width?: string;
-  maxWidth?: string;
-  minWidth?: string;
+  width?: number | string;
+  maxWidth?: number | string;
+  minWidth?: number | string;
   /**
    * Если false, то переходы между Panel происходят без анимации
    */
@@ -28,7 +28,7 @@ export interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export const SplitCol: React.FC<SplitColProps> = (props: SplitColProps) => {
-  const { children, width, maxWidth, minWidth, spaced, animate, fixed, style, ...restProps } = props;
+  const { children, width, maxWidth, minWidth, spaced, animate = false, fixed, style, ...restProps } = props;
   const baseRef = React.useRef<HTMLDivElement>();
 
   const contextValue = React.useMemo(() => {
@@ -59,7 +59,3 @@ export const SplitCol: React.FC<SplitColProps> = (props: SplitColProps) => {
     </div>
   );
 };
-
-SplitCol.defaultProps = {
-  animate: false,
-};

package/src/components/SplitLayout/Readme.md

@@ -46,7 +46,7 @@ const Example = withAdaptivity(
         modal={modalRoot}
       >
         {isDesktop && (
-          <SplitCol fixed width="280px" maxWidth="280px">
+          <SplitCol fixed width={280} maxWidth={280}>
             <Panel>
               {hasHeader && <PanelHeader />}
               <Group>
@@ -137,4 +137,4 @@ const Example = withAdaptivity(
 
 <Example />
 
-```
+```

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>