@vkontakte/vkui 4.23.0 → 4.24.0

package/src/components/Search/Search.tsx

@@ -1,23 +1,30 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import { withPlatform } from '../../hoc/withPlatform';
-import { getClassName } from '../../helpers/getClassName';
-import { Icon16SearchOutline, Icon16Clear, Icon24Cancel } from '@vkontakte/icons';
-import { IOS, VKCOM } from '../../lib/platform';
-import { HasPlatform, HasRef } from '../../types';
-import { Touch, TouchEvent } from '../Touch/Touch';
-import { VKUITouchEvent } from '../../lib/touch';
-import { noop } from '../../lib/utils';
-import Text from '../Typography/Text/Text';
-import Title from '../Typography/Title/Title';
-import Separator from '../Separator/Separator';
-import { useExternRef } from '../../hooks/useExternRef';
-import { useEnsuredControl } from '../../hooks/useEnsuredControl';
-import './Search.css';
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { withPlatform } from "../../hoc/withPlatform";
+import { getClassName } from "../../helpers/getClassName";
+import {
+  Icon16SearchOutline,
+  Icon16Clear,
+  Icon24Cancel,
+} from "@vkontakte/icons";
+import { IOS, VKCOM } from "../../lib/platform";
+import { HasPlatform, HasRef } from "../../types";
+import { Touch, TouchEvent } from "../Touch/Touch";
+import { VKUITouchEvent } from "../../lib/touch";
+import { noop } from "../../lib/utils";
+import Text from "../Typography/Text/Text";
+import Title from "../Typography/Title/Title";
+import Separator from "../Separator/Separator";
+import { useExternRef } from "../../hooks/useExternRef";
+import { useEnsuredControl } from "../../hooks/useEnsuredControl";
+import "./Search.css";
 
 export type InputRef = (element: HTMLInputElement) => void;
 
