@vkontakte/vkui 4.23.0 → 4.24.0

package/src/components/Gradient/Gradient.css

@@ -1,15 +1,83 @@
 .Gradient--md-tint.Gradient--to-top {
-  background: linear-gradient(to top, #f5f5f5, rgba(245, 245, 245, .98), rgba(245, 245, 245, .94), rgba(245, 245, 245, .88), rgba(245, 245, 245, .8), rgba(245, 245, 245, .71), rgba(245, 245, 245, .61), rgba(245, 245, 245, .5), rgba(245, 245, 245, .39), rgba(245, 245, 245, .29), rgba(245, 245, 245, .2), rgba(245, 245, 245, .12), rgba(245, 245, 245, .06), rgba(245, 245, 245, .02), rgba(245, 245, 245, 0));
+  background: linear-gradient(
+    to top,
+    #f5f5f5,
+    rgba(245, 245, 245, 0.98),
+    rgba(245, 245, 245, 0.94),
+    rgba(245, 245, 245, 0.88),
+    rgba(245, 245, 245, 0.8),
+    rgba(245, 245, 245, 0.71),
+    rgba(245, 245, 245, 0.61),
+    rgba(245, 245, 245, 0.5),
+    rgba(245, 245, 245, 0.39),
+    rgba(245, 245, 245, 0.29),
+    rgba(245, 245, 245, 0.2),
+    rgba(245, 245, 245, 0.12),
+    rgba(245, 245, 245, 0.06),
+    rgba(245, 245, 245, 0.02),
+    rgba(245, 245, 245, 0)
+  );
 }
 
 .Gradient--md-tint.Gradient--to-bottom {
-  background: linear-gradient(to bottom, #f5f5f5, rgba(245, 245, 245, .98), rgba(245, 245, 245, .94), rgba(245, 245, 245, .88), rgba(245, 245, 245, .8), rgba(245, 245, 245, .71), rgba(245, 245, 245, .61), rgba(245, 245, 245, .5), rgba(245, 245, 245, .39), rgba(245, 245, 245, .29), rgba(245, 245, 245, .2), rgba(245, 245, 245, .12), rgba(245, 245, 245, .06), rgba(245, 245, 245, .02), rgba(245, 245, 245, 0));
+  background: linear-gradient(
+    to bottom,
+    #f5f5f5,
+    rgba(245, 245, 245, 0.98),
+    rgba(245, 245, 245, 0.94),
+    rgba(245, 245, 245, 0.88),
+    rgba(245, 245, 245, 0.8),
+    rgba(245, 245, 245, 0.71),
+    rgba(245, 245, 245, 0.61),
+    rgba(245, 245, 245, 0.5),
+    rgba(245, 245, 245, 0.39),
+    rgba(245, 245, 245, 0.29),
+    rgba(245, 245, 245, 0.2),
+    rgba(245, 245, 245, 0.12),
+    rgba(245, 245, 245, 0.06),
+    rgba(245, 245, 245, 0.02),
+    rgba(245, 245, 245, 0)
+  );
 }
 
-body[scheme='space_gray'] .Gradient--md-tint.Gradient--to-top {
-  background: linear-gradient(to top, #232324, rgba(35, 35, 36, .98), rgba(35, 35, 36, .94), rgba(35, 35, 36, .88), rgba(35, 35, 36, .8), rgba(35, 35, 36, .71), rgba(35, 35, 36, .61), rgba(35, 35, 36, .5), rgba(35, 35, 36, .39), rgba(35, 35, 36, .29), rgba(35, 35, 36, .2), rgba(35, 35, 36, .12), rgba(35, 35, 36, .06), rgba(35, 35, 36, .02), rgba(35, 35, 36, 0));
+body[scheme="space_gray"] .Gradient--md-tint.Gradient--to-top {
+  background: linear-gradient(
+    to top,
+    #232324,
+    rgba(35, 35, 36, 0.98),
+    rgba(35, 35, 36, 0.94),
+    rgba(35, 35, 36, 0.88),
+    rgba(35, 35, 36, 0.8),
+    rgba(35, 35, 36, 0.71),
+    rgba(35, 35, 36, 0.61),
+    rgba(35, 35, 36, 0.5),
+    rgba(35, 35, 36, 0.39),
+    rgba(35, 35, 36, 0.29),
+    rgba(35, 35, 36, 0.2),
+    rgba(35, 35, 36, 0.12),
+    rgba(35, 35, 36, 0.06),
+    rgba(35, 35, 36, 0.02),
+    rgba(35, 35, 36, 0)
+  );
 }
 
-body[scheme='space_gray'] .Gradient--md-tint.Gradient--to-bottom {
-  background: linear-gradient(to bottom, #232324, rgba(35, 35, 36, .98), rgba(35, 35, 36, .94), rgba(35, 35, 36, .88), rgba(35, 35, 36, .8), rgba(35, 35, 36, .71), rgba(35, 35, 36, .61), rgba(35, 35, 36, .5), rgba(35, 35, 36, .39), rgba(35, 35, 36, .29), rgba(35, 35, 36, .2), rgba(35, 35, 36, .12), rgba(35, 35, 36, .06), rgba(35, 35, 36, .02), rgba(35, 35, 36, 0));
+body[scheme="space_gray"] .Gradient--md-tint.Gradient--to-bottom {
+  background: linear-gradient(
+    to bottom,
+    #232324,
+    rgba(35, 35, 36, 0.98),
+    rgba(35, 35, 36, 0.94),
+    rgba(35, 35, 36, 0.88),
+    rgba(35, 35, 36, 0.8),
+    rgba(35, 35, 36, 0.71),
+    rgba(35, 35, 36, 0.61),
+    rgba(35, 35, 36, 0.5),
+    rgba(35, 35, 36, 0.39),
+    rgba(35, 35, 36, 0.29),
+    rgba(35, 35, 36, 0.2),
+    rgba(35, 35, 36, 0.12),
+    rgba(35, 35, 36, 0.06),
+    rgba(35, 35, 36, 0.02),
+    rgba(35, 35, 36, 0)
+  );
 }

package/src/components/Gradient/Gradient.tsx

@@ -1,18 +1,27 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import './Gradient.css';
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import "./Gradient.css";
 
 export interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {
-  mode?: 'tint' | 'white' | 'black';
-  to?: 'top' | 'bottom';
+  mode?: "tint" | "white" | "black";
+  to?: "top" | "bottom";
 }
 
-const Gradient: React.FunctionComponent<GradientProps> = ({ mode, children, to, ...restProps }: GradientProps) => {
+const Gradient: React.FunctionComponent<GradientProps> = ({
+  mode,
+  children,
+  to,
+  ...restProps
+}: GradientProps) => {
   return (
     <div
       role="presentation"
       {...restProps}
-      vkuiClass={classNames('Gradient', `Gradient--md-${mode}`, `Gradient--to-${to}`)}
+      vkuiClass={classNames(
+        "Gradient",
+        `Gradient--md-${mode}`,
+        `Gradient--to-${to}`
+      )}
     >
       {children}
     </div>
@@ -20,8 +29,8 @@ const Gradient: React.FunctionComponent<GradientProps> = ({ mode, children, to,
 };
 
 Gradient.defaultProps = {
-  mode: 'tint',
-  to: 'top',
+  mode: "tint",
+  to: "top",
 };
 
 export default Gradient;

package/src/components/Gradient/Readme.md

@@ -5,32 +5,51 @@ const Example = ({ sizeX }) => {
       <Panel id="gradient">
         <PanelHeader>Gradient</PanelHeader>
         <Group>
-          <Gradient style={{
-            margin: sizeX === SizeType.REGULAR ? '-7px -7px 0 -7px' : 0,
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            textAlign: 'center',
-            padding: 32,
-          }}>
+          <Gradient
+            style={{
+              margin: sizeX === SizeType.REGULAR ? "-7px -7px 0 -7px" : 0,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              textAlign: "center",
+              padding: 32,
+            }}
+          >
             <Avatar size={96} />
-            <Title style={{ marginBottom: 8, marginTop: 20 }} level="2" weight="medium">Алексей Мазелюк</Title>
-            <Text style={{ marginBottom: 24, color: 'var(--text_secondary)' }}>Учащийся</Text>
-            <Button size="m" mode="secondary">Редактировать</Button>
+            <Title
+              style={{ marginBottom: 8, marginTop: 20 }}
+              level="2"
+              weight="medium"
+            >
+              Алексей Мазелюк
+            </Title>
+            <Text style={{ marginBottom: 24, color: "var(--text_secondary)" }}>
+              Учащийся
+            </Text>
+            <Button size="m" mode="secondary">
+              Редактировать
+            </Button>
           </Gradient>
           <Group mode="plain">
             <Header>Учебные заведения и классы</Header>
-            <SimpleCell before={<Icon28SchoolOutline />} description="Екатеринбург">Школа №180</SimpleCell>
-            <CellButton before={<Icon28AddOutline />}>Добавить учебное заведение</CellButton>
+            <SimpleCell
+              before={<Icon28SchoolOutline />}
+              description="Екатеринбург"
+            >
+              Школа №180
+            </SimpleCell>
+            <CellButton before={<Icon28AddOutline />}>
+              Добавить учебное заведение
+            </CellButton>
           </Group>
         </Group>
       </Panel>
     </View>
-  )
-}
+  );
+};
 
 const ExampleWithAdaptivity = withAdaptivity(Example, { sizeX: true });
 
-<ExampleWithAdaptivity />
+<ExampleWithAdaptivity />;
 ```

package/src/components/GridAvatar/GridAvatar.tsx

@@ -1,42 +1,41 @@
-import * as React from 'react';
-import Avatar, { AVATAR_DEFAULT_SHADOW, AVATAR_DEFAULT_SIZE } from '../Avatar/Avatar';
-import { classNames } from '../../lib/classNames';
-import { warnOnce } from '../../lib/warnOnce';
-import { HasRootRef } from '../../types';
-import './GridAvatar.css';
+import * as React from "react";
+import Avatar, { AvatarProps } from "../Avatar/Avatar";
+import { classNames } from "../../lib/classNames";
+import { warnOnce } from "../../lib/warnOnce";
+import { HasRootRef } from "../../types";
+import "./GridAvatar.css";
 
-export interface GridAvatarProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+export interface GridAvatarProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement>,
+    Pick<AvatarProps, "size" | "shadow" | "badge"> {
   src?: string[];
-  size?: number;
-  shadow?: boolean;
 }
 
 const MIN_GRID_LENGTH = 1;
 const MAX_GRID_LENGTH = 4;
 
-const warn = warnOnce('GridAvatar');
+const warn = warnOnce("GridAvatar");
 
 export const GridAvatar: React.FC<GridAvatarProps> = ({
   src = [],
-  size = AVATAR_DEFAULT_SIZE,
-  shadow = AVATAR_DEFAULT_SHADOW,
   ...restProps
 }: GridAvatarProps) => {
-  if (process.env.NODE_ENV === 'development' && src.length > MAX_GRID_LENGTH) {
-    warn(`Размер пропа src (${src.length}) больше максимального (${MAX_GRID_LENGTH})`);
+  if (process.env.NODE_ENV === "development" && src.length > MAX_GRID_LENGTH) {
+    warn(
+      `Размер пропа src (${src.length}) больше максимального (${MAX_GRID_LENGTH})`
+    );
   }
 
-  const count = Math.max(MIN_GRID_LENGTH, Math.min(MAX_GRID_LENGTH, src.length));
+  const count = Math.max(
+    MIN_GRID_LENGTH,
+    Math.min(MAX_GRID_LENGTH, src.length)
+  );
 
   return (
     <Avatar
       {...restProps}
-      vkuiClass={classNames(
-        'GridAvatar',
-        `GridAvatar--images-${count}`,
-      )}
-      shadow={shadow}
-      size={size}
+      vkuiClass={classNames("GridAvatar", `GridAvatar--images-${count}`)}
     >
       <div vkuiClass="GridAvatar__in">
         {src.slice(0, MAX_GRID_LENGTH).map((src, i) => {
@@ -45,8 +44,7 @@ export const GridAvatar: React.FC<GridAvatarProps> = ({
               key={i}
               vkuiClass="GridAvatar__item"
               style={{ backgroundImage: `url(${src})` }}
-            >
-            </div>
+            ></div>
           );
         })}
       </div>

package/src/components/GridAvatar/Readme.md

@@ -1,12 +1,24 @@
 Отображение нескольких аватаров в сетке от 1 до 4 элементов.
 
-
 ```jsx { "props": { "layout": false, "iframe": false } }
-<div style={{ display: 'flex', padding: 12, gap: 8, flexFlow: 'row wrap' }}>
+<div style={{ display: "flex", padding: 12, gap: 8, flexFlow: "row wrap" }}>
   <GridAvatar />
-  <GridAvatar src={[getAvatarUrl('user_ji')]} />
-  <GridAvatar src={[getAvatarUrl('user_wayshev'), getAvatarUrl('user_mm')]} />
-  <GridAvatar src={[getAvatarUrl('user_arthurstam'), getAvatarUrl('user_xyz'), getAvatarUrl('user_ox')]} />
-  <GridAvatar src={[getAvatarUrl('user_ilyagrshn'), getAvatarUrl('user_tc'), getAvatarUrl('user_lihachyov'), getAvatarUrl('user_va')]} />
+  <GridAvatar src={[getAvatarUrl("user_ji")]} />
+  <GridAvatar src={[getAvatarUrl("user_wayshev"), getAvatarUrl("user_mm")]} />
+  <GridAvatar
+    src={[
+      getAvatarUrl("user_arthurstam"),
+      getAvatarUrl("user_xyz"),
+      getAvatarUrl("user_ox"),
+    ]}
+  />
+  <GridAvatar
+    src={[
+      getAvatarUrl("user_ilyagrshn"),
+      getAvatarUrl("user_tc"),
+      getAvatarUrl("user_lihachyov"),
+      getAvatarUrl("user_va"),
+    ]}
+  />
 </div>
 ```

package/src/components/Group/Group.tsx

@@ -1,16 +1,23 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import { HasRootRef } from '../../types';
-import { usePlatform } from '../../hooks/usePlatform';
-import Separator from '../Separator/Separator';
-import { hasReactNode } from '../../lib/utils';
-import Caption from '../Typography/Caption/Caption';
-import { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';
-import ModalRootContext from '../ModalRoot/ModalRootContext';
-import './Group.css';
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { HasRootRef } from "../../types";
+import { usePlatform } from "../../hooks/usePlatform";
+import Separator from "../Separator/Separator";
+import { hasReactNode } from "../../lib/utils";
+import Caption from "../Typography/Caption/Caption";
+import {
+  withAdaptivity,
+  AdaptivityProps,
+  SizeType,
+} from "../../hoc/withAdaptivity";
+import ModalRootContext from "../ModalRoot/ModalRootContext";
+import "./Group.css";
 
-export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttributes<HTMLElement>, AdaptivityProps {
+export interface GroupProps
+  extends HasRootRef<HTMLElement>,
+    React.HTMLAttributes<HTMLElement>,
+    AdaptivityProps {
   header?: React.ReactNode;
   description?: React.ReactNode;
   /**
@@ -18,25 +25,35 @@ export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttribute
     hide – разделитель всегда спрятан,
     auto – разделитель рисуется автоматически между соседними группами.
    */
-  separator?: 'show' | 'hide' | 'auto';
+  separator?: "show" | "hide" | "auto";
   /**
    * Режим отображения. Если установлен 'card', выглядит как карточка c
    * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.
    * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах
    * по умолчанию 'plain'.
    */
-  mode?: 'plain' | 'card';
+  mode?: "plain" | "card";
 }
 
 const Group: React.FC<GroupProps> = (props: GroupProps) => {
-  const { header, description, children, separator, getRootRef, mode, sizeX, ...restProps } = props;
+  const {
+    header,
+    description,
+    children,
+    separator,
+    getRootRef,
+    mode,
+    sizeX,
+    ...restProps
+  } = props;
   const { isInsideModal } = React.useContext(ModalRootContext);
   const platform = usePlatform();
 
-  let computedMode: GroupProps['mode'] = mode;
+  let computedMode: GroupProps["mode"] = mode;
 
   if (!mode) {
-    computedMode = sizeX === SizeType.COMPACT || isInsideModal ? 'plain' : 'card';
+    computedMode =
+      sizeX === SizeType.COMPACT || isInsideModal ? "plain" : "card";
   }
 
   return (
@@ -44,23 +61,27 @@ const Group: React.FC<GroupProps> = (props: GroupProps) => {
       {...restProps}
       ref={getRootRef}
       vkuiClass={classNames(
-        getClassName('Group', platform),
+        getClassName("Group", platform),
         `Group--sizeX-${sizeX}`,
-        `Group--${computedMode}`,
+        `Group--${computedMode}`
       )}
     >
       <div vkuiClass="Group__inner">
         {header}
         {children}
-        {hasReactNode(description) && <Caption vkuiClass="Group__description" weight="regular" level="1">{description}</Caption>}
+        {hasReactNode(description) && (
+          <Caption vkuiClass="Group__description" weight="regular" level="1">
+            {description}
+          </Caption>
+        )}
       </div>
 
-      {separator !== 'hide' && (
+      {separator !== "hide" && (
         <Separator
-          vkuiClass={classNames('Group__separator', {
-            'Group__separator--force': separator === 'show',
+          vkuiClass={classNames("Group__separator", {
+            "Group__separator--force": separator === "show",
           })}
-          expanded={computedMode === 'card'}
+          expanded={computedMode === "card"}
         />
       )}
     </section>
@@ -68,7 +89,7 @@ const Group: React.FC<GroupProps> = (props: GroupProps) => {
 };
 
 Group.defaultProps = {
-  separator: 'auto',
+  separator: "auto",
 };
 
 export default withAdaptivity(Group, { sizeX: true });

package/src/components/Group/Readme.md

@@ -1,70 +1,88 @@
 Группа – базовый компонент для группировки контента по смыслу.
 
 ```jsx { "props": { "layout": false, "adaptivity": true } }
-const MODAL_NAME = 'modal'
+const MODAL_NAME = "modal";
 
 class App extends React.Component {
   constructor() {
     this.state = {
-      isModalOpened: false
-    }
+      isModalOpened: false,
+    };
   }
 
   renderGroup() {
     return (
-    <>
-      <Group>
-        <Group mode="plain">
-          <SimpleCell indicator="+7 ••• •• •• 96" before={<Icon28PhoneOutline />}>
-            Номер телефона
-          </SimpleCell>
-          <SimpleCell indicator="g•••@gmail.com" before={<Icon28MailOutline />}>
-            Email
-          </SimpleCell>
+      <>
+        <Group>
+          <Group mode="plain">
+            <SimpleCell
+              indicator="+7 ••• •• •• 96"
+              before={<Icon28PhoneOutline />}
+            >
+              Номер телефона
+            </SimpleCell>
+            <SimpleCell
+              indicator="g•••@gmail.com"
+              before={<Icon28MailOutline />}
+            >
+              Email
+            </SimpleCell>
+          </Group>
+          <Group mode="plain">
+            <SimpleCell
+              indicator="Обновлён 3 года назад"
+              before={<Icon28KeyOutline />}
+            >
+              Пароль
+            </SimpleCell>
+            <SimpleCell
+              indicator="Вкл."
+              before={<Icon28CheckShieldDeviceOutline />}
+            >
+              Подтверждение входа
+            </SimpleCell>
+            <SimpleCell indicator="2" before={<Icon28DevicesOutline />}>
+              Привязанные устройства
+            </SimpleCell>
+          </Group>
         </Group>
-        <Group mode="plain">
-          <SimpleCell indicator="Обновлён 3 года назад" before={<Icon28KeyOutline />}>
-            Пароль
-          </SimpleCell>
-          <SimpleCell indicator="Вкл." before={<Icon28CheckShieldDeviceOutline />}>
-            Подтверждение входа
+
+        <Group header={<Header>Последняя активность</Header>}>
+          <SimpleCell
+            after={
+              <IconButton aria-label="Подробнее">
+                <Icon16MoreVertical />
+              </IconButton>
+            }
+            description="Санкт-Петербург, Россия"
+            before={<Avatar size={32} mode="app" />}
+          >
+            VK · Приложение для iPhone
           </SimpleCell>
-          <SimpleCell indicator="2" before={<Icon28DevicesOutline />}>
-            Привязанные устройства
+          <SimpleCell
+            after={
+              <IconButton aria-label="Подробнее">
+                <Icon16MoreVertical />
+              </IconButton>
+            }
+            description="Санкт-Петербург, Россия"
+            before={<Avatar size={32} mode="app" />}
+          >
+            VK · Браузер Chrome для macOS
           </SimpleCell>
+          <CellButton>Показать историю активности</CellButton>
+          <CellButton mode="danger">Завершить все остальные сеансы</CellButton>
         </Group>
-      </Group>
 
-      <Group
-        header={<Header>Последняя активность</Header>}
-      >
-        <SimpleCell 
-          after={<IconButton aria-label="Подробнее"><Icon16MoreVertical /></IconButton>} 
-          description="Санкт-Петербург, Россия" 
-          before={<Avatar size={32} mode="app" />}
-        >
-          VK · Приложение для iPhone
-        </SimpleCell>
-        <SimpleCell 
-          after={<IconButton aria-label="Подробнее"><Icon16MoreVertical /></IconButton>} 
-          description="Санкт-Петербург, Россия" 
-          before={<Avatar size={32} mode="app" />}
+        <Group
+          header={<Header>Адреса</Header>}
+          description="Для использования в мини-приложениях, Delivery Cub, VK Taxi и других сервисах ВКонтакте. Эти адреса видны только Вам."
         >
-          VK · Браузер Chrome для macOS
-        </SimpleCell>
-        <CellButton>Показать историю активности</CellButton>
-        <CellButton mode="danger">Завершить все остальные сеансы</CellButton>
-      </Group>
-      
-      <Group 
-        header={<Header>Адреса</Header>}
-        description="Для использования в мини-приложениях, Delivery Cub, VK Taxi и других сервисах ВКонтакте. Эти адреса видны только Вам."
-      >
-        <CellButton>Добавить домашний адрес</CellButton>
-        <CellButton>Добавить рабочий адрес</CellButton>
-      </Group> 
-    </>   
-    )  
+          <CellButton>Добавить домашний адрес</CellButton>
+          <CellButton>Добавить рабочий адрес</CellButton>
+        </Group>
+      </>
+    );
   }
 
   render() {
@@ -78,8 +96,22 @@ class App extends React.Component {
           onClose={() => this.setState({ isModalOpened: false })}
           header={
             <ModalPageHeader
-              left={this.props.platform !== IOS && <PanelHeaderClose onClick={() => this.setState({ isModalOpened: false })} />}
-              right={this.props.platform === IOS && <PanelHeaderButton onClick={() => this.setState({ isModalOpened: false })}><Icon24Dismiss /></PanelHeaderButton>}
+              left={
+                this.props.platform !== IOS && (
+                  <PanelHeaderClose
+                    onClick={() => this.setState({ isModalOpened: false })}
+                  />
+                )
+              }
+              right={
+                this.props.platform === IOS && (
+                  <PanelHeaderButton
+                    onClick={() => this.setState({ isModalOpened: false })}
+                  >
+                    <Icon24Dismiss />
+                  </PanelHeaderButton>
+                )
+              }
             >
               Group в модальном окне
             </ModalPageHeader>
@@ -93,29 +125,32 @@ class App extends React.Component {
     return (
       <SplitLayout modal={modal}>
         <SplitCol>
-        <View activePanel="group">
-          <Panel id="group">
-            <PanelHeader>
-              Group
-            </PanelHeader>
+          <View activePanel="group">
+            <Panel id="group">
+              <PanelHeader>Group</PanelHeader>
 
-            {this.renderGroup()}
+              {this.renderGroup()}
 
-            <Group header={<Header mode="secondary">Модальное окно с Group</Header>}>
-              <SimpleCell onClick={() => this.setState({ isModalOpened: true })}>
-                Открыть Group в модальном окне
-              </SimpleCell>
-            </Group>
-          </Panel>
-        </View>
+              <Group
+                header={
+                  <Header mode="secondary">Модальное окно с Group</Header>
+                }
+              >
+                <SimpleCell
+                  onClick={() => this.setState({ isModalOpened: true })}
+                >
+                  Открыть Group в модальном окне
+                </SimpleCell>
+              </Group>
+            </Panel>
+          </View>
         </SplitCol>
       </SplitLayout>
-    )
+    );
   }
 }
 
 const AppWithPlatform = withPlatform(App);
 
-
 <AppWithPlatform />;
 ```