@vkontakte/vkui 4.22.0 → 4.24.0

package/src/components/FormItem/FormItem.tsx

@@ -1,20 +1,24 @@
-import * as React from 'react';
-import { HasComponent, HasRootRef } from '../../types';
-import { classNames } from '../../lib/classNames';
-import { useExternRef } from '../../hooks/useExternRef';
-import { usePlatform } from '../../hooks/usePlatform';
-import { getClassName } from '../../helpers/getClassName';
-import { hasReactNode } from '../../lib/utils';
-import Subhead from '../Typography/Subhead/Subhead';
-import Caption from '../Typography/Caption/Caption';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { Removable, RemovableProps } from '../Removable/Removable';
-import './FormItem.css';
+import * as React from "react";
+import { HasComponent, HasRootRef } from "../../types";
+import { classNames } from "../../lib/classNames";
+import { useExternRef } from "../../hooks/useExternRef";
+import { usePlatform } from "../../hooks/usePlatform";
+import { getClassName } from "../../helpers/getClassName";
+import { hasReactNode, noop } from "../../lib/utils";
+import Subhead from "../Typography/Subhead/Subhead";
+import Caption from "../Typography/Caption/Caption";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { Removable, RemovableProps } from "../Removable/Removable";
+import "./FormItem.css";
 
