@vkontakte/vkui 7.5.4 → 7.6.0

package/src/components/CustomSelect/CustomSelectInput/CustomSelectInput.module.css

@@ -44,6 +44,14 @@
   padding-inline-end: 0;
 }
 
+.inputHidden .el {
+  opacity: 0;
+}
+
+.labelHidden .container {
+  opacity: 0;
+}
+
 .container {
   z-index: var(--vkui_internal--z_index_form_field_element);
   box-sizing: border-box;
@@ -55,6 +63,10 @@
   pointer-events: none;
 }
 
+.accessible:not(.hasInputValue):focus-within .container {
+  color: var(--vkui--color_text_tertiary);
+}
+
 .hasBefore .container {
   padding-inline-start: 0;
 }

package/src/components/CustomSelect/CustomSelectInput/CustomSelectInput.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./CustomSelectInput.module.css"],"names":["host","el","elCursorPointer","sizeYCompact","sizeYNone","hasBefore","hasAfter","container","multiline","inputGroup","title","empty","alignRight","alignCenter"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAC,I,WAJA;AAAA,E,aAwBAC,iB,WAxBA;AAAA,E,aA4BAC,c,WA5BA;AAAA,E,aA4BcF,I,WA5Bd;AAAA,E,aAiCEG,W,WAjCF;AAAA,E,aAiCaH,I,WAjCb;AAAA,E,aAsCAI,W,WAtCA;AAAA,E,aAsCWJ,I,WAtCX;AAAA,E,aA0CAK,U,WA1CA;AAAA,E,aA0CUL,I,WA1CV;AAAA,E,aA8CAM,W,WA9CA;AAAA,E,aAyDAF,W,WAzDA;AAAA,E,aAyDWE,W,WAzDX;AAAA,E,aA6DAC,W,WA7DA;AAAA,E,aA6DWD,W,WA7DX;AAAA,E,aAiEAJ,c,WAjEA;AAAA,E,aAiEaK,W,WAjEb;AAAA,E,aAiEwBD,W,WAjExB;AAAA,E,aAsEEH,W,WAtEF;AAAA,E,aAsEYI,W,WAtEZ;AAAA,E,aAsEuBD,W,WAtEvB;AAAA,E,aA2EAE,Y,WA3EA;AAAA,E,aAoFAJ,W,WApFA;AAAA,E,aAoFWI,Y,WApFX;AAAA,E,aAwFAC,O,WAxFA;AAAA,E,aA4FAV,M,WA5FA;AAAA,E,aA4FUQ,W,WA5FV;AAAA,E,aA4FsBE,O,WA5FtB;AAAA,E,aAkGAC,O,WAlGA;AAAA,E,aAkGOD,O,WAlGP;AAAA,E,aAyGAT,I,WAzGA;AAAA,E,aA6GAW,Y,WA7GA;AAAA,E,aA6GYF,O,WA7GZ;AAAA,E,aA8GAE,Y,WA9GA;AAAA,E,aA8GYX,I,WA9GZ;AAAA,E,aAkHAY,a,WAlHA;AAAA,E,aAkHaH,O,WAlHb;AAAA,E,aAmHAG,a,WAnHA;AAAA,E,aAmHaZ,I,WAnHb;AAAA,E,aA4H6CM,W,WA5H7C;AAAA;AAAA","file":"CustomSelectInput.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./CustomSelectInput.module.css"],"names":["host","el","elCursorPointer","sizeYCompact","sizeYNone","hasBefore","hasAfter","inputHidden","labelHidden","container","accessible","hasInputValue","multiline","inputGroup","title","empty","alignRight","alignCenter"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAC,I,WAJA;AAAA,E,aAwBAC,iB,WAxBA;AAAA,E,aA4BAC,c,WA5BA;AAAA,E,aA4BcF,I,WA5Bd;AAAA,E,aAiCEG,W,WAjCF;AAAA,E,aAiCaH,I,WAjCb;AAAA,E,aAsCAI,W,WAtCA;AAAA,E,aAsCWJ,I,WAtCX;AAAA,E,aA0CAK,U,WA1CA;AAAA,E,aA0CUL,I,WA1CV;AAAA,E,aA8CAM,a,WA9CA;AAAA,E,aA8CaN,I,WA9Cb;AAAA,E,aAkDAO,a,WAlDA;AAAA,E,aAkDaC,W,WAlDb;AAAA,E,aAsDAA,W,WAtDA;AAAA,E,aAiEAC,Y,WAjEA;AAAA,E,aAiEgBC,e,WAjEhB;AAAA,E,aAiE6CF,W,WAjE7C;AAAA,E,aAqEAJ,W,WArEA;AAAA,E,aAqEWI,W,WArEX;AAAA,E,aAyEAG,W,WAzEA;AAAA,E,aAyEWH,W,WAzEX;AAAA,E,aA6EAN,c,WA7EA;AAAA,E,aA6EaS,W,WA7Eb;AAAA,E,aA6EwBH,W,WA7ExB;AAAA,E,aAkFEL,W,WAlFF;AAAA,E,aAkFYQ,W,WAlFZ;AAAA,E,aAkFuBH,W,WAlFvB;AAAA,E,aAuFAI,Y,WAvFA;AAAA,E,aAgGAR,W,WAhGA;AAAA,E,aAgGWQ,Y,WAhGX;AAAA,E,aAoGAC,O,WApGA;AAAA,E,aAwGAd,M,WAxGA;AAAA,E,aAwGUY,W,WAxGV;AAAA,E,aAwGsBE,O,WAxGtB;AAAA,E,aA8GAC,O,WA9GA;AAAA,E,aA8GOD,O,WA9GP;AAAA,E,aAqHAb,I,WArHA;AAAA,E,aAyHAe,Y,WAzHA;AAAA,E,aAyHYF,O,WAzHZ;AAAA,E,aA0HAE,Y,WA1HA;AAAA,E,aA0HYf,I,WA1HZ;AAAA,E,aA8HAgB,a,WA9HA;AAAA,E,aA8HaH,O,WA9Hb;AAAA,E,aA+HAG,a,WA/HA;AAAA,E,aA+HahB,I,WA/Hb;AAAA,E,aAwI6CQ,W,WAxI7C;AAAA;AAAA","file":"CustomSelectInput.module.css.d.ts","sourceRoot":""}

package/src/components/CustomSelect/CustomSelectInput/CustomSelectInput.tsx

@@ -31,6 +31,8 @@ export interface CustomSelectInputProps
   multiline?: boolean;
   labelTextTestId?: string;
   fetching?: boolean;
+  searchable?: boolean;
+  accessible?: boolean;
 }
 
 /**
@@ -53,6 +55,8 @@ export const CustomSelectInput = ({
   disabled,
   fetching,
   labelTextTestId,
+  searchable,
+  accessible,
   ...restProps
 }: CustomSelectInputProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
@@ -63,12 +67,14 @@ export const CustomSelectInput = ({
   const handleRootRef = useExternRef(getRootRef);
   const focusWithin = useFocusWithin(handleRootRef);
 
+  const inputReadonly = restProps.readOnly || (disabled && fetching);
+
   const input = (
     <Text
       type="text"
       {...restProps}
       disabled={disabled && !fetching}
-      readOnly={restProps.readOnly || (disabled && fetching)}
+      readOnly={inputReadonly}
       Component="input"
       normalize={false}
       className={classNames(
@@ -80,6 +86,19 @@ export const CustomSelectInput = ({
     />
   );
 
+  const inputHidden = React.useMemo(() => {
+    if (accessible) {
+      if (!searchable) {
+        return true;
+      }
+      return !focusWithin || (inputReadonly && !fetching);
+    } else {
+      return false;
+    }
+  }, [accessible, fetching, focusWithin, inputReadonly, searchable]);
+
+  const labelHidden = showLabelOrPlaceholder ? false : !inputHidden;
+
   const platform = usePlatform();
   return (
     <FormField
@@ -94,6 +113,10 @@ export const CustomSelectInput = ({
         sizeY !== 'regular' && sizeYClassNames[sizeY],
         before && styles.hasBefore,
         after && styles.hasAfter,
+        inputHidden && styles.inputHidden,
+        labelHidden && styles.labelHidden,
+        accessible && styles.accessible,
+        restProps.value && styles.hasInputValue,
         className,
       )}
       getRootRef={handleRootRef}
@@ -111,7 +134,7 @@ export const CustomSelectInput = ({
           data-testid={labelTextTestId}
         >
           <SelectTypography selectType={selectType} className={styles.title}>
-            {showLabelOrPlaceholder && title}
+            {title}
           </SelectTypography>
         </div>
         {/* Чтобы отключить autosuggestion в iOS, тултипы которого начинают всплывать даже когда input

package/src/components/CustomSelect/helpers.ts

@@ -0,0 +1,103 @@
+import { getTextFromChildren } from '../../lib/children';
+import { warnOnce } from '../../lib/warnOnce';
+import { NOT_SELECTED, type SelectValue } from '../NativeSelect/NativeSelect';
+import { type SelectProps } from './CustomSelect';
+import { type CustomSelectOptionInterface } from './types';
+
+export const findIndexAfter = (options: CustomSelectOptionInterface[] = [], startIndex = -1) => {
+  if (startIndex >= options.length - 1) {
+    return -1;
+  }
+  return options.findIndex((option, i) => i > startIndex && !option.disabled);
+};
+
+export const findIndexBefore = (
+  options: CustomSelectOptionInterface[] = [],
+  endIndex: number = options.length,
+) => {
+  let result = -1;
+  if (endIndex <= 0) {
+    return result;
+  }
+  for (let i = endIndex - 1; i >= 0; i--) {
+    let option = options[i];
+
+    if (!option.disabled) {
+      result = i;
+      break;
+    }
+  }
+  return result;
+};
+const warn = warnOnce('CustomSelect');
+
+export const checkOptionsValueType = <T extends CustomSelectOptionInterface>(options: T[]) => {
+  if (new Set(options.map((item) => typeof item.value)).size > 1) {
+    warn(
+      'Некоторые значения ваших опций имеют разные типы. onChange всегда возвращает строковый тип.',
+      'error',
+    );
+  }
+};
+
+export const checkMixControlledAndUncontrolledState = (
+  oldIsControlled: boolean,
+  newIsControlled: boolean,
+) => {
+  if (!oldIsControlled && newIsControlled) {
+    warn(
+      `Похоже, что компонент был переведен из состояния Uncontrolled в Controlled. Пожалуйста, не делайте так. Если вам нужно отобразить невыбранное состояние компонента, используйте value=null вместо undefined`,
+      'error',
+    );
+  }
+  if (oldIsControlled && !newIsControlled) {
+    warn(
+      `Похоже, что компонент был переведен из состояния Controlled в Uncontrolled. Пожалуйста, не делайте так. Если вам нужно отобразить невыбранное состояние компонента, используйте value=null вместо undefined`,
+      'error',
+    );
+  }
+};
+
+export function findSelectedIndex<T extends CustomSelectOptionInterface>(
+  options: T[] = [],
+  value: SelectValue,
+) {
+  if (value === NOT_SELECTED.CUSTOM) {
+    return -1;
+  }
+  return (
+    options.findIndex((item) => {
+      value = typeof item.value === 'number' ? Number(value) : value;
+      return item.value === value;
+    }) ?? -1
+  );
+}
+
+export function getOptionByValue<T extends CustomSelectOptionInterface>(
+  options: T[] = [],
+  value: SelectValue,
+): T | null {
+  const index = findSelectedIndex(options, value);
+  if (index === -1) {
+    return null;
+  }
+  return options[index];
+}
+
+export const filter = <T extends CustomSelectOptionInterface>(
+  options: SelectProps<T>['options'],
+  inputValue: string,
+  filterFn: SelectProps<T>['filterFn'],
+) => {
+  return typeof filterFn === 'function'
+    ? options.filter((option) => filterFn(inputValue, option))
+    : options;
+};
+
+export function calculateInputValueFromOptions<T extends CustomSelectOptionInterface>(
+  options: T[] = [],
+  selectValue: SelectValue,
+) {
+  const selectedOption = getOptionByValue(options, selectValue);
+  return selectedOption ? getTextFromChildren(selectedOption.label) : '';
+}

package/src/components/CustomSelect/hooks/useAfterItems.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import * as React from 'react';
+import { useStableCallback } from '../../../hooks/useStableCallback';
+import { DropdownIcon } from '../../DropdownIcon/DropdownIcon';
+import { type NativeSelectValue, NOT_SELECTED } from '../../NativeSelect/NativeSelect';
+import { type SelectProps } from '../CustomSelect';
+import { CustomSelectClearButton } from '../CustomSelectClearButton';
+import styles from '../CustomSelect.module.css';
+
+/* eslint-disable jsdoc/require-jsdoc */
+interface UseAfterItemsProps
+  extends Pick<
+    SelectProps,
+    | 'value'
+    | 'allowClearButton'
+    | 'icon'
+    | 'readOnly'
+    | 'disabled'
+    | 'ClearButton'
+    | 'clearButtonTestId'
+  > {
+  isControlledOutside: boolean;
+  nativeSelectValue: NativeSelectValue;
+  opened: boolean;
+  onClearButtonClick: () => void;
+}
+/* eslint-enable jsdoc/require-jsdoc */
+
+export function useAfterItems({
+  value,
+  nativeSelectValue,
+  isControlledOutside,
+  opened,
+  allowClearButton,
+  ClearButton = CustomSelectClearButton,
+  onClearButtonClick,
+  clearButtonTestId,
+  disabled,
+  readOnly,
+  icon: iconProp,
+}: UseAfterItemsProps) {
+  const onClearButtonClickCb = useStableCallback(onClearButtonClick);
+
+  const controlledValueSet = isControlledOutside && value !== NOT_SELECTED.CUSTOM;
+  const uncontrolledValueSet = !isControlledOutside && nativeSelectValue !== NOT_SELECTED.NATIVE;
+  const clearButtonShown =
+    allowClearButton && !opened && (controlledValueSet || uncontrolledValueSet);
+
+  const clearButton = React.useMemo(() => {
+    if (!clearButtonShown) {
+      return null;
+    }
+
+    return (
+      <ClearButton
+        className={iconProp === undefined ? styles.clearIcon : undefined}
+        onClick={onClearButtonClickCb}
+        disabled={disabled}
+        data-testid={clearButtonTestId}
+      />
+    );
+  }, [clearButtonShown, ClearButton, iconProp, onClearButtonClickCb, disabled, clearButtonTestId]);
+
+  const icon = React.useMemo(() => {
+    if (iconProp !== undefined) {
+      return iconProp;
+    }
+
+    return (
+      <DropdownIcon
+        className={clearButtonShown ? styles.dropdownIcon : undefined}
+        opened={opened}
+      />
+    );
+  }, [clearButtonShown, iconProp, opened]);
+
+  return React.useMemo(
+    () =>
+      !readOnly &&
+      (icon || clearButtonShown) && (
+        <React.Fragment>
+          {clearButton}
+          {icon}
+        </React.Fragment>
+      ),
+    [clearButton, clearButtonShown, icon, readOnly],
+  );
+}

