@true-engineering/true-react-common-ui-kit 4.0.0-alpha1 → 4.0.0-alpha11

package/src/components/Flag/Flag.stories.tsx

@@ -1,12 +1,13 @@
 import { countries } from 'country-flag-icons';
 import { ComponentStory } from '@storybook/react';
 import { Flag } from './Flag';
+import { customFlags } from './customFlags';
 
 export default {
   title: 'Data Display/Flag',
   component: Flag,
   argTypes: {
-    countryCode: { control: 'select', options: countries },
+    countryCode: { control: 'select', options: [...countries, ...Object.keys(customFlags)] },
   },
 };
 

package/src/components/Flag/Flag.styles.ts

@@ -2,6 +2,10 @@ import { colors, ITweakStyles, createThemedStyles } from '../../theme';
 
 export const useStyles = createThemedStyles('Flag', {
   root: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    boxSizing: 'border-box',
     // приходится хардкодить в компоненте, тк либа Flags выдает флаги с 2-3 пиксельным отступом снизу
     // если будет нужно, то можно вынести border на уровень пропсов
     border: [1, 'solid', colors.BORDER_MAIN],

package/src/components/Flag/Flag.tsx

@@ -3,6 +3,7 @@ import { hasFlag } from 'country-flag-icons';
 import Flags from 'country-flag-icons/react/3x2';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
+import { customFlags } from './customFlags';
 import { useStyles, IFlagStyles } from './Flag.styles';
 
 export interface IFlagProps extends Pick<ICommonProps<IFlagStyles>, 'tweakStyles'> {
@@ -12,15 +13,28 @@ export interface IFlagProps extends Pick<ICommonProps<IFlagStyles>, 'tweakStyles
 
 export const Flag: FC<IFlagProps> = ({ countryCode = '', tweakStyles }) => {
   const classes = useStyles({ theme: tweakStyles });
-  const CC = countryCode.toUpperCase();
+  const countryFlagKey = countryCode.toUpperCase();
 
-  const TheFlag = hasFlag(CC)
-    ? Flags[CC as keyof typeof Flags]
-    : () => (
-        <div className={classes.noFlag}>
-          <Icon type="minus" />
-        </div>
-      );
+  const hasFlagInLibrary = hasFlag(countryFlagKey);
 
-  return <TheFlag className={classes.root} />;
+  if (hasFlagInLibrary) {
+    const FlagComponent = Flags[countryFlagKey as keyof typeof Flags];
+    return (
+      <div className={classes.root}>
+        <FlagComponent />
+      </div>
+    );
+  }
+
+  const CustomFlag = customFlags[countryFlagKey as keyof typeof customFlags];
+
+  if (CustomFlag !== undefined) {
+    return <div className={classes.root} dangerouslySetInnerHTML={{ __html: CustomFlag }} />;
+  }
+
+  return (
+    <div className={classes.noFlag}>
+      <Icon type="minus" />
+    </div>
+  );
 };

package/src/components/Flag/customFlags/AB.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#FFF" d="M0 0h512v341.3H0z"/><g fill="#6DA544"><path d="M0 0h512v48.8H0zM0 97.5h512v48.8H0zM0 195h512v48.8H0zM0 292.6h512v48.8H0z"/></g><path fill="#D80027" d="M0 0h256v146.3H0z"/><path fill="#FFF" d="m116.9 114.4-7.5-14.8V69.9L128 59l18.6 10.9v22.3l7.4-7.4 4.2 3-4.2 11.8-14.9 14.8z"/><circle fill="#FFF" cx="82" cy="82.8" r="5.4"/><circle fill="#FFF" cx="90.8" cy="61.7" r="5.4"/><circle fill="#FFF" cx="106.6" cy="46.2" r="5.4"/><circle fill="#FFF" cx="128" cy="40.8" r="5.4"/><circle fill="#FFF" cx="149.4" cy="46.2" r="5.4"/><circle fill="#FFF" cx="165.2" cy="61.7" r="5.4"/><circle fill="#FFF" cx="174" cy="82.8" r="5.4"/></svg>

package/src/components/Flag/customFlags/OS.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 300"><path fill="#FFF" d="M0 0h450v300H0z"/><path fill="red" d="M0 100h450v200H0z"/><path fill="#FFDF00" d="M0 200h450v100H0z"/></svg>

package/src/components/Flag/customFlags/augment.d.ts

@@ -0,0 +1 @@
+declare module '*.svg?raw';

package/src/components/Flag/customFlags/customFlags.ts

@@ -0,0 +1,13 @@
+import AB from './AB.svg?raw';
+import OS from './OS.svg?raw';
+
+export const customFlags = {
+  /**
+   * Абхазия
+   */
+  AB,
+  /**
+   * Южная осетия
+   */
+  OS,
+};

package/src/components/Flag/customFlags/index.ts

@@ -0,0 +1 @@
+export * from './customFlags';

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -34,10 +34,10 @@ export interface IFlexibleTableProps<
       | 'uniqueField'
       | 'rowAttributes'
       | 'isFirstColumnSticky'
-      | 'isExpandableRowComponentInitiallyOpen'
       | 'expandableRowComponent'
       | 'onRowClick'
       | 'onRowHover'
+      | 'rowRef'
     > {
   content: Row[];
   /** @default 'table' */
@@ -62,6 +62,8 @@ export interface IFlexibleTableProps<
   nothingFoundContent?: ReactNode;
   /** @default true */
   shouldRenderHeader?: boolean;
+  /** @default false */
+  isExpandableRowComponentInitiallyOpen?: boolean | ((row: Row, index: number) => boolean);
 }
 
 export function FlexibleTable<
@@ -88,6 +90,7 @@ export function FlexibleTable<
   tweakStyles,
   shouldRenderHeader = true,
   onHeadClick,
+  isExpandableRowComponentInitiallyOpen: isRowInitiallyOpen,
   ...restProps
 }: IFlexibleTableProps<Row, HeaderContent, UniqueField>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
@@ -105,11 +108,12 @@ export function FlexibleTable<
 
   const hasInfiniteScroll = isNotEmpty(infinityScrollConfig);
 
-  const tableRowProps: Omit<
-    IFlexibleTableRowProps<Row, HeaderContent, UniqueField>,
-    'item' | 'index'
-  > = {
+  const getTableRowProps = (
+    item: Row,
+    index: number,
+  ): IFlexibleTableRowProps<Row, HeaderContent, UniqueField> => ({
     ...restProps,
+    item,
     renderMode,
     config,
     columns,
@@ -118,7 +122,8 @@ export function FlexibleTable<
     isFirstColumnSticky,
     isFocusable: isRowFocusable,
     tweakStyles: tweakTableRowStyles,
-  };
+    isExpandableRowComponentInitiallyOpen: applyAction(isRowInitiallyOpen, item, index),
+  });
 
   const getDataScrollAttributeSetter = useCallback(
     (key: string, setter: (el: HTMLDivElement) => boolean) => (el?: HTMLDivElement) => {
@@ -267,9 +272,7 @@ export function FlexibleTable<
         )}
         <Table.Body className={classes.body}>
           {isLoading ? (
-            indexMap(6, (i) => (
-              <FlexibleTableRow {...tableRowProps} key={i} item={{} as Row} index={i} />
-            ))
+            indexMap(6, (i) => <FlexibleTableRow {...getTableRowProps({} as Row, i)} key={i} />)
           ) : (
             <>
               {shouldShowNothingFound && (
@@ -282,11 +285,9 @@ export function FlexibleTable<
 
               {content.map((item, i) => (
                 <FlexibleTableRow
-                  {...tableRowProps}
+                  {...getTableRowProps(item, i)}
                   isActive={activeRowsSet.has(i)}
                   key={isNotEmpty(uniqueField) ? item[uniqueField] : i}
-                  item={item}
-                  index={i}
                 />
               ))}
 

package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.tsx

@@ -1,9 +1,9 @@
-import { ReactNode, useState, memo, MouseEvent } from 'react';
+import { ReactNode, useState, memo, MouseEvent, RefCallback } from 'react';
 import clsx from 'clsx';
-import { applyAction, isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
 import { useTweakStyles } from '../../../../hooks';
-import { ICommonProps, IDataAttributes } from '../../../../types';
+import { IDataAttributes, ITweakStylesProps } from '../../../../types';
 import { TableRenders } from '../../constants';
 import {
   ITableRow,
@@ -19,9 +19,8 @@ export interface IFlexibleTableRowProps<
   Row extends ITableRow,
   HeaderContent extends IHeaderContent<Row>,
   UniqueField extends keyof Row,
-> extends Pick<ICommonProps<IFlexibleTableRowStyles>, 'tweakStyles'> {
+> extends ITweakStylesProps<IFlexibleTableRowStyles> {
   item: Row;
-  index: number;
   uniqueField?: UniqueField;
   renderMode: IFlexibleTableRenderMode;
   /** @default false */
@@ -37,7 +36,8 @@ export interface IFlexibleTableRowProps<
   columns: Array<keyof Row & string>;
   rowAttributes?: Array<keyof Row>;
   /** @default false */
-  isExpandableRowComponentInitiallyOpen?: boolean | ((row: Row, index: number) => boolean);
+  isExpandableRowComponentInitiallyOpen?: boolean;
+  rowRef?: RefCallback<HTMLTableRowElement>;
   /** Возвращает React-элемент, который отрисуется под строкой при нажатии на неё  */
   expandableRowComponent?: (item: Row, isOpen: boolean, close: () => void) => ReactNode;
   onRowHover?: (id?: Row[UniqueField]) => void;
@@ -50,7 +50,6 @@ function FlexibleTableRowInner<
   UniqueField extends keyof Row,
 >({
   item,
-  index,
   config,
   columns,
   uniqueField,
@@ -61,6 +60,7 @@ function FlexibleTableRowInner<
   isLoading = false,
   rowAttributes,
   isExpandableRowComponentInitiallyOpen = false,
+  rowRef,
   tweakStyles,
   expandableRowComponent,
   onRowHover,
@@ -76,7 +76,7 @@ function FlexibleTableRowInner<
 
   const [isFocused, setFocused] = useState(false);
   const [nestedComponent, setNestedComponent] = useState<INestedComponent>(() => ({
-    isOpen: applyAction(isExpandableRowComponentInitiallyOpen, item, index),
+    isOpen: isExpandableRowComponentInitiallyOpen,
   }));
 
   const isEditable = !isLoading && (isNotEmpty(onRowClick) || isNotEmpty(onRowHover));
@@ -139,6 +139,7 @@ function FlexibleTableRowInner<
   return (
     <>
       <Table.Row
+        ref={rowRef}
         className={clsx(classes.root, {
           [classes.active]: isActive,
           [classes.editable]: isEditable,

package/src/components/FlexibleTable/constants.ts

@@ -1,8 +1,11 @@
-import { IFlexibleTableRenderMode, IFlexibleTableRender } from './types';
+import { IFlexibleTableRenderElement, IFlexibleTableRenderMode } from './types';
 
 export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
 
-export const TableRenders: Record<IFlexibleTableRenderMode, IFlexibleTableRender> = {
+export const TableRenders = {
   table: { Root: 'table', Head: 'thead', Body: 'tbody', Row: 'tr', Header: 'th', Cell: 'td' },
   divs: { Root: 'div', Head: 'div', Body: 'div', Row: 'div', Header: 'div', Cell: 'div' },
-};
+} satisfies Record<
+  IFlexibleTableRenderMode,
+  Record<IFlexibleTableRenderElement, keyof JSX.IntrinsicElements>
+>;

package/src/components/FlexibleTable/types.ts

@@ -2,11 +2,7 @@ import { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { IRenderNode } from '../../types';
 
 export type IFlexibleTableRenderMode = 'table' | 'divs';
-
-export type IFlexibleTableRender = Record<
-  'Root' | 'Head' | 'Body' | 'Row' | 'Header' | 'Cell',
-  keyof JSX.IntrinsicElements
->;
+export type IFlexibleTableRenderElement = 'Root' | 'Head' | 'Body' | 'Row' | 'Header' | 'Cell';
 
 // TODO: Заменить Record<string, any> на Record<string, unknown>
 export type ITableRow = Record<string, any>;

package/src/components/IncrementInput/IncrementInput.styles.ts

@@ -72,7 +72,7 @@ export const inputStyles: IInputStyles = {
     controls: {
       paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
     },
-  }
+  },
 };
 
 export type IIncrementInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;

package/src/components/Input/Input.tsx

@@ -1,10 +1,12 @@
 import { forwardRef } from 'react';
+import { getTestId } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
 import { IWithMessagesProps, WithMessages } from '../WithMessages';
 import { IInputBaseProps, InputBase } from './InputBase';
 
-export type IInputProps = IInputBaseProps &
-  Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'>;
+export interface IInputProps
+  extends IInputBaseProps,
+    Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'> {}
 
 export const Input = forwardRef<HTMLInputElement, IInputProps>(
   ({ infoMessage, errorMessage, isInvalid, testId, tweakStyles, ...inputProps }, ref) => {
@@ -17,7 +19,7 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
       <WithMessages
         errorMessage={errorMessage}
         infoMessage={infoMessage}
-        testId={testId}
+        testId={getTestId(testId, 'wrapper')}
         tweakStyles={tweakWithMessagesStyles}
       >
         <InputBase

package/src/components/Input/InputBase.tsx

@@ -28,6 +28,7 @@ import { IInputStyles, useStyles } from './Input.styles';
 
 export interface IInputBaseProps
   extends ICommonProps<IInputStyles>,
+    Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>,
     Pick<
       IControlWrapperProps,
       | 'label'
@@ -38,20 +39,7 @@ export interface IInputBaseProps
       | 'isLoading'
       | 'isDisabled'
       | 'onIconClick'
-    >,
-    Pick<
-      InputHTMLAttributes<HTMLInputElement>,
-      | 'type'
-      | 'inputMode'
-      | 'autoComplete'
-      | 'name'
-      | 'maxLength'
-      | 'tabIndex'
-      | 'placeholder'
-      | 'onFocus'
-      | 'onBlur'
-      | 'onPaste'
-      | 'onKeyDown'
+      | 'size'
     >,
     Pick<
       Partial<ReactInputMaskBaseProps>,
@@ -71,7 +59,7 @@ export interface IInputBaseProps
   isAutoSized?: boolean;
   /** @default false */
   shouldAlwaysShowPlaceholder?: boolean;
-  onChange(value: string, event: IChangeInputEvent): void;
+  onChange: (value: string, event: IChangeInputEvent) => void;
 }
 
 export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
@@ -96,6 +84,7 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
       units,
       testId,
       tabIndex,
+      shouldAlwaysShowPlaceholder,
       onChange,
       onPaste,
       onFocus,
@@ -105,9 +94,16 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
       mask,
       maskPlaceholder,
       alwaysShowMask,
-      shouldAlwaysShowPlaceholder,
       beforeMaskedStateChange,
-      ...controlProps
+      // Пропсы ControlWrapper
+      data,
+      groupPlacement,
+      icon,
+      isLoading,
+      isRequired,
+      size,
+      onIconClick,
+      ...inputProps
     },
     ref,
   ) => {
@@ -194,7 +190,8 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
       onFocus: handleFocus,
       onBlur: handleBlur,
       onChange: handleChange,
-      ...addDataTestId(testId, 'input'),
+      ...addDataTestId(testId),
+      ...inputProps,
     };
 
     useEffect(() => {
@@ -238,7 +235,13 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
         isFullWidth={!isAutoSized}
         tweakStyles={tweakControlWrapperStyles}
         onClear={isClearable && hasValue ? handleInputClear : undefined}
-        {...controlProps}
+        data={data}
+        groupPlacement={groupPlacement}
+        icon={icon}
+        isLoading={isLoading}
+        isRequired={isRequired}
+        onIconClick={onIconClick}
+        size={size}
       >
         {hasUnits || isAutoSized ? (
           <div className={classes.autoSizeWrapper}>{inputContent}</div>

package/src/components/List/List.tsx

@@ -8,7 +8,8 @@ import {
 import { addDataAttributes } from '../../helpers';
 import { ICommonProps } from '../../types';
 import { WithPopup } from '../WithPopup';
-import { IListItemProps, IListItemProps as IListItem, ListItem } from './components';
+import { IListItemProps, ListItem } from './components';
+import { IListItem } from './types';
 import { useStyles, IListStyles, withPopupStyles } from './List.styles';
 
 export interface IListProps extends ICommonProps<IListStyles> {
@@ -29,9 +30,11 @@ export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick
     }
   };
 
+  const filteredItems = items.filter(({ isHidden }) => !isHidden);
+
   return (
     <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      {items.map((item, i) => {
+      {filteredItems.map((item, i) => {
         const itemProps: IListItemProps = {
           testId: getTestId(testId, `item-${i}`),
           ...item,

package/src/components/List/index.ts

@@ -1,3 +1,4 @@
 export * from './List';
 export type { IListStyles } from './List.styles';
-export { type IListItemStyles, type IListItemProps as IListItem, ListItem } from './components';
+export type { IListItem } from './types';
+export { type IListItemStyles, type IListItemProps, ListItem } from './components';

package/src/components/List/types.ts

@@ -0,0 +1,5 @@
+import { IListItemProps } from './components';
+
+export interface IListItem extends IListItemProps {
+  isHidden?: boolean;
+}

package/src/components/PhoneInput/PhoneInput.stories.tsx

@@ -26,7 +26,8 @@ export default {
 const Template: ComponentStory<typeof PhoneInput> = (args) => {
   const [value, setValue] = useState<IPhoneValue>({
     dialCode: '7',
-    phoneNumber: '1234567890',
+    phoneNumber: '9134567890',
+    countryCode: 'RU',
   });
 
   return <PhoneInput {...args} value={value} onChange={setValue} />;

package/src/components/PhoneInput/PhoneInput.tsx

@@ -76,7 +76,7 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
 
   const countryCode = useMemo(
     () => value?.countryCode ?? getCountryCodeFromPhone(phoneWithCode),
-    [value.dialCode, value.phoneNumber],
+    [value.countryCode, value.dialCode, value.phoneNumber],
   );
 
   const handleClose = () => {
@@ -122,7 +122,10 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
     if (newPhoneInfo.countryCode !== countryCode) {
       onChange(
         {
-          phoneNumber: '',
+          phoneNumber:
+            newPhoneInfo.dialCode !== value.dialCode
+              ? ''
+              : getPhoneObjFromString(phoneWithCode).phoneNumber,
           dialCode: newPhoneInfo.dialCode,
           countryCode: newPhoneInfo.countryCode,
         },

package/src/components/SearchInput/SearchInput.styles.ts

@@ -1,44 +1,31 @@
-import { colors, createThemedStyles, dimensions, ITweakStyles } from '../../theme';
 import { IInputStyles } from '../Input';
 
-const { Z_INDEX } = dimensions;
+export const inputStyles: IInputStyles = {
+  tweakControlWrapper: {
+    endIcon: {
+      position: 'absolute',
+      width: 40,
+      left: 0,
 
-export const useStyles = createThemedStyles('SearchInput', {
-  root: {
-    position: 'relative',
-  },
+      '&:last-child': {
+        paddingRight: 0,
+      },
 
-  icon: {
-    display: 'flex',
-    alignItems: 'center',
-    position: 'absolute',
-    left: 12,
-    height: '100%',
-    width: 20,
-    color: colors.GREY_ACTIVE,
-    zIndex: Z_INDEX.CONTROL_FOCUS + 1,
-  },
-});
+      '&:not($activeIcon)': {
+        pointerEvents: 'none',
+      },
+    },
 
-export const inputStyles: IInputStyles = {
-  tweakControlWrapper: {
     controlWrapper: {
       borderColor: 'transparent',
-      borderRadius: 18,
-      paddingLeft: 0,
-      transitionProperty: 'background-color, border-color',
-    },
-
-    focused: {
-      backgroundColor: colors.CLASSIC_WHITE,
-      borderColor: colors.BORDER_MAIN,
     },
   },
-
   inputContent: {
     fontSize: 14,
     paddingLeft: 44,
   },
 };
 
-export type ISearchInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;
+export interface ISearchInputStyles {
+  tweakInput?: IInputStyles;
+}

package/src/components/SearchInput/SearchInput.tsx

@@ -1,11 +1,9 @@
-import { FC } from 'react';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { forwardRef } from 'react';
+import { getTestId } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
 import { IInputProps, Input } from '../Input';
-import { inputStyles, ISearchInputStyles, useStyles } from './SearchInput.styles';
+import { inputStyles, ISearchInputStyles } from './SearchInput.styles';
 
 export type ISearchInputProps = Omit<
   IInputProps,
@@ -13,37 +11,26 @@ export type ISearchInputProps = Omit<
 > &
   ICommonProps<ISearchInputStyles>;
 
-export const SearchInput: FC<ISearchInputProps> = ({
-  isClearable = true,
-  tweakStyles,
-  placeholder,
-  value,
-  testId,
-  data,
-  ...props
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
+export const SearchInput = forwardRef<HTMLInputElement, ISearchInputProps>(
+  ({ isClearable = true, placeholder, value, testId, tweakStyles, data, ...props }, ref) => {
+    const tweakInputStyles = useTweakStyles({
+      innerStyles: inputStyles,
+      tweakStyles,
+      className: 'tweakInput',
+      currentComponentName: 'SearchInput',
+    });
 
-  const tweakInputStyles = useTweakStyles({
-    innerStyles: inputStyles,
-    tweakStyles,
-    className: 'tweakInput',
-    currentComponentName: 'SearchInput',
-  });
-
-  return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      <div className={classes.icon}>
-        <Icon type="search" />
-      </div>
+    return (
       <Input
+        ref={ref}
         value={value}
         placeholder={placeholder}
+        icon="search"
         isClearable={isClearable}
         testId={getTestId(testId, 'input')}
         tweakStyles={tweakInputStyles}
         {...props}
       />
-    </div>
-  );
-};
+    );
+  },
+);

package/src/components/Select/Select.tsx

@@ -5,6 +5,7 @@ import {
   KeyboardEvent,
   MouseEvent,
   ReactNode,
+  Ref,
   SyntheticEvent,
   useCallback,
   useEffect,
@@ -63,7 +64,11 @@ export interface ISelectProps<Value>
   /** @default true */
   shouldScrollToList?: boolean;
   isMultiSelect?: false;
-  searchInput?: { shouldRenderInList: true } & Pick<ISearchInputProps, 'placeholder'>;
+  searchInput?: {
+    /** @default false */
+    shouldRenderInList?: boolean;
+    ref?: Ref<HTMLInputElement>;
+  } & Pick<ISearchInputProps, 'placeholder' | 'shouldFocusOnMount'>;
   isOptionDisabled?: (option: Value) => boolean;
   onChange: (value: Value | undefined, event: IChangeSelectEvent) => void; // подумать как возвращать индекс
   onBlur?: (event: Event | SyntheticEvent) => void;
@@ -248,10 +253,14 @@ export function Select<Value>(
 
   const handleListClose = useCallback(
     (event: Event | SyntheticEvent) => {
+      if (!isListOpen) {
+        return;
+      }
+
       closeList();
       onBlur?.(event);
     },
-    [closeList, onBlur],
+    [isListOpen, closeList, onBlur],
   );
 
   const handleListOpen = () => {
@@ -581,6 +590,7 @@ export function Select<Value>(
       errorMessage={errorMessage}
       infoMessage={infoMessage}
       tweakStyles={tweakWithMessagesStyles}
+      testId={getTestId(testId, 'wrapper')}
     >
       <div className={classes.root} onKeyDown={handleKeyDown} ref={root}>
         <div

package/src/components/Select/components/SelectList/SelectList.tsx

@@ -84,7 +84,7 @@ export function SelectList<Value>({
       })}
     >
       {isHeaderNotEmpty && <div className={classes.listHeader}>{customListHeader}</div>}
-      <div className={classes.list} {...addDataTestId(testId)}>
+      <div className={classes.list} {...addDataTestId(testId)} tabIndex={-1}>
         {isLoading ? (
           <div className={clsx(classes.cell, classes.loading)}>{loadingLabel}</div>
         ) : (

package/src/components/Select/index.ts

@@ -1,4 +1,4 @@
 export * from './Select';
 export * from './types';
 export type { ISelectStyles } from './Select.styles';
-export type { ISelectListStyles } from './components';
+export { type ISelectListStyles, SelectList } from './components';