Function TreeViewEditInput

src/renderer/src/components/common/TreeView.tsx:201–327

({
  id,
  editingValue,
  setEditingValue,
  isFolder,
  onSaveAndExit,
  onCancelAndExit,
  onGenerateItemName
}: TreeViewEditInputProps)

}

function TreeViewEditInput({
  id,
  editingValue,
  setEditingValue,
  isFolder,
  onSaveAndExit,
  onCancelAndExit,
  onGenerateItemName
}: TreeViewEditInputProps): React.JSX.Element {
  const [popoverOpen, setPopoverOpen] = useState(false)
  const containerRef = useRef<HTMLDivElement>(null)
  const exitModeRef = useRef<'idle' | 'save' | 'cancel'>('idle')

  const handleSaveAndExit = useCallback(() => {
    if (exitModeRef.current !== 'idle') {
      return
    }

    exitModeRef.current = 'save'
    onSaveAndExit()
  }, [onSaveAndExit])

  const handleCancelAndExit = useCallback(() => {
    if (exitModeRef.current !== 'idle') {
      return
    }

    exitModeRef.current = 'cancel'
    onCancelAndExit()
  }, [onCancelAndExit])

  const handleGenerate = async (options: GenerateOptions): Promise<void> => {
    if (onGenerateItemName) {
      await onGenerateItemName(id, options)
      handleCancelAndExit()
    }
  }

  useEffect(() => {
    const handlePointerDownOutside = (event: PointerEvent): void => {
      const target = event.target
      if (!(target instanceof HTMLElement)) {
        return
      }

      if (containerRef.current?.contains(target)) {
        return
      }

      if (
        target.closest('.rename-input__ai-btn') ||
        target.closest('.ai-generate-popover__content')
      ) {
        return
      }

      if (!popoverOpen) {
        handleSaveAndExit()