@vkontakte/vkui 4.33.4 → 4.34.2

package/src/components/CustomSelect/Readme.md

@@ -1,44 +1,15 @@
 Делает из [SelectMimicry](#!/SelectMimicry) селект с выпадающим списком. Используется внутри [Select](#!/Select).
 
 ```jsx { "props": { "layout": false, "iframe": false } }
-const Example = () => {
-  const getUsers = () =>
-    getRandomUsers(10).map((user) => ({
-      label: user.name,
-      value: user.id,
-      avatar: user.photo_100,
-      description: user.screen_name,
-    }));
-
-  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 getUsers = (usersArray) =>
+  usersArray.map((user) => ({
+    label: user.name,
+    value: `${user.id}`,
+    avatar: user.photo_100,
+    description: user.screen_name,
+  }));
 
+const Example = () => {
   const selectTypes = [
     {
       label: "SelectType.default",
@@ -55,29 +26,8 @@ const Example = () => {
   ];
 
   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: `Добавить пользователя ${query}`,
-        value: "0",
-      });
-    }
-    return options;
-  };
+  const users = [...getUsers(getRandomUsers(10))];
 
   return (
     <Div>
@@ -122,6 +72,18 @@ const Example = () => {
         />
       </FormItem>
 
+      <FormItem
+        top="Администратор"
+        bottom="Ползунок скроллбара по умолчанию скрыт"
+      >
+        <CustomSelect
+          placeholder="Не выбран"
+          options={users}
+          selectType={selectType}
+          autoHideScrollbar
+        />
+      </FormItem>
+
       <Header>Поиск</Header>
       <FormItem top="Администратор" bottom="Поиск по списку">
         <CustomSelect
@@ -132,124 +94,220 @@ const Example = () => {
       </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}
-            >
-              {option.label}
-            </CustomSelectOption>
-          )}
-          onChange={(e) => {
-            if (e.target.value === "0") {
-              setNewUsers([...newUsers, { label: query, value: query }]);
-              setQuery("");
-            } else {
-              setValue(e.target.value);
-            }
-            setQuery("");
-          }}
-        />
+        <CustomSearchLogicSelect />
       </FormItem>
+
       <FormItem top="Город" bottom="Кастомный алгоритм поиска">
+        <CustomSearchAlgoSelect />
+      </FormItem>
+
+      <Header>Асинхронная загрузка списка</Header>
+      <AsyncCustomSelect />
+    </Div>
+  );
+};
+
+// **
+// * Кастомное поведение при поиске
+// **
+const CustomSearchLogicSelect = () => {
+  const [value, setValue] = React.useState("");
+  const [query, setQuery] = React.useState("");
+  const [newUsers, setNewUsers] = React.useState([
+    ...getUsers(getRandomUsers(10)),
+  ]);
+
+  const customSearchOptions = () => {
+    const options = [...newUsers];
+    if (
+      query.length > 0 &&
+      !options.find((user) => user.value === query || user.label === query)
+    ) {
+      options.unshift({
+        label: `Добавить пользователя ${query}`,
+        value: "0",
+      });
+    }
+    return options;
+  };
+
+  const onCustomSearchChange = (e) => {
+    if (e.target.value === "0") {
+      setNewUsers([...newUsers, { label: query, value: query }]);
+      setValue(query);
+    } else {
+      setValue(e.target.value);
+    }
+    setQuery("");
+  };
+
+  const onCustomSearchInputChange = (e) => {
+    setQuery(e.target.value);
+  };
+
+  return (
+    <CustomSelect
+      value={value}
+      placeholder="Введите имя пользователя"
+      searchable
+      options={customSearchOptions()}
+      onInputChange={onCustomSearchInputChange}
+      renderOption={({ option, ...restProps }) => (
+        <CustomSelectOption
+          style={option.value === "0" ? { color: "var(--accent)" } : {}}
+          {...restProps}
+        >
+          {option.label}
+        </CustomSelectOption>
+      )}
+      onChange={onCustomSearchChange}
+    />
+  );
+};
+
+// **
+// * Кастомный алгоритм поиска
+// **
+const CustomSearchAlgoSelect = () => {
+  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 customSearchFilter = (value, option) =>
+    option.label.toLowerCase().includes(value.toLowerCase()) ||
+    option.description.toLowerCase().includes(value.toLowerCase());
+
+  return (
+    <CustomSelect
+      placeholder="Введите название города или страны"
+      searchable
+      filterFn={customSearchFilter}
+      renderOption={({ option, ...restProps }) => (
+        <CustomSelectOption {...restProps} description={option.description} />
+      )}
+      options={cities}
+    />
+  );
+};
+
+// **
+// * Асинхронная загрузка списка
+// **
+const AsyncCustomSelect = () => {
+  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 cleanFetchingTimeout = () => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+  };
+
+  const fetchRemoteUsers = () => {
+    setFetching(true);
+    timeout = setTimeout(() => {
+      setRemoteUsers([...getUsers(getAllUsers())]);
+      setFetching(false);
+      cleanFetchingTimeout();
+    }, 1500);
+  };
+
+  const searchRemoteUsers = (e) => {
+    const _remoteQuery = e.target.value;
+    cleanFetchingTimeout();
+    setRemoteQuery(_remoteQuery);
+
+    if (_remoteQuery.length < 3) {
+      setRemoteUsers([]);
+      setFetching(false);
+    } else {
+      fetchRemoteUsers();
+    }
+  };
+
+  const clearRemoteUsers = () => {
+    setRemoteUsers([]);
+    setRemoteQuery("");
+    cleanFetchingTimeout();
+  };
+
+  const renderDropdown = ({ defaultDropdownContent }) => {
+    if (remoteQuery.length < 3) {
+      return (
+        <Text style={{ padding: 12, color: "var(--text_secondary)" }}>
+          Нужно ввести хотя бы три символа
+        </Text>
+      );
+    }
+    return defaultDropdownContent;
+  };
+
+  React.useEffect(() => {
+    return () => cleanFetchingTimeout();
+  }, []);
+
+  return (
+    <FormLayoutGroup mode="horizontal">
+      <FormItem style={{ flexGrow: 1, flexShrink: 1 }}>
         <CustomSelect
-          placeholder="Введите название города или страны"
-          searchable
-          filterFn={(value, option) =>
-            option.label.toLowerCase().includes(value.toLowerCase()) ||
-            option.description.toLowerCase().includes(value.toLowerCase())
+          options={remoteUsers}
+          searchable={searchable}
+          placeholder={searchable ? "Введите имя пользователя" : "Не выбран"}
+          disabled={searchable && fetching}
+          onInputChange={searchable ? searchRemoteUsers : undefined}
+          onOpen={
+            searchable
+              ? undefined
+              : remoteUsers.length === 0 && fetchRemoteUsers
           }
-          renderOption={({ option, ...restProps }) => (
-            <CustomSelectOption
-              {...restProps}
-              description={option.description}
-            />
-          )}
-          options={cities}
+          onClose={() => {
+            console.log("CLOSED [async CustomSelect]");
+          }}
+          fetching={fetching}
+          renderDropdown={searchable && !fetching && renderDropdown}
         />
       </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 {
-                      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>
-
-        <FormItem style={{ flexBasis: "200px", flexGrow: 0 }}>
-          <Checkbox onChange={(e) => setSearchable(e.target.checked)}>
-            Использовать поиск
-          </Checkbox>
-        </FormItem>
-      </FormLayoutGroup>
-    </Div>
+      <FormItem style={{ flexBasis: "200px", flexGrow: 0 }}>
+        <Checkbox
+          onChange={(e) => {
+            setSearchable(e.target.checked);
+            clearRemoteUsers();
+          }}
+        >
+          Использовать поиск
+        </Checkbox>
+      </FormItem>
+    </FormLayoutGroup>
   );
 };
 

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -1,18 +1,24 @@
 import * as React from "react";
 import { Modifier } from "react-popper";
 import { CustomScrollView } from "../CustomScrollView/CustomScrollView";
+import { TrackerOptionsProps } from "../CustomScrollView/useTrackerVisibility";
 import { classNames } from "../../lib/classNames";
 import { Popper, Placement } from "../Popper/Popper";
 import { Spinner } from "../Spinner/Spinner";
 import { HasRef } from "../../types";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import "./CustomSelectDropdown.css";
 
 export interface CustomSelectDropdownProps
   extends React.HTMLAttributes<HTMLElement>,
-    HasRef<HTMLDivElement> {
+    HasRef<HTMLDivElement>,
+    TrackerOptionsProps {
   targetRef: React.RefObject<HTMLElement>;
   placement?: Placement;
   scrollBoxRef?: React.RefObject<HTMLDivElement>;
+  observableRefs?:
+    | Array<React.RefObject<HTMLElement>>
+    | React.RefObject<HTMLElement>;
   fetching?: boolean;
   offsetDistance?: number;
   sameWidth?: boolean;
@@ -22,7 +28,29 @@ export interface CustomSelectDropdownProps
 
 const calcIsTop = (placement?: Placement) => placement?.includes("top");
 
-export const CustomSelectDropdown: React.FC<CustomSelectDropdownProps> = ({
+function getObserverModifier<T extends HTMLElement>(
+  element: T
+): Modifier<string> {
+  return {
+    name: "customSelectChildrenChange",
+    enabled: true,
+    phase: "main",
+    effect: ({ instance }) => {
+      const observer = new MutationObserver(instance.forceUpdate);
+
+      observer.observe(element, {
+        childList: true,
+        subtree: true,
+      });
+
+      return () => {
+        observer.disconnect();
+      };
+    },
+  };
+}
+
+export const CustomSelectDropdown = ({
   children,
   targetRef,
   scrollBoxRef,
@@ -32,35 +60,34 @@ export const CustomSelectDropdown: React.FC<CustomSelectDropdownProps> = ({
   offsetDistance = 0,
   sameWidth = true,
   forcePortal = true,
+  autoHideScrollbar,
+  autoHideScrollbarDelay,
+  observableRefs,
   ...restProps
-}) => {
+}: CustomSelectDropdownProps) => {
   const [isTop, setIsTop] = React.useState(() => calcIsTop(placement));
+  const [customModifiers, setCustomModifiers] = React.useState<
+    Array<Modifier<string>>
+  >([]);
 
-  const customModifiers = React.useMemo<Array<Modifier<string>>>(() => {
-    if (!scrollBoxRef?.current) {
-      return [];
+  useIsomorphicLayoutEffect(() => {
+    if (!observableRefs) {
+      return;
     }
+    const customModifiers: Array<Modifier<string>> = [];
 
-    return [
-      {
-        name: "customSelectChildrenChange",
-        enabled: true,
-        phase: "main",
-        effect: ({ instance }) => {
-          const observer = new MutationObserver(instance.forceUpdate);
-
-          observer.observe(scrollBoxRef.current as Element, {
-            childList: true,
-          });
+    if (Array.isArray(observableRefs)) {
+      for (const ref of observableRefs) {
+        if (ref?.current) {
+          customModifiers.push(getObserverModifier(ref.current));
+        }
+      }
+    } else if (observableRefs.current) {
+      customModifiers.push(getObserverModifier(observableRefs.current));
+    }
 
-          return () => {
-            observer.disconnect();
-          };
-        },
-      },
-    ];
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [scrollBoxRef?.current]);
+    setCustomModifiers(customModifiers);
+  }, [observableRefs]);
 
   const onPlacementChange = React.useCallback(
     ({ placement }: { placement?: Placement }) => {
@@ -92,6 +119,8 @@ export const CustomSelectDropdown: React.FC<CustomSelectDropdownProps> = ({
       <CustomScrollView
         boxRef={scrollBoxRef}
         vkuiClass="CustomSelectDropdown__in"
+        autoHideScrollbar={autoHideScrollbar}
+        autoHideScrollbarDelay={autoHideScrollbarDelay}
       >
         {fetching ? (
           <div vkuiClass="CustomSelectDropdown__fetching">

package/src/components/CustomSelectOption/CustomSelectOption.tsx

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

package/src/components/DateInput/DateInput.tsx

@@ -97,7 +97,7 @@ const getInternalValue = (value: CalendarProps["value"]) => {
 /**
  * @see https://vkcom.github.io/VKUI/#/DateInput
  */
-export const DateInput: React.FC<DateInputProps> = ({
+export const DateInput = ({
   enableTime,
   shouldDisableDate,
   disableFuture,
@@ -134,7 +134,7 @@ export const DateInput: React.FC<DateInputProps> = ({
   prevMonthIcon,
   nextMonthIcon,
   ...props
-}) => {
+}: DateInputProps) => {
   const daysRef = React.useRef<HTMLSpanElement>(null);
   const monthsRef = React.useRef<HTMLSpanElement>(null);
   const yearsRef = React.useRef<HTMLSpanElement>(null);

package/src/components/DatePicker/DatePicker.tsx

@@ -80,9 +80,7 @@ const range = (start: number, end: number) => {
   return swap ? arr.reverse() : arr;
 };
 
-const DatePickerCustom: React.FC<
-  DatePickerProps & Partial<DatePickerDateFormat>
-> = ({
+const DatePickerCustom = ({
   name,
   min = { day: 0, month: 0, year: 0 },
   max = { day: 31, month: 12, year: 2100 },
@@ -99,7 +97,7 @@ const DatePickerCustom: React.FC<
   onDateChange,
   disabled,
   ...restProps
-}) => {
+}: DatePickerProps & Partial<DatePickerDateFormat>) => {
   const onSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
     onDateChange?.({
       day,
@@ -167,9 +165,7 @@ const DatePickerCustom: React.FC<
   );
 };
 
-const DatePickerNative: React.FC<
-  DatePickerProps & Partial<DatePickerDateFormat>
-> = ({
+const DatePickerNative = ({
   min = { day: 0, month: 0, year: 0 },
   max = { day: 31, month: 12, year: 2100 },
   dayPlaceholder,
@@ -183,7 +179,7 @@ const DatePickerNative: React.FC<
   year,
   onDateChange,
   ...restProps
-}) => {
+}: DatePickerProps & Partial<DatePickerDateFormat>) => {
   const defProps =
     day && month && year
       ? { defaultValue: convertToInputFormat({ day, month, year }) }
@@ -210,11 +206,11 @@ const DatePickerNative: React.FC<
 /**
  * @see https://vkcom.github.io/VKUI/#/DatePicker
  */
-const DatePickerComponent: React.FC<DatePickerProps> = ({
+const DatePickerComponent = ({
   hasMouse,
   defaultValue,
   ...props
-}) => {
+}: DatePickerProps) => {
   const [value, setValue] = React.useState<Partial<DatePickerDateFormat>>(
     () => ({
       day: defaultValue?.day || 0,

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -93,7 +93,7 @@ const getInternalValue = (value: CalendarRangeProps["value"]) => {
 /**
  * @see https://vkcom.github.io/VKUI/#/DateRangeInput
  */
-export const DateRangeInput: React.FC<DateRangeInputProps> = ({
+export const DateRangeInput = ({
   shouldDisableDate,
   disableFuture,
   disablePast,
@@ -126,7 +126,7 @@ export const DateRangeInput: React.FC<DateRangeInputProps> = ({
   prevMonthIcon,
   nextMonthIcon,
   ...props
-}) => {
+}: DateRangeInputProps) => {
   const daysStartRef = React.useRef<HTMLSpanElement>(null);
   const monthsStartRef = React.useRef<HTMLSpanElement>(null);
   const yearsStartRef = React.useRef<HTMLSpanElement>(null);

package/src/components/Div/Div.tsx

@@ -9,11 +9,7 @@ export interface DivProps
 /**
  * @see https://vkcom.github.io/VKUI/#/Div
  */
-export const Div: React.FC<DivProps> = ({
-  children,
-  getRootRef,
-  ...restProps
-}) => {
+export const Div = ({ children, getRootRef, ...restProps }: DivProps) => {
   return (
     <div {...restProps} ref={getRootRef} vkuiClass="Div">
       {children}

package/src/components/Dropdown/Dropdown.css

@@ -1,19 +1,6 @@
 .Dropdown {
   animation: vkui-popper-fadein 0.2s ease;
-  background: var(--modal_card_background);
-}
-
-.Dropdown--ios {
-  box-shadow: 0 0 96px rgba(0, 0, 0, 0.16), 0 0 2px rgba(0, 0, 0, 0.12);
-  border-radius: 14px;
-}
-
-.Dropdown--android {
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.08), 0 8px 8px rgba(0, 0, 0, 0.16);
-  border-radius: 12px;
-}
-
-.Dropdown--vkcom {
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
-  border-radius: 12px;
+  background: var(--modal_card_background, var(--vkui--color_background_modal));
+  border-radius: var(--vkui--size_border_radius--regular);
+  box-shadow: var(--vkui--elevation3);
 }