-export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent, RemovableProps {
+export interface FormItemProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    HasRootRef<HTMLElement>,
+    HasComponent,
+    RemovableProps {
   top?: React.ReactNode;
   bottom?: React.ReactNode;
-  status?: 'default' | 'error' | 'valid';
+  status?: "default" | "error" | "valid";
   /**
    * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.
    */
@@ -25,11 +29,11 @@ export const FormItem: React.FC<FormItemProps> = ({
   children,
   top,
   bottom,
-  status = 'default',
-  Component = 'div',
+  status = "default",
+  Component = "div",
   removable,
-  onRemove,
-  removePlaceholder = 'Удалить',
+  onRemove = noop,
+  removePlaceholder = "Удалить",
   getRootRef,
   ...restProps
 }: FormItemProps) => {
@@ -39,9 +43,17 @@ export const FormItem: React.FC<FormItemProps> = ({
 
   const wrappedChildren = (
     <React.Fragment>
-      {hasReactNode(top) && <Subhead weight="regular" vkuiClass="FormItem__top">{top}</Subhead>}
+      {hasReactNode(top) && (
+        <Subhead weight="regular" vkuiClass="FormItem__top">
+          {top}
+        </Subhead>
+      )}
       {children}
-      {hasReactNode(bottom) && <Caption level="1" weight="regular" vkuiClass="FormItem__bottom">{bottom}</Caption>}
+      {hasReactNode(bottom) && (
+        <Caption level="1" weight="regular" vkuiClass="FormItem__bottom">
+          {bottom}
+        </Caption>
+      )}
     </React.Fragment>
   );
 
@@ -50,22 +62,26 @@ export const FormItem: React.FC<FormItemProps> = ({
       {...restProps}
       ref={rootEl}
       vkuiClass={classNames(
-        getClassName('FormItem', platform),
+        getClassName("FormItem", platform),
         `FormItem--${status}`,
         `FormItem--sizeY-${sizeY}`,
         {
-          'FormItem--withTop': hasReactNode(top),
-          'FormItem--removable': removable,
-        },
+          "FormItem--withTop": hasReactNode(top),
+          "FormItem--removable": removable,
+        }
       )}
     >
       {removable ? (
-        <Removable align="start" onRemove={(e) => onRemove(e, rootEl?.current)} removePlaceholder={removePlaceholder}>
-          <div vkuiClass="FormItem__removable">
-            {wrappedChildren}
-          </div>
+        <Removable
+          align="start"
+          onRemove={(e) => onRemove(e, rootEl?.current)}
+          removePlaceholder={removePlaceholder}
+        >
+          <div vkuiClass="FormItem__removable">{wrappedChildren}</div>
         </Removable>
-      ) : wrappedChildren}
+      ) : (
+        wrappedChildren
+      )}
     </Component>
   );
 };

package/src/components/FormItem/Readme.md

@@ -8,15 +8,15 @@ class Example extends React.Component {
     super(props);
 
     this.state = {
-      email: '',
-      purpose: '',
-      showPatronym: true
-    }
+      email: "",
+      purpose: "",
+      showPatronym: true,
+    };
 
     this.addressItems = [
-      { label: 'Почтовый индекс', name: 'zip' },
-      { label: 'Страна', name: 'country' },
-      { label: 'Город', name: 'city' }
+      { label: "Почтовый индекс", name: "zip" },
+      { label: "Страна", name: "country" },
+      { label: "Город", name: "city" },
     ];
 
     this.onChange = this.onChange.bind(this);
@@ -44,83 +44,122 @@ class Example extends React.Component {
         <Panel id="new-user">
           <PanelHeader>Регистрация</PanelHeader>
           <Group>
-          <FormLayout>
-            <FormItem
-              top="E-mail" 
-              status={email ? 'valid' : 'error'}
-              bottom={email ? 'Электронная почта введена верно!' : 'Пожалуйста, введите электронную почту'}
-            >
-              <Input
-                type="email"
-                name="email"
-                value={email}
-                onChange={this.onChange}
-              />
-            </FormItem>
-
-            <FormItem top="Пароль">
-              <Input type="password" placeholder="Введите пароль" />
-            </FormItem>
-            
-            <FormItem bottom="Пароль может содержать только латинские буквы и цифры.">
-              <Input type="password" placeholder="Повторите пароль" />
-            </FormItem>
-
-            <FormLayoutGroup mode="horizontal">
-              <FormItem top="Имя">            
-                <Input />
+            <FormLayout>
+              <FormItem
+                top="E-mail"
+                status={email ? "valid" : "error"}
+                bottom={
+                  email
+                    ? "Электронная почта введена верно!"
+                    : "Пожалуйста, введите электронную почту"
+                }
+              >
+                <Input
+                  type="email"
+                  name="email"
+                  value={email}
+                  onChange={this.onChange}
+                />
               </FormItem>
-              <FormItem top="Фамилия">            
-                <Input />
+
+              <FormItem top="Пароль">
+                <Input type="password" placeholder="Введите пароль" />
+              </FormItem>
+
+              <FormItem bottom="Пароль может содержать только латинские буквы и цифры.">
+                <Input type="password" placeholder="Повторите пароль" />
+              </FormItem>
+
+              <FormLayoutGroup mode="horizontal">
+                <FormItem top="Имя">
+                  <Input />
+                </FormItem>
+                <FormItem top="Фамилия">
+                  <Input />
+                </FormItem>
+              </FormLayoutGroup>
+
+              {!this.state.showPatronym ? (
+                <CellButton
+                  onClick={() => this.setState({ showPatronym: true })}
+                >
+                  Указать отчество
+                </CellButton>
+              ) : (
+                <FormItem
+                  removable
+                  onRemove={this.onRemove}
+                  top="Отчество"
+                  bottom="Если у вас нет отчества — удалите этот пункт."
+                >
+                  <Input />
+                </FormItem>
+              )}
+
+              <FormItem top="Пол">
+                <Select
+                  placeholder="Выберите пол"
+                  options={[
+                    {
+                      value: "0",
+                      label: "Мужской",
+                    },
+                    {
+                      value: "1",
+                      label: "Женский",
+                    },
+                  ]}
+                />
+              </FormItem>
+
+              <FormItem top="Тип документа">
+                <Radio name="type">Паспорт</Radio>
+                <Radio name="type">Загран</Radio>
+              </FormItem>
+
+              {this.addressItems.map(({ label, name }) => (
+                <FormItem top={label} key={name}>
+                  <Input name={name} />
+                </FormItem>
+              ))}
+              <FormItem
+                top="Цель поездки"
+                bottom={purpose ? "" : "Пожалуйста, укажите цель поездки"}
+                status={purpose ? "valid" : "error"}
+              >
+                <Select
+                  placeholder="Выберите цель поездки"
+                  onChange={this.onChange}
+                  value={purpose}
+                  name="purpose"
+                  options={[
+                    {
+                      value: "0",
+                      label: "Бизнес или работа",
+                    },
+                    {
+                      value: "1",
+                      label: "Индивидуальный туризм",
+                    },
+                    {
+                      value: "2",
+                      label: "Посещение близких родственников",
+                    },
+                  ]}
+                />
+              </FormItem>
+              <FormItem top="О себе">
+                <Textarea />
               </FormItem>
-            </FormLayoutGroup>
-
-            {!this.state.showPatronym
-              ? <CellButton onClick={() => this.setState({ showPatronym: true })}>Указать отчество</CellButton>
-              : <FormItem removable onRemove={this.onRemove} top="Отчество" bottom="Если у вас нет отчества — удалите этот пункт."><Input /></FormItem>
-            }
-
-            <FormItem top="Пол">
-              <Select 
-                placeholder="Выберите пол"
-                options={[{
-                  value: '0', label: 'Мужской' }, { 
-                  value: '1', label: 'Женский' }
-                ]}
-              />
-            </FormItem>
-
-            <FormItem top="Тип документа">
-              <Radio name="type">Паспорт</Radio>
-              <Radio name="type">Загран</Radio>
-            </FormItem>
-
-            {this.addressItems.map(({ label, name }) => (
-              <FormItem top={label} key={name}>
-                <Input name={name} />
+              <Checkbox>
+                Согласен со всем <Link>этим</Link>
+              </Checkbox>
+              <FormItem>
+                <Button size="l" stretched>
+                  Зарегистрироваться
+                </Button>
               </FormItem>
-            ))}
-            <FormItem top="Цель поездки" bottom={purpose ? '' : 'Пожалуйста, укажите цель поездки'} status={purpose ? 'valid' : 'error'}>
-              <Select
-                placeholder="Выберите цель поездки"
-                onChange={this.onChange}
-                value={purpose}
-                name="purpose"
-                options={[{
-                  value: '0', label: 'Бизнес или работа' }, { 
-                  value: '1', label: 'Индивидуальный туризм' }, {
-                  value: '2', label: 'Посещение близких родственников' }
-                ]}
-              />
-            </FormItem>
-            <FormItem top="О себе">
-              <Textarea />
-            </FormItem>
-            <Checkbox>Согласен со всем <Link>этим</Link></Checkbox>
-            <FormItem>
-              <Button size="l" stretched>Зарегистрироваться</Button>
-            </FormItem>
-          </FormLayout>
+            </FormLayout>
           </Group>
         </Panel>
       </View>
@@ -128,5 +167,5 @@ class Example extends React.Component {
   }
 }
 
-<Example />
+<Example />;
 ```

package/src/components/FormLayout/FormLayout.tsx

@@ -1,42 +1,38 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import { usePlatform } from '../../hooks/usePlatform';
-import { HasComponent, HasRef } from '../../types';
-import './FormLayout.css';
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import { HasComponent, HasRef } from "../../types";
+import "./FormLayout.css";
 
 const preventDefault = (e: React.FormEvent) => e.preventDefault();
 
-export type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> & HasRef<HTMLElement> & HasComponent;
+export type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &
+  HasRef<HTMLElement> &
+  HasComponent;
 
-const FormLayout: React.FunctionComponent<FormLayoutProps> = (props: FormLayoutProps) => {
-  const {
-    children,
-    Component,
-    getRef,
-    onSubmit,
-    ...restProps
-  } = props;
+const FormLayout: React.FunctionComponent<FormLayoutProps> = (
+  props: FormLayoutProps
+) => {
+  const { children, Component, getRef, onSubmit, ...restProps } = props;
 
   const platform = usePlatform();
   return (
     <Component
       {...restProps}
-      vkuiClass={getClassName('FormLayout', platform)}
+      vkuiClass={getClassName("FormLayout", platform)}
       onSubmit={onSubmit}
       ref={getRef}
     >
-      <div vkuiClass="FormLayout__container">
-        {children}
-      </div>
-      {Component === 'form' &&
+      <div vkuiClass="FormLayout__container">{children}</div>
+      {Component === "form" && (
         <input type="submit" vkuiClass="FormLayout__submit" value="" />
-      }
+      )}
     </Component>
   );
 };
 
 FormLayout.defaultProps = {
-  Component: 'form',
+  Component: "form",
   onSubmit: preventDefault,
 };
 

package/src/components/FormLayoutGroup/FormLayoutGroup.tsx

@@ -1,15 +1,19 @@
-import * as React from 'react';
-import { HasRootRef } from '../../types';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import { useExternRef } from '../../hooks/useExternRef';
-import { usePlatform } from '../../hooks/usePlatform';
-import { Removable, RemovableProps } from '../Removable/Removable';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import './FormLayoutGroup.css';
+import * as React from "react";
+import { HasRootRef } from "../../types";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { noop } from "../../lib/utils";
+import { useExternRef } from "../../hooks/useExternRef";
+import { usePlatform } from "../../hooks/usePlatform";
+import { Removable, RemovableProps } from "../Removable/Removable";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import "./FormLayoutGroup.css";
 
-export interface FormLayoutGroupProps extends React.HTMLAttributes<HTMLDivElement>, RemovableProps, HasRootRef<HTMLDivElement> {
-  mode?: 'vertical' | 'horizontal';
+export interface FormLayoutGroupProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    RemovableProps,
+    HasRootRef<HTMLDivElement> {
+  mode?: "vertical" | "horizontal";
   /**
    * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.
    */
@@ -18,42 +22,43 @@ export interface FormLayoutGroupProps extends React.HTMLAttributes<HTMLDivElemen
 
 const FormLayoutGroup: React.FC<FormLayoutGroupProps> = ({
   children,
-  mode = 'vertical',
+  mode = "vertical",
   removable,
-  removePlaceholder = 'Удалить',
-  onRemove,
+  removePlaceholder = "Удалить",
+  onRemove = noop,
   getRootRef,
   ...restProps
 }: FormLayoutGroupProps) => {
   const platform = usePlatform();
   const { sizeY } = useAdaptivity();
-  const isRemovable = removable && mode === 'horizontal';
+  const isRemovable = removable && mode === "horizontal";
   const rootEl = useExternRef(getRootRef);
 
   return (
     <div
       ref={rootEl}
       vkuiClass={classNames(
-        getClassName('FormLayoutGroup', platform),
+        getClassName("FormLayoutGroup", platform),
         `FormLayoutGroup--sizeY-${sizeY}`,
-        `FormLayoutGroup--${mode}`, {
-          'FormLayoutGroup--removable': isRemovable,
-        },
+        `FormLayoutGroup--${mode}`,
+        {
+          "FormLayoutGroup--removable": isRemovable,
+        }
+      )}
+      {...restProps}
+    >
+      {isRemovable ? (
+        <Removable
+          vkuiClass="FormLayoutGroup__removable"
+          align="start"
+          removePlaceholder={removePlaceholder}
+          onRemove={(e) => onRemove(e, rootEl?.current)}
+        >
+          {children}
+        </Removable>
+      ) : (
+        children
       )}
-      {...restProps}>
-      {isRemovable
-        ? (
-          <Removable
-            vkuiClass="FormLayoutGroup__removable"
-            align="start"
-            removePlaceholder={removePlaceholder}
-            onRemove={(e) => onRemove(e, rootEl?.current)}
-          >
-            {children}
-          </Removable>
-        )
-        : children
-      }
     </div>
   );
 };

package/src/components/FormLayoutGroup/Readme.md

@@ -7,12 +7,12 @@ class Example extends React.Component {
     super(props);
 
     this.state = {
-      showDates: true
-    }
+      showDates: true,
+    };
   }
 
   toggleDates(showDates) {
-    this.setState({ showDates })
+    this.setState({ showDates });
   }
 
   render() {
@@ -33,26 +33,31 @@ class Example extends React.Component {
                 </FormItem>
               </FormLayoutGroup>
 
-              {!showDates
-                ? <CellButton onClick={() => this.toggleDates(true)}>Указать даты поездки</CellButton>
-                : (
-                  <FormLayoutGroup mode="horizontal" removable onRemove={() => this.toggleDates(false)}>
-                    <FormItem bottom="Дата начала поездки">
-                      <Input />
-                    </FormItem>
-                    <FormItem bottom="Дата конца поездки">
-                      <Input />
-                    </FormItem>
-                  </FormLayoutGroup>
-                )
-              }
+              {!showDates ? (
+                <CellButton onClick={() => this.toggleDates(true)}>
+                  Указать даты поездки
+                </CellButton>
+              ) : (
+                <FormLayoutGroup
+                  mode="horizontal"
+                  removable
+                  onRemove={() => this.toggleDates(false)}
+                >
+                  <FormItem bottom="Дата начала поездки">
+                    <Input />
+                  </FormItem>
+                  <FormItem bottom="Дата конца поездки">
+                    <Input />
+                  </FormItem>
+                </FormLayoutGroup>
+              )}
             </FormLayout>
           </Group>
         </Panel>
       </View>
-    )
+    );
   }
 }
 
-<Example />
+<Example />;
 ```

package/src/components/FormStatus/FormStatus.css

@@ -25,7 +25,8 @@
   color: currentColor;
 }
 
-.FormStatus b:first-child { /* хак для ошибок из API, текст в которых приходит с <b>в начале</b> */
+.FormStatus b:first-child {
+  /* хак для ошибок из API, текст в которых приходит с <b>в начале</b> */
   display: block;
   font-size: 16px;
   line-height: 20px;

package/src/components/FormStatus/FormStatus.tsx

@@ -1,14 +1,14 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import { getClassName } from '../../helpers/getClassName';
-import { usePlatform } from '../../hooks/usePlatform';
-import Headline from '../Typography/Headline/Headline';
-import Caption from '../Typography/Caption/Caption';
-import { hasReactNode } from '../../lib/utils';
-import './FormStatus.css';
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import Headline from "../Typography/Headline/Headline";
+import Caption from "../Typography/Caption/Caption";
+import { hasReactNode } from "../../lib/utils";
+import "./FormStatus.css";
 
 export interface FormStatusProps extends React.HTMLAttributes<HTMLDivElement> {
-  mode?: 'default' | 'error';
+  mode?: "default" | "error";
   header?: React.ReactNode;
 }
 
@@ -24,13 +24,28 @@ export const FormStatus: React.FunctionComponent<FormStatusProps> = ({
   return (
     <div
       {...restProps}
-      vkuiClass={classNames(getClassName('FormStatus', platform), `FormStatus--${mode}`)}
+      vkuiClass={classNames(
+        getClassName("FormStatus", platform),
+        `FormStatus--${mode}`
+      )}
     >
-      {hasReactNode(header) && <Headline weight="medium" vkuiClass="FormStatus__header">{header}</Headline>}
-      {dangerouslySetInnerHTML &&
-        <Caption level="1" weight="regular" dangerouslySetInnerHTML={dangerouslySetInnerHTML} />
-      }
-      {hasReactNode(children) && !dangerouslySetInnerHTML && <Caption level="1" weight="regular">{children}</Caption>}
+      {hasReactNode(header) && (
+        <Headline weight="medium" vkuiClass="FormStatus__header">
+          {header}
+        </Headline>
+      )}
+      {dangerouslySetInnerHTML && (
+        <Caption
+          level="1"
+          weight="regular"
+          dangerouslySetInnerHTML={dangerouslySetInnerHTML}
+        />
+      )}
+      {hasReactNode(children) && !dangerouslySetInnerHTML && (
+        <Caption level="1" weight="regular">
+          {children}
+        </Caption>
+      )}
     </div>
   );
 };

package/src/components/FormStatus/Readme.md

@@ -4,9 +4,7 @@
 ```jsx
 <View activePanel="form-status">
   <Panel id="form-status">
-    <PanelHeader>
-      Статус формы
-    </PanelHeader>
+    <PanelHeader>Статус формы</PanelHeader>
     <Group>
       <FormItem>
         <FormStatus header="Некорректный мобильный номер" mode="error">

package/src/components/Gallery/Gallery.css

@@ -1,6 +1,7 @@
 .Gallery {
   position: relative;
   overflow: hidden;
+  user-select: none;
 }
 
 .Gallery__viewport {
@@ -62,7 +63,7 @@
   width: 6px;
   border-radius: 50%;
   margin: 0 3px;
-  opacity: .56;
+  opacity: 0.56;
 }
 
 .Gallery__bullet--active {