@vkontakte/vkui 4.22.2 → 4.25.1

package/src/components/FixedLayout/FixedLayout.tsx

@@ -1,19 +1,19 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import { HasRef, HasRootRef } from '../../types';
-import { SplitColContext } from '../SplitCol/SplitCol';
-import { TooltipContainer } from '../Tooltip/TooltipContainer';
-import { useDOM } from '../../lib/dom';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
-import { usePlatform } from '../../hooks/usePlatform';
-import './FixedLayout.css';
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { HasRef, HasRootRef } from "../../types";
+import { SplitColContext } from "../SplitCol/SplitCol";
+import { TooltipContainer } from "../Tooltip/TooltipContainer";
+import { useDOM } from "../../lib/dom";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import { usePlatform } from "../../hooks/usePlatform";
+import "./FixedLayout.css";
 
-export interface FixedLayoutProps extends
-  React.HTMLAttributes<HTMLDivElement>,
-  HasRootRef<HTMLDivElement>,
-  HasRef<HTMLDivElement> {
-  vertical?: 'top' | 'bottom';
+export interface FixedLayoutProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement>,
+    HasRef<HTMLDivElement> {
+  vertical?: "top" | "bottom";
   /**
    * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.
    * Это часто необходимо для фиксированных кнопок в нижней части экрана.
@@ -22,37 +22,50 @@ export interface FixedLayoutProps extends
 }
 
 export interface FixedLayoutState {
-  position: 'absolute' | null;
+  position: "absolute" | null;
   top: number;
   bottom: number;
   width: string;
 }
 
 const FixedLayout: React.FC<FixedLayoutProps> = ({
-  children, style, vertical, getRootRef, getRef, filled,
+  children,
+  style,
+  vertical,
+  getRootRef,
+  getRef,
+  filled,
   ...restProps
 }: FixedLayoutProps) => {
   const platform = usePlatform();
-  const [width, setWidth] = React.useState<string>(null);
+  const [width, setWidth] = React.useState<string | undefined>(undefined);
   const { window } = useDOM();
   const { colRef } = React.useContext(SplitColContext);
-  const doResize = () => setWidth(colRef?.current ? `${colRef.current.offsetWidth}px` : null);
-  React.useEffect(doResize, []);
-  useGlobalEventListener(window, 'resize', doResize);
+  const doResize = () =>
+    setWidth(colRef?.current ? `${colRef.current.offsetWidth}px` : undefined);
+  React.useEffect(doResize, [colRef]);
+  useGlobalEventListener(window, "resize", doResize);
 
   return (
     <TooltipContainer
       {...restProps}
       fixed
       ref={getRootRef}
-      vkuiClass={classNames(getClassName('FixedLayout', platform), {
-        'FixedLayout--filled': filled,
-      }, `FixedLayout--${vertical}`)}
+      vkuiClass={classNames(
+        getClassName("FixedLayout", platform),
+        {
+          "FixedLayout--filled": filled,
+        },
+        `FixedLayout--${vertical}`
+      )}
       style={{ ...style, width }}
     >
-      <div vkuiClass="FixedLayout__in" ref={getRef}>{children}</div>
+      <div vkuiClass="FixedLayout__in" ref={getRef}>
+        {children}
+      </div>
     </TooltipContainer>
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default FixedLayout;

package/src/components/FixedLayout/Readme.md

@@ -9,60 +9,109 @@
 
 ```jsx
 class Example extends React.Component {
-
   constructor(props) {
     super(props);
 
     this.state = {
-      activeTab: 'groups'
-    }
+      activeTab: "groups",
+    };
   }
 
   render() {
     return (
       <View activePanel="fixedLayout">
         <Panel id="fixedLayout">
-          <PanelHeader>
-            Fixed layout
-          </PanelHeader>
+          <PanelHeader>Fixed layout</PanelHeader>
           <Group>
-          <FixedLayout vertical="top">
-            <Search />
-          </FixedLayout>
-          <Div style={{ paddingTop: 60, paddingBottom: 60, color: 'gray' }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sollicitudin lectus, a commodo sapien. Vivamus a urna leo. Integer iaculis dignissim urna, sit amet vestibulum diam bibendum a. Donec eu arcu ut augue porttitor faucibus. Vestibulum nec pretium tortor, sit amet congue nunc. Aenean ullamcorper ex sem, sed interdum quam consequat et. Vestibulum a ex non diam fringilla feugiat. Nunc eu tellus sed leo elementum cursus. Mauris blandit porta egestas. Curabitur eget justo elementum, malesuada lacus ut, congue mauris. Integer orci nisi, convallis vitae dapibus sit amet, molestie a risus. Aenean ultricies lacus eros, sit amet condimentum urna malesuada et. Sed quis dolor tempus orci fringilla volutpat in sed velit. Aenean aliquet bibendum pretium.
-            <br/>
-            <br/>
-            Cras pulvinar lobortis purus. Donec placerat suscipit leo vitae sodales. Phasellus convallis lorem vitae arcu finibus pellentesque. In imperdiet vel leo a euismod. Nam sed odio a neque venenatis suscipit a placerat magna. Mauris magna nisl, consequat nec augue vitae, ultricies scelerisque ante. Phasellus pharetra risus eget imperdiet sodales. Integer dignissim auctor semper. Nulla odio odio, euismod ut interdum in, bibendum sed massa. Proin rutrum molestie massa in ultrices. Donec eu euismod turpis, eget lobortis lorem. Nulla facilisi. Nam lacinia posuere turpis, sed laoreet turpis auctor nec.
-            <br/>
-            <br/>
-            Curabitur eu fermentum mauris. Phasellus malesuada consectetur mollis. Pellentesque pulvinar mauris turpis. Integer neque dolor, semper quis neque et, gravida commodo eros. Duis efficitur ex a turpis blandit tincidunt. Mauris sem mi, imperdiet quis ligula sit amet, fermentum vulputate felis. Phasellus eu ullamcorper dolor, porttitor pulvinar diam. Aliquam euismod, mauris nec varius lacinia, ligula libero vulputate leo, ut tristique massa nisi vitae tortor. Phasellus purus elit, gravida sit amet neque id, aliquam rutrum dui. Maecenas luctus sem vitae molestie porttitor. Cras viverra mauris risus, at sollicitudin ipsum interdum eu. Sed sit amet tempor enim.
-            <br/>
-            <br/>
-            In hac habitasse platea dictumst. Etiam luctus erat metus, quis efficitur quam vulputate quis. Duis ultricies non mauris condimentum molestie. Maecenas sollicitudin ex sem, quis ultrices libero blandit eu. Vivamus in turpis pulvinar, malesuada enim at, hendrerit magna. Proin eu nulla eget arcu pretium pharetra. Sed ullamcorper pulvinar est eu dapibus. Cras at varius justo. In ex odio, condimentum id pellentesque a, sodales ut diam.
-            <br/>
-            <br/>
-            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam aliquet tempor laoreet. Maecenas eu pulvinar diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas et elit eros. Quisque ullamcorper sodales nisi, eleifend aliquet metus venenatis in. Aliquam ornare a lacus in tincidunt. Cras vel tristique metus. Sed vitae nisl at nisl imperdiet sollicitudin. Sed sit amet enim in lectus imperdiet interdum condimentum et diam. Proin venenatis sit amet diam ac vulputate. Donec mauris orci, semper volutpat nunc ut, efficitur condimentum dolor. Vivamus in quam eget quam lacinia pharetra. Phasellus ipsum magna, aliquet id elit eget, cursus tincidunt ex. In rhoncus turpis turpis, et viverra ex malesuada vel. Donec nisi tellus, mollis et posuere vel, dictum eget neque.
-          </Div>
-          <FixedLayout filled vertical="bottom">
-            <Separator wide />
-            <Tabs>
-              <TabsItem
-                selected={this.state.activeTab === 'groups'}
-                onClick={() => this.setState({ activeTab: 'groups' })}
-              >176 сообществ</TabsItem>
-              <TabsItem
-                selected={this.state.activeTab === 'events'}
-                onClick={() => this.setState({ activeTab: 'events' })}
-              >9 событий</TabsItem>
-            </Tabs>
-          </FixedLayout>
+            <FixedLayout vertical="top">
+              <Search />
+            </FixedLayout>
+            <Div style={{ paddingTop: 60, paddingBottom: 60, color: "gray" }}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a
+              sollicitudin lectus, a commodo sapien. Vivamus a urna leo. Integer
+              iaculis dignissim urna, sit amet vestibulum diam bibendum a. Donec
+              eu arcu ut augue porttitor faucibus. Vestibulum nec pretium
+              tortor, sit amet congue nunc. Aenean ullamcorper ex sem, sed
+              interdum quam consequat et. Vestibulum a ex non diam fringilla
+              feugiat. Nunc eu tellus sed leo elementum cursus. Mauris blandit
+              porta egestas. Curabitur eget justo elementum, malesuada lacus ut,
+              congue mauris. Integer orci nisi, convallis vitae dapibus sit
+              amet, molestie a risus. Aenean ultricies lacus eros, sit amet
+              condimentum urna malesuada et. Sed quis dolor tempus orci
+              fringilla volutpat in sed velit. Aenean aliquet bibendum pretium.
+              <br />
+              <br />
+              Cras pulvinar lobortis purus. Donec placerat suscipit leo vitae sodales.
+              Phasellus convallis lorem vitae arcu finibus pellentesque. In imperdiet
+              vel leo a euismod. Nam sed odio a neque venenatis suscipit a placerat
+              magna. Mauris magna nisl, consequat nec augue vitae, ultricies scelerisque
+              ante. Phasellus pharetra risus eget imperdiet sodales. Integer dignissim
+              auctor semper. Nulla odio odio, euismod ut interdum in, bibendum sed
+              massa. Proin rutrum molestie massa in ultrices. Donec eu euismod turpis,
+              eget lobortis lorem. Nulla facilisi. Nam lacinia posuere turpis, sed
+              laoreet turpis auctor nec.
+              <br />
+              <br />
+              Curabitur eu fermentum mauris. Phasellus malesuada consectetur
+              mollis. Pellentesque pulvinar mauris turpis. Integer neque dolor,
+              semper quis neque et, gravida commodo eros. Duis efficitur ex a
+              turpis blandit tincidunt. Mauris sem mi, imperdiet quis ligula sit
+              amet, fermentum vulputate felis. Phasellus eu ullamcorper dolor,
+              porttitor pulvinar diam. Aliquam euismod, mauris nec varius
+              lacinia, ligula libero vulputate leo, ut tristique massa nisi
+              vitae tortor. Phasellus purus elit, gravida sit amet neque id,
+              aliquam rutrum dui. Maecenas luctus sem vitae molestie porttitor.
+              Cras viverra mauris risus, at sollicitudin ipsum interdum eu. Sed
+              sit amet tempor enim.
+              <br />
+              <br />
+              In hac habitasse platea dictumst. Etiam luctus erat metus, quis efficitur
+              quam vulputate quis. Duis ultricies non mauris condimentum molestie.
+              Maecenas sollicitudin ex sem, quis ultrices libero blandit eu. Vivamus
+              in turpis pulvinar, malesuada enim at, hendrerit magna. Proin eu nulla
+              eget arcu pretium pharetra. Sed ullamcorper pulvinar est eu dapibus.
+              Cras at varius justo. In ex odio, condimentum id pellentesque a, sodales
+              ut diam.
+              <br />
+              <br />
+              Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+              posuere cubilia Curae; Nam aliquet tempor laoreet. Maecenas eu
+              pulvinar diam. Pellentesque habitant morbi tristique senectus et
+              netus et malesuada fames ac turpis egestas. Maecenas et elit eros.
+              Quisque ullamcorper sodales nisi, eleifend aliquet metus venenatis
+              in. Aliquam ornare a lacus in tincidunt. Cras vel tristique metus.
+              Sed vitae nisl at nisl imperdiet sollicitudin. Sed sit amet enim
+              in lectus imperdiet interdum condimentum et diam. Proin venenatis
+              sit amet diam ac vulputate. Donec mauris orci, semper volutpat
+              nunc ut, efficitur condimentum dolor. Vivamus in quam eget quam
+              lacinia pharetra. Phasellus ipsum magna, aliquet id elit eget,
+              cursus tincidunt ex. In rhoncus turpis turpis, et viverra ex
+              malesuada vel. Donec nisi tellus, mollis et posuere vel, dictum
+              eget neque.
+            </Div>
+            <FixedLayout filled vertical="bottom">
+              <Separator wide />
+              <Tabs>
+                <TabsItem
+                  selected={this.state.activeTab === "groups"}
+                  onClick={() => this.setState({ activeTab: "groups" })}
+                >
+                  176 сообществ
+                </TabsItem>
+                <TabsItem
+                  selected={this.state.activeTab === "events"}
+                  onClick={() => this.setState({ activeTab: "events" })}
+                >
+                  9 событий
+                </TabsItem>
+              </Tabs>
+            </FixedLayout>
           </Group>
         </Panel>
       </View>
-    )
+    );
   }
 }
 
-<Example />
+<Example />;
 ```

package/src/components/FocusTrap/FocusTrap.tsx

@@ -1,24 +1,31 @@
-import * as React from 'react';
-import { useExternRef } from '../../hooks/useExternRef';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
-import { useTimeout } from '../../hooks/useTimeout';
-import { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';
-import { useDOM } from '../../lib/dom';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { noop } from '../../lib/utils';
-import { HasComponent, HasRootRef } from '../../types';
-import { AppRootContext } from '../AppRoot/AppRootContext';
+import * as React from "react";
+import { useExternRef } from "../../hooks/useExternRef";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import { useTimeout } from "../../hooks/useTimeout";
+import {
+  FOCUSABLE_ELEMENTS_LIST,
+  Keys,
+  pressedKey,
+} from "../../lib/accessibility";
+import { useDOM } from "../../lib/dom";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { noop } from "../../lib/utils";
+import { HasComponent, HasRootRef } from "../../types";
+import { AppRootContext } from "../AppRoot/AppRootContext";
 
 const FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();
 
-export interface FocusTrapProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
+export interface FocusTrapProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    HasRootRef<HTMLElement>,
+    HasComponent {
   onClose?: (props?: any) => void;
   restoreFocus?: boolean;
   timeout?: number;
 }
 
 export const FocusTrap: React.FC<FocusTrapProps> = ({
-  Component = 'div',
+  Component = "div",
   onClose = noop,
   restoreFocus = true,
   timeout = 0,
@@ -29,16 +36,22 @@ export const FocusTrap: React.FC<FocusTrapProps> = ({
   const ref = useExternRef<HTMLElement>(getRootRef);
 
   const { document, window } = useDOM();
-  const activeElement = document.activeElement as HTMLElement;
 
-  const [focusableNodes, setFocusableNodes] = React.useState<HTMLElement[]>(null);
-  const [restoreFocusTo, setRestoreFocusTo] = React.useState<HTMLElement>(null);
+  const [focusableNodes, setFocusableNodes] = React.useState<
+    HTMLElement[] | null
+  >(null);
+  const [restoreFocusTo, setRestoreFocusTo] =
+    React.useState<HTMLElement | null>(null);
 
   // HANDLE TRAP MOUNT
 
   const { keyboardInput } = React.useContext(AppRootContext);
   const focusOnTrapMount = useTimeout(() => {
-    if (keyboardInput && !ref.current?.contains(activeElement) && focusableNodes?.length) {
+    if (
+      keyboardInput &&
+      !ref.current?.contains(document!.activeElement) &&
+      focusableNodes?.length
+    ) {
       focusableNodes[0].focus();
     }
   }, timeout);
@@ -58,12 +71,12 @@ export const FocusTrap: React.FC<FocusTrapProps> = ({
       // eslint-disable-next-line no-restricted-properties
       ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),
       (focusableEl: Element) => {
-        const { display, visibility } = window.getComputedStyle(focusableEl);
+        const { display, visibility } = window!.getComputedStyle(focusableEl);
 
-        if (display !== 'none' && visibility !== 'hidden') {
+        if (display !== "none" && visibility !== "hidden") {
           nodes.push(focusableEl as HTMLElement);
         }
-      },
+      }
     );
 
     if (nodes?.length) {
@@ -81,8 +94,8 @@ export const FocusTrap: React.FC<FocusTrapProps> = ({
     }
   }, timeout);
   useIsomorphicLayoutEffect(() => {
-    if (restoreFocus) {
-      setRestoreFocusTo(activeElement);
+    if (restoreFocus && document!.activeElement) {
+      setRestoreFocusTo(document!.activeElement as HTMLElement);
 
       return () => {
         focusOnTrapUnmount.set();
@@ -97,14 +110,15 @@ export const FocusTrap: React.FC<FocusTrapProps> = ({
       const lastIdx = focusableNodes.length - 1;
       const targetIdx = focusableNodes.findIndex((node) => node === e.target);
 
-      const shouldFocusFirstNode = targetIdx === -1 || targetIdx === lastIdx && !e.shiftKey;
+      const shouldFocusFirstNode =
+        targetIdx === -1 || (targetIdx === lastIdx && !e.shiftKey);
 
-      if (shouldFocusFirstNode || targetIdx === 0 && e.shiftKey) {
+      if (shouldFocusFirstNode || (targetIdx === 0 && e.shiftKey)) {
         e.preventDefault();
 
         const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];
 
-        if (node !== activeElement) {
+        if (node !== document!.activeElement) {
           node.focus();
         }
 
@@ -118,7 +132,9 @@ export const FocusTrap: React.FC<FocusTrapProps> = ({
 
     return true;
   };
-  useGlobalEventListener(document, 'keydown', onDocumentKeydown, { capture: true });
+  useGlobalEventListener(document, "keydown", onDocumentKeydown, {
+    capture: true,
+  });
 
   return (
     <Component ref={ref} {...restProps}>

package/src/components/FocusVisible/FocusVisible.css

@@ -1,7 +1,5 @@
-.AppRoot--keyboard-input .Tappable:focus > .FocusVisible,
-.Tappable:focus-visible > .FocusVisible,
-.AppRoot--keyboard-input input:focus ~ .FocusVisible,
-input:focus-visible ~ .FocusVisible {
+.Switch--focus-visible > .FocusVisible,
+.Tappable--focus-visible > .FocusVisible {
   position: absolute;
   top: 2px;
   left: 2px;
@@ -15,10 +13,8 @@ input:focus-visible ~ .FocusVisible {
   z-index: 0;
 }
 
-.AppRoot--keyboard-input .Tappable:focus > .FocusVisible--outside,
-.Tappable:focus-visible > .FocusVisible--outside,
-.AppRoot--keyboard-input input:focus ~ .FocusVisible--outside,
-input:focus-visible ~ .FocusVisible--outside {
+.Switch--focus-visible > .FocusVisible--outside,
+.Tappable--focus-visible > .FocusVisible--outside {
   top: -2px;
   left: -2px;
   right: -2px;
@@ -32,23 +28,19 @@ input:focus-visible ~ .FocusVisible--outside {
  * navigating accessible vkui apps via keyboard
  */
 @media (prefers-reduced-motion: no-preference) {
-  .AppRoot--keyboard-input .Tappable:focus > .FocusVisible,
-  .Tappable:focus-visible > .FocusVisible,
-  .AppRoot--keyboard-input input:focus ~ .FocusVisible,
-  input:focus-visible ~ .FocusVisible {
+  .Tappable--focus-visible > .FocusVisible,
+  .Switch--focus-visible > .FocusVisible {
     top: 4px;
     left: 4px;
     right: 4px;
     bottom: 4px;
-    animation: vkui-animation-focus-visible .15s ease-in-out forwards;
-    animation-delay: .01ms;
+    animation: vkui-animation-focus-visible 0.15s ease-in-out forwards;
+    animation-delay: 0.01ms;
     will-change: top, left, bottom, right;
   }
 
-  .AppRoot--keyboard-input .Tappable:focus > .FocusVisible--outside,
-  .Tappable:focus-visible > .FocusVisible--outside,
-  .AppRoot--keyboard-input input:focus ~ .FocusVisible--outside,
-  input:focus-visible ~ .FocusVisible--outside {
+  .Tappable--focus-visible > .FocusVisible--outside,
+  .Switch--focus-visible > .FocusVisible--outside {
     top: 0;
     left: 0;
     bottom: 0;
@@ -57,7 +49,8 @@ input:focus-visible ~ .FocusVisible--outside {
   }
 
   @keyframes vkui-animation-focus-visible {
-    0% {}
+    0% {
+    }
 
     100% {
       top: 2px;
@@ -69,7 +62,8 @@ input:focus-visible ~ .FocusVisible--outside {
   }
 
   @keyframes vkui-animation-focus-visible-outside {
-    0% {}
+    0% {
+    }
 
     100% {
       top: -2px;

package/src/components/FocusVisible/FocusVisible.tsx

@@ -1,13 +1,18 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import './FocusVisible.css';
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import "./FocusVisible.css";
 
-export type FocusVisibleMode = 'inside' | 'outside';
+export type FocusVisibleMode = "inside" | "outside";
 
 interface FocusVisibleProps {
   mode: FocusVisibleMode;
 }
 
-export const FocusVisible: React.FC<FocusVisibleProps> = ({ mode }: FocusVisibleProps) => (
-  <span aria-hidden="true" vkuiClass={classNames('FocusVisible', `FocusVisible--${mode}`)} />
+export const FocusVisible: React.FC<FocusVisibleProps> = ({
+  mode,
+}: FocusVisibleProps) => (
+  <span
+    aria-hidden="true"
+    vkuiClass={classNames("FocusVisible", `FocusVisible--${mode}`)}
+  />
 );

package/src/components/Footer/Footer.tsx

@@ -1,15 +1,23 @@
-import * as React from 'react';
-import Caption from '../Typography/Caption/Caption';
-import './Footer.css';
+import * as React from "react";
+import { HasComponent } from "../../types";
+import Caption from "../Typography/Caption/Caption";
+import "./Footer.css";
 
-type FooterProps = React.AllHTMLAttributes<HTMLElement>;
+export type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;
 
-const Footer: React.FC<FooterProps> = ({ children, ...restProps }: FooterProps) => {
+export const Footer: React.FC<FooterProps> = ({
+  children,
+  ...restProps
+}: FooterProps) => {
   return (
-    <Caption Component="footer" {...restProps} level="1" weight="regular" vkuiClass="Footer">
+    <Caption
+      Component="footer"
+      {...restProps}
+      level="1"
+      weight="regular"
+      vkuiClass="Footer"
+    >
       {children}
     </Caption>
   );
 };
-
-export default Footer;

package/src/components/Footer/Readme.md

@@ -3,14 +3,18 @@
 ```jsx
 <View activePanel="list">
   <Panel id="list">
-    <PanelHeader>
-      Footer
-    </PanelHeader>
+    <PanelHeader>Footer</PanelHeader>
     <Group>
       <List>
-        <Cell before={<Avatar />} description="Веб-сайт">Команда ВКонтакте</Cell>
-        <Cell before={<Avatar />} description="Музыкант">Robbie Williams</Cell>
-        <Cell before={<Avatar />} description="Издательский дом">ПостНаука</Cell>
+        <Cell before={<Avatar />} description="Веб-сайт">
+          Команда ВКонтакте
+        </Cell>
+        <Cell before={<Avatar />} description="Музыкант">
+          Robbie Williams
+        </Cell>
+        <Cell before={<Avatar />} description="Издательский дом">
+          ПостНаука
+        </Cell>
       </List>
     </Group>
     <Footer>3 cообщества</Footer>

package/src/components/FormField/FormField.css

@@ -37,7 +37,7 @@
   height: 100%;
   border: 1px solid var(--field_border);
   background: var(--field_background);
-  content: '';
+  content: "";
   box-sizing: border-box;
   z-index: 1;
   transform-origin: left top;
@@ -53,7 +53,7 @@
 }
 
 .FormField--disabled {
-  opacity: .64;
+  opacity: 0.64;
   cursor: default;
   pointer-events: none;
 }
@@ -87,7 +87,7 @@
 @media (min-resolution: 2dppx) {
   .FormField--ios .FormField__border {
     border-radius: 20px;
-    transform: scale(.5);
+    transform: scale(0.5);
     width: 200%;
     height: 200%;
   }
@@ -96,7 +96,7 @@
 @media (min-resolution: 3dppx) {
   .FormField--ios .FormField__border {
     border-radius: 31.25px;
-    transform: scale(.32);
+    transform: scale(0.32);
     width: 312.5%;
     height: 312.5%;
   }

package/src/components/FormField/FormField.tsx

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import { usePlatform } from '../../hooks/usePlatform';
-import { HasComponent, HasRootRef } from '../../types';
-import { hasReactNode } from '../../lib/utils';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import './FormField.css';
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import { HasComponent, HasRootRef } from "../../types";
+import { hasReactNode } from "../../lib/utils";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import "./FormField.css";
 
 export interface FormFieldProps {
   /**
@@ -14,16 +14,16 @@ export interface FormFieldProps {
   after?: React.ReactNode;
 }
 
-interface FormFieldOwnProps extends
-  React.AllHTMLAttributes<HTMLElement>,
-  HasRootRef<HTMLElement>,
-  HasComponent,
-  FormFieldProps {
+interface FormFieldOwnProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    HasRootRef<HTMLElement>,
+    HasComponent,
+    FormFieldProps {
   disabled?: boolean;
 }
 
 export const FormField: React.FC<FormFieldOwnProps> = ({
-  Component = 'div',
+  Component = "div",
   children,
   getRootRef,
   after,
@@ -52,11 +52,11 @@ export const FormField: React.FC<FormFieldOwnProps> = ({
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       vkuiClass={classNames(
-        getClassName('FormField', platform),
+        getClassName("FormField", platform),
         `FormField--sizeY-${sizeY}`,
         {
-          'FormField--disabled': disabled,
-        },
+          "FormField--disabled": disabled,
+        }
       )}
     >
       {children}
@@ -65,9 +65,12 @@ export const FormField: React.FC<FormFieldOwnProps> = ({
           {after}
         </div>
       )}
-      <div role="presentation" vkuiClass={classNames('FormField__border', {
-        'FormField__border--hover': !disabled && hover,
-      })} />
+      <div
+        role="presentation"
+        vkuiClass={classNames("FormField__border", {
+          "FormField__border--hover": !disabled && hover,
+        })}
+      />
     </Component>
   );
 };