@true-engineering/true-react-common-ui-kit 3.8.1 → 3.9.0

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

@@ -1,235 +1,235 @@
-import { ReactNode, useEffect, useState } from 'react';
-import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Select, ISelectProps } from './Select';
-
-interface ObjectValue {
-  name: string;
-  age: number;
-  isDisabled?: boolean;
-}
-
-const inlineStyles = [undefined, 'left', 'right', 'middle'];
-const borders: Array<ISelectProps<any>['border']> = [undefined, 'left', 'top', 'right', 'bottom'];
-const errorPositions: Array<ISelectProps<any>['errorPosition']> = ['bottom', 'top'];
-
-const genLetters = (qnt = 1): string =>
-  Math.random()
-    .toString(36)
-    .replace(/[^a-z]+/g, '')
-    .substr(0, qnt);
-
-const convertObjectToString = (v: ObjectValue): string => v.name;
-
-const convertObjectToId = (v: ObjectValue): string => `${v.name}${v.age}`;
-
-const convertObjectToReactNode = (v: ObjectValue, isDisabled: boolean): ReactNode => (
-  <span style={{ color: isDisabled ? 'red' : undefined }}>
-    <i>{v.name}</i>, {v.age}
-  </span>
-);
-
-const convertStringToReactNode = (v: string): ReactNode => <i>{v}</i>;
-
-const isOptionDisabled = (option: string) => option.startsWith('Опция');
-const isObjectOptionDisabled = (option: ObjectValue) => option.age > 30;
-
-const stringOptions = [
-  'Опция 1',
-  'Опция 11',
-  'Еще одна опция',
-  'Еще выбор',
-  'Очень длинная опция вот такой текст',
-  '1',
-  '2',
-  '3',
-  '4',
-];
-
-const objectOptions: ObjectValue[] = [
-  { name: 'Ivan', age: 34 },
-  { name: 'Ivan', age: 42 },
-  { name: 'Konstantin', age: 11 },
-  { name: 'Mikhail', age: 24 },
-  { name: 'Maria', age: 45, isDisabled: true },
-  { name: 'Elena', age: 14 },
-  { name: 'Artem', age: 23 },
-];
-
-// Максимум не включается, минимум включается
-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> {
-  valuesType: 'strings' | 'objects';
-  shouldUseReactNodes?: boolean;
-  shouldUsePopper?: boolean;
-  shouldRenderInBody?: boolean;
-  shouldHideOnScroll?: boolean;
-  shouldUseCustomIsDisabledFunction?: boolean;
-  shouldRenderSearchInputInList?: boolean;
-  canBeFlipped?: boolean;
-  scrollParent?: 'document' | 'auto';
-}
-
-function SelectWithCustomProps<T>({
-  valuesType,
-  optionsMode,
-  shouldUseReactNodes,
-  shouldUsePopper,
-  shouldRenderInBody,
-  shouldHideOnScroll,
-  shouldUseCustomIsDisabledFunction,
-  shouldRenderSearchInputInList,
-  canBeFlipped,
-  scrollParent,
-  noMatchesLabel,
-  ...rest
-}: ISelectWithCustomProps<T>) {
-  const [stringValue, setStringValue] = useState<string>();
-  const stringHandler = (newValue?: string) => {
-    console.log('change');
-    setStringValue(newValue);
-  };
-
-  const [objectValue, setObjectValue] = useState<ObjectValue>();
-  const objectHandler = (newValue?: ObjectValue) => {
-    console.log('change');
-    setObjectValue(newValue);
-  };
-
-  const selectValuesType = valuesType;
-  const shouldRenderAsReactNodes = shouldUseReactNodes;
-
-  const getOptions = async (): Promise<Array<string | ObjectValue>> =>
-    new Promise((resolve) =>
-      setTimeout(() => {
-        resolve(
-          [...Array(10)].map((_) => {
-            if (selectValuesType === 'strings') {
-              return genLetters(getRandomInt(3, 10));
-            }
-            return {
-              name: genLetters(getRandomInt(3, 10)),
-              age: getRandomInt(10, 70),
-            } as ObjectValue;
-          }),
-        );
-      }, 1000),
-    );
-
-  const [dynamicOptions, setDynamicOptions] = useState<Array<string | ObjectValue>>([]);
-
-  const handleOpen = () => {
-    console.log('isOpen');
-  };
-
-  const handleBlur = () => {
-    console.log('blur');
-  };
-
-  useEffect(() => {
-    const api = async () => {
-      setDynamicOptions(await getOptions());
-    };
-
-    api();
-  }, [selectValuesType]);
-
-  const props =
-    selectValuesType === 'strings'
-      ? {
-          onChange: stringHandler,
-          value: stringValue,
-          options: optionsMode === 'dynamic' ? dynamicOptions : stringOptions,
-          convertValueToReactNode: shouldRenderAsReactNodes ? convertStringToReactNode : undefined,
-          isOptionDisabled: shouldUseCustomIsDisabledFunction ? isOptionDisabled : undefined,
-        }
-      : {
-          onChange: objectHandler,
-          value: objectValue,
-          options: optionsMode === 'dynamic' ? dynamicOptions : objectOptions,
-          convertValueToString: convertObjectToString,
-          convertValueToId: convertObjectToId,
-          convertValueToReactNode: shouldRenderAsReactNodes ? convertObjectToReactNode : undefined,
-          isOptionDisabled: shouldUseCustomIsDisabledFunction ? isObjectOptionDisabled : undefined,
-        };
-
-  return (
-    <Select
-      {...rest}
-      {...(props as unknown as ISelectProps<any>)}
-      {...(shouldRenderSearchInputInList && {
-        searchInput: { shouldRenderInList: true },
-      })}
-      noMatchesLabel={isStringNotEmpty(noMatchesLabel) ? noMatchesLabel : undefined}
-      optionsMode={optionsMode}
-      onType={async () => setDynamicOptions(await getOptions())}
-      onOpen={handleOpen}
-      onBlur={handleBlur}
-      dropdownOptions={{
-        shouldUsePopper,
-        shouldRenderInBody,
-        shouldHideOnScroll,
-        canBeFlipped,
-        scrollParent,
-      }}
-    />
-  );
-}
-
-export default {
-  title: 'Controls/Select',
-  component: SelectWithCustomProps,
-  argTypes: {
-    debounceTime: {
-      control: { type: 'range', min: 0, max: 1000, step: 100 },
-    },
-    errorPosition: { control: 'inline-radio', options: errorPositions },
-    border: { control: 'inline-radio', options: borders },
-    inlineStyle: { control: 'select', options: inlineStyles },
-    optionsMode: {
-      control: 'inline-radio',
-      options: ['normal', 'search', 'dynamic'],
-    },
-    valuesType: {
-      control: 'inline-radio',
-      options: ['strings', 'objects'],
-    },
-  },
-} 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',
-  border: undefined,
-  isInvalid: false,
-  errorMessage: 'Error Text',
-  errorPosition: 'bottom',
-  hasFloatingLabel: true,
-  hasRequiredLabel: true,
-  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',
-};
+import { ReactNode, useEffect, useState } from 'react';
+import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Select, ISelectProps } from './Select';
+
+interface ObjectValue {
+  name: string;
+  age: number;
+  isDisabled?: boolean;
+}
+
+const inlineStyles = [undefined, 'left', 'right', 'middle'];
+const borders: Array<ISelectProps<any>['border']> = [undefined, 'left', 'top', 'right', 'bottom'];
+const errorPositions: Array<ISelectProps<any>['errorPosition']> = ['bottom', 'top'];
+
+const genLetters = (qnt = 1): string =>
+  Math.random()
+    .toString(36)
+    .replace(/[^a-z]+/g, '')
+    .substr(0, qnt);
+
+const convertObjectToString = (v: ObjectValue): string => v.name;
+
+const convertObjectToId = (v: ObjectValue): string => `${v.name}${v.age}`;
+
+const convertObjectToReactNode = (v: ObjectValue, isDisabled: boolean): ReactNode => (
+  <span style={{ color: isDisabled ? 'red' : undefined }}>
+    <i>{v.name}</i>, {v.age}
+  </span>
+);
+
+const convertStringToReactNode = (v: string): ReactNode => <i>{v}</i>;
+
+const isOptionDisabled = (option: string) => option.startsWith('Опция');
+const isObjectOptionDisabled = (option: ObjectValue) => option.age > 30;
+
+const stringOptions = [
+  'Опция 1',
+  'Опция 11',
+  'Еще одна опция',
+  'Еще выбор',
+  'Очень длинная опция вот такой текст',
+  '1',
+  '2',
+  '3',
+  '4',
+];
+
+const objectOptions: ObjectValue[] = [
+  { name: 'Ivan', age: 34 },
+  { name: 'Ivan', age: 42 },
+  { name: 'Konstantin', age: 11 },
+  { name: 'Mikhail', age: 24 },
+  { name: 'Maria', age: 45, isDisabled: true },
+  { name: 'Elena', age: 14 },
+  { name: 'Artem', age: 23 },
+];
+
+// Максимум не включается, минимум включается
+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> {
+  valuesType: 'strings' | 'objects';
+  shouldUseReactNodes?: boolean;
+  shouldUsePopper?: boolean;
+  shouldRenderInBody?: boolean;
+  shouldHideOnScroll?: boolean;
+  shouldUseCustomIsDisabledFunction?: boolean;
+  shouldRenderSearchInputInList?: boolean;
+  canBeFlipped?: boolean;
+  scrollParent?: 'document' | 'auto';
+}
+
+function SelectWithCustomProps<T>({
+  valuesType,
+  optionsMode,
+  shouldUseReactNodes,
+  shouldUsePopper,
+  shouldRenderInBody,
+  shouldHideOnScroll,
+  shouldUseCustomIsDisabledFunction,
+  shouldRenderSearchInputInList,
+  canBeFlipped,
+  scrollParent,
+  noMatchesLabel,
+  ...rest
+}: ISelectWithCustomProps<T>) {
+  const [stringValue, setStringValue] = useState<string>();
+  const stringHandler = (newValue?: string) => {
+    console.log('change');
+    setStringValue(newValue);
+  };
+
+  const [objectValue, setObjectValue] = useState<ObjectValue>();
+  const objectHandler = (newValue?: ObjectValue) => {
+    console.log('change');
+    setObjectValue(newValue);
+  };
+
+  const selectValuesType = valuesType;
+  const shouldRenderAsReactNodes = shouldUseReactNodes;
+
+  const getOptions = async (): Promise<Array<string | ObjectValue>> =>
+    new Promise((resolve) =>
+      setTimeout(() => {
+        resolve(
+          [...Array(10)].map((_) => {
+            if (selectValuesType === 'strings') {
+              return genLetters(getRandomInt(3, 10));
+            }
+            return {
+              name: genLetters(getRandomInt(3, 10)),
+              age: getRandomInt(10, 70),
+            } as ObjectValue;
+          }),
+        );
+      }, 1000),
+    );
+
+  const [dynamicOptions, setDynamicOptions] = useState<Array<string | ObjectValue>>([]);
+
+  const handleOpen = () => {
+    console.log('isOpen');
+  };
+
+  const handleBlur = () => {
+    console.log('blur');
+  };
+
+  useEffect(() => {
+    const api = async () => {
+      setDynamicOptions(await getOptions());
+    };
+
+    api();
+  }, [selectValuesType]);
+
+  const props =
+    selectValuesType === 'strings'
+      ? {
+          onChange: stringHandler,
+          value: stringValue,
+          options: optionsMode === 'dynamic' ? dynamicOptions : stringOptions,
+          convertValueToReactNode: shouldRenderAsReactNodes ? convertStringToReactNode : undefined,
+          isOptionDisabled: shouldUseCustomIsDisabledFunction ? isOptionDisabled : undefined,
+        }
+      : {
+          onChange: objectHandler,
+          value: objectValue,
+          options: optionsMode === 'dynamic' ? dynamicOptions : objectOptions,
+          convertValueToString: convertObjectToString,
+          convertValueToId: convertObjectToId,
+          convertValueToReactNode: shouldRenderAsReactNodes ? convertObjectToReactNode : undefined,
+          isOptionDisabled: shouldUseCustomIsDisabledFunction ? isObjectOptionDisabled : undefined,
+        };
+
+  return (
+    <Select
+      {...rest}
+      {...(props as unknown as ISelectProps<any>)}
+      {...(shouldRenderSearchInputInList && {
+        searchInput: { shouldRenderInList: true },
+      })}
+      noMatchesLabel={isStringNotEmpty(noMatchesLabel) ? noMatchesLabel : undefined}
+      optionsMode={optionsMode}
+      onType={async () => setDynamicOptions(await getOptions())}
+      onOpen={handleOpen}
+      onBlur={handleBlur}
+      dropdownOptions={{
+        shouldUsePopper,
+        shouldRenderInBody,
+        shouldHideOnScroll,
+        canBeFlipped,
+        scrollParent,
+      }}
+    />
+  );
+}
+
+export default {
+  title: 'Controls/Select',
+  component: SelectWithCustomProps,
+  argTypes: {
+    debounceTime: {
+      control: { type: 'range', min: 0, max: 1000, step: 100 },
+    },
+    errorPosition: { control: 'inline-radio', options: errorPositions },
+    border: { control: 'inline-radio', options: borders },
+    inlineStyle: { control: 'select', options: inlineStyles },
+    optionsMode: {
+      control: 'inline-radio',
+      options: ['normal', 'search', 'dynamic'],
+    },
+    valuesType: {
+      control: 'inline-radio',
+      options: ['strings', 'objects'],
+    },
+  },
+} 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',
+  border: undefined,
+  isInvalid: false,
+  errorMessage: 'Error Text',
+  errorPosition: 'bottom',
+  hasFloatingLabel: true,
+  hasRequiredLabel: true,
+  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',
+};

