@vkontakte/vkui 4.23.0 → 4.24.0

package/src/components/Removable/Removable.tsx

@@ -1,18 +1,18 @@
-import * as React from 'react';
-import { HasRootRef } from '../../types';
-import { classNames } from '../../lib/classNames';
-import { getTitleFromChildren, noop } from '../../lib/utils';
-import { useExternRef } from '../../hooks/useExternRef';
-import { usePlatform } from '../../hooks/usePlatform';
-import { getClassName } from '../../helpers/getClassName';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { useDOM } from '../../lib/dom';
-import { ANDROID, IOS, VKCOM } from '../../lib/platform';
-import { Icon24Cancel } from '@vkontakte/icons';
-import IconButton from '../IconButton/IconButton';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
-import Tappable from '../Tappable/Tappable';
-import './Removable.css';
+import * as React from "react";
+import { HasRootRef } from "../../types";
+import { classNames } from "../../lib/classNames";
+import { getTitleFromChildren, noop } from "../../lib/utils";
+import { useExternRef } from "../../hooks/useExternRef";
+import { usePlatform } from "../../hooks/usePlatform";
+import { getClassName } from "../../helpers/getClassName";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useDOM } from "../../lib/dom";
+import { ANDROID, IOS, VKCOM } from "../../lib/platform";
+import { Icon24Cancel } from "@vkontakte/icons";
+import IconButton from "../IconButton/IconButton";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import Tappable from "../Tappable/Tappable";
+import "./Removable.css";
 
 export interface RemovableProps {
   /**
@@ -25,7 +25,8 @@ export interface RemovableProps {
   onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;
 }
 
-interface RemovableIosOwnProps extends Pick<RemovableProps, 'removePlaceholder'> {
+interface RemovableIosOwnProps
+  extends Pick<RemovableProps, "removePlaceholder"> {
   onRemoveClick?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;
   removePlaceholderString?: string;
 }
@@ -41,7 +42,7 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
   const removeButtonRef = React.useRef(null);
   const [removeOffset, updateRemoveOffset] = React.useState(0);
 
-  useGlobalEventListener(window, 'click', () => {
+  useGlobalEventListener(window, "click", () => {
     if (removeOffset > 0) {
       updateRemoveOffset(0);
     }
@@ -95,19 +96,22 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
   );
 };
 
-interface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps, HasRootRef<HTMLDivElement> {
+interface RemovableOwnProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    RemovableProps,
+    HasRootRef<HTMLDivElement> {
   /**
    * Расположение кнопки удаления.
    */
-  align?: 'start' | 'center';
+  align?: "start" | "center";
 }
 
 export const Removable: React.FC<RemovableOwnProps> = ({
   getRootRef,
   children,
   onRemove = noop,
-  removePlaceholder = 'Удалить',
-  align = 'center',
+  removePlaceholder = "Удалить",
+  align = "center",
   ...restProps
 }: RemovableOwnProps) => {
   const platform = usePlatform();
@@ -120,16 +124,17 @@ export const Removable: React.FC<RemovableOwnProps> = ({
     onRemove(e);
   };
 
-  const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);
+  const removePlaceholderString: string =
+    getTitleFromChildren(removePlaceholder);
 
   return (
     <div
       {...restProps}
       ref={ref}
       vkuiClass={classNames(
-        getClassName('Removable', platform),
+        getClassName("Removable", platform),
         `Removable--${align}`,
-        `Removable--sizeY-${sizeY}`,
+        `Removable--sizeY-${sizeY}`
       )}
     >
       {(platform === ANDROID || platform === VKCOM) && (

package/src/components/RichCell/Readme.md

@@ -1,14 +1,12 @@
 ```jsx
 <View activePanel="list">
   <Panel id="list">
-    <PanelHeader>
-      RichCell
-    </PanelHeader>
+    <PanelHeader>RichCell</PanelHeader>
     <Group>
       <RichCell
         disabled
         multiline
-        before={<Avatar size={72} src={getAvatarUrl('user_ti')} />}
+        before={<Avatar size={72} src={getAvatarUrl("user_ti")} />}
         text="Держи за обед в EZO"
         caption="Вчера в 20:30"
         after="+ 1 500 ₽"
@@ -24,16 +22,18 @@
       <RichCell
         disabled
         after={<Icon28UserAddOutline />}
-        before={<Avatar size={72} src={getAvatarUrl('user_ilyagrshn')} />}
+        before={<Avatar size={72} src={getAvatarUrl("user_ilyagrshn")} />}
         caption="Команда ВКонтакте, Санкт-Петербург"
         bottom={
           <UsersStack
             photos={[
-              getAvatarUrl('user_ox'),
-              getAvatarUrl('user_vitalyavolyn'),
-              getAvatarUrl('user_eee'),
+              getAvatarUrl("user_ox"),
+              getAvatarUrl("user_vitalyavolyn"),
+              getAvatarUrl("user_eee"),
             ]}
-          >73 общих друга</UsersStack>
+          >
+            73 общих друга
+          </UsersStack>
         }
         actions={
           <React.Fragment>
@@ -45,7 +45,7 @@
         Илья Гришин
       </RichCell>
       <RichCell
-        before={<Avatar size={48} src={getAvatarUrl('user_lihachyov')} />}
+        before={<Avatar size={48} src={getAvatarUrl("user_lihachyov")} />}
         text="Поездка в Лиссабон"
         caption="Вчера в 20:30"
         after="+ 1 500 ₽"
@@ -53,7 +53,7 @@
         Михаил Лихачев
       </RichCell>
       <RichCell
-        before={<Avatar size={48} src={getAvatarUrl('user_tc')} />}
+        before={<Avatar size={48} src={getAvatarUrl("user_tc")} />}
         caption="Вчера в 20:30"
         after="- 700 ₽"
       >

package/src/components/RichCell/RichCell.tsx

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import { usePlatform } from '../../hooks/usePlatform';
-import { getClassName } from '../../helpers/getClassName';
-import Tappable, { TappableProps } from '../Tappable/Tappable';
-import { hasReactNode } from '../../lib/utils';
-import Text from '../Typography/Text/Text';
-import Subhead from '../Typography/Subhead/Subhead';
-import { withAdaptivity } from '../../hoc/withAdaptivity';
-import './RichCell.css';
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import { getClassName } from "../../helpers/getClassName";
+import Tappable, { TappableProps } from "../Tappable/Tappable";
+import { hasReactNode } from "../../lib/utils";
+import Text from "../Typography/Text/Text";
+import Subhead from "../Typography/Subhead/Subhead";
+import { withAdaptivity } from "../../hoc/withAdaptivity";
+import "./RichCell.css";
 
 export interface RichCellProps extends TappableProps {
   /**
@@ -58,15 +58,13 @@ const RichCell: React.FC<RichCellProps> = ({
   return (
     <Tappable
       {...restProps}
-      vkuiClass={
-        classNames(
-          getClassName('RichCell', platform),
-          {
-            'RichCell--mult': multiline,
-          },
-          `RichCell--sizeY-${sizeY}`,
-        )
-      }
+      vkuiClass={classNames(
+        getClassName("RichCell", platform),
+        {
+          "RichCell--mult": multiline,
+        },
+        `RichCell--sizeY-${sizeY}`
+      )}
     >
       {before}
       <div vkuiClass="RichCell__in">
@@ -74,14 +72,30 @@ const RichCell: React.FC<RichCellProps> = ({
         {after}
         <Text weight="medium" vkuiClass="RichCell__content">
           <div vkuiClass="RichCell__children">{children}</div>
-          {hasReactNode(after) && <div vkuiClass="RichCell__after">{after}</div>}
+          {hasReactNode(after) && (
+            <div vkuiClass="RichCell__after">{after}</div>
+          )}
         </Text>
-        {hasReactNode(text) && <Text weight="regular" vkuiClass="RichCell__text">{text}</Text>}
-        {hasReactNode(caption) && <Subhead Component="span" weight="regular" vkuiClass="RichCell__caption">{caption}</Subhead>}
+        {hasReactNode(text) && (
+          <Text weight="regular" vkuiClass="RichCell__text">
+            {text}
+          </Text>
+        )}
+        {hasReactNode(caption) && (
+          <Subhead
+            Component="span"
+            weight="regular"
+            vkuiClass="RichCell__caption"
+          >
+            {caption}
+          </Subhead>
+        )}
         {(hasReactNode(bottom) || hasReactNode(actions)) && (
           <div vkuiClass="RichCell__bottom">
             {bottom}
-            {hasReactNode(actions) && <div vkuiClass="RichCell__actions">{actions}</div>}
+            {hasReactNode(actions) && (
+              <div vkuiClass="RichCell__actions">{actions}</div>
+            )}
           </div>
         )}
       </div>

package/src/components/RichTooltip/Readme.md

@@ -1,4 +1,8 @@
-Тултип, открывающийся при наведеннии мыши на `children`. В отличие от [TextTooltip](#/TextTooltip), имеет меньше ограничений 
+> **Важно**
+>
+> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
+
+Тултип, открывающийся при наведеннии мыши на `children`. В отличие от [TextTooltip](#/TextTooltip), имеет меньше ограничений
 по содержимому. Компонент всё ещё предназначен для информирования пользователей, но внутри допускаются кнопки, ссылки, картинки.
 
 ```jsx { "props": { "layout": false, "iframe": true } }

package/src/components/RichTooltip/RichTooltip.css

@@ -1,8 +1,8 @@
 .RichTooltip {
-  box-shadow: 0 0 4px rgba(0, 0, 0, .04), 0 4px 32px rgba(0, 0, 0, .16);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.04), 0 4px 32px rgba(0, 0, 0, 0.16);
   border-radius: 8px;
   background: var(--background_content);
-  animation: vkui-popper-fadein .2s ease;
+  animation: vkui-popper-fadein 0.2s ease;
 }
 
 .RichTooltip__arrow {

package/src/components/RichTooltip/RichTooltip.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import { HoverPopper } from '../HoverPopper/HoverPopper';
-import { getClassName } from '../../helpers/getClassName';
-import { usePlatform } from '../../hooks/usePlatform';
-import { useAppearance } from '../../hooks/useAppearance';
-import { classNames } from '../../lib/classNames';
-import { prefixClass } from '../../lib/prefixClass';
-import { Placement } from '../Popper/Popper';
-import './RichTooltip.css';
+import * as React from "react";
+import { HoverPopper } from "../HoverPopper/HoverPopper";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useAppearance } from "../../hooks/useAppearance";
+import { classNames } from "../../lib/classNames";
+import { prefixClass } from "../../lib/prefixClass";
+import { Placement } from "../Popper/Popper";
+import "./RichTooltip.css";
 
 // Приходится избегать экстендов от HoverPopperProps и PopperProps, потому что react-docgen не умеет в Omit.
 // Ждём либо фикса react-docgen (что вряд ли), либо переезда на react-docgen-typescript, где такой проблемы нет.
@@ -51,17 +51,21 @@ export interface RichTooltipProps {
   arrow?: boolean;
 }
 
-export const RichTooltip: React.FC<RichTooltipProps> = ({ children, arrow = true, ...popperProps }: RichTooltipProps) => {
+export const RichTooltip: React.FC<RichTooltipProps> = ({
+  children,
+  arrow = true,
+  ...popperProps
+}: RichTooltipProps) => {
   const platform = usePlatform();
   const appearance = useAppearance();
 
   return (
     <HoverPopper
-      vkuiClass={classNames(getClassName('RichTooltip', platform), {
+      vkuiClass={classNames(getClassName("RichTooltip", platform), {
         [`RichTooltip--${appearance}`]: !!appearance,
       })}
       arrow={arrow}
-      arrowClassName={prefixClass('RichTooltip__arrow')}
+      arrowClassName={prefixClass("RichTooltip__arrow")}
       {...popperProps}
     >
       {children}

package/src/components/Root/Readme.md

@@ -5,7 +5,7 @@
 Как только он заканчивается, вызывается свойство-функция `onTransition`.
 
 ```jsx
-const [activeView, setActiveView] = useState('view1');
+const [activeView, setActiveView] = useState("view1");
 
 <Root activeView={activeView}>
   <View activePanel="panel1.1" id="view1">
@@ -13,7 +13,7 @@ const [activeView, setActiveView] = useState('view1');
       <PanelHeader>View 1</PanelHeader>
       <Group>
         <div style={{ height: 200 }} />
-        <CellButton onClick={ () => setActiveView('view2') }>
+        <CellButton onClick={() => setActiveView("view2")}>
           Open View 2
         </CellButton>
         <div style={{ height: 600 }} />
@@ -25,12 +25,12 @@ const [activeView, setActiveView] = useState('view1');
       <PanelHeader>View 2</PanelHeader>
       <Group>
         <div style={{ height: 200 }} />
-        <CellButton onClick={ () => setActiveView('view1') }>
+        <CellButton onClick={() => setActiveView("view1")}>
           Back to View 1
         </CellButton>
         <div style={{ height: 600 }} />
       </Group>
     </Panel>
   </View>
-</Root>
+</Root>;
 ```

package/src/components/Root/Root.css

@@ -73,30 +73,30 @@
   left: 0;
   top: 0;
   display: block;
-  content: '';
+  content: "";
   background-color: #000;
   z-index: 6;
 }
 
 .Root--ios .Root__view--show-back::after {
-  animation: vkui-root-ios-animation-show-back .6s var(--ios-easing);
+  animation: vkui-root-ios-animation-show-back 0.6s var(--ios-easing);
 }
 
 .Root--ios .Root__view--hide-forward::after {
-  animation: vkui-root-ios-animation-hide-forward .6s var(--ios-easing);
+  animation: vkui-root-ios-animation-hide-forward 0.6s var(--ios-easing);
 }
 
 .Root--ios .Root__view--show-forward {
-  animation: vkui-root-ios-animation-show-forward .6s var(--ios-easing);
+  animation: vkui-root-ios-animation-show-forward 0.6s var(--ios-easing);
 }
 
 .Root--ios .Root__view--hide-back {
-  animation: vkui-root-ios-animation-hide-back .6s var(--ios-easing);
+  animation: vkui-root-ios-animation-hide-back 0.6s var(--ios-easing);
 }
 
 @keyframes vkui-root-ios-animation-show-back {
   from {
-    opacity: .3;
+    opacity: 0.3;
   }
 
   to {
@@ -110,7 +110,7 @@
   }
 
   to {
-    opacity: .3;
+    opacity: 0.3;
   }
 }
 
@@ -143,12 +143,12 @@
 
 .Root--android .Root__view--show-forward,
 .Root--vkcom .Root__view--show-forward {
-  animation: vkui-root-android-animation-show-forward .3s var(--android-easing);
+  animation: vkui-root-android-animation-show-forward 0.3s var(--android-easing);
 }
 
 .Root--android .Root__view--hide-back,
 .Root--vkcom .Root__view--hide-back {
-  animation: vkui-root-android-animation-hide-back .3s var(--android-easing);
+  animation: vkui-root-android-animation-hide-back 0.3s var(--android-easing);
 }
 
 @keyframes vkui-root-android-animation-hide-back {

package/src/components/Root/Root.tsx

@@ -1,23 +1,25 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import { getClassName } from '../../helpers/getClassName';
-import { IOS } from '../../lib/platform';
-import { ConfigProviderContext } from '../ConfigProvider/ConfigProviderContext';
-import { SplitColContext } from '../SplitCol/SplitCol';
-import { AppRootPortal } from '../AppRoot/AppRootPortal';
-import { ScrollContext } from '../AppRoot/ScrollContext';
-import { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';
-import { getNavId, NavIdProps } from '../../lib/getNavId';
-import { warnOnce } from '../../lib/warnOnce';
-import { useDOM } from '../../lib/dom';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { useTimeout } from '../../hooks/useTimeout';
-import { usePlatform } from '../../hooks/usePlatform';
-import './Root.css';
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { getClassName } from "../../helpers/getClassName";
+import { IOS } from "../../lib/platform";
+import { ConfigProviderContext } from "../ConfigProvider/ConfigProviderContext";
+import { SplitColContext } from "../SplitCol/SplitCol";
+import { AppRootPortal } from "../AppRoot/AppRootPortal";
+import { ScrollContext } from "../AppRoot/ScrollContext";
+import { NavTransitionProvider } from "../NavTransitionContext/NavTransitionContext";
+import { getNavId, NavIdProps } from "../../lib/getNavId";
+import { warnOnce } from "../../lib/warnOnce";
+import { useDOM } from "../../lib/dom";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { useTimeout } from "../../hooks/useTimeout";
+import { usePlatform } from "../../hooks/usePlatform";
+import "./Root.css";
 
-const warn = warnOnce('Root');
+const warn = warnOnce("Root");
 
-export interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {
+export interface RootProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    NavIdProps {
   activeView: string;
   onTransition?(params: { isBack: boolean; from: string; to: string }): void;
   /**
@@ -42,8 +44,11 @@ export interface RootState {
 }
 
 const Root: React.FC<RootProps> = ({
-  popout = null, modal, children,
-  activeView: _activeView, onTransition,
+  popout = null,
+  modal,
+  children,
+  activeView: _activeView,
+  onTransition,
   nav,
   ...restProps
 }: RootProps) => {
@@ -53,25 +58,34 @@ const Root: React.FC<RootProps> = ({
   const scrolls = React.useRef<Record<string, number>>({}).current;
   const viewNodes = React.useRef<Record<string, HTMLElement>>({}).current;
 
-  const { transitionMotionEnabled = true } = React.useContext(ConfigProviderContext);
+  const { transitionMotionEnabled = true } = React.useContext(
+    ConfigProviderContext
+  );
   const { animate } = React.useContext(SplitColContext);
   const disableAnimation = !transitionMotionEnabled || !animate;
 
   const views = React.Children.toArray(children) as React.ReactElement[];
 
-  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({
-    activeView: _activeView,
-    transition: false,
-  });
+  const [{ prevView, activeView, transition, isBack }, _setState] =
+    React.useState<RootState>({
+      activeView: _activeView,
+      transition: false,
+    });
   const transitionTo = (panel: string) => {
     if (panel !== activeView) {
       const viewIds = views.map((view) => getNavId(view.props, warn));
       const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);
       scrolls[activeView] = scroll.getScroll().y;
-      _setState({ activeView: panel, prevView: activeView, transition: true, isBack });
+      _setState({
+        activeView: panel,
+        prevView: activeView,
+        transition: true,
+        isBack,
+      });
     }
   };
-  const finishTransition = () => _setState({ activeView, prevView, isBack, transition: false });
+  const finishTransition = () =>
+    _setState({ activeView, prevView, isBack, transition: false });
 
   useIsomorphicLayoutEffect(() => {
     (document.activeElement as HTMLElement)?.blur();
@@ -87,7 +101,10 @@ const Root: React.FC<RootProps> = ({
     }
   }, [transition]);
 
-  const fallbackTransition = useTimeout(finishTransition, platform === IOS ? 600 : 300);
+  const fallbackTransition = useTimeout(
+    finishTransition,
+    platform === IOS ? 600 : 300
+  );
   React.useEffect(() => {
     if (!transition) {
       fallbackTransition.clear();
@@ -97,45 +114,61 @@ const Root: React.FC<RootProps> = ({
   }, [transition]);
 
   const onAnimationEnd = (e: React.AnimationEvent) => {
-    if ([
-      'vkui-root-android-animation-hide-back',
-      'vkui-root-android-animation-show-forward',
-      'vkui-root-ios-animation-hide-back',
-      'vkui-root-ios-animation-show-forward',
-    ].includes(e.animationName)) {
+    if (
+      [
+        "vkui-root-android-animation-hide-back",
+        "vkui-root-android-animation-show-forward",
+        "vkui-root-ios-animation-hide-back",
+        "vkui-root-ios-animation-show-forward",
+      ].includes(e.animationName)
+    ) {
       finishTransition();
     }
   };
 
   return (
-    <div {...restProps} vkuiClass={classNames(getClassName('Root', platform), {
-      'Root--transition': !disableAnimation && transition,
-      'Root--no-motion': disableAnimation,
-    })}>
+    <div
+      {...restProps}
+      vkuiClass={classNames(getClassName("Root", platform), {
+        "Root--transition": !disableAnimation && transition,
+        "Root--no-motion": disableAnimation,
+      })}
+    >
       {views.map((view) => {
         const viewId = getNavId(view.props, warn);
         if (viewId !== activeView && !(transition && viewId === prevView)) {
           return null;
         }
-        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);
-        const compensateScroll = transition && (viewId === prevView || isBack && viewId === activeView);
+        const isTransitionTarget =
+          transition && viewId === (isBack ? prevView : activeView);
+        const compensateScroll =
+          transition &&
+          (viewId === prevView || (isBack && viewId === activeView));
         return (
           <div
             key={viewId}
-            ref={(e) => viewNodes[viewId] = e}
+            ref={(e) => (viewNodes[viewId] = e)}
             onAnimationEnd={isTransitionTarget ? onAnimationEnd : null}
-            vkuiClass={classNames('Root__view', {
-              'Root__view--hide-back': transition && viewId === prevView && isBack,
-              'Root__view--hide-forward': transition && viewId === prevView && !isBack,
-              'Root__view--show-back': transition && viewId === activeView && isBack,
-              'Root__view--show-forward': transition && viewId === activeView && !isBack,
-              'Root__view--active': !transition && viewId === activeView,
+            vkuiClass={classNames("Root__view", {
+              "Root__view--hide-back":
+                transition && viewId === prevView && isBack,
+              "Root__view--hide-forward":
+                transition && viewId === prevView && !isBack,
+              "Root__view--show-back":
+                transition && viewId === activeView && isBack,
+              "Root__view--show-forward":
+                transition && viewId === activeView && !isBack,
+              "Root__view--active": !transition && viewId === activeView,
             })}
           >
-            <NavTransitionProvider entering={transition && viewId === activeView}>
+            <NavTransitionProvider
+              entering={transition && viewId === activeView}
+            >
               <div
                 vkuiClass="Root__scrollCompensation"
-                style={{ marginTop: compensateScroll ? -scrolls[viewId] : null }}
+                style={{
+                  marginTop: compensateScroll ? -scrolls[viewId] : null,
+                }}
               >
                 {view}
               </div>

package/src/components/ScreenSpinner/Readme.md

@@ -6,36 +6,38 @@
 
 ```jsx { "props": { "layout": false, "adaptivity": true } }
 class Example extends React.Component {
-
-  constructor (props) {
-
+  constructor(props) {
     this.state = {
-      popout: null
-    }
+      popout: null,
+    };
   }
 
-  onClick () {
+  onClick() {
     this.setState({ popout: <ScreenSpinner /> });
-    setTimeout(() => { this.setState({ popout: null }) }, 2000);
+    setTimeout(() => {
+      this.setState({ popout: null });
+    }, 2000);
   }
 
-  render () {
+  render() {
     return (
       <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>
+          <View activePanel="spinner">
+            <Panel id="spinner">
+              <PanelHeader>ScreenSpinner</PanelHeader>
+              <Group>
+                <CellButton onClick={this.onClick.bind(this)}>
+                  Запустить долгий процесс
+                </CellButton>
+              </Group>
+            </Panel>
+          </View>
         </SplitCol>
       </SplitLayout>
-    )
+    );
   }
 }
 
-<Example />
+<Example />;
 ```