@tipp/ui 1.2.13 → 1.2.15

package/dist/molecules/tag-selector.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/molecules/tag-selector.tsx","../../src/atoms/popover.tsx","../../src/atoms/flex.tsx","../../src/atoms/button.tsx","../../src/atoms/badge.tsx","../../src/icon.ts","../../src/atoms/scroll-area.tsx","../../src/atoms/grid.tsx","../../src/atoms/typo.tsx","../../src/atoms/auto-sizing-input.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  ChevronRightIcon,\n  Cross1Icon,\n  MagnifyingGlassIcon,\n} from '@radix-ui/react-icons';\nimport { Popover } from '../atoms/popover';\nimport { Flex } from '../atoms/flex';\nimport { Button } from '../atoms/button';\nimport type { BadgeProps } from '../atoms/badge';\nimport { Badge } from '../atoms/badge';\nimport { CheckIcon } from '../icon';\nimport { ScrollArea } from '../atoms/scroll-area';\nimport { Grid } from '../atoms/grid';\nimport type { TypoProps } from '../atoms';\nimport { AutoSizingInput, Typo } from '../atoms';\n\ntype ID = string;\ninterface Item {\n  name: string;\n  id: ID;\n}\n\nconst OPTION_HEIGHT = 32;\n\nexport interface TagSelectorProps<T extends Item> {\n  options?: T[];\n  selected?: ID[];\n  placeholder?: string;\n  disabled?: boolean;\n  maxCount?: number;\n  style?: React.CSSProperties;\n  size?: 'large' | 'medium' | 'small';\n\n  onChange?: (selected: ID[]) => void;\n  tagRender?: (item: T) => React.ReactElement;\n  DropdownContainer?: DropdownContainer<T>;\n}\ntype DropdownContainer<T> = (props: {\n  items: T[];\n  children: React.ReactElement;\n  currentItem?: T;\n}) => React.ReactElement;\n\nconst DefaultDropdownContainer = (props: {\n  children: React.ReactElement;\n}): React.ReactElement => {\n  return props.children;\n};\n\nexport function TagSelector<T extends Item>(\n  props: TagSelectorProps<T>\n): React.ReactElement {\n  const {\n    options = [],\n    tagRender,\n    placeholder,\n    maxCount = 0,\n    DropdownContainer = DefaultDropdownContainer,\n    onChange,\n    size = 'medium',\n  } = props;\n  const [selected, setSelected] = useState<string[]>(props.selected || []);\n  const [value, setValue] = useState<string>('');\n  const [focusIndex, setFocusIndex] = useState<number | null>(null);\n  const [open, setOpen] = useState(false);\n  const [focus, setFocus] = useState(false);\n\n  const fieldRef = useRef<HTMLInputElement>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  const closeRef = useRef<number>(0);\n\n  const onFocus = useCallback(() => {\n    clearTimeout(closeRef.current);\n    setFocus(true);\n    setOpen(true);\n  }, []);\n\n  const onBlur = useCallback(() => {\n    closeRef.current = setTimeout(() => {\n      setFocus(false);\n      setOpen(false);\n      setTimeout(() => {\n        setValue('');\n      }, 100);\n    }, 300);\n  }, []);\n\n  const onChangeValue = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      setValue(e.target.value);\n    },\n    []\n  );\n\n  const filteredOptions = useMemo<T[]>(() => {\n    return options.filter((option) => {\n      return option.name.includes(value);\n    });\n  }, [options, value]);\n\n  const selectedItem = useMemo<T[]>(() => {\n    const result = [] as T[];\n    selected.forEach((id) => {\n      const maybeItem = options.find((option) => option.id === id);\n      if (maybeItem) result.push(maybeItem);\n    });\n    return result;\n  }, [options, selected]);\n\n  const onDelete = useCallback((id: string) => {\n    setSelected((prev) => prev.filter((el) => el !== id));\n  }, []);\n\n  const onSelect = useCallback(\n    (id: string) => {\n      if (maxCount && selected.length + 1 > maxCount) return;\n      setSelected((prev) => [...prev, id]);\n    },\n    [maxCount, selected]\n  );\n\n  const toggleItem = useCallback(\n    (id: string) => {\n      if (selected.includes(id)) {\n        onDelete(id);\n      } else {\n        onSelect(id);\n      }\n    },\n    [onDelete, onSelect, selected]\n  );\n\n  const setScroll = useCallback((index: number): void => {\n    if (scrollRef.current) {\n      const scrollTop = scrollRef.current.scrollTop;\n      const clientHeight = scrollRef.current.clientHeight;\n      const focusTop = index * OPTION_HEIGHT;\n      if (focusTop < scrollTop) {\n        scrollRef.current.scrollTop = focusTop;\n      } else if (focusTop + OPTION_HEIGHT > scrollTop + clientHeight) {\n        scrollRef.current.scrollTop = focusTop + OPTION_HEIGHT - clientHeight;\n      }\n    }\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const key = e.key;\n\n      switch (key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          let newFocus = 0;\n          if (typeof focusIndex === 'number') {\n            newFocus = focusIndex + 1 >= options.length ? 0 : focusIndex + 1;\n          }\n          setFocusIndex(newFocus);\n          setScroll(newFocus);\n          break;\n        }\n\n        case 'ArrowUp': {\n          e.preventDefault();\n          let newFocus = 0;\n          if (typeof focusIndex === 'number') {\n            newFocus = focusIndex - 1 < 0 ? options.length - 1 : focusIndex - 1;\n          }\n          setFocusIndex(newFocus);\n          setScroll(newFocus);\n          break;\n        }\n\n        case 'Enter':\n          setValue('');\n          if (focusIndex !== null) {\n            toggleItem(filteredOptions[focusIndex]?.id);\n          }\n          break;\n\n        case 'Backspace':\n          if (value.length === 0) {\n            setSelected((prev) => prev.slice(0, -1));\n          }\n          break;\n\n        case 'Escape':\n          setOpen(false);\n          break;\n      }\n    },\n    [\n      focusIndex,\n      value.length,\n      setScroll,\n      options.length,\n      toggleItem,\n      filteredOptions,\n    ]\n  );\n\n  const placeholderVisible = useMemo(() => {\n    if (selectedItem.length) return false;\n    if (value) return false;\n    if (focus) return false;\n    return true;\n  }, [focus, selectedItem.length, value]);\n\n  useEffect(() => {\n    onChange?.(selected);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- 주소값 변경 방지\n  }, [[...selected].sort().join(',')]);\n\n  useEffect(() => {\n    setSelected(props.selected || []);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- 주소값 변경 방지\n  }, [[...(props.selected || [])].sort().join(',')]);\n\n  useEffect(() => {\n    setFocusIndex(null);\n  }, [open]);\n\n  useEffect(() => {\n    setFocusIndex(0);\n  }, [filteredOptions]);\n\n  const badgeSize = useMemo<BadgeProps['size']>(() => {\n    switch (size) {\n      case 'large':\n        return 'large';\n      case 'medium':\n      case 'small':\n      default:\n        return 'small';\n    }\n  }, [size]);\n\n  const placeholderVariant = useMemo<TypoProps['variant']>(() => {\n    switch (size) {\n      case 'large':\n        return 'subtitle';\n      case 'medium':\n      default:\n        return 'body';\n    }\n  }, [size]);\n\n  return (\n    <Popover.Root open={Boolean(filteredOptions.length) && open}>\n      <Popover.Trigger>\n        <Grid\n          align=\"center\"\n          className={`tag-selector ${focus ? 'focused' : ''} ${size}`}\n          columns=\"1fr auto\"\n          gap=\"1\"\n          onClick={() => fieldRef.current?.focus()}\n        >\n          <Flex\n            align=\"center\"\n            gap=\"1\"\n            maxWidth=\"100%\"\n            overflow=\"hidden\"\n            wrap=\"wrap\"\n          >\n            {selectedItem.map((item) => {\n              return tagRender ? (\n                tagRender(item)\n              ) : (\n                <Badge key={item.id} size={badgeSize}>\n                  {item.name}\n                  <Button\n                    onClick={() => {\n                      onDelete(item.id);\n                    }}\n                    variant=\"transparent\"\n                  >\n                    <Cross1Icon />\n                  </Button>\n                </Badge>\n              );\n            })}\n            {placeholderVisible ? (\n              <Typo color=\"gray\" variant={placeholderVariant}>\n                {placeholder}\n              </Typo>\n            ) : null}\n            <AutoSizingInput\n              onBlur={onBlur}\n              onChange={onChangeValue}\n              onFocus={onFocus}\n              onKeyDown={handleKeyDown}\n              ref={fieldRef}\n              value={value}\n            />\n          </Flex>\n          {focus ? <MagnifyingGlassIcon /> : <ChevronRightIcon />}\n        </Grid>\n      </Popover.Trigger>\n\n      <Popover.Content\n        onOpenAutoFocus={(e) => {\n          e.preventDefault();\n        }}\n      >\n        <DropdownContainer\n          currentItem={filteredOptions[focusIndex || 0]}\n          items={filteredOptions}\n        >\n          <ScrollArea\n            ref={scrollRef}\n            scrollbars=\"vertical\"\n            style={{ height: OPTION_HEIGHT * 8 }}\n            type=\"auto\"\n          >\n            <Flex direction=\"column\">\n              {filteredOptions.map((item, i) => {\n                const isSelected = Boolean(\n                  selected.find((el) => el === item.id)\n                );\n                const isFocus = i === focusIndex;\n\n                return (\n                  <Button\n                    key={item.id}\n                    onClick={() => {\n                      toggleItem(item.id);\n                      fieldRef.current?.focus();\n                    }}\n                    onMouseEnter={() => {\n                      setFocusIndex(i);\n                    }}\n                    style={{\n                      width: '100%',\n                      background: isFocus ? 'var(--accent-a3)' : undefined,\n                      color: 'var(--gray-12)',\n                      fontWeight: 400,\n                      boxShadow: 'none',\n                    }}\n                    variant={isSelected ? 'soft' : 'outline'}\n                  >\n                    <Flex justify=\"between\" width=\"100%\">\n                      {item.name}\n                      {isSelected ? <CheckIcon /> : null}\n                    </Flex>\n                  </Button>\n                );\n              })}\n            </Flex>\n          </ScrollArea>\n        </DropdownContainer>\n      </Popover.Content>\n    </Popover.Root>\n  );\n}\n","export { Popover } from '@radix-ui/themes';\n","export { Flex, type FlexProps } from '@radix-ui/themes';\n","import {\n  Button as RadixButton,\n  type ButtonProps as RadixButtonProps,\n} from '@radix-ui/themes';\nimport React, { forwardRef, useMemo } from 'react';\n\nexport type ButtonProps = Omit<RadixButtonProps, 'size' | 'variant'> & {\n  size?: 'small' | 'medium' | 'large';\n  variant?: RadixButtonProps['variant'] | 'transparent';\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref): React.ReactElement => {\n    const { size, style, variant, ...restProps } = props;\n\n    const radixSize = useMemo(() => {\n      switch (size) {\n        case 'small':\n          return '1';\n        case 'medium':\n          return '2';\n        case 'large':\n          return '3';\n        default:\n          return '2';\n      }\n    }, [size]);\n\n    const mergedStyle = useMemo<ButtonProps['style']>(() => {\n      const baseStyle = {\n        background: variant === 'transparent' ? 'transparent' : undefined,\n        fontWeight: 400,\n      };\n      return { ...baseStyle, ...style };\n    }, [style, variant]);\n\n    const radixVariant = useMemo(() => {\n      if (variant === 'transparent') return 'ghost';\n      return variant;\n    }, [variant]);\n\n    return (\n      <RadixButton\n        style={mergedStyle}\n        variant={radixVariant}\n        {...restProps}\n        ref={ref}\n        size={radixSize}\n      />\n    );\n  }\n);\n\nButton.displayName = 'Button';\n","import {\n  Badge as RadixBadge,\n  type BadgeProps as RadixBadgeProps,\n} from '@radix-ui/themes';\nimport { useMemo, forwardRef } from 'react';\n\nexport type BadgeProps = Omit<RadixBadgeProps, 'color' | 'size'> & {\n  size?: 'small' | 'large';\n  color?: 'error' | 'accent' | 'neutral' | 'success';\n};\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  (props: BadgeProps, ref): React.ReactElement => {\n    const { size = 'small', color = 'accent', ...rest } = props;\n\n    const radixSize = useMemo(() => {\n      switch (size) {\n        case 'small':\n          return '1';\n        case 'large':\n          return '3';\n        default:\n          return '1';\n      }\n    }, [size]);\n\n    const radixColor = useMemo(() => {\n      switch (color) {\n        case 'error':\n          return 'red';\n        case 'neutral':\n          return 'gray';\n        case 'success':\n          return 'green';\n        case 'accent':\n        default:\n          return undefined;\n      }\n    }, [color]);\n\n    return (\n      <RadixBadge {...rest} color={radixColor} ref={ref} size={radixSize} />\n    );\n  }\n);\n\nBadge.displayName = 'Badge';\n","export {\n  BookmarkIcon,\n  ExitIcon,\n  InfoCircledIcon,\n  ExclamationTriangleIcon,\n  MagnifyingGlassIcon,\n  DotsHorizontalIcon,\n  ChatBubbleIcon,\n  PlusIcon,\n  BookmarkFilledIcon,\n  MixerHorizontalIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ClipboardIcon,\n  BarChartIcon,\n  PersonIcon,\n  GearIcon,\n  DotsVerticalIcon,\n  Pencil1Icon,\n  Cross1Icon,\n  Link2Icon,\n  ChevronUpIcon,\n  ChevronDownIcon,\n  FileIcon,\n  TrashIcon,\n  DoubleArrowLeftIcon,\n  DoubleArrowRightIcon,\n  GlobeIcon,\n  BackpackIcon,\n  CalendarIcon,\n  CheckIcon,\n  ArchiveIcon,\n  RowsIcon,\n  Share1Icon,\n  ClipboardCopyIcon,\n} from '@radix-ui/react-icons';\n","export { ScrollArea, type ScrollAreaProps } from '@radix-ui/themes';\n","export { Grid, type GridProps } from '@radix-ui/themes';\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\n\nexport type TypoProps = RadixTextProps & {\n  variant?: 'body' | 'caption' | 'subtitle';\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n  (props: TypoProps, ref): React.ReactElement => {\n    const { size, variant, children, ...rest } = props;\n\n    const radixSize = useMemo<RadixTextProps['size']>(() => {\n      if (size !== undefined) return size;\n      switch (variant) {\n        case 'caption':\n          return '1';\n        case 'subtitle':\n          return '3';\n        case 'body':\n        default:\n          return '2';\n      }\n    }, [size, variant]);\n\n    return (\n      <RadixText {...rest} ref={ref} size={radixSize}>\n        {children}\n      </RadixText>\n    );\n  }\n);\n\nTypo.displayName = 'Typo';\n","import type { DetailedHTMLProps } from 'react';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nexport interface AutoSizingInputProps\n  extends DetailedHTMLProps<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HTMLInputElement\n  > {\n  value?: string;\n  onChangeValue?: (value: string) => void;\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n}\n\nexport const AutoSizingInput = forwardRef<\n  HTMLInputElement,\n  AutoSizingInputProps\n>(\n  (\n    { value: _value, onChangeValue, onChange, ...rest },\n    ref\n  ): React.ReactNode => {\n    const [value, setValue] = useState(_value);\n    const [width, setWidth] = useState(0);\n    const span = useRef<HTMLSpanElement>(null);\n\n    useEffect(() => {\n      span.current && setWidth(span.current.offsetWidth);\n    }, [value]);\n\n    const changeHandler = useCallback<\n      React.ChangeEventHandler<HTMLInputElement>\n    >(\n      (evt) => {\n        onChange?.(evt);\n        setValue(evt.target.value);\n      },\n      [onChange]\n    );\n\n    useEffect(() => {\n      setValue(_value || '');\n    }, [_value]);\n\n    useEffect(() => {\n      onChangeValue?.(value || '');\n    }, [value, onChangeValue]);\n\n    return (\n      <div className=\"auto-sizing-input wrapper\" style={{ width: width + 24 }}>\n        <input onChange={changeHandler} ref={ref} value={value} {...rest} />\n        <span aria-hidden=\"true\" ref={span}>\n          {value}\n        </span>\n      </div>\n    );\n  }\n);\n\nAutoSizingInput.displayName = 'AutoSizingInput';\n"],"mappings":"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","names":["import_react","import_react_icons","import_themes","import_themes","RadixButton","import_themes","import_react","import_jsx_runtime","RadixBadge","import_themes","import_themes","import_themes","import_react","import_jsx_runtime","RadixText","import_react","import_jsx_runtime","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/molecules/tag-selector.tsx","../../src/atoms/popover.tsx","../../src/atoms/flex.tsx","../../src/atoms/button.tsx","../../src/atoms/badge.tsx","../../src/icon.ts","../../src/atoms/scroll-area.tsx","../../src/atoms/grid.tsx","../../src/atoms/typo.tsx","../../src/atoms/auto-sizing-input.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  ChevronRightIcon,\n  Cross1Icon,\n  MagnifyingGlassIcon,\n} from '@radix-ui/react-icons';\nimport { Popover } from '../atoms/popover';\nimport { Flex } from '../atoms/flex';\nimport { Button } from '../atoms/button';\nimport type { BadgeProps } from '../atoms/badge';\nimport { Badge } from '../atoms/badge';\nimport { CheckIcon } from '../icon';\nimport { ScrollArea } from '../atoms/scroll-area';\nimport { Grid } from '../atoms/grid';\nimport type { TypoProps } from '../atoms';\nimport { AutoSizingInput, Typo } from '../atoms';\n\ntype ID = string;\ninterface Item {\n  name: string;\n  id: ID;\n}\n\nconst OPTION_HEIGHT = 32;\n\nexport interface TagSelectorProps<T extends Item> {\n  options?: T[];\n  selected?: ID[];\n  placeholder?: string;\n  disabled?: boolean;\n  maxCount?: number;\n  style?: React.CSSProperties;\n  size?: 'large' | 'medium' | 'small';\n\n  onChange?: (selected: ID[]) => void;\n  tagRender?: (item: T) => React.ReactElement;\n  DropdownContainer?: DropdownContainer<T>;\n}\ntype DropdownContainer<T> = (props: {\n  items: T[];\n  children: React.ReactElement;\n  currentItem?: T;\n}) => React.ReactElement;\n\nconst DefaultDropdownContainer = (props: {\n  children: React.ReactElement;\n}): React.ReactElement => {\n  return props.children;\n};\n\nexport function TagSelector<T extends Item>(\n  props: TagSelectorProps<T>\n): React.ReactElement {\n  const {\n    options = [],\n    tagRender,\n    placeholder,\n    maxCount = 0,\n    DropdownContainer = DefaultDropdownContainer,\n    onChange,\n    size = 'medium',\n  } = props;\n  const [selected, setSelected] = useState<string[]>(props.selected || []);\n  const [value, setValue] = useState<string>('');\n  const [focusIndex, setFocusIndex] = useState<number | null>(null);\n  const [open, setOpen] = useState(false);\n  const [focus, setFocus] = useState(false);\n\n  const fieldRef = useRef<HTMLInputElement>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  const closeRef = useRef<number>(0);\n\n  const onFocus = useCallback(() => {\n    clearTimeout(closeRef.current);\n    setFocus(true);\n    setOpen(true);\n  }, []);\n\n  const onBlur = useCallback(() => {\n    closeRef.current = setTimeout(() => {\n      setFocus(false);\n      setOpen(false);\n      setTimeout(() => {\n        setValue('');\n      }, 100);\n    }, 300);\n  }, []);\n\n  const onChangeValue = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      setValue(e.target.value);\n    },\n    []\n  );\n\n  const filteredOptions = useMemo<T[]>(() => {\n    return options.filter((option) => {\n      return option.name.includes(value);\n    });\n  }, [options, value]);\n\n  const selectedItem = useMemo<T[]>(() => {\n    const result = [] as T[];\n    selected.forEach((id) => {\n      const maybeItem = options.find((option) => option.id === id);\n      if (maybeItem) result.push(maybeItem);\n    });\n    return result;\n  }, [options, selected]);\n\n  const onDelete = useCallback((id: string) => {\n    setSelected((prev) => prev.filter((el) => el !== id));\n  }, []);\n\n  const onSelect = useCallback(\n    (id: string) => {\n      if (maxCount && selected.length + 1 > maxCount) return;\n      setSelected((prev) => [...prev, id]);\n    },\n    [maxCount, selected]\n  );\n\n  const toggleItem = useCallback(\n    (id: string) => {\n      if (selected.includes(id)) {\n        onDelete(id);\n      } else {\n        onSelect(id);\n      }\n    },\n    [onDelete, onSelect, selected]\n  );\n\n  const setScroll = useCallback((index: number): void => {\n    if (scrollRef.current) {\n      const scrollTop = scrollRef.current.scrollTop;\n      const clientHeight = scrollRef.current.clientHeight;\n      const focusTop = index * OPTION_HEIGHT;\n      if (focusTop < scrollTop) {\n        scrollRef.current.scrollTop = focusTop;\n      } else if (focusTop + OPTION_HEIGHT > scrollTop + clientHeight) {\n        scrollRef.current.scrollTop = focusTop + OPTION_HEIGHT - clientHeight;\n      }\n    }\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const key = e.key;\n\n      switch (key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          let newFocus = 0;\n          if (typeof focusIndex === 'number') {\n            newFocus = focusIndex + 1 >= options.length ? 0 : focusIndex + 1;\n          }\n          setFocusIndex(newFocus);\n          setScroll(newFocus);\n          break;\n        }\n\n        case 'ArrowUp': {\n          e.preventDefault();\n          let newFocus = 0;\n          if (typeof focusIndex === 'number') {\n            newFocus = focusIndex - 1 < 0 ? options.length - 1 : focusIndex - 1;\n          }\n          setFocusIndex(newFocus);\n          setScroll(newFocus);\n          break;\n        }\n\n        case 'Enter':\n          setValue('');\n          if (focusIndex !== null) {\n            toggleItem(filteredOptions[focusIndex]?.id);\n          }\n          break;\n\n        case 'Backspace':\n          if (value.length === 0) {\n            setSelected((prev) => prev.slice(0, -1));\n          }\n          break;\n\n        case 'Escape':\n          setOpen(false);\n          break;\n      }\n    },\n    [\n      focusIndex,\n      value.length,\n      setScroll,\n      options.length,\n      toggleItem,\n      filteredOptions,\n    ]\n  );\n\n  const placeholderVisible = useMemo(() => {\n    if (selectedItem.length) return false;\n    if (value) return false;\n    if (focus) return false;\n    return true;\n  }, [focus, selectedItem.length, value]);\n\n  useEffect(() => {\n    onChange?.(selected);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- 주소값 변경 방지\n  }, [[...selected].sort().join(',')]);\n\n  useEffect(() => {\n    setSelected(props.selected || []);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- 주소값 변경 방지\n  }, [[...(props.selected || [])].sort().join(',')]);\n\n  useEffect(() => {\n    setFocusIndex(null);\n  }, [open]);\n\n  useEffect(() => {\n    setFocusIndex(0);\n  }, [filteredOptions]);\n\n  const badgeSize = useMemo<BadgeProps['size']>(() => {\n    switch (size) {\n      case 'large':\n        return 'large';\n      case 'medium':\n      case 'small':\n      default:\n        return 'small';\n    }\n  }, [size]);\n\n  const placeholderVariant = useMemo<TypoProps['variant']>(() => {\n    switch (size) {\n      case 'large':\n        return 'subtitle';\n      case 'medium':\n      default:\n        return 'body';\n    }\n  }, [size]);\n\n  return (\n    <Popover.Root open={Boolean(filteredOptions.length) && open}>\n      <Popover.Trigger>\n        <Grid\n          align=\"center\"\n          className={`tag-selector ${focus ? 'focused' : ''} ${size}`}\n          columns=\"1fr auto\"\n          gap=\"1\"\n          onClick={() => fieldRef.current?.focus()}\n        >\n          <Flex\n            align=\"center\"\n            gap=\"1\"\n            maxWidth=\"100%\"\n            overflow=\"hidden\"\n            wrap=\"wrap\"\n          >\n            {selectedItem.map((item) => {\n              return tagRender ? (\n                tagRender(item)\n              ) : (\n                <Badge key={item.id} size={badgeSize}>\n                  {item.name}\n                  <Button\n                    onClick={() => {\n                      onDelete(item.id);\n                    }}\n                    variant=\"transparent\"\n                  >\n                    <Cross1Icon />\n                  </Button>\n                </Badge>\n              );\n            })}\n            {placeholderVisible ? (\n              <Typo color=\"gray\" variant={placeholderVariant}>\n                {placeholder}\n              </Typo>\n            ) : null}\n            <AutoSizingInput\n              onBlur={onBlur}\n              onChange={onChangeValue}\n              onFocus={onFocus}\n              onKeyDown={handleKeyDown}\n              ref={fieldRef}\n              value={value}\n            />\n          </Flex>\n          {focus ? <MagnifyingGlassIcon /> : <ChevronRightIcon />}\n        </Grid>\n      </Popover.Trigger>\n\n      <Popover.Content\n        onOpenAutoFocus={(e) => {\n          e.preventDefault();\n        }}\n      >\n        <DropdownContainer\n          currentItem={filteredOptions[focusIndex || 0]}\n          items={filteredOptions}\n        >\n          <ScrollArea\n            ref={scrollRef}\n            scrollbars=\"vertical\"\n            style={{ height: OPTION_HEIGHT * 8 }}\n            type=\"auto\"\n          >\n            <Flex direction=\"column\">\n              {filteredOptions.map((item, i) => {\n                const isSelected = Boolean(\n                  selected.find((el) => el === item.id)\n                );\n                const isFocus = i === focusIndex;\n\n                return (\n                  <Button\n                    key={item.id}\n                    onClick={() => {\n                      toggleItem(item.id);\n                      fieldRef.current?.focus();\n                    }}\n                    onMouseEnter={() => {\n                      setFocusIndex(i);\n                    }}\n                    style={{\n                      width: '100%',\n                      background: isFocus ? 'var(--accent-a3)' : undefined,\n                      color: 'var(--gray-12)',\n                      fontWeight: 400,\n                      boxShadow: 'none',\n                    }}\n                    variant={isSelected ? 'soft' : 'outline'}\n                  >\n                    <Flex justify=\"between\" width=\"100%\">\n                      {item.name}\n                      {isSelected ? <CheckIcon /> : null}\n                    </Flex>\n                  </Button>\n                );\n              })}\n            </Flex>\n          </ScrollArea>\n        </DropdownContainer>\n      </Popover.Content>\n    </Popover.Root>\n  );\n}\n","export { Popover } from '@radix-ui/themes';\n","export { Flex, type FlexProps } from '@radix-ui/themes';\n","import {\n  Button as RadixButton,\n  type ButtonProps as RadixButtonProps,\n} from '@radix-ui/themes';\nimport React, { forwardRef, useMemo } from 'react';\n\nexport type ButtonProps = Omit<RadixButtonProps, 'size' | 'variant'> & {\n  size?: 'small' | 'medium' | 'large';\n  variant?: RadixButtonProps['variant'] | 'transparent';\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref): React.ReactElement => {\n    const { size, style, variant, ...restProps } = props;\n\n    const radixSize = useMemo(() => {\n      switch (size) {\n        case 'small':\n          return '1';\n        case 'medium':\n          return '2';\n        case 'large':\n          return '3';\n        default:\n          return '2';\n      }\n    }, [size]);\n\n    const mergedStyle = useMemo<ButtonProps['style']>(() => {\n      const baseStyle = {\n        background: variant === 'transparent' ? 'transparent' : undefined,\n        fontWeight: 400,\n      };\n      return { ...baseStyle, ...style };\n    }, [style, variant]);\n\n    const radixVariant = useMemo(() => {\n      if (variant === 'transparent') return 'ghost';\n      return variant;\n    }, [variant]);\n\n    return (\n      <RadixButton\n        style={mergedStyle}\n        variant={radixVariant}\n        {...restProps}\n        ref={ref}\n        size={radixSize}\n      />\n    );\n  }\n);\n\nButton.displayName = 'Button';\n","import {\n  Badge as RadixBadge,\n  type BadgeProps as RadixBadgeProps,\n} from '@radix-ui/themes';\nimport { useMemo, forwardRef } from 'react';\n\nexport type BadgeProps = Omit<RadixBadgeProps, 'color' | 'size'> & {\n  size?: 'small' | 'medium' | 'large';\n  color?: 'error' | 'accent' | 'neutral' | 'success';\n};\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  (props: BadgeProps, ref): React.ReactElement => {\n    const { size = 'small', color = 'accent', ...rest } = props;\n\n    const radixSize = useMemo(() => {\n      switch (size) {\n        case 'small':\n          return '1';\n        case 'medium':\n          return '2';\n        case 'large':\n          return '3';\n        default:\n          return '1';\n      }\n    }, [size]);\n\n    const radixColor = useMemo(() => {\n      switch (color) {\n        case 'error':\n          return 'red';\n        case 'neutral':\n          return 'gray';\n        case 'success':\n          return 'green';\n        case 'accent':\n        default:\n          return undefined;\n      }\n    }, [color]);\n\n    return (\n      <RadixBadge {...rest} color={radixColor} ref={ref} size={radixSize} />\n    );\n  }\n);\n\nBadge.displayName = 'Badge';\n","export {\n  BookmarkIcon,\n  ExitIcon,\n  InfoCircledIcon,\n  ExclamationTriangleIcon,\n  MagnifyingGlassIcon,\n  DotsHorizontalIcon,\n  ChatBubbleIcon,\n  PlusIcon,\n  BookmarkFilledIcon,\n  MixerHorizontalIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ClipboardIcon,\n  BarChartIcon,\n  PersonIcon,\n  GearIcon,\n  DotsVerticalIcon,\n  Pencil1Icon,\n  Cross1Icon,\n  Link2Icon,\n  ChevronUpIcon,\n  ChevronDownIcon,\n  FileIcon,\n  TrashIcon,\n  DoubleArrowLeftIcon,\n  DoubleArrowRightIcon,\n  GlobeIcon,\n  BackpackIcon,\n  CalendarIcon,\n  CheckIcon,\n  ArchiveIcon,\n  RowsIcon,\n  Share1Icon,\n  ClipboardCopyIcon,\n} from '@radix-ui/react-icons';\n","export { ScrollArea, type ScrollAreaProps } from '@radix-ui/themes';\n","export { Grid, type GridProps } from '@radix-ui/themes';\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\n\nexport type TypoProps = RadixTextProps & {\n  variant?: 'body' | 'caption' | 'subtitle';\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n  (props: TypoProps, ref): React.ReactElement => {\n    const { size, variant, children, ...rest } = props;\n\n    const radixSize = useMemo<RadixTextProps['size']>(() => {\n      if (size !== undefined) return size;\n      switch (variant) {\n        case 'caption':\n          return '1';\n        case 'subtitle':\n          return '3';\n        case 'body':\n        default:\n          return '2';\n      }\n    }, [size, variant]);\n\n    return (\n      <RadixText {...rest} ref={ref} size={radixSize}>\n        {children}\n      </RadixText>\n    );\n  }\n);\n\nTypo.displayName = 'Typo';\n","import type { DetailedHTMLProps } from 'react';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nexport interface AutoSizingInputProps\n  extends DetailedHTMLProps<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HTMLInputElement\n  > {\n  value?: string;\n  onChangeValue?: (value: string) => void;\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n}\n\nexport const AutoSizingInput = forwardRef<\n  HTMLInputElement,\n  AutoSizingInputProps\n>(\n  (\n    { value: _value, onChangeValue, onChange, ...rest },\n    ref\n  ): React.ReactNode => {\n    const [value, setValue] = useState(_value);\n    const [width, setWidth] = useState(0);\n    const span = useRef<HTMLSpanElement>(null);\n\n    useEffect(() => {\n      span.current && setWidth(span.current.offsetWidth);\n    }, [value]);\n\n    const changeHandler = useCallback<\n      React.ChangeEventHandler<HTMLInputElement>\n    >(\n      (evt) => {\n        onChange?.(evt);\n        setValue(evt.target.value);\n      },\n      [onChange]\n    );\n\n    useEffect(() => {\n      setValue(_value || '');\n    }, [_value]);\n\n    useEffect(() => {\n      onChangeValue?.(value || '');\n    }, [value, onChangeValue]);\n\n    return (\n      <div className=\"auto-sizing-input wrapper\" style={{ width: width + 24 }}>\n        <input onChange={changeHandler} ref={ref} value={value} {...rest} />\n        <span aria-hidden=\"true\" ref={span}>\n          {value}\n        </span>\n      </div>\n    );\n  }\n);\n\nAutoSizingInput.displayName = 'AutoSizingInput';\n"],"mappings":"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","names":["import_react","import_react_icons","import_themes","import_themes","RadixButton","import_themes","import_react","import_jsx_runtime","RadixBadge","import_themes","import_themes","import_themes","import_react","import_jsx_runtime","RadixText","import_react","import_jsx_runtime","import_jsx_runtime"]}