package/src/components/CustomSelect/hooks/useDropdownOpenedController.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { noop } from '@vkontakte/vkjs';
+import { useStableCallback } from '../../../hooks/useStableCallback';
+import { type SelectProps } from '../CustomSelect';
+/* eslint-disable jsdoc/require-jsdoc */
+type UseDropdownOpenedControllerProps = Pick<SelectProps, 'onOpen' | 'onClose'> & {
+  onOpened?: () => void;
+  onClosed?: () => void;
+};
+/* eslint-enable jsdoc/require-jsdoc */
+export function useDropdownOpenedController({
+  onClose,
+  onOpen,
+  onOpened,
+  onClosed,
+}: UseDropdownOpenedControllerProps) {
+  const [opened, setOpened] = React.useState(false);
+  const onCloseCb = useStableCallback(onClose || noop);
+  const onOpenCb = useStableCallback(onOpen || noop);
+  const onOpenedCb = useStableCallback(onOpened || noop);
+  const onClosedCb = useStableCallback(onClosed || noop);
+
+  const close = React.useCallback(() => {
+    if (!opened) {
+      return;
+    }
+    setOpened(false);
+    onCloseCb?.();
+  }, [onCloseCb, opened]);
+
+  const open = React.useCallback(() => {
+    if (opened) {
+      return;
+    }
+    setOpened(true);
+    onOpenCb?.();
+  }, [onOpenCb, opened]);
+
+  const toggleOpened = React.useCallback(() => {
+    if (opened) {
+      close();
+    } else {
+      open();
+    }
+  }, [close, open, opened]);
+
+  React.useEffect(() => {
+    if (opened) {
+      onOpenedCb();
+    } else {
+      onClosedCb();
+    }
+  }, [onClosedCb, onOpenedCb, opened]);
+
+  return {
+    opened,
+    open,
+    close,
+    toggleOpened,
+  };
+}

