@true-engineering/true-react-common-ui-kit 4.0.0-alpha5 → 4.0.0-alpha51

package/src/components/Select/MultiSelect.stories.tsx

@@ -1,6 +1,8 @@
-import { ReactNode, useEffect, useState } from 'react';
+import { ReactElement, ReactNode, useEffect, useState } from 'react';
 import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
+import { GROUP_PLACEMENTS } from '../ControlWrapper';
+import { iconsMap } from '../Icon';
 import { IMultipleSelectProps, Select } from './Select';
 
 interface ObjectValue {
@@ -9,8 +11,6 @@ interface ObjectValue {
   isDisabled?: boolean;
 }
 
-const groupPlacements = [undefined, 'left', 'right', 'middle'];
-
 const genLetters = (qnt = 1): string =>
   Math.random()
     .toString(36)
@@ -54,11 +54,13 @@ const objectOptions: ObjectValue[] = [
   { name: 'Artem', age: 23 },
 ];
 
+const icons = [undefined, ...Object.keys(iconsMap)];
+
 // Максимум не включается, минимум включается
 const getRandomInt = (min: number, max: number) =>
   Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min))) + Math.ceil(min);
 
-interface ISelectWithCustomProps<T> extends IMultipleSelectProps<T> {
+interface ISelectCustomProps<T> extends IMultipleSelectProps<T> {
   valuesType: 'strings' | 'objects';
   shouldUseReactNodes?: boolean;
   shouldUsePopper?: boolean;
@@ -70,7 +72,7 @@ interface ISelectWithCustomProps<T> extends IMultipleSelectProps<T> {
   scrollParent?: 'document' | 'auto';
 }
 
-function SelectWithCustomProps<T>({
+function Story<T>({
   valuesType,
   optionsMode,
   shouldUseReactNodes,
@@ -82,8 +84,8 @@ function SelectWithCustomProps<T>({
   canBeFlipped,
   scrollParent,
   noMatchesLabel,
-  ...rest
-}: ISelectWithCustomProps<T>) {
+  ...args
+}: ISelectCustomProps<T>): ReactElement {
   const [stringValue, setStringValue] = useState<string[]>();
 
   const stringHandler = (newValue?: string[]) => {
@@ -157,7 +159,7 @@ function SelectWithCustomProps<T>({
 
   return (
     <Select
-      {...rest}
+      {...args}
       {...(props as unknown as IMultipleSelectProps<any>)}
       {...(shouldRenderSearchInputInList && {
         searchInput: { shouldRenderInList: true },
@@ -179,14 +181,41 @@ function SelectWithCustomProps<T>({
   );
 }
 
-export default {
+const meta: Meta<typeof Story> = {
   title: 'Controls/Select',
-  component: SelectWithCustomProps,
+  component: Story,
+  args: {
+    label: 'Dropdown',
+    noMatchesLabel: 'No matches',
+    isInvalid: false,
+    errorMessage: 'Error Text',
+    icon: 'filter',
+    defaultOptionLabel: '',
+    allOptionsLabel: 'Все опции',
+    isDisabled: false,
+    isRequired: false,
+    isClearable: false,
+    isLoading: false,
+    debounceTime: 400,
+    // custom options
+    shouldUseReactNodes: false,
+    valuesType: 'strings',
+    optionsMode: 'normal',
+    shouldUsePopper: false,
+    shouldRenderInBody: false,
+    shouldHideOnScroll: false,
+    shouldUseCustomIsDisabledFunction: false,
+    shouldRenderSearchInputInList: false,
+    shouldScrollToList: true,
+    canBeFlipped: false,
+    scrollParent: 'document',
+    size: undefined,
+  },
   argTypes: {
     debounceTime: {
       control: { type: 'range', min: 0, max: 1000, step: 100 },
     },
-    groupPlacement: { control: 'select', options: groupPlacements },
+    groupPlacement: { options: [undefined, ...GROUP_PLACEMENTS], control: 'select' },
     optionsMode: {
       control: 'inline-radio',
       options: ['normal', 'search', 'dynamic'],
@@ -195,38 +224,9 @@ export default {
       control: 'inline-radio',
       options: ['strings', 'objects'],
     },
+    icon: { control: 'select', options: icons },
   },
-} as ComponentMeta<typeof SelectWithCustomProps>;
-
-const Template: ComponentStory<typeof SelectWithCustomProps> = (args) => (
-  <SelectWithCustomProps {...args} />
-);
-
-export const MultiSelect = Template.bind({});
-
-MultiSelect.args = {
-  label: 'Dropdown',
-  noMatchesLabel: 'No matches',
-  isInvalid: false,
-  errorMessage: 'Error Text',
-  icon: 'document',
-  defaultOptionLabel: '',
-  allOptionsLabel: 'Все опции',
-  isDisabled: false,
-  isRequired: false,
-  isClearable: false,
-  isLoading: false,
-  debounceTime: 400,
-  // custom options
-  shouldUseReactNodes: false,
-  valuesType: 'strings',
-  optionsMode: 'normal',
-  shouldUsePopper: false,
-  shouldRenderInBody: false,
-  shouldHideOnScroll: false,
-  shouldUseCustomIsDisabledFunction: false,
-  shouldRenderSearchInputInList: false,
-  shouldScrollToList: true,
-  canBeFlipped: false,
-  scrollParent: 'document',
 };
+
+export default meta;
+export const MultiSelect = {};

package/src/components/Select/Select.stories.tsx

@@ -1,6 +1,8 @@
-import { ReactNode, useEffect, useState } from 'react';
+import { ReactElement, ReactNode, useEffect, useState } from 'react';
 import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
+import { GROUP_PLACEMENTS } from '../ControlWrapper';
+import { iconsMap } from '../Icon';
 import { ISelectProps, Select } from './Select';
 
 interface ObjectValue {
@@ -9,8 +11,6 @@ interface ObjectValue {
   isDisabled?: boolean;
 }
 
-const groupPlacements = [undefined, 'left', 'right', 'middle'];
-
 const genLetters = (qnt = 1): string =>
   Math.random()
     .toString(36)
@@ -54,11 +54,13 @@ const objectOptions: ObjectValue[] = [
   { name: 'Artem', age: 23 },
 ];
 
+const icons = [undefined, ...Object.keys(iconsMap)];
+
 // Максимум не включается, минимум включается
 const getRandomInt = (min: number, max: number) =>
   Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min))) + Math.ceil(min);
 
-interface ISelectWithCustomProps<T> extends ISelectProps<T> {
+interface ISelectCustomProps<T> extends ISelectProps<T> {
   valuesType: 'strings' | 'objects';
   shouldUseReactNodes?: boolean;
   shouldUsePopper?: boolean;
@@ -70,7 +72,7 @@ interface ISelectWithCustomProps<T> extends ISelectProps<T> {
   scrollParent?: 'document' | 'auto';
 }
 
-function SelectWithCustomProps<T>({
+function Story<T>({
   valuesType,
   optionsMode,
   shouldUseReactNodes,
@@ -82,8 +84,8 @@ function SelectWithCustomProps<T>({
   canBeFlipped,
   scrollParent,
   noMatchesLabel,
-  ...rest
-}: ISelectWithCustomProps<T>) {
+  ...args
+}: ISelectCustomProps<T>): ReactElement {
   const [stringValue, setStringValue] = useState<string>();
   const stringHandler = (newValue?: string) => {
     console.log('change');
@@ -155,7 +157,7 @@ function SelectWithCustomProps<T>({
 
   return (
     <Select
-      {...rest}
+      {...args}
       {...(props as unknown as ISelectProps<any>)}
       {...(shouldRenderSearchInputInList && {
         searchInput: { shouldRenderInList: true },
@@ -176,14 +178,41 @@ function SelectWithCustomProps<T>({
   );
 }
 
-export default {
+const meta: Meta<typeof Story> = {
   title: 'Controls/Select',
-  component: SelectWithCustomProps,
+  component: Story,
+  args: {
+    label: 'Dropdown',
+    defaultOptionLabel: 'Default Option',
+    noMatchesLabel: 'No matches',
+    isInvalid: false,
+    errorMessage: 'Error Text',
+    isDisabled: false,
+    isReadonly: false,
+    isRequired: false,
+    isClearable: false,
+    isLoading: false,
+    debounceTime: 400,
+    icon: undefined,
+    // custom options
+    shouldUseReactNodes: false,
+    valuesType: 'strings',
+    optionsMode: 'normal',
+    shouldUsePopper: false,
+    shouldRenderInBody: false,
+    shouldHideOnScroll: false,
+    shouldUseCustomIsDisabledFunction: false,
+    shouldRenderSearchInputInList: false,
+    shouldScrollToList: true,
+    canBeFlipped: false,
+    scrollParent: 'document',
+    size: undefined,
+  },
   argTypes: {
     debounceTime: {
       control: { type: 'range', min: 0, max: 1000, step: 100 },
     },
-    groupPlacement: { control: 'select', options: groupPlacements },
+    groupPlacement: { options: [undefined, ...GROUP_PLACEMENTS], control: 'select' },
     optionsMode: {
       control: 'inline-radio',
       options: ['normal', 'search', 'dynamic'],
@@ -192,37 +221,9 @@ export default {
       control: 'inline-radio',
       options: ['strings', 'objects'],
     },
+    icon: { control: 'select', options: icons },
   },
-} as ComponentMeta<typeof SelectWithCustomProps>;
-
-const Template: ComponentStory<typeof SelectWithCustomProps> = (args) => (
-  <SelectWithCustomProps {...args} />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Dropdown',
-  defaultOptionLabel: 'Default Option',
-  noMatchesLabel: 'No matches',
-  isInvalid: false,
-  errorMessage: 'Error Text',
-  isDisabled: false,
-  isReadonly: false,
-  isRequired: false,
-  isClearable: false,
-  isLoading: false,
-  debounceTime: 400,
-  // custom options
-  shouldUseReactNodes: false,
-  valuesType: 'strings',
-  optionsMode: 'normal',
-  shouldUsePopper: false,
-  shouldRenderInBody: false,
-  shouldHideOnScroll: false,
-  shouldUseCustomIsDisabledFunction: false,
-  shouldRenderSearchInputInList: false,
-  shouldScrollToList: true,
-  canBeFlipped: false,
-  scrollParent: 'document',
 };
+
+export default meta;
+export const Default = {};

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

@@ -5,7 +5,7 @@ import { type ISearchInputStyles } from '../SearchInput';
 import { IWithMessagesStyles } from '../WithMessages';
 import { type ISelectListStyles } from './components';
 
-const { CONTROL, Z_INDEX } = dimensions;
+const { Z_INDEX } = dimensions;
 
 export const useStyles = createThemedStyles('Select', {
   root: {
@@ -17,7 +17,6 @@ export const useStyles = createThemedStyles('Select', {
   inputWrapper: {
     width: '100%',
     cursor: 'text',
-    position: 'relative',
   },
 
   listWrapper: {
@@ -40,20 +39,16 @@ export const useStyles = createThemedStyles('Select', {
   },
 
   arrow: {
-    position: 'absolute',
-    right: 12,
-    top: '50%',
-    width: 20,
-    height: 20,
+    width: 'var(--icon-inner-size, 20px)',
+    height: 'var(--icon-inner-size, 20px)',
     cursor: 'pointer',
-    transform: 'translateY(-50%)',
     transition: animations.defaultTransition,
     transitionProperty: 'transform',
     zIndex: Z_INDEX.CONTROL_FOCUS + 1,
   },
 
   activeArrow: {
-    transform: 'translateY(-50%) rotate(180deg)',
+    transform: 'rotate(180deg)',
   },
 
   disabled: {
@@ -62,45 +57,15 @@ export const useStyles = createThemedStyles('Select', {
     },
   },
 
-  counter: {
-    '&:not(:last-child)': {
-      paddingRight: 8,
-    },
-  },
-
-  icon: {
-    width: CONTROL.ICON_INNER_SIZE,
-    height: CONTROL.ICON_INNER_SIZE,
-  },
-
-  iconWrapper: {
-    display: 'flex',
-    alignItems: 'center',
-  },
+  counter: {},
 });
 
 const baseInputStyles: IInputStyles = {
-  inputContent: {
-    paddingRight: 32,
-  },
-
   input: {
     '&[readonly]': {
       cursor: 'pointer',
     },
   },
-
-  tweakControlWrapper: {
-    controls: {
-      paddingRight: 40,
-    },
-
-    icon: {
-      '&:last-child': {
-        paddingRight: 0,
-      },
-    },
-  },
 };
 
 const readonlyInputBaseStyles: IInputStyles = {

package/src/components/Select/Select.tsx

@@ -5,6 +5,7 @@ import {
   KeyboardEvent,
   MouseEvent,
   ReactNode,
+  Ref,
   SyntheticEvent,
   useCallback,
   useEffect,
@@ -16,7 +17,9 @@ import { Portal } from 'react-overlays';
 import clsx from 'clsx';
 import { debounce } from 'ts-debounce';
 import {
+  applyAction,
   createFilter,
+  getArray,
   getTestId,
   isNotEmpty,
   isReactNodeNotEmpty,
@@ -37,14 +40,14 @@ import {
   defaultIsOptionDisabled,
   getDefaultConvertToIdFunction,
 } from './helpers';
-import { IChangeSelectEvent, IMultipleSelectValue } from './types';
+import { IChangeSelectEvent, IMultipleSelectValue, ISelectFooter } from './types';
 import { getInputStyles, ISelectStyles, useStyles } from './Select.styles';
 
 export interface ISelectProps<Value>
   extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type' | 'tweakStyles'>,
     ICommonProps<ISelectStyles> {
   header?: ReactNode;
-  footer?: ReactNode;
+  footer?: ISelectFooter<Value>;
   defaultOptionLabel?: ReactNode;
   allOptionsLabel?: string;
   noMatchesLabel?: string;
@@ -58,12 +61,16 @@ export interface ISelectProps<Value>
   dropdownOptions?: IDropdownWithPopperOptions;
   /** @default 'chevron-down' */
   dropdownIcon?: IIcon;
-  options: Value[] | Readonly<Value[]>;
+  options: Value[] | readonly Value[];
   value: Value | undefined;
   /** @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;
@@ -188,7 +195,7 @@ export function Select<Value>(
 
   const filteredOptions = useMemo(() => {
     if (optionsMode !== 'search') {
-      return options;
+      return options as Value[];
     }
 
     const filter =
@@ -248,10 +255,14 @@ export function Select<Value>(
 
   const handleListClose = useCallback(
     (event: Event | SyntheticEvent) => {
+      if (!isListOpen) {
+        return;
+      }
+
       closeList();
       onBlur?.(event);
     },
-    [closeList, onBlur],
+    [isListOpen, closeList, onBlur],
   );
 
   const handleListOpen = () => {
@@ -269,32 +280,6 @@ export function Select<Value>(
     handleListOpen();
   };
 
-  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
-    // Когда что-то блокирует открытие листа, но блур все равно должен сработать
-    // например minSymbolsCount
-    if (isListOpen && !isOpen) {
-      handleListClose(event);
-      return;
-    }
-
-    if (
-      !isNotEmpty(event.relatedTarget) ||
-      !isNotEmpty(list.current) ||
-      !isNotEmpty(inputWrapper.current)
-    ) {
-      return;
-    }
-
-    const isActionInsideSelect =
-      hasExactParent(event.relatedTarget, list.current) ||
-      hasExactParent(event.relatedTarget, inputWrapper.current);
-
-    // Ничего не делаем, если клик был внутри селекта
-    if (!isActionInsideSelect) {
-      handleListClose(event);
-    }
-  };
-
   const handleChange = useCallback(
     (newValue: Value | IMultipleSelectValue<Value> | undefined, event: IChangeSelectEvent) => {
       // Тут беда с типами, сорри
@@ -473,6 +458,32 @@ export function Select<Value>(
     // Последняя проверка на случай, если мы че то ищем в опциях
     (optionsMode === 'normal' || hasEnoughSymbolsToSearch);
 
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    // Когда что-то блокирует открытие листа, но блур все равно должен сработать
+    // например minSymbolsCount
+    if (isListOpen && !isOpen) {
+      handleListClose(event);
+      return;
+    }
+
+    if (
+      !isNotEmpty(event.relatedTarget) ||
+      !isNotEmpty(list.current) ||
+      !isNotEmpty(inputWrapper.current)
+    ) {
+      return;
+    }
+
+    const isActionInsideSelect =
+      hasExactParent(event.relatedTarget, list.current) ||
+      hasExactParent(event.relatedTarget, inputWrapper.current);
+
+    // Ничего не делаем, если клик был внутри селекта
+    if (!isActionInsideSelect) {
+      handleListClose(event);
+    }
+  };
+
   // Эти значения ставятся в false по дефолту также в useDropdown
   const {
     shouldUsePopper = false,
@@ -544,7 +555,7 @@ export function Select<Value>(
           allOptionsLabel={shouldShowAllOption && allOptionsLabel}
           areAllOptionsSelected={areAllOptionsSelected}
           customListHeader={customHeader}
-          customListFooter={footer}
+          customListFooter={applyAction(footer, { filteredOptions })}
           noMatchesLabel={noMatchesLabel}
           focusedIndex={focusedListCellIndex}
           activeValue={value}
@@ -566,16 +577,6 @@ export function Select<Value>(
     </div>
   );
 
-  const multiSelectCounterWithIcon =
-    shouldShowMultiSelectCounter || isNotEmpty(icon) ? (
-      <div className={classes.iconWrapper}>
-        {shouldShowMultiSelectCounter && (
-          <div className={classes.counter}>(+{value.length - 1})</div>
-        )}
-        {isNotEmpty(icon) && <div className={classes.icon}>{renderIcon(icon)}</div>}
-      </div>
-    ) : undefined;
-
   return (
     <WithMessages
       errorMessage={errorMessage}
@@ -603,18 +604,31 @@ export function Select<Value>(
             isLoading={areOptionsLoading}
             tweakStyles={tweakInputStyles}
             testId={testId}
-            icon={isMultiSelect ? multiSelectCounterWithIcon : icon}
+            icon={[
+              isMultiSelect && shouldShowMultiSelectCounter
+                ? {
+                    key: 'counter',
+                    iconComponent: (
+                      <div key="counter" className={classes.counter}>
+                        (+{value.length - 1})
+                      </div>
+                    ),
+                    shouldResetSize: true,
+                  }
+                : undefined,
+
+              ...getArray(icon),
+
+              <div
+                key="arrow"
+                className={clsx(classes.arrow, isOpen && classes.activeArrow)}
+                onClick={onArrowClick} // клик тут, потому что onClick в ControlWrapper добавляет tabIndex={0}
+              >
+                {renderIcon(dropdownIcon)}
+              </div>,
+            ].filter(isNotEmpty)}
             {...inputProps}
           />
-          <div
-            onMouseDown={(event: MouseEvent) => {
-              event.preventDefault();
-            }}
-            onClick={onArrowClick}
-            className={clsx(classes.arrow, isOpen && classes.activeArrow)}
-          >
-            {renderIcon(dropdownIcon)}
-          </div>
         </div>
         {shouldUsePopper ? (
           <Portal container={shouldRenderInBody ? document.body : inputWrapper.current}>

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

@@ -1,4 +1,4 @@
-import { useMemo, type ReactNode } from 'react';
+import { type ReactNode, useMemo } from 'react';
 import clsx from 'clsx';
 import {
   addDataTestId,
@@ -8,13 +8,13 @@ import {
 import { type ICommonProps } from '../../../../types';
 import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
 import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from '../../constants';
-import { SelectListItem, type ISelectListItemProps } from '../SelectListItem';
-import { useStyles, type ISelectListStyles } from './SelectList.styles';
+import { type ISelectListItemProps, SelectListItem } from '../SelectListItem';
+import { type ISelectListStyles, useStyles } from './SelectList.styles';
 
 export interface ISelectListProps<Value>
   extends ICommonProps<ISelectListStyles>,
     Pick<ISelectListItemProps, 'onToggleCheckbox' | 'onOptionSelect' | 'isMultiSelect'> {
-  options: Value[] | Readonly<Value[]>;
+  options: Value[] | readonly Value[];
   focusedIndex?: number;
   activeValue?: Value | Value[];
   noMatchesLabel?: string;
@@ -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>
         ) : (
@@ -119,8 +119,9 @@ export function SelectList<Value>({
             )}
             {listOptions.map((opt, i) => {
               const optionValue = options[i];
+              const id = convertValueToId(optionValue);
               const isFocused = focusedIndex === i;
-              const isActive = activeOptionsIds.has(convertValueToId(optionValue));
+              const isActive = activeOptionsIds.has(id);
               // проверяем, что опция задизейблена
               const isDisabled = optionsDisableMap[i];
 
@@ -135,6 +136,7 @@ export function SelectList<Value>({
                   isMultiSelect={isMultiSelect}
                   onOptionSelect={onOptionSelect}
                   onToggleCheckbox={onToggleCheckbox}
+                  data={{ id }}
                 >
                   {opt}
                 </SelectListItem>

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

@@ -7,12 +7,13 @@ import {
 } from 'react';
 import clsx from 'clsx';
 import { type Classes } from 'jss';
-import { addDataAttributes } from '../../../../helpers';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
+import { IDataAttributesProps } from '../../../../types';
 import { Checkbox } from '../../../Checkbox';
 import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
 import { checkboxStyles } from './SelectListItem.styles';
 
-export interface ISelectListItemProps {
+export interface ISelectListItemProps extends IDataAttributesProps {
   index: number;
   isSemiChecked?: boolean;
   isDisabled?: boolean;
@@ -38,6 +39,7 @@ export const SelectListItem: FC<ISelectListItemProps> = ({
   children,
   isFocused,
   isMultiSelect,
+  data,
   onOptionSelect,
   onToggleCheckbox,
 }) => {
@@ -67,6 +69,7 @@ export const SelectListItem: FC<ISelectListItemProps> = ({
         disabled: isDisabled,
         active: isActive,
         focused: isFocused,
+        ...data,
       })}
       onClick={!isDisabled && !isMultiSelect ? (event) => onOptionSelect(index, event) : undefined}
     >

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';

package/src/components/Select/types.ts

@@ -1,6 +1,9 @@
 import { ChangeEvent, KeyboardEvent } from 'react';
+import { IRenderNode } from '../../types';
 import { IChangeInputEvent } from '../Input';
 
 export type IMultipleSelectValue<Value> = Array<NonNullable<Value>>;
 
 export type IChangeSelectEvent = IChangeInputEvent | ChangeEvent<HTMLElement> | KeyboardEvent;
+
+export type ISelectFooter<T> = IRenderNode<{ filteredOptions: T[] }>;