package/src/components/Select/Select.tsx

@@ -9,6 +9,8 @@ import {
   useRef,
   useState,
   SyntheticEvent,
+  ChangeEvent,
+  FormEvent,
 } from 'react';
 import { Portal } from 'react-overlays';
 import clsx from 'clsx';
@@ -55,14 +57,21 @@ export interface ISelectProps<Value>
   dropdownOptions?: IDropdownWithPopperOptions;
   /** @default 'chevron-down' */
   dropdownIcon?: IIcon;
-  options: Value[];
+  options: Value[] | Readonly<Value[]>;
   value: Value | undefined;
   /** @default true */
   shouldScrollToList?: boolean;
   isMultiSelect?: boolean;
   searchInput?: { shouldRenderInList: true } & Pick<ISearchInputProps, 'placeholder'>;
   isOptionDisabled?: (option: Value) => boolean;
-  onChange: (value?: Value) => void; // подумать как возвращать индекс
+  onChange: (
+    value: Value | undefined,
+    event:
+      | MouseEvent<HTMLElement>
+      | KeyboardEvent
+      | ChangeEvent<HTMLElement>
+      | FormEvent<HTMLElement>,
+  ) => void; // подумать как возвращать индекс
   onBlur?: (event: Event | SyntheticEvent) => void;
   onType?: (value: string) => Promise<void>;
   optionsFilter?: (options: Value[], query: string) => Value[];
