1
- /* eslint-disable eslint-comments/no-unlimited-disable -- no u */
2
- /* eslint-disable -- no u */
3
1
import TextField from "@mui/material/TextField" ;
4
2
import Button , { type ButtonProps } from "@mui/material/Button" ;
5
3
import Menu , { type MenuProps } from "@mui/material/Menu" ;
@@ -126,24 +124,29 @@ const stringifyFilter = (filterValue: FilterValues): string => {
126
124
return result . trim ( ) ;
127
125
} ;
128
126
129
- const BaseSkeleton = ( props : SkeletonProps ) => {
127
+ const BaseSkeleton : FC < SkeletonProps > = ( { children , ... skeltonProps } ) => {
130
128
return (
131
129
< Skeleton
132
130
variant = "rectangular"
133
131
height = { 36 }
134
- { ...props }
132
+ { ...skeltonProps }
135
133
css = { ( theme ) => ( {
136
134
backgroundColor : theme . palette . background . paperLight ,
137
135
borderRadius : "6px" ,
138
136
} ) }
139
- />
137
+ >
138
+ { children }
139
+ </ Skeleton >
140
140
) ;
141
141
} ;
142
142
143
- export const SearchFieldSkeleton = ( ) => < BaseSkeleton width = "100%" /> ;
144
- export const MenuSkeleton = ( ) => (
145
- < BaseSkeleton css = { { minWidth : 200 , flexShrink : 0 } } />
146
- ) ;
143
+ export const SearchFieldSkeleton : FC = ( ) => {
144
+ return < BaseSkeleton width = "100%" /> ;
145
+ } ;
146
+
147
+ export const MenuSkeleton : FC = ( ) => {
148
+ return < BaseSkeleton css = { { minWidth : 200 , flexShrink : 0 } } /> ;
149
+ } ;
147
150
148
151
type FilterProps = {
149
152
filter : ReturnType < typeof useFilter > ;
@@ -551,18 +554,21 @@ const MenuButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
551
554
) ;
552
555
} ) ;
553
556
554
- function SearchMenu < TOption extends { label : string ; value : string } > ( {
557
+ interface SearchMenuProps < TOption extends BaseOption >
558
+ extends Pick < MenuProps , "anchorEl" | "open" | "onClose" | "id" > {
559
+ options ?: TOption [ ] ;
560
+ renderOption : ( option : TOption ) => ReactNode ;
561
+ query : string ;
562
+ onQueryChange : ( query : string ) => void ;
563
+ }
564
+
565
+ function SearchMenu < TOption extends BaseOption > ( {
555
566
options,
556
567
renderOption,
557
568
query,
558
569
onQueryChange,
559
570
...menuProps
560
- } : Pick < MenuProps , "anchorEl" | "open" | "onClose" | "id" > & {
561
- options ?: TOption [ ] ;
562
- renderOption : ( option : TOption ) => ReactNode ;
563
- query : string ;
564
- onQueryChange : ( query : string ) => void ;
565
- } ) {
571
+ } : SearchMenuProps < TOption > ) {
566
572
const menuListRef = useRef < HTMLUListElement > ( null ) ;
567
573
const searchInputRef = useRef < HTMLInputElement > ( null ) ;
568
574
const theme = useTheme ( ) ;
@@ -587,6 +593,13 @@ function SearchMenu<TOption extends { label: string; value: string }>({
587
593
enter : 250 ,
588
594
exit : 0 ,
589
595
} }
596
+ onKeyDown = { ( e ) => {
597
+ e . stopPropagation ( ) ;
598
+ if ( e . key === "ArrowDown" && menuListRef . current ) {
599
+ const firstItem = menuListRef . current . firstChild as HTMLElement ;
600
+ firstItem . focus ( ) ;
601
+ }
602
+ } }
590
603
>
591
604
< li
592
605
css = { {
@@ -596,14 +609,6 @@ function SearchMenu<TOption extends { label: string; value: string }>({
596
609
height : 40 ,
597
610
borderBottom : `1px solid ${ theme . palette . divider } ` ,
598
611
} }
599
- // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- try to figure out if we actually need this
600
- onKeyDown = { ( e ) => {
601
- e . stopPropagation ( ) ;
602
- if ( e . key === "ArrowDown" && menuListRef . current ) {
603
- const firstItem = menuListRef . current . firstChild as HTMLElement ;
604
- firstItem . focus ( ) ;
605
- }
606
- } }
607
612
>
608
613
< SearchOutlined
609
614
css = { {
0 commit comments