fix(Autocomplete): enable navigation

taskany-inc · Feb 5, 2024 · 93e70f2 · 93e70f2
1 parent 94ad0ea
commit 93e70f2
Show file tree

Hide file tree

Showing 8 changed files with 792 additions and 1,094 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
     "@sentry/nextjs": "7.92.0",
     "@tanstack/react-query": "4.29.5",
     "@tanstack/react-query-devtools": "4.29.6",
-    "@taskany/bricks": "5.6.2",
+    "@taskany/bricks": "5.7.0",
     "@taskany/colors": "1.9.0",
     "@taskany/icons": "2.0.1",
     "@tippyjs/react": "4.2.6",
@@ -88,7 +88,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.22.10",
-    "@commitlint/cli": "17.8.0",
+    "@commitlint/cli": "18.6.0",
     "@commitlint/config-conventional": "18.6.0",
     "@faker-js/faker": "8.2.0",
     "@next/bundle-analyzer": "13.5.6",

diff --git a/src/components/FilterCheckbox.tsx b/src/components/FilterCheckbox.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Checkbox, CheckboxInput, CheckboxLabel, Text, nullable } from '@taskany/bricks';
-import { gapS, gapSm, gapXs } from '@taskany/colors';
+import { gapS, gapSm, gapXs, gray4, radiusS } from '@taskany/colors';
 
 const StyledCheckboxLabel = styled(CheckboxLabel)`
     display: inline-flex;
@@ -10,8 +10,10 @@ const StyledCheckboxLabel = styled(CheckboxLabel)`
     margin-left: ${gapS};
 `;
 
-const StyledCheckbox = styled(Checkbox)`
+const StyledCheckbox = styled(Checkbox)<{ focused?: boolean }>`
     padding: ${gapXs} 0;
+    border-radius: ${radiusS};
+    ${({ focused }) => focused && `background-color: ${gray4};`}
 `;
 
 const StyledChekboxInput = styled(CheckboxInput)`
@@ -24,10 +26,20 @@ type CheckboxProps = React.ComponentProps<typeof Checkbox> & React.ComponentProp
 interface FilterCheckboxProps extends CheckboxProps {
     label: string;
     iconLeft?: React.ReactNode;
+    focused?: boolean;
 }
 
-export const FilterCheckbox: React.FC<FilterCheckboxProps> = ({ name, onClick, checked, value, label, iconLeft }) => (
-    <StyledCheckbox name={name} onClick={onClick}>
+export const FilterCheckbox: React.FC<FilterCheckboxProps> = ({
+    name,
+    onClick,
+    checked,
+    focused,
+    value,
+    label,
+    iconLeft,
+    ...attr
+}) => (
+    <StyledCheckbox name={name} onClick={onClick} focused={focused} {...attr}>
         <StyledChekboxInput checked={checked} value={value} />
         <StyledCheckboxLabel>
             {nullable(iconLeft, (icon) => icon)}

diff --git a/src/components/PriorityFilter.tsx b/src/components/PriorityFilter.tsx
@@ -39,11 +39,14 @@ export const PriorityFilter: FC<PriorityFilterProps> = ({ text, value = [], prio
                 value={values}
                 keyGetter={getKey}
                 onChange={onChange}
-                renderItem={({ item, checked, onItemClick }) => (
+                renderItem={({ item, checked, active, onMouseLeave, onMouseMove, onItemClick }) => (
                     <FilterCheckbox
                         name="priority"
                         value={getKey(item)}
                         checked={checked}
+                        focused={active}
+                        onMouseLeave={onMouseLeave}
+                        onMouseMove={onMouseMove}
                         onClick={onItemClick}
                         label={getPriorityText(item.title)}
                     />

diff --git a/src/components/ProjectFilter.tsx b/src/components/ProjectFilter.tsx
@@ -42,11 +42,14 @@ export const ProjectFilter: React.FC<ProjectFilterAutoCompleteProps> = ({
                 value={values}
                 keyGetter={getKey}
                 onChange={onChange}
-                renderItem={({ item, onItemClick, checked }) => (
+                renderItem={({ item, onItemClick, checked, active, onMouseLeave, onMouseMove }) => (
                     <FilterCheckbox
                         name="project"
                         value={item.id}
                         checked={checked}
+                        focused={active}
+                        onMouseLeave={onMouseLeave}
+                        onMouseMove={onMouseMove}
                         onClick={onItemClick}
                         label={item.title}
                     />

diff --git a/src/components/StateFilter.tsx b/src/components/StateFilter.tsx
@@ -65,6 +65,9 @@ export const StateFilter: React.FC<StateFilterProps> = ({
                         value={props.item.id}
                         onClick={props.onItemClick}
                         checked={props.checked}
+                        focused={props.active}
+                        onMouseLeave={props.onMouseLeave}
+                        onMouseMove={props.onMouseMove}
                         iconLeft={<StateDot hue={props.item.hue} />}
                         label={props.item.title}
                     />

diff --git a/src/components/TagFilter.tsx b/src/components/TagFilter.tsx
@@ -42,11 +42,14 @@ export const TagFilter: React.FC<TagFilterProps> = ({ text, tags, value = [], on
                 inputProps={{ onChange: onSearchChange }}
                 value={values}
                 onChange={onChange}
-                renderItem={({ item, checked, onItemClick }) => (
+                renderItem={({ item, checked, active, onItemClick, onMouseLeave, onMouseMove }) => (
                     <FilterCheckbox
                         name="tag"
                         value={item.id}
                         checked={checked}
+                        focused={active}
+                        onMouseLeave={onMouseLeave}
+                        onMouseMove={onMouseMove}
                         onClick={onItemClick}
                         label={item.title}
                     />

diff --git a/src/components/UserFilter/UserFilter.tsx b/src/components/UserFilter/UserFilter.tsx
@@ -85,7 +85,7 @@ export const UserFilter: React.FC<UserFilterProps> = ({
                 keyGetter={getId}
                 value={values}
                 onChange={onChange}
-                renderItem={({ item, checked, onItemClick }) => {
+                renderItem={({ item, checked, onItemClick, active, onMouseLeave, onMouseMove }) => {
                     let label = item.name;
 
                     if (item.id === authorizedUser.activityId) {
@@ -97,6 +97,9 @@ export const UserFilter: React.FC<UserFilterProps> = ({
                             name="user"
                             value={item.id}
                             checked={checked}
+                            focused={active}
+                            onMouseLeave={onMouseLeave}
+                            onMouseMove={onMouseMove}
                             onClick={onItemClick}
                             iconLeft={<UserPic name={item.name} email={item.email} size={14} />}
                             label={label}