package/dist/molecules/tag-selector.js

@@ -1,64 +1,63 @@
 import {
   TagSelector
-} from "../chunk-J7XYWBOK.js";
+} from "../chunk-P7633BEQ.js";
 import "../chunk-76JGDATZ.js";
-import "../chunk-JPIZP2PZ.js";
-import "../chunk-HYITAA4J.js";
-import "../chunk-5H3YPCZK.js";
 import "../chunk-FR2GDOU2.js";
 import "../chunk-74DX4CU7.js";
 import "../chunk-OYM4XCHQ.js";
 import "../chunk-YJ7ZFOYL.js";
 import "../chunk-5ZITU5L7.js";
 import "../chunk-ILRUXI2E.js";
-import "../chunk-YO3BQW6S.js";
-import "../chunk-6IVCARWS.js";
+import "../chunk-JPIZP2PZ.js";
+import "../chunk-UFW4DFY5.js";
 import "../chunk-6DJOIRMF.js";
 import "../chunk-FPD73OHW.js";
 import "../chunk-ZKZDVS7G.js";
 import "../chunk-MUNMDHRF.js";
 import "../chunk-TVDKGMBI.js";
 import "../chunk-3JRNKBMN.js";
+import "../chunk-HYITAA4J.js";
+import "../chunk-5H3YPCZK.js";
 import "../chunk-XQOL7UBI.js";
 import "../chunk-TULWX7D6.js";
 import "../chunk-SIM6HKVI.js";
