@true-engineering/true-react-common-ui-kit 3.24.0 → 3.25.0

package/src/components/Select/Select.tsx

@@ -1,49 +1,51 @@
 import {
-  ReactNode,
-  FocusEvent,
-  KeyboardEvent,
-  MouseEvent,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
-  SyntheticEvent,
-  ChangeEvent,
-  FormEvent,
+  type ChangeEvent,
+  type CSSProperties,
+  type FocusEvent,
+  type FormEvent,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+  type SyntheticEvent,
 } from 'react';
 import { Portal } from 'react-overlays';
 import clsx from 'clsx';
-import { Styles } from 'jss';
 import { debounce } from 'ts-debounce';
 import {
+  createFilter,
   getTestId,
+  isEmpty,
   isNotEmpty,
   isReactNodeNotEmpty,
   isStringNotEmpty,
-  createFilter,
 } from '@true-engineering/true-react-platform-helpers';
 import { hasExactParent } from '../../helpers';
-import { useIsMounted, useOnClickOutsideWithRef, useDropdown, useTweakStyles } from '../../hooks';
-import { ICommonProps, IDropdownWithPopperOptions } from '../../types';
-import { renderIcon, IIcon } from '../Icon';
-import { IInputProps, Input } from '../Input';
-import { ISearchInputProps, SearchInput } from '../SearchInput';
+import { useDropdown, useIsMounted, useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
+import { IDropdownWithPopperOptions, type ICommonProps } from '../../types';
+import { renderIcon, type IIcon } from '../Icon';
+import { Input, type IInputProps } from '../Input';
+import { SearchInput, type ISearchInputProps } from '../SearchInput';
 import { SelectList } from './components';
 import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from './constants';
 import {
-  defaultConvertFunction,
   defaultCompareFunction,
+  defaultConvertFunction,
   defaultIsOptionDisabled,
   getDefaultConvertToIdFunction,
-  isMultiSelectValue,
 } from './helpers';
 import { IMultipleSelectValue } from './types';
-import { useStyles, ISelectStyles, searchInputStyles, getInputStyles } from './Select.styles';
+import { getInputStyles, searchInputStyles, useStyles, type ISelectStyles } from './Select.styles';
 
 export interface ISelectProps<Value>
-  extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type' | 'tweakStyles'>,
+  extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type' | 'isActive' | 'tweakStyles'>,
     ICommonProps<ISelectStyles> {
+  header?: ReactNode;
+  footer?: ReactNode;
   defaultOptionLabel?: ReactNode;
   allOptionsLabel?: string;
   noMatchesLabel?: string;
@@ -61,7 +63,7 @@ export interface ISelectProps<Value>
   value: Value | undefined;
   /** @default true */
   shouldScrollToList?: boolean;
-  isMultiSelect?: boolean;
+  isMultiSelect?: false;
   searchInput?: { shouldRenderInList: true } & Pick<ISearchInputProps, 'placeholder'>;
   isOptionDisabled?: (option: Value) => boolean;
   onChange: (
@@ -77,15 +79,19 @@ export interface ISelectProps<Value>
   optionsFilter?: (options: Value[], query: string) => Value[];
   onOpen?: () => void;
   compareValuesOnChange?: (v1?: Value, v2?: Value) => boolean;
-  // Для избежания проблем юзайте useCallback на эти функции
-  // или выносите их из компонента (чтобы не было сайдэфектов от перерендеринга их)
+  /** @description Функция должна быть мемоизирована с целью избежания ререндера */
   convertValueToString?: (value: Value) => string | undefined;
+  /** @description Функция должна быть мемоизирована с целью избежания ререндера */
   convertValueToReactNode?: (value: Value, isDisabled: boolean) => ReactNode;
+  /** @description Функция должна быть мемоизирована с целью избежания ререндера */
   convertValueToId?: (value: Value) => string | undefined;
 }
 
 export interface IMultipleSelectProps<Value>
-  extends Omit<ISelectProps<Value>, 'value' | 'onChange' | 'compareValuesOnChange'> {
+  extends Omit<
+    ISelectProps<Value>,
+    'value' | 'onChange' | 'compareValuesOnChange' | 'isMultiSelect'
+  > {
   isMultiSelect: true;
   value: IMultipleSelectValue<Value> | undefined;
   onChange: (
@@ -107,7 +113,10 @@ export function Select<Value>(
 ): JSX.Element {
   const {
     options,
+    isMultiSelect,
     value,
+    header,
+    footer,
     defaultOptionLabel,
     allOptionsLabel,
     debounceTime = 400,
@@ -142,7 +151,6 @@ export function Select<Value>(
   const { shouldRenderInList: shouldRenderSearchInputInList = false, ...searchInputProps } =
     searchInput ?? {};
   const hasSearchInputInList = optionsMode !== 'normal' && shouldRenderSearchInputInList;
-  const isMultiSelect = isMultiSelectValue(props, value);
   const hasReadonlyInput = isReadonly || optionsMode === 'normal' || shouldRenderSearchInputInList;
 
   const tweakInputStyles = useTweakStyles({
@@ -176,6 +184,7 @@ export function Select<Value>(
   // вынесен отдельно, из-за проблем с дебаунсом при динамич. опциях
   const [shouldShowDefaultOption, setShouldShowDefaultOption] = useState(true);
 
+  const root = useRef<HTMLDivElement>(null);
   const inputWrapper = useRef<HTMLDivElement>(null);
   const list = useRef<HTMLDivElement>(null);
   const input = useRef<HTMLInputElement>(null); // TODO ref снаружи?
@@ -196,7 +205,7 @@ export function Select<Value>(
   }, [optionsFilter, options, convertValueToString, searchValue, optionsMode]);
 
   const availableOptions = useMemo(
-    () => options.filter((o) => !isOptionDisabled(o)),
+    () => options.filter((option) => !isOptionDisabled(option)),
     [options, isOptionDisabled],
   );
 
@@ -238,19 +247,40 @@ export function Select<Value>(
     [convertValueToId, convertValueToString],
   );
 
+  const getDropdownOffset = () => {
+    if (isEmpty(input.current) || inputProps.errorPosition === 'top') {
+      return 0;
+    }
+
+    // Высота элемента inputWrapper у компонента Input
+    return input.current.parentElement?.offsetHeight ?? 0;
+  };
+
+  const closeList = useCallback(() => {
+    setIsListOpen(false);
+    setSearchValue('');
+    setShouldShowDefaultOption(true);
+
+    if (!dropdownOptions?.shouldUsePopper) {
+      root.current?.style.removeProperty('--dropdown-offset');
+    }
+  }, [dropdownOptions?.shouldUsePopper]);
+
   const handleListClose = useCallback(
     (event: Event | SyntheticEvent) => {
-      setIsListOpen(false);
-      setSearchValue('');
-      setShouldShowDefaultOption(true);
+      closeList();
       onBlur?.(event);
     },
-    [onBlur],
+    [closeList, onBlur],
   );
 
   const handleListOpen = () => {
     if (!isListOpen) {
       setIsListOpen(true);
+
+      if (!dropdownOptions?.shouldUsePopper) {
+        root.current?.style.setProperty('--dropdown-offset', `${getDropdownOffset()}px`);
+      }
     }
   };
 
@@ -283,13 +313,13 @@ export function Select<Value>(
       hasExactParent(event.relatedTarget, list.current) ||
       hasExactParent(event.relatedTarget, inputWrapper.current);
 
-    // Ниче не делаем если клик был внутри селекта
+    // Ничего не делаем, если клик был внутри селекта
     if (!isActionInsideSelect) {
       handleListClose(event);
     }
   };
 
-  const handleOnChange = useCallback(
+  const handleChange = useCallback(
     (
       newValue: Value | IMultipleSelectValue<Value> | undefined,
       event:
@@ -308,11 +338,11 @@ export function Select<Value>(
 
   const handleOptionSelect = useCallback(
     (index: number, event: MouseEvent<HTMLElement> | KeyboardEvent) => {
-      handleOnChange(index === DEFAULT_OPTION_INDEX ? undefined : filteredOptions[index], event);
+      handleChange(index === DEFAULT_OPTION_INDEX ? undefined : filteredOptions[index], event);
       handleListClose(event);
       input.current?.blur();
     },
-    [handleOnChange, handleListClose, filteredOptions],
+    [handleChange, handleListClose, filteredOptions],
   );
 
   // MultiSelect
@@ -324,15 +354,15 @@ export function Select<Value>(
 
       // Если выбрана не дефолтная опция, которая сетит андеф
       if (index === DEFAULT_OPTION_INDEX || (index === ALL_OPTION_INDEX && !isSelected)) {
-        handleOnChange(undefined, event);
+        handleChange(undefined, event);
         return;
       }
       if (index === ALL_OPTION_INDEX && isSelected) {
-        handleOnChange(availableOptions as IMultipleSelectValue<Value>, event);
+        handleChange(availableOptions as IMultipleSelectValue<Value>, event);
         return;
       }
       const option = filteredOptions[index];
-      handleOnChange(
+      handleChange(
         isSelected
           ? // Добавляем
             ([...(value ?? []), option] as IMultipleSelectValue<Value>)
@@ -341,7 +371,7 @@ export function Select<Value>(
         event,
       );
     },
-    [isMultiSelect, filteredOptions, handleOnChange, value, availableOptions, convertToId],
+    [isMultiSelect, filteredOptions, handleChange, value, availableOptions, convertToId],
   );
 
   const handleOnType = useCallback(
@@ -378,7 +408,7 @@ export function Select<Value>(
     }
 
     if (v === '' && !hasSearchInputInList) {
-      handleOnChange(undefined, event);
+      handleChange(undefined, event);
     }
 
     setSearchValue(v);
@@ -406,12 +436,13 @@ export function Select<Value>(
         }
 
         if (isMultiSelect) {
-          let isThisValueAlreadySelected: boolean;
+          let isThisValueAlreadySelected: boolean | undefined;
           if (indexToSelect === ALL_OPTION_INDEX) {
             isThisValueAlreadySelected = areAllOptionsSelected;
           } else {
             // подумать над концептом реального фокуса на опциях, а не вот эти вот focusedCell
-            const valueIdToSelect = convertToId(filteredOptions[indexToSelect]);
+            const option = filteredOptions[indexToSelect];
+            const valueIdToSelect = convertToId(option);
             isThisValueAlreadySelected =
               value?.some((opt) => convertToId(opt) === valueIdToSelect) ?? false;
           }
@@ -446,6 +477,7 @@ export function Select<Value>(
   const onArrowClick = () => {
     if (isListOpen) {
       input.current?.blur();
+      closeList();
     } else {
       input.current?.focus();
     }
@@ -482,21 +514,21 @@ export function Select<Value>(
   const popperData = useDropdown({
     isOpen,
     onDropdownClose: handleListClose,
-    referenceElement: inputWrapper.current,
+    referenceElement: input.current?.parentElement ?? inputWrapper.current,
     dropdownElement: list.current,
     options: dropdownOptions,
     dependenciesForPositionUpdating: [inputProps.isLoading, filteredOptions.length],
   });
 
   useEffect(() => {
-    setFocusedListCellIndex(
-      optionsIndexesForNavigation.find(
-        (index) =>
-          isNotEmpty(strValue) &&
-          isNotEmpty(filteredOptions[index]) &&
-          convertToId(filteredOptions[index]) === convertToId(strValue),
-      ) ?? optionsIndexesForNavigation[0],
-    );
+    const focusedCellIndex = isNotEmpty(strValue)
+      ? optionsIndexesForNavigation.find((index) => {
+          const option = filteredOptions[index];
+          return isNotEmpty(option) && convertToId(option) === convertToId(strValue);
+        })
+      : undefined;
+
+    setFocusedListCellIndex(focusedCellIndex ?? optionsIndexesForNavigation[0]);
   }, [strValue, filteredOptions, optionsIndexesForNavigation, convertToId]);
 
   useEffect(() => {
@@ -505,6 +537,25 @@ export function Select<Value>(
     }
   }, [isOpen]);
 
+  const searchInputEl = hasSearchInputInList && (
+    <SearchInput
+      value={searchValue}
+      onChange={handleInputChange}
+      tweakStyles={tweakSearchInputStyles}
+      placeholder="Поиск"
+      {...searchInputProps}
+    />
+  );
+
+  // Т.к. используется для проверки на пустой элемент `isReactNodeNotEmpty` внутри `SelectList`, то
+  // он пропускает React.Fragment
+  const customHeader = (isReactNodeNotEmpty(searchInputEl) || isReactNodeNotEmpty(header)) && (
+    <>
+      {searchInputEl}
+      {header}
+    </>
+  );
+
   const listEl = (
     <div
       className={clsx(classes.listWrapper, {
@@ -512,7 +563,8 @@ export function Select<Value>(
         [classes.listWrapperInBody]: shouldRenderInBody,
       })}
       ref={list}
-      style={popperData?.styles.popper as Styles}
+      style={popperData?.styles.popper as CSSProperties}
+      tabIndex={0}
       onBlur={handleBlur} // обработка для Tab из списка
       {...popperData?.attributes.popper}
     >
@@ -522,17 +574,8 @@ export function Select<Value>(
           defaultOptionLabel={hasDefaultOption && shouldShowDefaultOption && defaultOptionLabel}
           allOptionsLabel={shouldShowAllOption && allOptionsLabel}
           areAllOptionsSelected={areAllOptionsSelected}
-          customListHeader={
-            hasSearchInputInList && (
-              <SearchInput
-                value={searchValue}
-                onChange={handleInputChange}
-                tweakStyles={tweakSearchInputStyles}
-                placeholder="Поиск"
-                {...searchInputProps}
-              />
-            )
-          }
+          customListHeader={customHeader}
+          customListFooter={footer}
           noMatchesLabel={noMatchesLabel}
           focusedIndex={focusedListCellIndex}
           activeValue={value}
@@ -540,6 +583,7 @@ export function Select<Value>(
           loadingLabel={loadingLabel}
           tweakStyles={tweakSelectListStyles}
           testId={getTestId(testId, 'list')}
+          isMultiSelect={isMultiSelect}
           // скролл не работает с включеным поппером
           shouldScrollToList={shouldScrollToList && !shouldUsePopper && !shouldHideOnScroll}
           isOptionDisabled={isOptionDisabled}
@@ -547,7 +591,7 @@ export function Select<Value>(
           convertValueToReactNode={convertValueToReactNode}
           convertValueToId={convertToId}
           onOptionSelect={handleOptionSelect}
-          onToggleCheckbox={isMultiSelect ? handleToggleOptionCheckbox : undefined}
+          onToggleCheckbox={handleToggleOptionCheckbox}
         />
       )}
     </div>
@@ -564,7 +608,7 @@ export function Select<Value>(
     ) : undefined;
 
   return (
-    <div className={classes.root} onKeyDown={handleKeyDown}>
+    <div className={classes.root} onKeyDown={handleKeyDown} ref={root}>
       <div
         className={clsx(classes.inputWrapper, isDisabled && classes.disabled)}
         onClick={isDisabled ? undefined : handleOnClick}

package/src/components/Select/components/SelectList/SelectList.styles.ts

@@ -18,12 +18,14 @@ export const useStyles = createThemedStyles('SelectList', {
     paddingTop: 0,
   },
 
-  listHeader: {
-    '& + $list': {
-      borderTop: [1, 'solid', colors.BORDER_LIGHT],
-    },
+  withListFooter: {
+    paddingBottom: 0,
   },
 
+  listHeader: {},
+
+  listFooter: {},
+
   list: {
     height: '100%',
     maxHeight: ROW_HEIGHT * 6,

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

@@ -1,20 +1,19 @@
-import { ReactNode, useMemo } from 'react';
+import { useMemo, type ReactNode } from 'react';
 import clsx from 'clsx';
 import {
   addDataTestId,
-  isNotEmpty,
+  getArray,
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { ICommonProps } from '../../../../types';
+import { type ICommonProps } from '../../../../types';
 import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
 import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from '../../constants';
-import { IMultipleSelectValue } from '../../types';
-import { ISelectListItemProps, SelectListItem } from '../SelectListItem';
-import { useStyles, ISelectListStyles } from './SelectList.styles';
+import { SelectListItem, type ISelectListItemProps } from '../SelectListItem';
+import { useStyles, type ISelectListStyles } from './SelectList.styles';
 
 export interface ISelectListProps<Value>
   extends ICommonProps<ISelectListStyles>,
-    Pick<ISelectListItemProps, 'onToggleCheckbox' | 'onOptionSelect'> {
+    Pick<ISelectListItemProps, 'onToggleCheckbox' | 'onOptionSelect' | 'isMultiSelect'> {
   options: Value[] | Readonly<Value[]>;
   focusedIndex?: number;
   activeValue?: Value | Value[];
@@ -26,6 +25,7 @@ export interface ISelectListProps<Value>
   areAllOptionsSelected?: boolean;
   shouldScrollToList?: boolean;
   customListHeader?: ReactNode;
+  customListFooter?: ReactNode;
   isOptionDisabled: (value: Value) => boolean;
   convertValueToString: (value: Value) => string | undefined;
   convertValueToReactNode?: (value: Value, isDisabled: boolean) => ReactNode;
@@ -45,6 +45,8 @@ export function SelectList<Value>({
   shouldScrollToList = true,
   areAllOptionsSelected,
   customListHeader,
+  customListFooter,
+  isMultiSelect,
   isOptionDisabled,
   allOptionsLabel,
   onOptionSelect,
@@ -55,42 +57,33 @@ export function SelectList<Value>({
 }: ISelectListProps<Value>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
 
-  const isMultiSelect = isNotEmpty(onToggleCheckbox);
-  const multiSelectValue = activeValue as IMultipleSelectValue<Value> | undefined;
-  const selectedOptionsCount = multiSelectValue?.length ?? 0;
-
-  // MultiSelect
-  const activeOptionsIdMap = useMemo(
-    () => (isMultiSelect ? multiSelectValue?.map(convertValueToId) ?? [] : []),
-    [isMultiSelect, multiSelectValue, convertValueToId],
-  );
+  const isHeaderNotEmpty = isReactNodeNotEmpty(customListHeader);
+  const isFooterNotEmpty = isReactNodeNotEmpty(customListFooter);
 
   const optionsDisableMap = useMemo(
-    () => options.map((o) => isOptionDisabled(o)),
+    () => options.map(isOptionDisabled),
     [options, isOptionDisabled],
   );
 
   const listOptions = useMemo(
-    () => options.map((opt, i) => convertValueToReactNode(opt, optionsDisableMap[i])),
+    () => options.map((option, index) => convertValueToReactNode(option, optionsDisableMap[index])),
     [options, convertValueToReactNode, optionsDisableMap],
   );
 
-  const isActiveOption = (item: Value): boolean =>
-    isMultiSelect
-      ? activeOptionsIdMap.includes(convertValueToId(item))
-      : isNotEmpty(activeValue) &&
-        convertValueToId(activeValue as Value) === convertValueToId(item);
+  const activeOptionsIds = useMemo(
+    () => new Set((getArray(activeValue) as Value[]).map(convertValueToId)),
+    [activeValue, convertValueToId],
+  );
 
   return (
     <ScrollIntoViewIfNeeded
       active={shouldScrollToList && !isMultiSelect}
       className={clsx(classes.root, {
-        [classes.withListHeader]: isReactNodeNotEmpty(customListHeader),
+        [classes.withListHeader]: isHeaderNotEmpty,
+        [classes.withListFooter]: isFooterNotEmpty,
       })}
     >
-      {isReactNodeNotEmpty(customListHeader) && (
-        <div className={classes.listHeader}>{customListHeader}</div>
-      )}
+      {isHeaderNotEmpty && <div className={classes.listHeader}>{customListHeader}</div>}
       <div className={classes.list} {...addDataTestId(testId)}>
         {isLoading ? (
           <div className={clsx(classes.cell, classes.loading)}>{loadingLabel}</div>
@@ -114,9 +107,10 @@ export function SelectList<Value>({
               <SelectListItem
                 classes={classes}
                 index={ALL_OPTION_INDEX}
-                isSemiChecked={selectedOptionsCount > 0 && !areAllOptionsSelected}
+                isSemiChecked={activeOptionsIds.size > 0 && !areAllOptionsSelected}
                 isActive={areAllOptionsSelected}
                 isFocused={focusedIndex === ALL_OPTION_INDEX}
+                isMultiSelect={isMultiSelect}
                 onOptionSelect={onOptionSelect}
                 onToggleCheckbox={onToggleCheckbox}
               >
@@ -126,7 +120,7 @@ export function SelectList<Value>({
             {listOptions.map((opt, i) => {
               const optionValue = options[i];
               const isFocused = focusedIndex === i;
-              const isActive = isActiveOption(optionValue);
+              const isActive = activeOptionsIds.has(convertValueToId(optionValue));
               // проверяем, что опция задизейблена
               const isDisabled = optionsDisableMap[i];
 
@@ -138,6 +132,7 @@ export function SelectList<Value>({
                   isDisabled={isDisabled}
                   isActive={isActive}
                   isFocused={isFocused}
+                  isMultiSelect={isMultiSelect}
                   onOptionSelect={onOptionSelect}
                   onToggleCheckbox={onToggleCheckbox}
                 >
@@ -151,6 +146,7 @@ export function SelectList<Value>({
           </>
         )}
       </div>
+      {isFooterNotEmpty && <div className={classes.listFooter}>{customListFooter}</div>}
     </ScrollIntoViewIfNeeded>
   );
 }

package/src/components/Select/components/SelectListItem/SelectListItem.tsx

@@ -1,7 +1,12 @@
-import { ReactNode, MouseEvent, FC, KeyboardEvent, ChangeEvent } from 'react';
+import {
+  type ChangeEvent,
+  type FC,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+} from 'react';
 import clsx from 'clsx';
-import { Classes } from 'jss';
-import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { type Classes } from 'jss';
 import { addDataAttributes } from '../../../../helpers';
 import { Checkbox } from '../../../Checkbox';
 import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
@@ -15,8 +20,9 @@ export interface ISelectListItemProps {
   isFocused?: boolean;
   children: ReactNode;
   classes: Classes<'cellWithCheckbox' | 'cell' | 'focused' | 'active' | 'disabled'>; // TODO: !!!
+  isMultiSelect?: boolean;
   onOptionSelect: (index: number, event: MouseEvent<HTMLElement>) => void;
-  onToggleCheckbox?: (
+  onToggleCheckbox: (
     index: number,
     isSelected: boolean,
     event: ChangeEvent<HTMLElement> | KeyboardEvent,
@@ -31,10 +37,21 @@ export const SelectListItem: FC<ISelectListItemProps> = ({
   isActive,
   children,
   isFocused,
+  isMultiSelect,
   onOptionSelect,
   onToggleCheckbox,
 }) => {
-  const isMultiSelect = isNotEmpty(onToggleCheckbox);
+  const multiSelectContent = isMultiSelect && (
+    <Checkbox
+      isChecked={isActive || isSemiChecked}
+      isSemiChecked={isSemiChecked}
+      isDisabled={isDisabled}
+      tweakStyles={checkboxStyles}
+      onSelect={({ isSelected }, event) => onToggleCheckbox(index, isSelected, event)}
+    >
+      {children}
+    </Checkbox>
+  );
 
   return (
     <ScrollIntoViewIfNeeded
@@ -53,20 +70,7 @@ export const SelectListItem: FC<ISelectListItemProps> = ({
       })}
       onClick={!isDisabled && !isMultiSelect ? (event) => onOptionSelect(index, event) : undefined}
     >
-      {isMultiSelect ? (
-        <Checkbox
-          value={index}
-          isChecked={isActive || isSemiChecked}
-          isSemiChecked={isSemiChecked}
-          isDisabled={isDisabled}
-          tweakStyles={checkboxStyles}
-          onSelect={(v, event) => onToggleCheckbox(index, v.isSelected, event)}
-        >
-          {children}
-        </Checkbox>
-      ) : (
-        children
-      )}
+      {isMultiSelect ? multiSelectContent : children}
     </ScrollIntoViewIfNeeded>
   );
 };

package/src/components/Select/helpers.ts

@@ -1,6 +1,4 @@
 import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import type { IMultipleSelectProps, ISelectProps } from './Select';
-import { IMultipleSelectValue } from './types';
 
 export const defaultIsOptionDisabled = <Value>(option: Value): boolean =>
   typeof option === 'object' &&
@@ -20,8 +18,3 @@ export const getDefaultConvertToIdFunction =
     isNotEmpty((value as { id: unknown })?.id)
       ? String((value as { id: unknown }).id)
       : convertValueToString(value);
-
-export const isMultiSelectValue = <Value>(
-  props: ISelectProps<Value> | IMultipleSelectProps<Value>,
-  _value: Value | IMultipleSelectValue<Value> | undefined,
-): _value is IMultipleSelectValue<Value> | undefined => props.isMultiSelect === true;

package/src/components/TextWithTooltip/TextWithTooltip.tsx

@@ -1,5 +1,4 @@
-import { FC, ReactNode, useEffect, useRef, useState } from 'react';
-import { Styles } from 'react-jss';
+import { CSSProperties, FC, ReactNode, useEffect, useRef, useState } from 'react';
 import { Portal } from 'react-overlays';
 import usePopper, { Modifier, Placement } from 'react-overlays/usePopper';
 import clsx from 'clsx';
@@ -137,7 +136,7 @@ export const TextWithTooltip: FC<ITextWithTooltipProps> = ({
         <Portal container={shouldRenderInBody ? document.body : root.current}>
           <div
             className={classes.tooltip}
-            style={popperStyles.popper as Styles}
+            style={popperStyles.popper as CSSProperties}
             {...attributes.popper}
             ref={tooltip}
           >