@tipp/ui 1.2.1 → 1.2.3

package/src/molecules/tag-selector.tsx

@@ -13,11 +13,13 @@ import {
 import { Popover } from '../atoms/popover';
 import { Flex } from '../atoms/flex';
 import { Button } from '../atoms/button';
+import type { BadgeProps } from '../atoms/badge';
 import { Badge } from '../atoms/badge';
 import { CheckIcon } from '../icon';
 import { ScrollArea } from '../atoms/scroll-area';
 import { Grid } from '../atoms/grid';
-import { AutoSizingInput } from '../atoms';
+import type { TypoProps } from '../atoms';
+import { AutoSizingInput, Typo } from '../atoms';
 
 type ID = string;
 interface Item {
@@ -34,6 +36,7 @@ export interface TagSelectorProps<T extends Item> {
   disabled?: boolean;
   maxCount?: number;
   style?: React.CSSProperties;
+  size?: 'large' | 'medium' | 'small';
 
   onChange?: (selected: ID[]) => void;
   tagRender?: (item: T) => React.ReactElement;
@@ -60,6 +63,8 @@ export function TagSelector<T extends Item>(
     placeholder,
     maxCount = 0,
     DropdownContainer = DefaultDropdownContainer,
+    onChange,
+    size = 'medium',
   } = props;
   const [selected, setSelected] = useState<string[]>(props.selected || []);
   const [value, setValue] = useState<string>('');
@@ -85,7 +90,7 @@ export function TagSelector<T extends Item>(
       setTimeout(() => {
         setValue('');
       }, 100);
-    }, 100);
+    }, 300);
   }, []);
 
   const onChangeValue = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
@@ -201,6 +206,23 @@ export function TagSelector<T extends Item>(
     ]
   );
 
+  const placeholderVisible = useMemo(() => {
+    if (selectedItem.length) return false;
+    if (value) return false;
+    if (focus) return false;
+    return true;
+  }, [focus, selectedItem.length, value]);
+
+  useEffect(() => {
+    onChange?.(selected);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- 주소값 변경 방지
+  }, [[...selected].sort().join(',')]);
+
+  useEffect(() => {
+    setSelected(props.selected || []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- 주소값 변경 방지
+  }, [[...(props.selected || [])].sort().join(',')]);
+
   useEffect(() => {
     setFocusIndex(null);
   }, [open]);
@@ -209,12 +231,33 @@ export function TagSelector<T extends Item>(
     setFocusIndex(0);
   }, [filteredOptions]);
 
+  const badgeSize = useMemo<BadgeProps['size']>(() => {
+    switch (size) {
+      case 'large':
+        return 'large';
+      case 'medium':
+      case 'small':
+      default:
+        return 'small';
+    }
+  }, [size]);
+
+  const placeholderVariant = useMemo<TypoProps['variant']>(() => {
+    switch (size) {
+      case 'large':
+        return 'subtitle';
+      case 'medium':
+      default:
+        return 'body';
+    }
+  }, [size]);
+
   return (
     <Popover.Root open={Boolean(filteredOptions.length) && open}>
       <Popover.Trigger>
         <Grid
           align="center"
-          className={`tag-selector ${focus ? 'focused' : ''}`}
+          className={`tag-selector ${focus ? 'focused' : ''} ${size}`}
           columns="1fr auto"
           gap="1"
           onClick={() => fieldRef.current?.focus()}
@@ -230,7 +273,7 @@ export function TagSelector<T extends Item>(
               return tagRender ? (
                 tagRender(item)
               ) : (
-                <Badge key={item.id}>
+                <Badge key={item.id} size={badgeSize}>
                   {item.name}
                   <Button
                     onClick={() => {
@@ -243,12 +286,16 @@ export function TagSelector<T extends Item>(
                 </Badge>
               );
             })}
+            {placeholderVisible ? (
+              <Typo color="gray" variant={placeholderVariant}>
+                {placeholder}
+              </Typo>
+            ) : null}
             <AutoSizingInput
               onBlur={onBlur}
               onChange={onChangeValue}
               onFocus={onFocus}
               onKeyDown={handleKeyDown}
-              placeholder={placeholder}
               ref={fieldRef}
               value={value}
             />