package/src/components/CustomSelect/hooks/useFocusedOptionController.ts

@@ -0,0 +1,86 @@
+import { type Dispatch, type SetStateAction } from 'react';
+import * as React from 'react';
+import { type SelectValue } from '../../NativeSelect/NativeSelect';
+import { type SelectProps } from '../CustomSelect';
+import { findIndexAfter, findIndexBefore, findSelectedIndex } from '../helpers';
+import { type CustomSelectOptionInterface } from '../types';
+
+/* eslint-disable jsdoc/require-jsdoc */
+interface UseFocusedOptionControllerProps<OptionInterfaceT extends CustomSelectOptionInterface> {
+  filteredOptions: SelectProps<OptionInterfaceT>['options'];
+  scrollToElement: (index: number, center?: boolean) => void;
+  selectedOptionValue: SelectValue;
+}
+
+export interface UseFocusedOptionControllerReturn {
+  focusedOptionValue: SelectValue;
+  setFocusedOptionValue: Dispatch<SetStateAction<SelectValue>>;
+  focusOptionByIndex: (index: number | undefined, scrollTo: boolean) => void;
+  resetFocusedOption: () => void;
+  focusOption: (type: 'next' | 'prev') => void;
+  selectFocusedValue: () => void;
+}
+/* eslint-enable jsdoc/require-jsdoc */
+
+export function useFocusedOptionController<OptionInterfaceT extends CustomSelectOptionInterface>({
+  selectedOptionValue,
+  filteredOptions,
+  scrollToElement,
+}: UseFocusedOptionControllerProps<OptionInterfaceT>): UseFocusedOptionControllerReturn {
+  const [focusedOptionValue, setFocusedOptionValue] = React.useState<SelectValue>(null);
+
+  const focusOptionByIndex = React.useCallback(
+    (index: number | undefined, scrollTo = true) => {
+      if (index === undefined || index < 0 || index > filteredOptions.length - 1) {
+        return;
+      }
+      const option = filteredOptions[index];
+
+      if (!option || option.disabled) {
+        return;
+      }
+
+      if (scrollTo) {
+        scrollToElement(index);
+      }
+
+      setFocusedOptionValue(option.value);
+    },
+    [filteredOptions, scrollToElement],
+  );
+
+  const resetFocusedOption = React.useCallback(() => {
+    setFocusedOptionValue(null);
+  }, []);
+
+  const focusOption = React.useCallback(
+    (type: 'next' | 'prev') => {
+      let index = findSelectedIndex(filteredOptions, focusedOptionValue);
+
+      if (type === 'next') {
+        const nextIndex = findIndexAfter(filteredOptions, index);
+        index = nextIndex === -1 ? findIndexAfter(filteredOptions) : nextIndex; // Следующий за index или первый валидный до index
+      } else if (type === 'prev') {
+        const beforeIndex = findIndexBefore(filteredOptions, index);
+        index = beforeIndex === -1 ? findIndexBefore(filteredOptions) : beforeIndex; // Предшествующий index или последний валидный после index
+      }
+
+      focusOptionByIndex(index);
+    },
+    [filteredOptions, focusedOptionValue, focusOptionByIndex],
+  );
+
+  const selectFocusedValue = React.useCallback(
+    () => setFocusedOptionValue(selectedOptionValue),
+    [selectedOptionValue],
+  );
+
+  return {
+    focusedOptionValue,
+    setFocusedOptionValue,
+    focusOptionByIndex,
+    resetFocusedOption,
+    focusOption,
+    selectFocusedValue,
+  };
+}

