Function SheetTree

frontend/src/react/components/sql-editor/SheetTree.tsx:173–1475

({
  view,
  multiSelectMode = false,
  checkedNodes = [],
  onMultiSelectModeChange,
  onCheckedNodesChange,
  ref,
}: Props)

// ---------------------------------------------------------------------------

export function SheetTree({
  view,
  multiSelectMode = false,
  checkedNodes = [],
  onMultiSelectModeChange,
  onCheckedNodesChange,
  ref,
}: Props) {
  const { t } = useTranslation();

  // ---- Pinia stores (called at top level, not inside the Vue-bridge call) ----------
  const createWorksheet = useSQLEditorReactStore((s) => s.createWorksheet);

  // ---- Sheet contexts -------------------------------------------------------
  const {
    filter: worksheetFilter,
    selectedKeys,
    expandedKeys,
    editingNode,
    batchUpdateWorksheetFolders,
    setExpandedKeys,
    setEditingNode,
  } = useSheetContext();
  const {
    isInitialized,
    isLoading,
    sheetTree,
    fetchSheetList,
    folderContext,
    getFoldersForWorksheet,
    events,
  } = useSheetContextByView(view);

  const project = useSQLEditorEditorState((s) => s.project);
  const expandedKeysArray = useMemo(
    () => Array.from(expandedKeys ?? []),
    [expandedKeys]
  );

  // ---- Dropdown hook -------------------------------------------------------
  const {
    currentNode: contextMenuNode,
    options: dropdownOptions,
    worksheetEntity,
    showSharePanel,
    handleContextMenu,
    handleSharePanelShow,
    handleClickOutside: handleContextMenuClickOutside,
  } = useDropdown(
    view,
    worksheetFilter,
    // Only expose the "Multi-select" entry when the parent wires the
    // multi-select callbacks — i.e. on the `my` tree inside WorksheetPane.
    !!onMultiSelectModeChange && !!onCheckedNodesChange
  );

  // ---- Menu anchor ----------------------------------------------------------
  // Base UI's popup hover-floating interaction closes the menu on