From e41de6bfff86e2398064288204e5de33863af24c Mon Sep 17 00:00:00 2001
From: Anton <sab94a@yandex.ru>
Date: Wed, 31 Jan 2024 14:01:30 +0300
Subject: [PATCH] fix(Autocomplete): keyboard navigation

---
 .../AutoComplete/AutoComplete.stories.tsx     | 39 ++++++++++++++-----
 src/components/Checkbox/Checkbox.stories.tsx  |  4 +-
 src/components/Checkbox/Checkbox.tsx          | 20 +++-------
 src/components/FilterCheckbox.tsx             |  2 +-
 .../AutoComplete/AutoComplete.stories.tsx     | 35 +++++++++++++----
 src/harmony/Checkbox/Checkbox.stories.tsx     |  8 ++--
 src/harmony/Checkbox/Checkbox.tsx             | 33 ++++++----------
 7 files changed, 82 insertions(+), 59 deletions(-)

diff --git a/src/components/AutoComplete/AutoComplete.stories.tsx b/src/components/AutoComplete/AutoComplete.stories.tsx
index 0fef93a3..7df0fb43 100644
--- a/src/components/AutoComplete/AutoComplete.stories.tsx
+++ b/src/components/AutoComplete/AutoComplete.stories.tsx
@@ -34,6 +34,16 @@ const data: Items = Array.from({ length: 1000 }, (_, i) => {
     };
 });
 
