Function FolderForm

frontend/src/react/components/sql-editor/FolderForm.tsx:31–188

({ folder, onFolderChange }: Props)

}

export function FolderForm({ folder, onFolderChange }: Props) {
  const { t } = useTranslation();

  const { folderTree, folderContext } = useSheetContextByView("my");
  const rootPath = folderContext.rootPath;

  const [folderPath, setFolderPath] = useState(folder);
  const [showPopover, setShowPopover] = useState(false);

  const containerRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  // Close the popover on a mousedown outside the input AND outside the
  // overlay layer (where the portalled popup lives). Base UI's PopoverTrigger
  // toggles on click, which means a second click on the input would close the
  // popover even though the user wants to keep typing — so we bypass Trigger
  // entirely and manage open state ourselves.
  useEffect(() => {
    if (!showPopover) return;
    const overlayRoot = document.getElementById(LAYER_ROOT_ID.overlay);
    const handler = (e: MouseEvent) => {
      const target = e.target as Node;
      if (containerRef.current?.contains(target)) return;
      if (overlayRoot?.contains(target)) return;
      setShowPopover(false);
    };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, [showPopover]);

  // Sync incoming folder prop → local state
  useEffect(() => {
    setFolderPath(folder);
  }, [folder]);

  // Emit changes upward whenever folderPath changes
  useEffect(() => {
    onFolderChange(folderPath);
  }, [folderPath, onFolderChange]);

  const formattedFolderPath = (() => {
    let val = folderPath.replace(rootPath, "");
    if (val[0] === "/") {
      val = val.slice(1);
    }
    return val.split("/").join(" / ");
  })();

  const handleInput = (raw: string) => {
    let changedVal = raw;
    if (changedVal.endsWith(" /")) {
      changedVal = changedVal.slice(0, -2);
    }
    if (changedVal.endsWith(".")) {
      changedVal = changedVal.slice(0, -1);
    }
    const rawPath = changedVal
      .split("/")