package/src/components/CustomSelect/hooks/useInputKeyboardController.ts

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { Keys, pressedKey } from '../../../lib/accessibility';
+import { callMultiple } from '../../../lib/callMultiple';
+import { type SelectProps } from '../CustomSelect';
+import { type UseFocusedOptionControllerReturn } from './useFocusedOptionController';
+
+const KEYS_TO_PREVENT_DEFAULT: string[] = [Keys.ARROW_UP, Keys.ARROW_DOWN, Keys.ESCAPE, Keys.ENTER];
+
+/* eslint-disable jsdoc/require-jsdoc */
+interface UseInputKeyboardController
+  extends Pick<UseFocusedOptionControllerReturn, 'resetFocusedOption' | 'focusOption'>,
+    Pick<SelectProps, 'onInputKeyDown'> {
+  opened: boolean;
+  scrollBoxRef: React.RefObject<HTMLDivElement | null>;
+  selectFocused: () => void;
+  open: () => void;
+  close: () => void;
+}
+/* eslint-enable jsdoc/require-jsdoc */
+
+export function useInputKeyboardController({
+  opened,
+  resetFocusedOption,
+  focusOption,
+  scrollBoxRef,
+  selectFocused,
+  onInputKeyDown,
+  open,
+  close,
+}: UseInputKeyboardController) {
+  const handleKeyDownSelect = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      const key = pressedKey(event);
+      if (event.key.length === 1 && key !== Keys.SPACE) {
+        open();
+        resetFocusedOption();
+        return;
+      }
+      if (!key) {
+        return;
+      }
+      const areOptionsShown = () => scrollBoxRef.current !== null;
+
+      if (KEYS_TO_PREVENT_DEFAULT.includes(key)) {
+        event.preventDefault();
+      }
+      switch (key) {
+        case Keys.ARROW_UP:
+          if (opened) {
+            areOptionsShown() && focusOption('prev');
+          } else {
+            open();
+          }
+          break;
+        case Keys.ARROW_DOWN:
+          if (opened) {
+            areOptionsShown() && focusOption('next');
+          } else {
+            open();
+          }
+          break;
+        case Keys.ESCAPE:
+          close();
+          break;
+        case Keys.BACKSPACE:
+        case Keys.DELETE: {
+          open();
+          resetFocusedOption();
+          break;
+        }
+        case Keys.ENTER:
+        case Keys.SPACE:
+          if (opened) {
+            areOptionsShown() && selectFocused();
+          } else {
+            open();
+          }
+          break;
+      }
+    },
+    [scrollBoxRef, opened, close, focusOption, open, resetFocusedOption, selectFocused],
+  );
+
+  const handleInputKeydown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      onInputKeyDown?.(event, opened);
+    },
+    [opened, onInputKeyDown],
+  );
+  const _onInputKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void = callMultiple(
+    handleKeyDownSelect,
+    handleInputKeydown,
+  );
+
+  return _onInputKeyDown;
+}