-import "../chunk-RJMSUTBQ.js";
+import "../chunk-QVQCTPDU.js";
 import "../chunk-5AVBYDPB.js";
 import "../chunk-365QMK4D.js";
-import "../chunk-WKFZ5MMN.js";
-import "../chunk-ACVANQJ4.js";
-import "../chunk-2DZ2Y3JI.js";
-import "../chunk-QDZS4B6A.js";
+import "../chunk-YO3BQW6S.js";
+import "../chunk-6IVCARWS.js";
+import "../chunk-DJN2IEY6.js";
+import "../chunk-25HMMI7R.js";
 import "../chunk-2CVXGGI5.js";
 import "../chunk-EGEQY3KT.js";
 import "../chunk-HK224ADT.js";
 import "../chunk-O3T3TM3V.js";
-import "../chunk-LHCDPZ5E.js";
-import "../chunk-OHMOP5PV.js";
+import "../chunk-O3DNDMV3.js";
 import "../chunk-KGLIAFTI.js";
 import "../chunk-Q37G2GS6.js";
 import "../chunk-VTJZMOSP.js";
-import "../chunk-DKN47ZVZ.js";
-import "../chunk-HMP3DMRR.js";
-import "../chunk-NJ2U2TVS.js";
-import "../chunk-O3DNDMV3.js";
+import "../chunk-6AJTMXLJ.js";
+import "../chunk-HJQQMAUB.js";
 import "../chunk-4WFMOFN2.js";
-import "../chunk-EFMOJ6IL.js";
-import "../chunk-YGL6SWKN.js";
+import "../chunk-WKFZ5MMN.js";
+import "../chunk-ACVANQJ4.js";
+import "../chunk-52MVZ6AN.js";
+import "../chunk-2DZ2Y3JI.js";
 import "../chunk-4Y5BEXVN.js";
 import "../chunk-P3YCIJUP.js";
 import "../chunk-B6XJN6EC.js";
 import "../chunk-UVKNLJDZ.js";
 import "../chunk-MIMJ7LON.js";
 import "../chunk-IQEEPHOY.js";
+import "../chunk-LHCDPZ5E.js";
+import "../chunk-OHMOP5PV.js";
+import "../chunk-66C4U3BG.js";
 import "../chunk-J242TTFH.js";
 import "../chunk-EAXUQEO5.js";
 import "../chunk-YJCCE5WP.js";
-import "../chunk-52MVZ6AN.js";
 import "../chunk-3SSSCLJ5.js";
-import "../chunk-25HMMI7R.js";
-import "../chunk-BVBX6IJ3.js";
-import "../chunk-66C4U3BG.js";
+import "../chunk-EWD4AO5N.js";
+import "../chunk-YGL6SWKN.js";
 import "../chunk-N552FDTV.js";
 export {
   TagSelector

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "1.2.13",
+  "version": "1.2.15",
   "private": false,
   "sideEffects": false,
   "type": "module",

package/src/atoms/badge.tsx

@@ -5,7 +5,7 @@ import {
 import { useMemo, forwardRef } from 'react';
 
 export type BadgeProps = Omit<RadixBadgeProps, 'color' | 'size'> & {
-  size?: 'small' | 'large';
+  size?: 'small' | 'medium' | 'large';
   color?: 'error' | 'accent' | 'neutral' | 'success';
 };
 
@@ -17,6 +17,8 @@ export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
       switch (size) {
         case 'small':
           return '1';
+        case 'medium':
+          return '2';
         case 'large':
           return '3';
         default:

package/src/atoms/dialog.tsx

@@ -3,7 +3,6 @@ import { Cross1Icon } from '@radix-ui/react-icons';
 import { Flex } from '@radix-ui/themes';
 import { useEffect, useRef } from 'react';
 import { Button } from './button';
-import { ToastContainer } from './toast';
 
 type ContentProps = RadixDialog.DialogContentProps & {
   width?: string;
@@ -57,7 +56,6 @@ function Content(props: ContentProps): React.ReactElement {
             {children}
           </Flex>
         </RadixDialog.Content>
-        <ToastContainer />
       </RadixDialog.Overlay>
     </RadixDialog.Portal>
   );

package/src/atoms/drawer.tsx

@@ -1,7 +1,5 @@
 import React, { useEffect, useRef } from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
-import { ThemeProvider } from '../theme/theme-provider';
-import { ToastContainer } from './toast';
 
 export function Root(props: Dialog.DialogProps): React.ReactNode {
   return <Dialog.Root {...props} />;
@@ -12,27 +10,23 @@ type ContentProps = Dialog.DialogContentProps & {
   position?: 'left' | 'right' | 'bottom' | 'top';
 };
 
-export function Content(props: ContentProps): React.ReactNode {
+export function Content(props: ContentProps): React.ReactElement {
   const { position = 'right', className, children, ...rest } = props;
 
   const containerRef = useRef<Element | null>(null);
-
   useEffect(() => {
     containerRef.current = document.getElementsByClassName('radix-themes')[0];
   }, []);
 
   return (
     <Dialog.Portal container={containerRef.current}>
-      <ThemeProvider>
-        <Dialog.Overlay className="DrawerOverlay" />
-        <Dialog.Content
-          className={`DrawerContent ${position} ${className || ''}`}
-          {...rest}
-        >
-          <ToastContainer />
-          {children}
-        </Dialog.Content>
-      </ThemeProvider>
+      <Dialog.Overlay className="DrawerOverlay" />
+      <Dialog.Content
+        className={`DrawerContent ${position} ${className || ''}`}
+        {...rest}
+      >
+        {children}
+      </Dialog.Content>
     </Dialog.Portal>
   );
 }

package/src/atoms/toast.tsx

@@ -1,37 +1,30 @@
-import { Cross1Icon } from '@radix-ui/react-icons';
-import type { Theme, ToastContainerProps, TypeOptions } from 'react-toastify';
-import { ToastContainer as ToastifyToastContainer } from 'react-toastify';
-import { IconButton } from './icon-button';
+import { InfoCircledIcon } from '@radix-ui/react-icons';
+import {
+  ToastContainer as ToastifyContainer,
+  type ToastContainerProps,
+} from 'react-toastify';
 
 export { toast } from 'react-toastify';
 
-interface CloseButtonProps {
-  closeToast: (e: React.MouseEvent<HTMLElement>) => void;
-  type: TypeOptions;
-  ariaLabel?: string;
-  theme: Theme;
-}
-function CloseButton({ closeToast }: CloseButtonProps): React.ReactNode {
-  return (
-    <IconButton color="gray" onClick={closeToast} variant="ghost">
-      <Cross1Icon />
-    </IconButton>
-  );
+function CloseButton(): React.ReactNode {
+  return null;
 }
 
 export function ToastContainer(props: ToastContainerProps): React.ReactElement {
   return (
-    <ToastifyToastContainer
-      autoClose={5000}
+    <ToastifyContainer
+      autoClose={50000}
       closeButton={CloseButton}
       closeOnClick
       draggable
       hideProgressBar
+      icon={<InfoCircledIcon />}
       newestOnTop
       pauseOnFocusLoss
       pauseOnHover
-      position="bottom-right"
+      position="top-center"
       rtl={false}
+      style={{ zIndex: 999999 }}
       {...props}
     />
   );