@vkontakte/vkui 4.31.0 → 4.32.0

package/src/components/CustomSelect/Readme.md

@@ -1,248 +1,257 @@
 Делает из [SelectMimicry](#!/SelectMimicry) селект с выпадающим списком. Используется внутри [Select](#!/Select).
 
 ```jsx { "props": { "layout": false, "iframe": false } }
-class Example extends React.Component {
-  constructor(props) {
-    super(props);
-    this.users = getRandomUsers(10).map((user) => ({
+const Example = () => {
+  const getUsers = () =>
+    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: "",
-      newUsers: [],
-      fetching: false,
-      fetchingSearch: false,
-      remoteUsers: [],
-      remoteUsersSearch: [],
-    };
-  }
-
-  get customSearchOptions() {
-    const options = [...this.state.newUsers, ...this.users];
-    if (this.state.query.length > 0) {
+
+  const cities = [
+    {
+      label: "Санкт-Петербург",
+      description: "Россия",
+      value: 0,
+    },
+    {
+      label: "Москва",
+      description: "Россия",
+      value: 1,
+    },
+    {
+      label: "Новосибирск",
+      description: "Россия",
+      disabled: true,
+      value: 2,
+    },
+    {
+      label: "Нью-Йорк",
+      description: "США",
+      value: 3,
+    },
+    {
+      label: "Чикаго",
+      description: "США",
+      value: 4,
+    },
+  ];
+
+  const selectTypes = [
+    {
+      label: "SelectType.default",
+      value: "default",
+    },
+    {
+      label: "SelectType.plain",
+      value: "plain",
+    },
+    {
+      label: "SelectType.accent",
+      value: "accent",
+    },
+  ];
+
+  const [selectType, setSelectType] = React.useState(undefined);
+  const [value, setValue] = React.useState("0");
+  const [query, setQuery] = React.useState("");
+  const [newUsers, setNewUsers] = React.useState([...getUsers()]);
+
+  const [searchable, setSearchable] = React.useState(false);
+  const [remoteQuery, setRemoteQuery] = React.useState("");
+  const [fetching, setFetching] = React.useState(false);
+  const [remoteUsers, setRemoteUsers] = React.useState([]);
+
+  let timeout;
+
+  const users = [...getUsers()];
+
+  const customSearchOptions = () => {
+    const options = [...newUsers];
+    if (query.length > 0) {
       options.unshift({
-        label: `Добавить пользователя ${this.state.query}`,
-        value: 0,
+        label: `Добавить пользователя ${query}`,
+        value: "0",
       });
     }
     return options;
-  }
-
-  render() {
-    return (
-      <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())
-                }
-                renderOption={({ option, ...restProps }) => (
-                  <CustomSelectOption
-                    {...restProps}
-                    description={option.description}
-                  />
-                )}
-                options={this.cities}
+  };
+
+  return (
+    <Div>
+      <Header>Базовые примеры использования</Header>
+
+      <FormLayoutGroup mode="horizontal">
+        <FormItem style={{ flexGrow: 1, flexShrink: 1 }} top="Администратор">
+          <CustomSelect
+            placeholder="Не выбран"
+            options={users}
+            selectType={selectType}
+          />
+        </FormItem>
+
+        <FormItem top="Вид селекта" style={{ flexBasis: "200px", flexGrow: 0 }}>
+          <CustomSelect
+            value={selectType}
+            placeholder="Не задан"
+            options={selectTypes}
+            onChange={(e) => setSelectType(e.target.value)}
+            renderOption={({ option, ...restProps }) => (
+              <CustomSelectOption
+                {...restProps}
+                description={`"${option.value}"`}
               />
-            </FormItem>
-            <FormItem
-              top="Администратор"
-              bottom="Кастомное поведение при поиске"
+            )}
+          />
+        </FormItem>
+      </FormLayoutGroup>
+
+      <FormItem top="Администратор" bottom="Кастомный дизайн элементов списка">
+        <CustomSelect
+          placeholder="Не выбран"
+          options={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={users}
+        />
+      </FormItem>
+
+      <FormItem top="Администратор" bottom="Кастомное поведение при поиске">
+        <CustomSelect
+          placeholder="Введите имя пользователя"
+          searchable
+          options={customSearchOptions()}
+          onInputChange={(e) => {
+            setQuery(e.target.value);
+          }}
+          renderOption={({ option, ...restProps }) => (
+            <CustomSelectOption
+              style={option.value === "0" ? { color: "var(--accent)" } : {}}
+              {...restProps}
             >
-              <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: [],
-                    });
-                  } 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>
-                      );
+              {option.label}
+            </CustomSelectOption>
+          )}
+          onChange={(e) => {
+            if (e.target.value === "0") {
+              setNewUsers([...newUsers, { label: query, value: query }]);
+              setQuery("");
+            } else {
+              setValue(e.target.value);
+            }
+            setQuery("");
+          }}
+        />
+      </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={cities}
+        />
+      </FormItem>
+
+      <Header>Асинхронная загрузка списка</Header>
+      <FormLayoutGroup mode="horizontal">
+        <FormItem style={{ flexGrow: 1, flexShrink: 1 }}>
+          <CustomSelect
+            searchable={searchable}
+            placeholder={searchable ? "Введите имя пользователя" : "Не выбран"}
+            disabled={searchable && fetching}
+            onInputChange={
+              searchable
+                ? (e) => {
+                    const _remoteQuery = e.target.value;
+                    clearTimeout(timeout);
+                    setRemoteQuery(_remoteQuery);
+                    if (_remoteQuery.length < 3) {
+                      setRemoteUsers([]);
+                      setFetching(false);
                     } else {
-                      return defaultDropdownContent;
+                      setFetching(true);
+                      timeout = setTimeout(() => {
+                        setRemoteUsers([...getUsers()]);
+                        setFetching(false);
+                      }, 1500);
+                    }
+                  }
+                : undefined
+            }
+            onOpen={
+              !searchable
+                ? () => {
+                    if (remoteUsers.length === 0) {
+                      setFetching(true);
+                      timeout = setTimeout(() => {
+                        setRemoteUsers([...getUsers()]);
+                        setFetching(false);
+                        clearTimeout(timeout);
+                      }, 1500);
                     }
-                  })
+                  }
+                : undefined
+            }
+            onClose={() => {
+              clearTimeout(timeout);
+              setRemoteUsers([]);
+              setRemoteQuery("");
+            }}
+            fetching={fetching}
+            options={remoteUsers}
+            renderDropdown={
+              searchable &&
+              !fetching &&
+              (({ defaultDropdownContent }) => {
+                if (remoteQuery.length < 3) {
+                  return (
+                    <Text
+                      style={{ padding: 12, color: "var(--text_secondary)" }}
+                    >
+                      Нужно ввести хотя бы три символа
+                    </Text>
+                  );
+                } else {
+                  return defaultDropdownContent;
                 }
-              />
-            </FormItem>
-          </Group>
-        </Panel>
-      </View>
-    );
-  }
-}
+              })
+            }
+          />
+        </FormItem>
+
+        <FormItem style={{ flexBasis: "200px", flexGrow: 0 }}>
+          <Checkbox onChange={(e) => setSearchable(e.target.checked)}>
+            Использовать поиск
+          </Checkbox>
+        </FormItem>
+      </FormLayoutGroup>
+    </Div>
+  );
+};
 
 <Example />;
 ```

package/src/components/CustomSelectDropdown/CustomSelectDropdown.css

@@ -1,4 +1,4 @@
-.CustomSelectDropdown__options {
+.CustomSelectDropdown {
   overflow: hidden;
   background-color: var(
     --modal_card_background,
@@ -7,37 +7,40 @@
   box-sizing: border-box;
   border: var(--thin-border) solid
     var(--field_border, var(--vkui--color_separator_primary_alpha));
-  border-top: 0;
   box-shadow: var(--vkui--elevation1);
-  border-radius: 0 0 8px 8px;
+  border-radius: 8px;
 }
 
-.CustomSelectDropdown__options--same-width {
+.CustomSelectDropdown--wide {
   width: 100%;
 }
 
-:not(.CustomSelectDropdown__options--same-width) .CustomScrollView__box {
-  padding-right: 8px;
+.CustomSelectDropdown--bottom {
+  border-top: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
 
-.CustomSelectDropdown__options--popupDirectionTop {
+.CustomSelectDropdown--top {
   bottom: 100%;
-  border-radius: 8px 8px 0 0;
-  border-top: unset;
   border-bottom: 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
   box-shadow: var(--vkui--elevation1_invert_y);
 }
 
-.CustomSelectDropdown__options--not-adjacent {
-  border-radius: 8px;
-  border: var(--thin-border) solid
-    var(--field_border, var(--vkui--color_separator_primary_alpha));
+.CustomSelectDropdown__fetching {
+  padding: 12px 0;
 }
 
-.CustomSelectDropdown__CustomScrollView {
+.CustomSelectDropdown__in {
   max-height: 160px;
 }
 
-.CustomSelectDropdown__fetching {
-  padding: 12px 0;
+/**
+ * CMP:
+ * CalendarHeader
+ */
+.CalendarHeader__pickers .CustomSelectDropdown__in {
+  max-height: 184px;
 }

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
-import CustomScrollView from "../CustomScrollView/CustomScrollView";
+import { CustomScrollView } from "../CustomScrollView/CustomScrollView";
 import { classNames } from "../../lib/classNames";
 import { Popper, Placement } from "../Popper/Popper";
-import Spinner from "../Spinner/Spinner";
+import { Spinner } from "../Spinner/Spinner";
 import { HasRef } from "../../types";
 import "./CustomSelectDropdown.css";
 
@@ -51,17 +51,19 @@ export const CustomSelectDropdown: React.FC<CustomSelectDropdownProps> = ({
       onPlacementChange={onPlacementChange}
       placement={placement}
       vkuiClass={classNames(
-        "CustomSelectDropdown__options",
-        isTop && "CustomSelectDropdown__options--popupDirectionTop",
-        offsetDistance > 0 && "CustomSelectDropdown__options--not-adjacent",
-        sameWidth && "CustomSelectDropdown__options--same-width"
+        "CustomSelectDropdown",
+        offsetDistance === 0 &&
+          (isTop
+            ? "CustomSelectDropdown--top"
+            : "CustomSelectDropdown--bottom"),
+        sameWidth && "CustomSelectDropdown--wide"
       )}
       forcePortal={forcePortal}
       {...restProps}
     >
       <CustomScrollView
         boxRef={scrollBoxRef}
-        vkuiClass="CustomSelectDropdown__CustomScrollView"
+        vkuiClass="CustomSelectDropdown__in"
       >
         {fetching ? (
           <div vkuiClass="CustomSelectDropdown__fetching">

package/src/components/CustomSelectOption/CustomSelectOption.tsx

@@ -54,6 +54,9 @@ export interface CustomSelectOptionProps
 
 const warn = warnOnce("CustomSelectOption");
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/CustomSelectOption
+ */
 export const CustomSelectOption: React.FC<CustomSelectOptionProps> = ({
   children,
   hierarchy = 0,

package/src/components/DateInput/DateInput.tsx

@@ -94,6 +94,9 @@ const getInternalValue = (value: CalendarProps["value"]) => {
   return newValue;
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/DateInput
+ */
 export const DateInput: React.FC<DateInputProps> = ({
   enableTime,
   shouldDisableDate,

package/src/components/DatePicker/DatePicker.tsx

@@ -207,6 +207,9 @@ const DatePickerNative: React.FC<
   );
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/DatePicker
+ */
 const DatePicker: React.FC<DatePickerProps> = ({
   hasMouse,
   defaultValue,

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -90,6 +90,9 @@ const getInternalValue = (value: CalendarRangeProps["value"]) => {
   return newValue;
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/DateRangeInput
+ */
 export const DateRangeInput: React.FC<DateRangeInputProps> = ({
   shouldDisableDate,
   disableFuture,

package/src/components/Div/Div.css

@@ -1,7 +1,4 @@
 .Div {
-  padding: 12px 16px;
-}
-
-.Div--ios {
-  padding: 12px;
+  padding: var(--vkui--size_base_padding_vertical--regular)
+    var(--vkui--size_base_padding_horizontal--regular);
 }

package/src/components/Div/Div.tsx

@@ -1,6 +1,4 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
 import { HasRootRef } from "../../types";
 import "./Div.css";
 
@@ -8,18 +6,16 @@ export interface DivProps
   extends React.HTMLAttributes<HTMLDivElement>,
     HasRootRef<HTMLDivElement> {}
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Div
+ */
 export const Div: React.FC<DivProps> = ({
   children,
   getRootRef,
   ...restProps
 }) => {
-  const platform = usePlatform();
   return (
-    <div
-      {...restProps}
-      ref={getRootRef}
-      vkuiClass={getClassName("Div", platform)}
-    >
+    <div {...restProps} ref={getRootRef} vkuiClass="Div">
       {children}
     </div>
   );