package/src/components/CustomSelect/hooks/useInputValueController.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';
+import { type SelectValue } from '../../NativeSelect/NativeSelect';
+import { type SelectProps } from '../CustomSelect';
+import { calculateInputValueFromOptions } from '../helpers';
+import { type CustomSelectOptionInterface } from '../types';
+
+/* eslint-disable jsdoc/require-jsdoc */
+type UseInputValueControllerProps<OptionInterfaceT extends CustomSelectOptionInterface> = Pick<
+  SelectProps<OptionInterfaceT>,
+  'options' | 'onInputChange' | 'accessible'
+> & {
+  selectedValue: SelectValue;
+};
+/* eslint-enable jsdoc/require-jsdoc */
+
+export function useInputValueController<OptionInterfaceT extends CustomSelectOptionInterface>({
+  options,
+  accessible,
+  selectedValue,
+  onInputChange: onInputChangeProp,
+}: UseInputValueControllerProps<OptionInterfaceT>) {
+  const [inputValue, setInputValue] = React.useState('');
+  const optionsRef = React.useRef(options);
+
+  useIsomorphicLayoutEffect(() => {
+    optionsRef.current = options;
+  }, [options]);
+
+  const resetInputValueBySelectedOption = React.useCallback(() => {
+    setInputValue(calculateInputValueFromOptions(optionsRef.current, selectedValue));
+  }, [selectedValue]);
+
+  useIsomorphicLayoutEffect(() => {
+    if (accessible) {
+      resetInputValueBySelectedOption();
+    }
+  }, [accessible, resetInputValueBySelectedOption]);
+
+  const resetInputValue = React.useCallback(() => {
+    setInputValue('');
+  }, []);
+
+  const onInputChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(
+    (e) => {
+      onInputChangeProp && onInputChangeProp(e);
+      setInputValue(e.target.value);
+    },
+    [onInputChangeProp, setInputValue],
+  );
+
+  return {
+    inputValue,
+    resetInputValue,
+    resetInputValueBySelectedOption,
+    onInputChange,
+  };
+}

package/src/components/CustomSelect/hooks/useScrollListController.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+/* eslint-disable jsdoc/require-jsdoc */
+interface UseScrollListControllerReturn {
+  scrollBoxRef: React.RefObject<HTMLDivElement | null>;
+  optionsWrapperRef: React.RefObject<HTMLDivElement | null>;
+  scrollToElement: (index: number, center?: boolean) => void;
+}
+/* eslint-enable jsdoc/require-jsdoc */
+
+export function useScrollListController(): UseScrollListControllerReturn {
+  const scrollBoxRef = React.useRef<HTMLDivElement | null>(null);
+  const optionsWrapperRef = React.useRef<HTMLDivElement>(null);
+
+  const scrollToElement = React.useCallback(
+    (index: number, center = false) => {
+      const dropdown = scrollBoxRef.current;
+      const optionsWrapper = optionsWrapperRef.current;
+
+      if (!dropdown || !optionsWrapper || index < 0 || index > optionsWrapper.children.length) {
+        return;
+      }
+      const item = optionsWrapper.children[index] as HTMLElement | null;
+      /* istanbul ignore if: проверка для TS (ситуация, когда среди children нет элемента с index, маловероятна) */
+      if (!item) {
+        return;
+      }
+
+      const dropdownHeight = dropdown.offsetHeight;
+      const scrollTop = dropdown.scrollTop;
+      const itemTop = item.offsetTop;
+      const itemHeight = item.offsetHeight;
+
+      if (center) {
+        dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;
+      } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {
+        dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;
+      } else if (itemTop < scrollTop) {
+        dropdown.scrollTop = itemTop;
+      }
+    },
+    [optionsWrapperRef, scrollBoxRef],
+  );
+
+  return { scrollToElement, scrollBoxRef, optionsWrapperRef };
+}