@@ -79,7 +88,14 @@ export interface IMultipleSelectProps<Value>
   extends Omit<ISelectProps<Value>, 'value' | 'onChange' | 'compareValuesOnChange'> {
   isMultiSelect: true;
   value: IMultipleSelectValue<Value> | undefined;
-  onChange: (value?: IMultipleSelectValue<Value>) => void;
+  onChange: (
+    value: IMultipleSelectValue<Value> | undefined,
+    event:
+      | MouseEvent<HTMLElement>
+      | KeyboardEvent
+      | ChangeEvent<HTMLElement>
+      | FormEvent<HTMLElement>,
+  ) => void;
   compareValuesOnChange?: (
     v1?: IMultipleSelectValue<Value>,
     v2?: IMultipleSelectValue<Value>,
@@ -123,7 +139,8 @@ export function Select<Value>(
   } = props;
   const classes = useStyles({ theme: tweakStyles });
 
-  const shouldRenderSearchInputInList = searchInput?.shouldRenderInList === true;
+  const { shouldRenderInList: shouldRenderSearchInputInList = false, ...searchInputProps } =
+    searchInput ?? {};
   const hasSearchInputInList = optionsMode !== 'normal' && shouldRenderSearchInputInList;
   const isMultiSelect = isMultiSelectValue(props, value);
   const hasReadonlyInput = isReadonly || optionsMode === 'normal' || shouldRenderSearchInputInList;
@@ -175,7 +192,7 @@ export function Select<Value>(
     const filter =
       optionsFilter ?? createFilter<Value>((option) => [convertValueToString(option) ?? '']);
 
-    return filter(options, searchValue);
+    return filter(options as Value[], searchValue);
   }, [optionsFilter, options, convertValueToString, searchValue, optionsMode]);
 
   const availableOptions = useMemo(
@@ -203,7 +220,13 @@ export function Select<Value>(
         return acc;
       }, [] as number[]),
     );
