Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit39d4654

Browse files
committed
feat: update badge styles for multiple selector
1 parent18edb0d commit39d4654

File tree

2 files changed

+30
-19
lines changed

2 files changed

+30
-19
lines changed

‎site/src/components/ui/badge.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type * as React from "react";
44
import{cn}from"utils/cn";
55

66
constbadgeVariants=cva(
7-
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
7+
"inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
88
{
99
variants:{
1010
variant:{

‎site/src/components/ui/multiple-selector.tsx

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -231,17 +231,20 @@ const MultipleSelector = React.forwardRef<
231231
[selected],
232232
);
233233

234-
consthandleClickOutside=(event:MouseEvent|TouchEvent)=>{
235-
if(
236-
dropdownRef.current&&
237-
!dropdownRef.current.contains(event.targetasNode)&&
238-
inputRef.current&&
239-
!inputRef.current.contains(event.targetasNode)
240-
){
241-
setOpen(false);
242-
inputRef.current.blur();
243-
}
244-
};
234+
consthandleClickOutside=React.useCallback(
235+
(event:MouseEvent|TouchEvent)=>{
236+
if(
237+
dropdownRef.current&&
238+
!dropdownRef.current.contains(event.targetasNode)&&
239+
inputRef.current&&
240+
!inputRef.current.contains(event.targetasNode)
241+
){
242+
setOpen(false);
243+
inputRef.current.blur();
244+
}
245+
},
246+
[],
247+
);
245248

246249
consthandleUnselect=React.useCallback(
247250
(option:Option)=>{
@@ -287,7 +290,7 @@ const MultipleSelector = React.forwardRef<
287290
document.removeEventListener("mousedown",handleClickOutside);
288291
document.removeEventListener("touchend",handleClickOutside);
289292
};
290-
},[open]);
293+
},[open,handleClickOutside]);
291294

292295
useEffect(()=>{
293296
if(value){
@@ -304,7 +307,7 @@ const MultipleSelector = React.forwardRef<
304307
if(JSON.stringify(newOption)!==JSON.stringify(options)){
305308
setOptions(newOption);
306309
}
307-
},[arrayDefaultOptions,arrayOptions,groupBy,onSearch,options]);
310+
},[arrayOptions,groupBy,onSearch,options]);
308311

309312
useEffect(()=>{
310313
/** sync search */
@@ -328,7 +331,13 @@ const MultipleSelector = React.forwardRef<
328331

329332
voidexec();
330333
// eslint-disable-next-line react-hooks/exhaustive-deps
331-
},[debouncedSearchTerm,groupBy,open,triggerSearchOnFocus]);
334+
},[
335+
debouncedSearchTerm,
336+
groupBy,
337+
open,
338+
triggerSearchOnFocus,
339+
onSearchSync,
340+
]);
332341

333342
useEffect(()=>{
334343
/** async search */
@@ -353,8 +362,7 @@ const MultipleSelector = React.forwardRef<
353362
};
354363

355364
voidexec();
356-
// eslint-disable-next-line react-hooks/exhaustive-deps
357-
},[debouncedSearchTerm,groupBy,open,triggerSearchOnFocus]);
365+
},[debouncedSearchTerm,groupBy,open,triggerSearchOnFocus,onSearch]);
358366

359367
constCreatableItem=()=>{
360368
if(!creatable)returnundefined;
@@ -455,6 +463,7 @@ const MultipleSelector = React.forwardRef<
455463
}// When onSearch is provided, we don't want to filter the options. You can still override it.
456464
filter={commandFilter()}
457465
>
466+
{/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
458467
<div
459468
className={cn(
460469
"min-h-9 rounded-md border border-solid border-border text-sm ",
@@ -484,8 +493,9 @@ const MultipleSelector = React.forwardRef<
484493
>
485494
{option.label}
486495
<button
496+
type="button"
487497
className={cn(
488-
"ml-1 pr-0py-1rounded-full bg-transparent border-none outline-nonering-offset-backgroundfocus:ring-2 focus:ring-ring focus:ring-offset-2",
498+
"ml-1 pr-0 rounded-full bg-transparent border-none outline-none focus:ring-2 focus:ring-surface-invert-primary focus:ml-2.5 focus:pl-0",
489499
(disabled||option.fixed)&&"hidden",
490500
)}
491501
onKeyDown={(e)=>{
@@ -588,7 +598,8 @@ const MultipleSelector = React.forwardRef<
588598
heading={key}
589599
className="h-full overflow-auto"
590600
>
591-
{/* biome-ignore lint/complexity/noUselessFragments: <explanation> */}
601+
{/* biome-ignore lint/complexity/noUselessFragments: A parent element is
602+
needed for multiple dropdown items */}
592603
<>
593604
{dropdowns.map((option)=>{
594605
return(

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp