@vkontakte/vkui 4.22.0 → 4.24.0

package/src/components/Select/Select.tsx

@@ -1,25 +1,30 @@
-import * as React from 'react';
-import NativeSelect from '../NativeSelect/NativeSelect';
-import CustomSelect, { CustomSelectProps } from '../CustomSelect/CustomSelect';
-import { withAdaptivity, AdaptivityProps } from '../../hoc/withAdaptivity';
+import * as React from "react";
+import NativeSelect from "../NativeSelect/NativeSelect";
+import CustomSelect, { CustomSelectProps } from "../CustomSelect/CustomSelect";
+import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
 
 export interface SelectProps extends CustomSelectProps, AdaptivityProps {}
 
-const Select: React.FunctionComponent<SelectProps> = ({ hasMouse, ...props }: SelectProps) => {
+const Select: React.FunctionComponent<SelectProps> = ({
+  hasMouse,
+  ...props
+}: SelectProps) => {
   // Use custom select if device has connected a mouse
   if (hasMouse) {
     const { children, ...restProps } = props;
 
-    return (
-      <CustomSelect {...restProps} />
-    );
+    return <CustomSelect {...restProps} />;
   }
 
   const { options = [], popupDirection, renderOption, ...restProps } = props;
 
   return (
     <NativeSelect {...restProps}>
-      {options.map(({ label, value }) => <option value={value} key={`${value}`}>{label}</option>)}
+      {options.map(({ label, value }) => (
+        <option value={value} key={`${value}`}>
+          {label}
+        </option>
+      ))}
     </NativeSelect>
   );
 };

package/src/components/SelectMimicry/Readme.md

@@ -3,73 +3,85 @@
 [CustomSelect](#!/CustomSelect)
 
 ```jsx
-  class Example extends React.Component {
-
-    constructor(props) {
-      super(props);
-      this.state = {
-        country: '',
-        activeView: 'profile'
-      }
-    }
+class Example extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      country: "",
+      activeView: "profile",
+    };
+  }
 
-    render () {
-      return (
-        <Root activeView={this.state.activeView}>
-          <View activePanel="profile" id="profile">
-            <Panel id="profile">
-              <PanelHeader>
-                Профиль
-              </PanelHeader>
-              <Group>
-                <FormItem top="Выберите страну">
-                  <SelectMimicry
-                    placeholder="Не выбрана"
-                    onClick={() => this.setState({ activeView: 'countries' })}
-                  >{this.state.country}</SelectMimicry>
-                </FormItem>
-                <FormItem top="Выберите город">
-                  <SelectMimicry
-                    placeholder="Не выбран"
-                    disabled
-                  />
-                </FormItem>
-              </Group>
-            </Panel>
-          </View>
-          <View activePanel="countries" id="countries">
-            <Panel id="countries">
-              <PanelHeader>
-                Выбор страны
-              </PanelHeader>
-              <Group>
-                <List>
-                  <Cell
-                    onClick={() => this.setState({ country: 'Россия', activeView: 'profile' })}
-                    after={this.state.country === 'Россия' ? <Icon24Done fill="var(--accent)" /> : null}
-                  >
-                    Россия
-                  </Cell>
-                  <Cell
-                    onClick={() => this.setState({ country: 'Италия', activeView: 'profile' })}
-                    after={this.state.country === 'Италия' ? <Icon24Done fill="var(--accent)" /> : null}
-                  >
-                    Италия
-                  </Cell>
-                  <Cell
-                    onClick={() => this.setState({ country: 'Англия', activeView: 'profile' })}
-                    after={this.state.country === 'Англия' ? <Icon24Done fill="var(--accent)" /> : null}
-                  >
-                    Англия
-                  </Cell>
-                </List>
-              </Group>
-            </Panel>
-          </View>
-        </Root>
-      )
-    }
+  render() {
+    return (
+      <Root activeView={this.state.activeView}>
+        <View activePanel="profile" id="profile">
+          <Panel id="profile">
+            <PanelHeader>Профиль</PanelHeader>
+            <Group>
+              <FormItem top="Выберите страну">
+                <SelectMimicry
+                  placeholder="Не выбрана"
+                  onClick={() => this.setState({ activeView: "countries" })}
+                >
+                  {this.state.country}
+                </SelectMimicry>
+              </FormItem>
+              <FormItem top="Выберите город">
+                <SelectMimicry placeholder="Не выбран" disabled />
+              </FormItem>
+            </Group>
+          </Panel>
+        </View>
+        <View activePanel="countries" id="countries">
+          <Panel id="countries">
+            <PanelHeader>Выбор страны</PanelHeader>
+            <Group>
+              <List>
+                <Cell
+                  onClick={() =>
+                    this.setState({ country: "Россия", activeView: "profile" })
+                  }
+                  after={
+                    this.state.country === "Россия" ? (
+                      <Icon24Done fill="var(--accent)" />
+                    ) : null
+                  }
+                >
+                  Россия
+                </Cell>
+                <Cell
+                  onClick={() =>
+                    this.setState({ country: "Италия", activeView: "profile" })
+                  }
+                  after={
+                    this.state.country === "Италия" ? (
+                      <Icon24Done fill="var(--accent)" />
+                    ) : null
+                  }
+                >
+                  Италия
+                </Cell>
+                <Cell
+                  onClick={() =>
+                    this.setState({ country: "Англия", activeView: "profile" })
+                  }
+                  after={
+                    this.state.country === "Англия" ? (
+                      <Icon24Done fill="var(--accent)" />
+                    ) : null
+                  }
+                >
+                  Англия
+                </Cell>
+              </List>
+            </Group>
+          </Panel>
+        </View>
+      </Root>
+    );
   }
+}
 
-  <Example />
+<Example />;
 ```

package/src/components/SelectMimicry/SelectMimicry.tsx

@@ -1,21 +1,25 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
-import { FormField } from '../FormField/FormField';
-import { HasAlign, HasRootRef } from '../../types';
-import { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';
-import { usePlatform } from '../../hooks/usePlatform';
-import { getClassName } from '../../helpers/getClassName';
-import Headline from '../Typography/Headline/Headline';
-import Text from '../Typography/Text/Text';
-import { VKCOM } from '../../lib/platform';
-import '../Select/Select.css';
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
+import { FormField } from "../FormField/FormField";
+import { HasAlign, HasRootRef } from "../../types";
+import {
+  withAdaptivity,
+  AdaptivityProps,
+  SizeType,
+} from "../../hoc/withAdaptivity";
+import { usePlatform } from "../../hooks/usePlatform";
+import { getClassName } from "../../helpers/getClassName";
+import Headline from "../Typography/Headline/Headline";
+import Text from "../Typography/Text/Text";
+import { VKCOM } from "../../lib/platform";
+import "../Select/Select.css";
 
-export interface SelectMimicryProps extends
-  React.HTMLAttributes<HTMLElement>,
-  HasAlign,
-  HasRootRef<HTMLElement>,
-  AdaptivityProps {
+export interface SelectMimicryProps
+  extends React.HTMLAttributes<HTMLElement>,
+    HasAlign,
+    HasRootRef<HTMLElement>,
+    AdaptivityProps {
   multiline?: boolean;
   disabled?: boolean;
 }
@@ -35,25 +39,34 @@ const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
 }: SelectMimicryProps) => {
   const platform = usePlatform();
 
-  const TypographyComponent = platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;
+  const TypographyComponent =
+    platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;
 
   return (
     <FormField
       {...restProps}
       tabIndex={disabled ? null : tabIndex}
-      vkuiClass={classNames(getClassName('Select', platform), 'Select--mimicry', {
-        'Select--not-selected': !children,
-        'Select--multiline': multiline,
-        [`Select--align-${align}`]: !!align,
-        [`Select--sizeX--${sizeX}`]: !!sizeX,
-        [`Select--sizeY--${sizeY}`]: !!sizeY,
-      })}
+      vkuiClass={classNames(
+        getClassName("Select", platform),
+        "Select--mimicry",
+        {
+          "Select--not-selected": !children,
+          "Select--multiline": multiline,
+          [`Select--align-${align}`]: !!align,
+          [`Select--sizeX--${sizeX}`]: !!sizeX,
+          [`Select--sizeY--${sizeY}`]: !!sizeY,
+        }
+      )}
       getRootRef={getRootRef}
       onClick={disabled ? null : onClick}
       disabled={disabled}
       after={<DropdownIcon />}
     >
-      <TypographyComponent Component="div" weight="regular" vkuiClass="Select__container">
+      <TypographyComponent
+        Component="div"
+        weight="regular"
+        vkuiClass="Select__container"
+      >
         <span vkuiClass="Select__title">{children || placeholder}</span>
       </TypographyComponent>
     </FormField>

package/src/components/Separator/Readme.md

@@ -1,21 +1,19 @@
 > **Важно**
 >
->Компонент устарел. Предпочтительнее использовать компонент [Spacing](#!/Spacing)
+> Компонент устарел. Предпочтительнее использовать компонент [Spacing](#!/Spacing)
 
 Используется для разделения какого-либо контента. Отступы справа и слева контролируются свойством `wide`.
 
 ```jsx
 <View activePanel="separator">
   <Panel id="separator">
-    <PanelHeader>
-      Separator
-    </PanelHeader>
+    <PanelHeader>Separator</PanelHeader>
 
     <Group header={<Header mode="secondary">Сепаратор</Header>}>
       <Cell before={<Icon28Notifications />}>Уведомления</Cell>
       <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
 
-      <Separator style={{ margin: '12px 0' }} />
+      <Separator style={{ margin: "12px 0" }} />
 
       <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
       <Cell before={<Icon28SlidersOutline />}>Основные</Cell>

package/src/components/Separator/Separator.css

@@ -10,13 +10,13 @@
 
 @media (min-resolution: 2dppx) {
   .Separator__in:not(.Separator__in--expanded) {
-    transform: scaleY(.5);
+    transform: scaleY(0.5);
   }
 }
 
 @media (min-resolution: 3dppx) {
   .Separator__in:not(.Separator__in--expanded) {
-    transform: scaleY(.32);
+    transform: scaleY(0.32);
   }
 }
 

package/src/components/Separator/Separator.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import { usePlatform } from '../../hooks/usePlatform';
-import './Separator.css';
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import "./Separator.css";
 
 export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -12,20 +12,26 @@ export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
   expanded?: boolean;
 }
 
-const Separator: React.FC<SeparatorProps> = ({ wide, expanded, ...restProps }) => {
+const Separator: React.FC<SeparatorProps> = ({
+  wide,
+  expanded,
+  ...restProps
+}) => {
   const platform = usePlatform();
 
   return (
     <div
       {...restProps}
       aria-hidden="true"
-      vkuiClass={classNames(getClassName('Separator', platform), {
-        'Separator--wide': wide,
+      vkuiClass={classNames(getClassName("Separator", platform), {
+        "Separator--wide": wide,
       })}
     >
-      <div vkuiClass={classNames('Separator__in', {
-        'Separator__in--expanded': expanded,
-      })} />
+      <div
+        vkuiClass={classNames("Separator__in", {
+          "Separator__in--expanded": expanded,
+        })}
+      />
     </div>
   );
 };

package/src/components/SimpleCell/Readme.md

@@ -1,58 +1,136 @@
 ```jsx
-  class Example extends React.Component {
-
-    constructor() {
-      this.state = {
-        activePanel: 'list',
-      };
-    }
+class Example extends React.Component {
+  constructor() {
+    this.state = {
+      activePanel: "list",
+    };
+  }
 
-    render() {
-      return (
-        <View activePanel={this.state.activePanel}>
-          <Panel id="list">
-            <PanelHeader>
-              SimpleCell
-            </PanelHeader>
-            <Group>
-              <Header mode="secondary">Меню</Header>
-              <SimpleCell onClick={() => this.setState({ activePanel: 'nothing' })} expandable before={<Icon28UserOutline />}>Аккаунт</SimpleCell>
-              <SimpleCell onClick={() => this.setState({ activePanel: 'nothing' })} expandable before={<Icon28PaletteOutline />}>Внешний вид</SimpleCell>
-              <SimpleCell onClick={() => this.setState({ activePanel: 'nothing' })} expandable before={<Icon28SettingsOutline />}>Основные</SimpleCell>
-            </Group>
-            <Group>
-              <Header mode="secondary">Настройки</Header>
-              <SimpleCell disabled after={<Switch defaultChecked />}>Сжимать фотографии</SimpleCell>
-              <SimpleCell disabled after={<Switch />}>Сжимать видео</SimpleCell>
-            </Group>
-            <Group>
-              <Header mode="secondary">Настройки системы</Header>
-              <SimpleCell onClick={() => this.setState({ activePanel: 'nothing' })} expandable indicator="Русский">Язык</SimpleCell>
-              <SimpleCell onClick={() => this.setState({ activePanel: 'nothing' })} expandable indicator="При использовании">Геолокация</SimpleCell>
-            </Group>
-            <Group>
-              <Header mode="secondary">Список диалогов</Header>
-              <SimpleCell before={<Avatar size={40} src={getAvatarUrl('user_xyz')} />} after={<IconButton><Icon28MessageOutline /></IconButton>}>Игорь Фёдоров</SimpleCell>
-              <SimpleCell before={<Avatar size={40} src={getAvatarUrl('user_arthurstam')} />} after={<IconButton><Icon28MessageOutline /></IconButton>}>Artur Stambultsian</SimpleCell>
-            </Group>
-            <Group>
-              <Header mode="secondary">Список друзей</Header>
-              <SimpleCell before={<Avatar size={48} src={getAvatarUrl('user_xyz')} />} badge={<Icon12Verified />} after={<IconButton><Icon28MessageOutline /></IconButton>} description="Команда ВКонтакте">Игорь Фёдоров</SimpleCell>
-              <SimpleCell before={<Avatar size={48} src={getAvatarUrl('user_arthurstam')} />} after={<IconButton><Icon28MessageOutline /></IconButton>} description="Бот">Artur Stambultsian</SimpleCell>
-            </Group>
-          </Panel>
-          <Panel id="nothing">
-            <PanelHeader left={<PanelHeaderBack onClick={() => this.setState({ activePanel: 'list' })}/>}>
-              Ничего
-            </PanelHeader>
-            <Placeholder>
-              Тут ничего нет
-            </Placeholder>
-          </Panel>
-        </View>
-      )
-    }
+  render() {
+    return (
+      <View activePanel={this.state.activePanel}>
+        <Panel id="list">
+          <PanelHeader>SimpleCell</PanelHeader>
+          <Group>
+            <Header mode="secondary">Меню</Header>
+            <SimpleCell
+              onClick={() => this.setState({ activePanel: "nothing" })}
+              expandable
+              before={<Icon28UserOutline />}
+            >
+              Аккаунт
+            </SimpleCell>
+            <SimpleCell
+              onClick={() => this.setState({ activePanel: "nothing" })}
+              expandable
+              before={<Icon28PaletteOutline />}
+            >
+              Внешний вид
+            </SimpleCell>
+            <SimpleCell
+              onClick={() => this.setState({ activePanel: "nothing" })}
+              expandable
+              before={<Icon28SettingsOutline />}
+            >
+              Основные
+            </SimpleCell>
+          </Group>
+          <Group>
+            <Header mode="secondary">Настройки</Header>
+            <SimpleCell disabled after={<Switch defaultChecked />}>
+              Сжимать фотографии
+            </SimpleCell>
+            <SimpleCell disabled after={<Switch />}>
+              Сжимать видео
+            </SimpleCell>
+          </Group>
+          <Group>
+            <Header mode="secondary">Настройки системы</Header>
+            <SimpleCell
+              onClick={() => this.setState({ activePanel: "nothing" })}
+              expandable
+              indicator="Русский"
+            >
+              Язык
+            </SimpleCell>
+            <SimpleCell
+              onClick={() => this.setState({ activePanel: "nothing" })}
+              expandable
+              indicator="При использовании"
+            >
+              Геолокация
+            </SimpleCell>
+          </Group>
+          <Group>
+            <Header mode="secondary">Список диалогов</Header>
+            <SimpleCell
+              before={<Avatar size={40} src={getAvatarUrl("user_xyz")} />}
+              after={
+                <IconButton>
+                  <Icon28MessageOutline />
+                </IconButton>
+              }
+            >
+              Игорь Фёдоров
+            </SimpleCell>
+            <SimpleCell
+              before={
+                <Avatar size={40} src={getAvatarUrl("user_arthurstam")} />
+              }
+              after={
+                <IconButton>
+                  <Icon28MessageOutline />
+                </IconButton>
+              }
+            >
+              Artur Stambultsian
+            </SimpleCell>
+          </Group>
+          <Group>
+            <Header mode="secondary">Список друзей</Header>
+            <SimpleCell
+              before={<Avatar size={48} src={getAvatarUrl("user_xyz")} />}
+              badge={<Icon12Verified />}
+              after={
+                <IconButton>
+                  <Icon28MessageOutline />
+                </IconButton>
+              }
+              description="Команда ВКонтакте"
+            >
+              Игорь Фёдоров
+            </SimpleCell>
+            <SimpleCell
+              before={
+                <Avatar size={48} src={getAvatarUrl("user_arthurstam")} />
+              }
+              after={
+                <IconButton>
+                  <Icon28MessageOutline />
+                </IconButton>
+              }
+              description="Бот"
+            >
+              Artur Stambultsian
+            </SimpleCell>
+          </Group>
+        </Panel>
+        <Panel id="nothing">
+          <PanelHeader
+            left={
+              <PanelHeaderBack
+                onClick={() => this.setState({ activePanel: "list" })}
+              />
+            }
+          >
+            Ничего
+          </PanelHeader>
+          <Placeholder>Тут ничего нет</Placeholder>
+        </Panel>
+      </View>
+    );
   }
+}
 
-  <Example />
+<Example />;
 ```

package/src/components/SimpleCell/SimpleCell.css

@@ -164,13 +164,25 @@
   margin-right: -12px;
 }
 
-.SimpleCell--ios.SimpleCell--sizeY-compact .SimpleCell__after .IconButton .Icon--16,
-.SimpleCell--ios.SimpleCell--sizeY-compact .SimpleCell__after .IconButton .Icon--16 ~ * {
+.SimpleCell--ios.SimpleCell--sizeY-compact
+  .SimpleCell__after
+  .IconButton
+  .Icon--16,
+.SimpleCell--ios.SimpleCell--sizeY-compact
+  .SimpleCell__after
+  .IconButton
+  .Icon--16
+  ~ * {
   margin-right: -14px;
 }
 
-.SimpleCell--ios.SimpleCell--sizeY-regular > .Avatar:not(.Avatar--sz-32) ~ .SimpleCell__main .SimpleCell__children,
-.SimpleCell--ios.SimpleCell--sizeY-regular > .Avatar:not(.Avatar--sz-32) ~ .SimpleCell__indicator {
+.SimpleCell--ios.SimpleCell--sizeY-regular
+  > .Avatar:not(.Avatar--sz-32)
+  ~ .SimpleCell__main
+  .SimpleCell__children,
+.SimpleCell--ios.SimpleCell--sizeY-regular
+  > .Avatar:not(.Avatar--sz-32)
+  ~ .SimpleCell__indicator {
   font-size: 16px;
   line-height: 20px;
 }
@@ -202,8 +214,14 @@
 }
 
 .SimpleCell--sizeY-compact .SimpleCell__description,
-.SimpleCell--sizeY-compact > .Avatar--sz-32 ~ .SimpleCell__main .SimpleCell__description,
-.SimpleCell--sizeY-compact > .Avatar--sz-28 ~ .SimpleCell__main .SimpleCell__description {
+.SimpleCell--sizeY-compact
+  > .Avatar--sz-32
+  ~ .SimpleCell__main
+  .SimpleCell__description,
+.SimpleCell--sizeY-compact
+  > .Avatar--sz-28
+  ~ .SimpleCell__main
+  .SimpleCell__description {
   margin-top: 1px;
 }
 
@@ -228,7 +246,7 @@
 }
 
 .SimpleCell--sizeY-compact .SimpleCell__badge .Badge {
-  transform: translateY(.5px);
+  transform: translateY(0.5px);
 }
 
 /**