@vkontakte/vkui 4.23.0 → 4.24.0

package/src/components/CustomSelect/Readme.md

@@ -1,182 +1,248 @@
 Делает из [SelectMimicry](#!/SelectMimicry) селект с выпадающим списком. Используется внутри [Select](#!/Select).
 
-```jsx { "props": { "layout": false, "iframe": false } }
+```jsx
 class Example extends React.Component {
   constructor(props) {
     super(props);
-    this.users = getRandomUsers(10).map(user => ({ label: user.name, value: user.id, avatar: user.photo_100, description: user.screen_name }));
-    this.cities = [{
-      label: 'Санкт-Петербург',
-      description: 'Россия',
-      value: 0
-    }, {
-      label: 'Москва',
-      description: 'Россия',
-      value: 1
-    }, {
-      label: 'Новосибирск',
-      description: 'Россия',
-      disabled: true,
-      value: 2
-    }, {
-      label: 'Нью-Йорк',
-      description: 'США',
-      value: 3
-    }, {
-      label: 'Чикаго',
-      description: 'США',
-      value: 4
-    }]  
+    this.users = getRandomUsers(10).map((user) => ({
+      label: user.name,
+      value: user.id,
+      avatar: user.photo_100,
+      description: user.screen_name,
+    }));
+    this.cities = [
+      {
+        label: "Санкт-Петербург",
+        description: "Россия",
+        value: 0,
+      },
+      {
+        label: "Москва",
+        description: "Россия",
+        value: 1,
+      },
+      {
+        label: "Новосибирск",
+        description: "Россия",
+        disabled: true,
+        value: 2,
+      },
+      {
+        label: "Нью-Йорк",
+        description: "США",
+        value: 3,
+      },
+      {
+        label: "Чикаго",
+        description: "США",
+        value: 4,
+      },
+    ];
 
     this.state = {
-      query: '',
-      remoteQuery: '',
+      query: "",
+      remoteQuery: "",
       newUsers: [],
       fetching: false,
       fetchingSearch: false,
       remoteUsers: [],
-      remoteUsersSearch: []
-    } 
+      remoteUsersSearch: [],
+    };
   }
-  
+
   get customSearchOptions() {
-    const options = [...this.state.newUsers, ...this.users]
+    const options = [...this.state.newUsers, ...this.users];
     if (this.state.query.length > 0) {
-      options.unshift({ label: `Добавить пользователя ${this.state.query}`, value: 0 });
+      options.unshift({
+        label: `Добавить пользователя ${this.state.query}`,
+        value: 0,
+      });
     }
     return options;
   }
 
   render() {
     return (
-        <React.Fragment>
-          <FormItem top="Администратор" bottom="Базовый пример использования">
-            <CustomSelect
-              placeholder="Не выбран"
-              options={this.users}
-            />
-          </FormItem>
-          <FormItem top="Администратор" bottom="Кастомный дизайн элементов списка">
-            <CustomSelect
-              placeholder="Не выбран"
-              options={this.users}
-              renderOption={({ option, ...restProps }) => (
-                <CustomSelectOption
-                   {...restProps}
-                   before={<Avatar size={24} src={option.avatar}/>}
-                   description={option.description} 
-                />              
-              )}
-            />
-          </FormItem>
-          <Header>Поиск</Header>
-          <FormItem top="Администратор" bottom="Поиск по списку">
-            <CustomSelect
-              placeholder="Введите имя пользователя"
-              searchable
-              options={this.users}
-            />
-          </FormItem>
-          <FormItem top="Город" bottom="Кастомный алгоритм поиска">
-            <CustomSelect
-              placeholder="Введите название города или страны"
-              searchable
-              filterFn={(value, option) => option.label.toLowerCase().includes(value.toLowerCase()) || option.description.toLowerCase().includes(value.toLowerCase())}
-              renderOption={({ option, ...restProps }) => (<CustomSelectOption {...restProps} description={option.description} />)}
-              options={this.cities}
-            />
-          </FormItem>
-          <FormItem top="Администратор" bottom="Кастомное поведение при поиске">
-            <CustomSelect
-              popupDirection="top"
-              placeholder="Введите имя пользователя"
-              searchable
-              onInputChange={(e) => { this.setState({ query: e.target.value }) }}
-              options={this.customSearchOptions}
-              renderOption={({ option, ...restProps }) => (
-                <CustomSelectOption {...restProps}>
-                  {option.value === 0 ? <span style={{ color: 'var(--accent)' }}>{option.label}</span> : option.label}
-                </CustomSelectOption>
-              )}
-              onChange={(e) => {
-                if (e.target.value === '0') {
-                  const query = this.state.query;
-                  this.setState({
-                    newUsers: [...this.state.newUsers, { label: query, value: query }],
-                    query: ''
-                  }, () => {
-                    this.setState({ value: query })
-                  })
-                } else {
-                  this.setState({
-                    query: '',
-                    value: e.target.value,
-                  })
-                } 
-              }}
-              value={this.state.value}
-            />
-          </FormItem>
-          <Header>Асинхронная загрузка списка</Header>
-          <FormItem top="Администратор">
-            <CustomSelect
-              popupDirection="top"
-              placeholder="Не выбран"
-              onOpen={() => {
-                if (this.state.remoteUsers.length === 0) {
-                  this.setState({ fetching: true });
-                  setTimeout(() => {
-                    this.setState({ 
-                      fetching: false,
-                      remoteUsers: getRandomUsers(10).map(user => ({ label: user.name, value: user.id, avatar: user.photo_100 }))
-                    });                
-                  }, 1500)
+      <View activePanel="profile" id="profile">
+        <Panel id="profile">
+          <PanelHeader>CustomSelect</PanelHeader>
+          <Group separator="hide">
+            <FormItem top="Администратор" bottom="Базовый пример использования">
+              <CustomSelect placeholder="Не выбран" options={this.users} />
+            </FormItem>
+            <FormItem
+              top="Администратор"
+              bottom="Кастомный дизайн элементов списка"
+            >
+              <CustomSelect
+                placeholder="Не выбран"
+                options={this.users}
+                renderOption={({ option, ...restProps }) => (
+                  <CustomSelectOption
+                    {...restProps}
+                    before={<Avatar size={24} src={option.avatar} />}
+                    description={option.description}
+                  />
+                )}
+              />
+            </FormItem>
+            <Header>Поиск</Header>
+            <FormItem top="Администратор" bottom="Поиск по списку">
+              <CustomSelect
+                placeholder="Введите имя пользователя"
+                searchable
+                options={this.users}
+              />
+            </FormItem>
+            <FormItem top="Город" bottom="Кастомный алгоритм поиска">
+              <CustomSelect
+                placeholder="Введите название города или страны"
+                searchable
+                filterFn={(value, option) =>
+                  option.label.toLowerCase().includes(value.toLowerCase()) ||
+                  option.description.toLowerCase().includes(value.toLowerCase())
                 }
-              }}
-              fetching={this.state.fetching}
-              options={this.state.remoteUsers}
-            />
-          </FormItem>
-          <FormItem top="Администратор" bottom="Асинхронный поиск">
-            <CustomSelect
-              popupDirection="top"
-              placeholder="Введите имя пользователя"
-              searchable
-              onInputChange={(e) => {
-                const remoteQuery = e.target.value;
-                clearTimeout(this.timeout);
-                if (remoteQuery.length < 3) {
-                  this.setState({ remoteQuery, fetchingSearch: false, remoteUsersSearch: [] })
-                } else {
-                  this.setState({ remoteQuery, fetchingSearch: true });
-                  this.timeout = setTimeout(() => {
-                    this.setState({ 
+                renderOption={({ option, ...restProps }) => (
+                  <CustomSelectOption
+                    {...restProps}
+                    description={option.description}
+                  />
+                )}
+                options={this.cities}
+              />
+            </FormItem>
+            <FormItem
+              top="Администратор"
+              bottom="Кастомное поведение при поиске"
+            >
+              <CustomSelect
+                placeholder="Введите имя пользователя"
+                searchable
+                onInputChange={(e) => {
+                  this.setState({ query: e.target.value });
+                }}
+                options={this.customSearchOptions}
+                renderOption={({ option, ...restProps }) => (
+                  <CustomSelectOption {...restProps}>
+                    {option.value === 0 ? (
+                      <span style={{ color: "var(--accent)" }}>
+                        {option.label}
+                      </span>
+                    ) : (
+                      option.label
+                    )}
+                  </CustomSelectOption>
+                )}
+                onChange={(e) => {
+                  if (e.target.value === "0") {
+                    const query = this.state.query;
+                    this.setState(
+                      {
+                        newUsers: [
+                          ...this.state.newUsers,
+                          { label: query, value: query },
+                        ],
+                        query: "",
+                      },
+                      () => {
+                        this.setState({ value: query });
+                      }
+                    );
+                  } else {
+                    this.setState({
+                      query: "",
+                      value: e.target.value,
+                    });
+                  }
+                }}
+                value={this.state.value}
+              />
+            </FormItem>
+            <Header>Асинхронная загрузка списка</Header>
+            <FormItem top="Администратор">
+              <CustomSelect
+                placeholder="Не выбран"
+                onOpen={() => {
+                  if (this.state.remoteUsers.length === 0) {
+                    this.setState({ fetching: true });
+                    setTimeout(() => {
+                      this.setState({
+                        fetching: false,
+                        remoteUsers: getRandomUsers(10).map((user) => ({
+                          label: user.name,
+                          value: user.id,
+                          avatar: user.photo_100,
+                        })),
+                      });
+                    }, 1500);
+                  }
+                }}
+                fetching={this.state.fetching}
+                options={this.state.remoteUsers}
+              />
+            </FormItem>
+            <FormItem top="Администратор" bottom="Асинхронный поиск">
+              <CustomSelect
+                placeholder="Введите имя пользователя"
+                searchable
+                onInputChange={(e) => {
+                  const remoteQuery = e.target.value;
+                  clearTimeout(this.timeout);
+                  if (remoteQuery.length < 3) {
+                    this.setState({
+                      remoteQuery,
                       fetchingSearch: false,
-                      remoteUsersSearch: getRandomUsers(10).map(user => ({ label: user.name, value: user.id, avatar: user.photo_100 }))
+                      remoteUsersSearch: [],
                     });
-                  }, 1500);
-                }
-              }}
-              onClose={() => {
-                clearTimeout(this.timeout)
-                this.setState({ fetchingSearch: false, remoteQuery: '' });              
-              }}
-              filterFn={false}
-              options={this.state.remoteUsersSearch}
-              fetching={this.state.fetchingSearch}
-              renderDropdown={!this.state.fetchingSearch && (({ defaultDropdownContent }) => {
-                if (this.state.remoteQuery.length < 3) {
-                  return <Text style={{ padding: 12, color: 'var(--text_secondary)' }} weight="regular">Нужно ввести хотя бы три символа</Text>;
-                } else {
-                  return defaultDropdownContent
+                  } else {
+                    this.setState({ remoteQuery, fetchingSearch: true });
+                    this.timeout = setTimeout(() => {
+                      this.setState({
+                        fetchingSearch: false,
+                        remoteUsersSearch: getRandomUsers(10).map((user) => ({
+                          label: user.name,
+                          value: user.id,
+                          avatar: user.photo_100,
+                        })),
+                      });
+                    }, 1500);
+                  }
+                }}
+                onClose={() => {
+                  clearTimeout(this.timeout);
+                  this.setState({ fetchingSearch: false, remoteQuery: "" });
+                }}
+                filterFn={false}
+                options={this.state.remoteUsersSearch}
+                fetching={this.state.fetchingSearch}
+                renderDropdown={
+                  !this.state.fetchingSearch &&
+                  (({ defaultDropdownContent }) => {
+                    if (this.state.remoteQuery.length < 3) {
+                      return (
+                        <Text
+                          style={{
+                            padding: 12,
+                            color: "var(--text_secondary)",
+                          }}
+                          weight="regular"
+                        >
+                          Нужно ввести хотя бы три символа
+                        </Text>
+                      );
+                    } else {
+                      return defaultDropdownContent;
+                    }
+                  })
                 }
-              })} 
-            />
-          </FormItem>
-        </React.Fragment>
+              />
+            </FormItem>
+          </Group>
+        </Panel>
+      </View>
     );
   }
 }
 
-<Example />
+<Example />;
 ```

package/src/components/CustomSelectDropdown/CustomSelectDropdown.css

@@ -0,0 +1,26 @@
+.CustomSelectDropdown__options {
+  width: 100%;
+  overflow: hidden;
+  background-color: var(--modal_card_background);
+  box-sizing: border-box;
+  border: solid 1px var(--field_border);
+  border-top: 0;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.03);
+  border-radius: 0 0 8px 8px;
+}
+
+.CustomSelectDropdown__options--popupDirectionTop {
+  bottom: 100%;
+  border-radius: 8px 8px 0 0;
+  border-top: unset;
+  border-bottom: 0;
+  box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.03);
+}
+
+.CustomSelectDropdown__CustomScrollView {
+  max-height: 160px;
+}
+
+.CustomSelectDropdown__fetching {
+  padding: 12px 0;
+}

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import CustomScrollView from "../CustomScrollView/CustomScrollView";
+import { classNames } from "../../lib/classNames";
+import { Popper, Placement } from "../Popper/Popper";
+import Spinner from "../Spinner/Spinner";
+import { HasRef } from "../../types";
+import "./CustomSelectDropdown.css";
+
+export interface CustomSelectDropdownProps
+  extends React.HTMLAttributes<HTMLElement>,
+    HasRef<HTMLElement> {
+  targetRef: React.RefObject<HTMLElement>;
+  placement?: Placement;
+  scrollBoxRef?: React.Ref<HTMLDivElement>;
+  fetching?: boolean;
+  onPlacementChange?: (placement?: Placement) => void;
+}
+
+const calcIsTop = (placement?: Placement) => placement?.includes("top");
+
+export const CustomSelectDropdown: React.FC<CustomSelectDropdownProps> = ({
+  children,
+  targetRef,
+  scrollBoxRef,
+  placement,
+  fetching,
+  onPlacementChange: parentOnPlacementChange,
+  ...restProps
+}) => {
+  const [isTop, setIsTop] = React.useState(() => calcIsTop(placement));
+
+  const onPlacementChange = React.useCallback(
+    ({ placement }: { placement?: Placement }) => {
+      setIsTop(calcIsTop(placement));
+      parentOnPlacementChange?.(placement);
+    },
+    [parentOnPlacementChange, setIsTop]
+  );
+
+  return (
+    <Popper
+      targetRef={targetRef}
+      offsetDistance={0}
+      sameWidth
+      onPlacementChange={onPlacementChange}
+      placement={placement}
+      vkuiClass={classNames("CustomSelectDropdown__options", {
+        "CustomSelectDropdown__options--popupDirectionTop": isTop,
+      })}
+      {...restProps}
+    >
+      <CustomScrollView
+        boxRef={scrollBoxRef}
+        vkuiClass="CustomSelectDropdown__CustomScrollView"
+      >
+        {fetching ? (
+          <div vkuiClass="CustomSelectDropdown__fetching">
+            <Spinner size="small" />
+          </div>
+        ) : (
+          children
+        )}
+      </CustomScrollView>
+    </Popper>
+  );
+};

package/src/components/CustomSelectOption/CustomSelectOption.css

@@ -16,7 +16,7 @@
 
 .CustomSelectOption--disabled {
   cursor: default;
-  opacity: .4;
+  opacity: 0.4;
 }
 
 .CustomSelectOption--hover {

package/src/components/CustomSelectOption/CustomSelectOption.tsx

@@ -1,15 +1,17 @@
-import * as React from 'react';
-import { Icon16Done } from '@vkontakte/icons';
-import { classNames } from '../../lib/classNames';
-import { hasReactNode } from '../../lib/utils';
-import Text from '../Typography/Text/Text';
-import Caption from '../Typography/Caption/Caption';
-import { HasRootRef } from '../../types';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { warnOnce } from '../../lib/warnOnce';
-import './CustomSelectOption.css';
+import * as React from "react";
+import { Icon16Done } from "@vkontakte/icons";
+import { classNames } from "../../lib/classNames";
+import { hasReactNode } from "../../lib/utils";
+import Text from "../Typography/Text/Text";
+import Caption from "../Typography/Caption/Caption";
+import { HasRootRef } from "../../types";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { warnOnce } from "../../lib/warnOnce";
+import "./CustomSelectOption.css";
 
-export interface CustomSelectOptionProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+export interface CustomSelectOptionProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement> {
   option?: any;
   selected?: boolean;
   focused?: boolean;
@@ -20,7 +22,7 @@ export interface CustomSelectOptionProps extends React.HTMLAttributes<HTMLDivEle
   disabled?: boolean;
 }
 
-const warn = warnOnce('CustomSelectOption');
+const warn = warnOnce("CustomSelectOption");
 
 const CustomSelectOption: React.FC<CustomSelectOptionProps> = ({
   children,
@@ -33,11 +35,11 @@ const CustomSelectOption: React.FC<CustomSelectOptionProps> = ({
   disabled,
   ...restProps
 }: CustomSelectOptionProps) => {
-  const title = typeof children === 'string' ? children : null;
+  const title = typeof children === "string" ? children : null;
   const { sizeY } = useAdaptivity();
 
-  if (!!option && process.env.NODE_ENV === 'development') {
-    warn('Свойство option было добавлено по ошибке будет и удалено в 5.0.0');
+  if (!!option && process.env.NODE_ENV === "development") {
+    warn("Свойство option было добавлено по ошибке будет и удалено в 5.0.0");
   }
 
   return (
@@ -49,22 +51,38 @@ const CustomSelectOption: React.FC<CustomSelectOptionProps> = ({
       title={title}
       aria-disabled={disabled}
       aria-selected={selected}
-      vkuiClass={classNames('CustomSelectOption', `CustomSelectOption--sizeY-${sizeY}`, {
-        'CustomSelectOption--hover': hovered && !disabled,
-        'CustomSelectOption--selected': selected,
-        'CustomSelectOption--disabled': disabled,
-      })}
+      vkuiClass={classNames(
+        "CustomSelectOption",
+        `CustomSelectOption--sizeY-${sizeY}`,
+        {
+          "CustomSelectOption--hover": hovered && !disabled,
+          "CustomSelectOption--selected": selected,
+          "CustomSelectOption--disabled": disabled,
+        }
+      )}
     >
-      {hasReactNode(before) && <div vkuiClass="CustomSelectOption__before">{before}</div>}
+      {hasReactNode(before) && (
+        <div vkuiClass="CustomSelectOption__before">{before}</div>
+      )}
       <div vkuiClass="CustomSelectOption__main">
         <div vkuiClass="CustomSelectOption__children">{children}</div>
-        {hasReactNode(description) &&
-          <Caption level="1" weight="regular" vkuiClass="CustomSelectOption__description">{description}</Caption>
-        }
+        {hasReactNode(description) && (
+          <Caption
+            level="1"
+            weight="regular"
+            vkuiClass="CustomSelectOption__description"
+          >
+            {description}
+          </Caption>
+        )}
       </div>
       <div vkuiClass="CustomSelectOption__after">
-        {hasReactNode(after) && <div className="CustomSelectOption__afterIn">{after}</div>}
-        {selected && <Icon16Done vkuiClass="CustomSelectOption__selectedIcon" />}
+        {hasReactNode(after) && (
+          <div className="CustomSelectOption__afterIn">{after}</div>
+        )}
+        {selected && (
+          <Icon16Done vkuiClass="CustomSelectOption__selectedIcon" />
+        )}
       </div>
     </Text>
   );

package/src/components/CustomSelectOption/Readme.md

@@ -1,15 +1,32 @@
-Унивирсальный компонент для отрисовки option в кастомных селектах. 
+Унивирсальный компонент для отрисовки option в кастомных селектах.
 Используется внутри [CustomSelect](#!/CustomSelect), [ChipsSelect](#!/ChipsSelect).
 
 ```jsx { "props": { "layout": false, "iframe": false } }
-<div style={{ margin: 50, width: 320, background: 'var(--background_page)' }}>
-  <CustomSelectOption style={{ background: 'var(--background_content)' }}>Дмитрий Безуглый</CustomSelectOption>
+<div style={{ margin: 50, width: 320, background: "var(--background_page)" }}>
+  <CustomSelectOption style={{ background: "var(--background_content)" }}>
+    Дмитрий Безуглый
+  </CustomSelectOption>
   <Header>description</Header>
-  <CustomSelectOption style={{ background: 'var(--background_content)' }} description="Россия, Санкт-Петербург">Вадим Дорохов</CustomSelectOption>
+  <CustomSelectOption
+    style={{ background: "var(--background_content)" }}
+    description="Россия, Санкт-Петербург"
+  >
+    Вадим Дорохов
+  </CustomSelectOption>
   <Header>before</Header>
-  <CustomSelectOption style={{ background: 'var(--background_content)' }} before={<Avatar size={20} />}>Иван Барышев</CustomSelectOption>
+  <CustomSelectOption
+    style={{ background: "var(--background_content)" }}
+    before={<Avatar size={20} />}
+  >
+    Иван Барышев
+  </CustomSelectOption>
   <Header>selected</Header>
-  <CustomSelectOption style={{ background: 'var(--background_content)' }} selected>Владимир Клепов</CustomSelectOption>
+  <CustomSelectOption
+    style={{ background: "var(--background_content)" }}
+    selected
+  >
+    Владимир Клепов
+  </CustomSelectOption>
   <Header>hovered</Header>
   <CustomSelectOption hovered>Игорь Федоров</CustomSelectOption>
 </div>