-  }, [filteredOptions]);
+  }, [
+    filteredOptions,
+    hasDefaultOption,
+    isOptionDisabled,
+    shouldShowAllOption,
+    shouldShowDefaultOption,
+  ]);
 
   const stringValue = isNotEmpty(strValue) ? convertValueToString(strValue) : undefined;
   // Для мультиселекта пытаемся показать "Все опции" если выбраны все опции
@@ -267,10 +290,17 @@ export function Select<Value>(
   };
 
   const handleOnChange = useCallback(
-    (newValue: Value | IMultipleSelectValue<Value> | undefined) => {
+    (
+      newValue: Value | IMultipleSelectValue<Value> | undefined,
+      event:
+        | MouseEvent<HTMLElement>
+        | KeyboardEvent
+        | ChangeEvent<HTMLElement>
+        | FormEvent<HTMLElement>,
+    ) => {
       // Тут беда с типами, сорри
       if (!compareValuesOnChange(value as never, newValue as never)) {
-        onChange(newValue as (Value & IMultipleSelectValue<Value>) | undefined);
+        onChange(newValue as (Value & IMultipleSelectValue<Value>) | undefined, event);
       }
     },
     [value, compareValuesOnChange, onChange],
@@ -278,7 +308,7 @@ export function Select<Value>(
 
   const handleOptionSelect = useCallback(
     (index: number, event: MouseEvent<HTMLElement> | KeyboardEvent) => {
-      handleOnChange(index === DEFAULT_OPTION_INDEX ? undefined : filteredOptions[index]);
+      handleOnChange(index === DEFAULT_OPTION_INDEX ? undefined : filteredOptions[index], event);
       handleListClose(event);
       input.current?.blur();
     },
@@ -287,18 +317,18 @@ export function Select<Value>(
 
   // MultiSelect
   const handleToggleOptionCheckbox = useCallback(
-    (index: number, isSelected: boolean) => {
+    (index: number, isSelected: boolean, event: ChangeEvent<HTMLElement> | KeyboardEvent) => {
       if (!isMultiSelect) {
         return;
       }
 
       // Если выбрана не дефолтная опция, которая сетит андеф
       if (index === DEFAULT_OPTION_INDEX || (index === ALL_OPTION_INDEX && !isSelected)) {
-        handleOnChange(undefined);
+        handleOnChange(undefined, event);
         return;
       }
       if (index === ALL_OPTION_INDEX && isSelected) {
-        handleOnChange(availableOptions as IMultipleSelectValue<Value>);
+        handleOnChange(availableOptions as IMultipleSelectValue<Value>, event);
         return;
       }
       const option = filteredOptions[index];
@@ -308,9 +338,10 @@ export function Select<Value>(
             ([...(value ?? []), option] as IMultipleSelectValue<Value>)
           : // Убираем
             value?.filter((o) => convertToId(o) !== convertToId(option)),
+        event,
       );
     },
-    [handleOnChange, filteredOptions, isMultiSelect, value],
+    [isMultiSelect, filteredOptions, handleOnChange, value, availableOptions, convertToId],
   );
 
   const handleOnType = useCallback(
@@ -329,15 +360,15 @@ export function Select<Value>(
         setShouldShowDefaultOption(v === '');
       }
     },
-    [onType, optionsMode],
+    [isMounted, onType, optionsMode],
   );
 
-  const debounceHandleOnType = useCallback(debounce(handleOnType, debounceTime), [
-    handleOnType,
-    debounceTime,
-  ]);
+  const debounceHandleOnType = useMemo(
+    () => debounce(handleOnType, debounceTime),
+    [handleOnType, debounceTime],
+  );
 
-  const handleInputChange = (v: string) => {
+  const handleInputChange = (v: string, event: FormEvent<HTMLElement>) => {
     if (onType !== undefined) {
       debounceHandleOnType(v);
     }
@@ -347,7 +378,7 @@ export function Select<Value>(
     }
 
     if (v === '' && !hasSearchInputInList) {
-      handleOnChange(undefined);
+      handleOnChange(undefined, event);
     }
 
     setSearchValue(v);
@@ -384,7 +415,7 @@ export function Select<Value>(
             isThisValueAlreadySelected =
               value?.some((opt) => convertToId(opt) === valueIdToSelect) ?? false;
           }
-          handleToggleOptionCheckbox(indexToSelect, !isThisValueAlreadySelected);
+          handleToggleOptionCheckbox(indexToSelect, !isThisValueAlreadySelected, event);
         } else {
           handleOptionSelect(indexToSelect, event);
         }
@@ -488,21 +519,19 @@ export function Select<Value>(
       {isOpen && (
         <SelectList
           options={filteredOptions}
-          defaultOptionLabel={
-            hasDefaultOption && shouldShowDefaultOption ? defaultOptionLabel : undefined
-          }
-          allOptionsLabel={shouldShowAllOption ? allOptionsLabel : undefined}
+          defaultOptionLabel={hasDefaultOption && shouldShowDefaultOption && defaultOptionLabel}
+          allOptionsLabel={shouldShowAllOption && allOptionsLabel}
           areAllOptionsSelected={areAllOptionsSelected}
           customListHeader={
-            hasSearchInputInList ? (
+            hasSearchInputInList && (
               <SearchInput
                 value={searchValue}
                 onChange={handleInputChange}
                 tweakStyles={tweakSearchInputStyles}
                 placeholder="Поиск"
-                {...searchInput}
+                {...searchInputProps}
               />
-            ) : undefined
+            )
           }
           noMatchesLabel={noMatchesLabel}
           focusedIndex={focusedListCellIndex}