+interface FocusableItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    focused?: boolean;
+}
+
+const FocusableItem: React.FC<FocusableItemProps> = ({ focused, children, style = {}, ...attr }) => (
+    <div style={{ backgroundColor: focused ? 'lightgrey' : 'transparent', ...style }} {...attr}>
+        {children}
+    </div>
+);
+
 export const Single: StoryFn<Props> = (args) => {
     const [value, setValue] = useState('');
     const [list, setList] = useState<Items>([]);
@@ -52,7 +62,16 @@ export const Single: StoryFn<Props> = (args) => {
             items={list}
             onChange={args.onChange}
             keyGetter={(item) => item.id}
-            renderItem={(props) => <div onClick={props.onItemClick}>{`${props.item.id}: ${props.item.title}`}</div>}
+            renderItem={(props) => (
+                <FocusableItem
+                    focused={Boolean(props.active)}
+                    onClick={props.onItemClick}
+                    onMouseLeave={props.onMouseLeave}
+                    onMouseMove={props.onMouseMove}
+                >
+                    {`${props.item.id}: ${props.item.title}`}
+                </FocusableItem>
+            )}
         >
             <AutoCompleteInput
                 type="text"
@@ -85,14 +104,14 @@ export const Multiple: StoryFn<Props> = (args) => {
             onChange={args.onChange}
             keyGetter={(item) => item.id}
             renderItem={(props) => (
-                <div style={{ backgroundColor: props.active || props.hovered ? 'lightgrey' : 'transparent' }}>
+                <FocusableItem focused={props.active} onMouseLeave={props.onMouseLeave} onMouseMove={props.onMouseMove}>
                     <Checkbox onClick={props.onItemClick} name="item">
                         <CheckboxInput checked={props.checked} value={props.item.id} />
                         <CheckboxLabel>
                             {props.item.id}: {props.item.title}
                         </CheckboxLabel>
                     </Checkbox>
-                </div>
+                </FocusableItem>
             )}
         >
             <AutoCompleteInput
@@ -137,11 +156,11 @@ export const WithRadio: StoryFn<Props> = (args) => {
             onChange={args.onChange}
             keyGetter={(item) => item.id}
             renderItem={(props) => (
-                <div key={props.item.id}>
+                <FocusableItem focused={props.active} onMouseLeave={props.onMouseLeave} onMouseMove={props.onMouseMove}>
                     <label onClick={props.onItemClick}>
                         <span>{`${props.item.id}: ${props.item.title}`}</span>
                     </label>
-                </div>
+                </FocusableItem>
             )}
         >
             <AutoCompleteInput
@@ -233,10 +252,12 @@ export const MultipleFiniteList: StoryFn<Props> = (args) => (
         items={finiteList}
         value={finiteList.slice(2, 4)}
         renderItem={(props) => (
-            <Checkbox onClick={props.onItemClick} name="item">
-                <CheckboxInput checked={props.checked} value={props.item.id} />
-                <CheckboxLabel>{props.item.title}</CheckboxLabel>
-            </Checkbox>
+            <FocusableItem focused={props.active} onMouseLeave={props.onMouseLeave} onMouseMove={props.onMouseMove}>
+                <Checkbox onClick={props.onItemClick} name="item">
+                    <CheckboxInput checked={props.checked} value={props.item.id} />
+                    <CheckboxLabel>{props.item.title}</CheckboxLabel>
+                </Checkbox>
+            </FocusableItem>
         )}
     >
         <AutoCompleteList />
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
index 467d67f3..82a61633 100644
--- a/src/components/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -18,10 +18,10 @@ export const Default: StoryFn<typeof Checkbox> = (args) => (
     <>
         <Checkbox {...args}>
             <CheckboxLabel>Checkbox</CheckboxLabel>
-            <CheckboxInput value="value" checked={false} />
+            <CheckboxInput value="value" defaultChecked={false} />
         </Checkbox>
         <Checkbox {...args}>
-            <CheckboxInput value="value" checked={true} />
+            <CheckboxInput value="value" defaultChecked={true} />
             <CheckboxLabel>Checkbox</CheckboxLabel>
         </Checkbox>
     </>
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index d99f781f..3c4ef705 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -36,28 +36,20 @@ export const CheckboxLabel: React.FC<React.PropsWithChildren<{ className?: strin
 
 interface CheckboxInputProps extends React.HTMLAttributes<HTMLInputElement> {
     value: string;
-    checked: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
 }
 
-export const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(({ value, checked, ...attrs }, ref) => (
+export const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(({ value, ...attrs }, ref) => (
     <CheckboxContext.Consumer>
         {({ id, onClick, name }) => (
-            <input
-                id={id}
-                type="checkbox"
-                name={name}
-                value={value}
-                defaultChecked={checked}
-                ref={ref}
-                onChange={onClick}
-                {...attrs}
-            />
+            <input id={id} type="checkbox" name={name} value={value} ref={ref} onChange={onClick} {...attrs} />
         )}
     </CheckboxContext.Consumer>
 ));
 
 export const Checkbox = forwardRef<HTMLDivElement, React.PropsWithChildren<CheckboxProps>>(
-    ({ onClick, name, className, children }, ref) => {
+    ({ onClick, name, className, children, ...attr }, ref) => {
         const handleOnChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>((event) => {
             onClick(event.target.value);
         }, []);
@@ -66,7 +58,7 @@ export const Checkbox = forwardRef<HTMLDivElement, React.PropsWithChildren<Check
 
         return (
             <CheckboxContext.Provider value={{ id: `${name}-${id}`, onClick: handleOnChange, name }}>
-                <StyledWrapper className={className} ref={ref}>
+                <StyledWrapper className={className} {...attr} ref={ref}>
                     {children}
                 </StyledWrapper>
             </CheckboxContext.Provider>
diff --git a/src/components/FilterCheckbox.tsx b/src/components/FilterCheckbox.tsx
index dce0a709..4fbc1a02 100644
--- a/src/components/FilterCheckbox.tsx
+++ b/src/components/FilterCheckbox.tsx
@@ -32,7 +32,7 @@ interface FilterCheckboxProps extends CheckboxProps {
 
 export const FilterCheckbox: React.FC<FilterCheckboxProps> = ({ name, onClick, checked, value, label, iconLeft }) => (
     <StyledCheckbox name={name} onClick={onClick}>
-        <StyledChekboxInput checked={checked} value={value} />
+        <StyledChekboxInput defaultChecked={checked} value={value} />
         <StyledCheckboxLabel>
             {nullable(iconLeft, (icon) => icon)}
             <Text weight="bold" size="s">
diff --git a/src/harmony/AutoComplete/AutoComplete.stories.tsx b/src/harmony/AutoComplete/AutoComplete.stories.tsx
index 1788a80a..77a1b9b9 100644
--- a/src/harmony/AutoComplete/AutoComplete.stories.tsx
+++ b/src/harmony/AutoComplete/AutoComplete.stories.tsx
@@ -33,6 +33,16 @@ const data: Items = Array.from({ length: 1000 }, (_, i) => {
     };
 });
 
+interface FocusableItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    focused?: boolean;
+}
+
+const FocusableItem: React.FC<FocusableItemProps> = ({ focused, children, style = {}, ...attr }) => (
+    <div style={{ backgroundColor: focused ? 'lightgrey' : 'transparent', ...style }} {...attr}>
+        {children}
+    </div>
+);
+
 export const Single: StoryFn<Props> = (args) => {
     const [value, setValue] = useState('');
     const [list, setList] = useState<Items>([]);
@@ -51,7 +61,14 @@ export const Single: StoryFn<Props> = (args) => {
             items={list}
             onChange={args.onChange}
             keyGetter={(item) => item.id}
-            renderItem={(props) => <div onClick={props.onItemClick}>{`${props.item.id}: ${props.item.title}`}</div>}
+            renderItem={(props) => (
+                <FocusableItem
+                    focused={props.active}
+                    onClick={props.onItemClick}
+                    onMouseLeave={props.onMouseLeave}
+                    onMouseMove={props.onMouseMove}
+                >{`${props.item.id}: ${props.item.title}`}</FocusableItem>
+            )}
         >
             <AutoCompleteInput
                 type="text"
@@ -84,12 +101,14 @@ export const Multiple: StoryFn<Props> = (args) => {
             onChange={args.onChange}
             keyGetter={(item) => item.id}
             renderItem={(props) => (
-                <div
+                <FocusableItem
                     style={{
-                        backgroundColor: props.active || props.hovered ? 'lightgrey' : 'transparent',
                         display: 'flex',
                         alignItems: 'center',
                     }}
+                    focused={props.active}
+                    onMouseLeave={props.onMouseLeave}
+                    onMouseMove={props.onMouseMove}
                 >
                     <Checkbox
                         checked={props.checked}
@@ -98,7 +117,7 @@ export const Multiple: StoryFn<Props> = (args) => {
                         name="item"
                         label={`${props.item.id}: ${props.item.title}`}
                     />
-                </div>
+                </FocusableItem>
             )}
         >
             <AutoCompleteInput
@@ -143,11 +162,11 @@ export const WithRadio: StoryFn<Props> = (args) => {
             onChange={args.onChange}
             keyGetter={(item) => item.id}
             renderItem={(props) => (
-                <div key={props.item.id}>
+                <FocusableItem focused={props.active} onMouseLeave={props.onMouseLeave} onMouseMove={props.onMouseMove}>
                     <label onClick={props.onItemClick}>
                         <span>{`${props.item.id}: ${props.item.title}`}</span>
                     </label>
-                </div>
+                </FocusableItem>
             )}
         >
             <AutoCompleteInput
@@ -240,7 +259,7 @@ export const MultipleFiniteList: StoryFn<Props> = (args) => (
         items={finiteList}
         value={finiteList.slice(2, 4)}
         renderItem={(props) => (
-            <div>
+            <FocusableItem focused={props.active} onMouseLeave={props.onMouseLeave} onMouseMove={props.onMouseMove}>
                 <Checkbox
                     onChange={props.onItemClick}
                     name="item"
@@ -248,7 +267,7 @@ export const MultipleFiniteList: StoryFn<Props> = (args) => (
                     value={props.item.id}
                     label={props.item.title}
                 />
-            </div>
+            </FocusableItem>
         )}
     >
         <AutoCompleteList />
diff --git a/src/harmony/Checkbox/Checkbox.stories.tsx b/src/harmony/Checkbox/Checkbox.stories.tsx
index e12ef634..310d8acd 100644
--- a/src/harmony/Checkbox/Checkbox.stories.tsx
+++ b/src/harmony/Checkbox/Checkbox.stories.tsx
@@ -16,9 +16,9 @@ export default {
 
 export const Default: StoryFn<typeof Checkbox> = (args) => (
     <>
-        <Checkbox {...args} checked />
+        <Checkbox {...args} defaultChecked />
         <Checkbox {...args} />
-        <Checkbox {...args} checked disabled />
+        <Checkbox {...args} defaultChecked disabled />
         <Checkbox {...args} disabled />
     </>
 );
@@ -26,9 +26,9 @@ export const Default: StoryFn<typeof Checkbox> = (args) => (
 export const Labeled: StoryFn<typeof Checkbox> = (args) => {
     return (
         <div style={{ display: 'flex', flexDirection: 'column' }}>
-            <Checkbox {...args} label="Label 1" checked />
+            <Checkbox {...args} label="Label 1" defaultChecked />
             <Checkbox {...args} label="Label 2" />
-            <Checkbox {...args} label="Label 3" checked disabled />
+            <Checkbox {...args} label="Label 3" defaultChecked disabled />
             <Checkbox {...args} label="Label 4" disabled />
         </div>
     );
diff --git a/src/harmony/Checkbox/Checkbox.tsx b/src/harmony/Checkbox/Checkbox.tsx
index 3e2c5133..bae17051 100644
--- a/src/harmony/Checkbox/Checkbox.tsx
+++ b/src/harmony/Checkbox/Checkbox.tsx
@@ -9,24 +9,15 @@ interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label?: React.ReactNode;
 }
 
-export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-    ({ checked, label, className, disabled, ...rest }, ref) => (
-        <label
-            className={cn(classes.Checkbox, className, {
-                [classes.CheckboxDisabled]: disabled,
-            })}
-        >
-            <input
-                className={cn(classes.CheckboxInput)}
-                type="checkbox"
-                ref={ref}
-                disabled={disabled}
-                {...rest}
-                defaultChecked={checked}
-            />
-            {nullable(label, (labelComponent) => (
-                <span className={cn(classes.CheckboxLabel)}>{labelComponent}</span>
-            ))}
-        </label>
-    ),
-);
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({ label, className, disabled, ...rest }, ref) => (
+    <label
+        className={cn(classes.Checkbox, className, {
+            [classes.CheckboxDisabled]: disabled,
+        })}
+    >
+        <input className={cn(classes.CheckboxInput)} type="checkbox" ref={ref} disabled={disabled} {...rest} />
+        {nullable(label, (labelComponent) => (
+            <span className={cn(classes.CheckboxLabel)}>{labelComponent}</span>
+        ))}
+    </label>
+));