-export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasPlatform {
+export interface SearchProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    HasRef<HTMLInputElement>,
+    HasPlatform {
   /**
    * iOS only. Текст кнопки "отмена", которая чистит текстовое поле и убирает фокус.
    */
@@ -57,28 +64,37 @@ const Search: React.FC<SearchProps> = ({
 
   const onCancel = () => {
     // eslint-disable-next-line @typescript-eslint/unbound-method
-    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;
-    nativeInputValueSetter.call(inputRef.current, '');
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      "value"
+    ).set;
+    nativeInputValueSetter.call(inputRef.current, "");
 
-    const ev2 = new Event('input', { bubbles: true });
+    const ev2 = new Event("input", { bubbles: true });
     inputRef.current.dispatchEvent(ev2);
   };
 
-  const onIconClickStart = React.useCallback((e: TouchEvent) => onIconClick(e.originalEvent), [onIconClick]);
+  const onIconClickStart = React.useCallback(
+    (e: TouchEvent) => onIconClick(e.originalEvent),
+    [onIconClick]
+  );
 
-  const onIconCancelClickStart = React.useCallback((e: TouchEvent) => {
-    e.originalEvent.preventDefault();
-    inputRef.current.focus();
-    onCancel();
-  }, [onCancel]);
+  const onIconCancelClickStart = React.useCallback(
+    (e: TouchEvent) => {
+      e.originalEvent.preventDefault();
+      inputRef.current.focus();
+      onCancel();
+    },
+    [onCancel]
+  );
 
   return (
     <div
-      vkuiClass={classNames(getClassName('Search', platform), {
-        'Search--focused': isFocused,
-        'Search--has-value': !!value,
-        'Search--has-after': !!after,
-        'Search--has-icon': !!icon,
+      vkuiClass={classNames(getClassName("Search", platform), {
+        "Search--focused": isFocused,
+        "Search--has-value": !!value,
+        "Search--has-after": !!after,
+        "Search--has-icon": !!icon,
       })}
       className={className}
       style={style}
@@ -96,37 +112,47 @@ const Search: React.FC<SearchProps> = ({
             onChange={onChange}
             value={value}
           />
-          {platform === IOS && after && <div vkuiClass="Search__after-width">{after}</div>}
+          {platform === IOS && after && (
+            <div vkuiClass="Search__after-width">{after}</div>
+          )}
           <div vkuiClass="Search__placeholder">
             <div vkuiClass="Search__placeholder-in">
               {before}
-              {platform === VKCOM
-                ? <Text vkuiClass="Search__placeholder-text" weight="regular">{placeholder}</Text>
-                : <Title vkuiClass="Search__placeholder-text" level="3" weight="regular">{placeholder}</Title>
-              }
+              {platform === VKCOM ? (
+                <Text vkuiClass="Search__placeholder-text" weight="regular">
+                  {placeholder}
+                </Text>
+              ) : (
+                <Title
+                  vkuiClass="Search__placeholder-text"
+                  level="3"
+                  weight="regular"
+                >
+                  {placeholder}
+                </Title>
+              )}
             </div>
-            {isFocused && platform === IOS && after && <div vkuiClass="Search__after-width">{after}</div>}
+            {isFocused && platform === IOS && after && (
+              <div vkuiClass="Search__after-width">{after}</div>
+            )}
           </div>
         </label>
         <div vkuiClass="Search__after" onClick={onCancel}>
           <div vkuiClass="Search__icons">
-            {icon &&
+            {icon && (
               <Touch onStart={onIconClickStart} vkuiClass="Search__icon">
                 {icon}
               </Touch>
-            }
-            {!!value &&
+            )}
+            {!!value && (
               <Touch onStart={onIconCancelClickStart} vkuiClass="Search__icon">
-                {platform === IOS
-                  ? <Icon16Clear />
-                  : <Icon24Cancel />
-                }
+                {platform === IOS ? <Icon16Clear /> : <Icon24Cancel />}
               </Touch>
-            }
+            )}
           </div>
-          {platform === IOS && after &&
+          {platform === IOS && after && (
             <div vkuiClass="Search__after-in">{after}</div>
-          }
+          )}
         </div>
       </div>
       {platform === VKCOM && <Separator vkuiClass="Search__separator" wide />}
@@ -135,10 +161,10 @@ const Search: React.FC<SearchProps> = ({
 };
 
 Search.defaultProps = {
-  autoComplete: 'off',
-  defaultValue: '',
-  placeholder: 'Поиск',
-  after: 'Отмена',
+  autoComplete: "off",
+  defaultValue: "",
+  placeholder: "Поиск",
+  after: "Отмена",
   before: <Icon16SearchOutline />,
 };
 

package/src/components/Select/Readme.md

@@ -3,16 +3,21 @@
 ```jsx
 <View activePanel="select">
   <Panel id="select">
-    <PanelHeader>
-      Select
-    </PanelHeader>
+    <PanelHeader>Select</PanelHeader>
     <Group>
       <FormItem top="Администратор">
         <Select
-          placeholder="Не выбран" 
-          options={getRandomUsers(10).map(user => ({ label: user.name, value: user.id, avatar: user.photo_100 }))}
+          placeholder="Не выбран"
+          options={getRandomUsers(10).map((user) => ({
+            label: user.name,
+            value: user.id,
+            avatar: user.photo_100,
+          }))}
           renderOption={({ option, ...restProps }) => (
-            <CustomSelectOption {...restProps} before={<Avatar size={24} src={option.avatar} />} />
+            <CustomSelectOption
+              {...restProps}
+              before={<Avatar size={24} src={option.avatar} />}
+            />
           )}
         />
       </FormItem>

package/src/components/Select/Select.tsx

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

package/src/components/SelectMimicry/Readme.md

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

package/src/components/SelectMimicry/SelectMimicry.tsx

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

package/src/components/Separator/Readme.md

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

package/src/components/Separator/Separator.css

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

package/src/components/Separator/Separator.tsx

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