@multiplatform.one/frappe-ui 7.4.0 → 7.5.0

package/dist/cjs/FileBrowser/index.cjs

@@ -0,0 +1,661 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var FileBrowser_exports = {};
+__export(FileBrowser_exports, {
+  FileBrowser: () => FileBrowser
+});
+module.exports = __toCommonJS(FileBrowser_exports);
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_table = require("@multiplatform.one/table");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_i18next = require("react-i18next");
+var import_tamagui = require("tamagui");
+var import_folderTree = require("./folderTree.cjs");
+var import_viewPersistence = require("./viewPersistence.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const RAIL_WIDTH = 240;
+function KindIcon({
+  kind,
+  size = 16
+}) {
+  const props = {
+    size,
+    color: "$color9"
+  };
+  if (kind === "folder") return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FolderIcon, {
+    ...props
+  });
+  if (kind === "image") return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileImageIcon, {
+    ...props
+  });
+  if (kind === "video") return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileVideoIcon, {
+    ...props
+  });
+  if (kind === "text") return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileTextIcon, {
+    ...props
+  });
+  if (kind === "zip") return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileArchiveIcon, {
+    ...props
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileIcon, {
+    ...props
+  });
+}
+function formatSize(bytes) {
+  if (bytes == null || Number.isNaN(bytes)) return "\u2014";
+  if (bytes === 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  const i = Math.min(units.length - 1, Math.floor(Math.log(bytes) / Math.log(1024)));
+  return `${(bytes / 1024 ** i).toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
+}
+function resolveStatus(status, items, error) {
+  if (error) return "error";
+  if (status) return status;
+  return items.length === 0 ? "empty" : "ready";
+}
+function FileRowMenu({
+  file,
+  onOpen,
+  onDownload,
+  onRename,
+  onMove,
+  onDelete
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu, {
+    placement: "bottom-start",
+    items: [{
+      key: "open",
+      label: t("Open"),
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.EyeIcon, {
+        size: 16
+      }),
+      onSelect: () => onOpen?.(file)
+    }, {
+      key: "download",
+      label: t("Download"),
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.DownloadSimpleIcon, {
+        size: 16
+      }),
+      onSelect: () => onDownload?.([file])
+    }, {
+      key: "rename",
+      label: t("Rename"),
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PencilSimpleIcon, {
+        size: 16
+      }),
+      onSelect: () => onRename?.(file)
+    }, {
+      key: "move",
+      label: t("Move to\u2026"),
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.UploadSimpleIcon, {
+        size: 16
+      }),
+      onSelect: () => onMove?.([file])
+    }, {
+      separator: true
+    }, {
+      key: "delete",
+      label: t("Delete"),
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.TrashIcon, {
+        size: 16
+      }),
+      destructive: true,
+      onSelect: () => onDelete?.([file])
+    }],
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      chromeless: true,
+      size: "$2",
+      icon: import_react.DotsThreeVerticalIcon,
+      "aria-label": t("Actions"),
+      "data-filebrowser-kebab": true
+    })
+  });
+}
+function BulkBar({
+  count,
+  placement,
+  onDownload,
+  onMove,
+  onDelete,
+  onClear
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  if (count === 0) return null;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    "data-filebrowser-bulk": true,
+    "data-filebrowser-bulk-placement": placement,
+    alignItems: "center",
+    ...knobProps.gap,
+    ...knobProps.panelPadding,
+    borderWidth: 1,
+    borderColor: "$color6",
+    backgroundColor: "$color2",
+    ...knobProps.containerRadius,
+    marginHorizontal: "$4",
+    marginTop: placement === "top" ? "$3" : 0,
+    marginBottom: placement === "bottom" ? "$3" : 0,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontWeight: "600",
+      fontSize: "$3",
+      children: t("{{count}} selected", {
+        count
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      size: "$4",
+      chromeless: true,
+      icon: import_react.DownloadSimpleIcon,
+      onPress: onDownload,
+      children: t("Download")
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      size: "$4",
+      chromeless: true,
+      icon: import_react.UploadSimpleIcon,
+      onPress: onMove,
+      children: t("Move")
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      size: "$4",
+      chromeless: true,
+      icon: import_react.TrashIcon,
+      onPress: onDelete,
+      children: t("Delete")
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      flex: 1
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      size: "$4",
+      chromeless: true,
+      icon: import_react.XIcon,
+      onPress: onClear,
+      children: t("Clear")
+    })]
+  });
+}
+function FileBrowser({
+  files = [],
+  foldersStatus,
+  filesStatus,
+  foldersError,
+  filesError,
+  onFoldersRetry,
+  onFilesRetry,
+  view: viewProp,
+  defaultView = "list",
+  onViewChange,
+  surfaceId,
+  selectionMode = "multi",
+  selectedIds: selectedIdsProp,
+  onSelectedIdsChange,
+  currentValue,
+  onPick,
+  currentFolder: currentFolderProp,
+  onCurrentFolderChange,
+  tileSize = "md",
+  mediaAspect = "square",
+  selectAllScope = "page",
+  bulkBarPlacement = "top",
+  tableZebra = false,
+  layout: layoutProp,
+  onUpload,
+  search: searchProp,
+  onSearchChange,
+  onOpen,
+  onDownload,
+  onRename,
+  onMove,
+  onDelete,
+  accept
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const {
+    width
+  } = (0, import_tamagui.useWindowDimensions)();
+  const layout = layoutProp ?? (width < import_theme.OVERLAY_BREAKPOINT ? "drill" : "split");
+  const persisted = (0, import_viewPersistence.readPersistedView)(surfaceId);
+  const [uncontrolledView, setUncontrolledView] = (0, import_react2.useState)(viewProp ?? persisted ?? defaultView);
+  const view = viewProp ?? uncontrolledView;
+  const setView = (0, import_react2.useCallback)(next => {
+    if (viewProp === void 0) setUncontrolledView(next);
+    (0, import_viewPersistence.writePersistedView)(surfaceId, next);
+    onViewChange?.(next);
+  }, [onViewChange, surfaceId, viewProp]);
+  const [uncontrolledFolder, setUncontrolledFolder] = (0, import_react2.useState)(currentFolderProp ?? "Home");
+  const currentFolder = currentFolderProp ?? uncontrolledFolder;
+  const setFolder = (0, import_react2.useCallback)(next => {
+    if (currentFolderProp === void 0) setUncontrolledFolder(next);
+    onCurrentFolderChange?.(next);
+  }, [currentFolderProp, onCurrentFolderChange]);
+  const [uncontrolledSelected, setUncontrolledSelected] = (0, import_react2.useState)(selectedIdsProp ?? []);
+  const selectedIds = selectedIdsProp ?? uncontrolledSelected;
+  const setSelectedIds = (0, import_react2.useCallback)(next => {
+    if (selectedIdsProp === void 0) setUncontrolledSelected(next);
+    onSelectedIdsChange?.(next);
+  }, [onSelectedIdsChange, selectedIdsProp]);
+  const [uncontrolledSearch, setUncontrolledSearch] = (0, import_react2.useState)(searchProp ?? "");
+  const search = searchProp ?? uncontrolledSearch;
+  const setSearch = (0, import_react2.useCallback)(next => {
+    if (searchProp === void 0) setUncontrolledSearch(next);
+    onSearchChange?.(next);
+  }, [onSearchChange, searchProp]);
+  const [uploadOpen, setUploadOpen] = (0, import_react2.useState)(false);
+  const folderNodes = (0, import_react2.useMemo)(() => (0, import_folderTree.buildFolderTree)(files), [files]);
+  const paneFiles = (0, import_react2.useMemo)(() => {
+    const kids = (0, import_folderTree.childrenOf)(files, currentFolder);
+    if (!search.trim()) return kids;
+    const q = search.trim().toLowerCase();
+    return kids.filter(file => file.file_name.toLowerCase().includes(q));
+  }, [currentFolder, files, search]);
+  const folderStatus = resolveStatus(foldersStatus, folderNodes, foldersError);
+  const fileStatus = resolveStatus(filesStatus, paneFiles, filesError);
+  const single = selectionMode === "single";
+  const toggleSelected = (0, import_react2.useCallback)(id => {
+    setSelectedIds(selectedIds.includes(id) ? selectedIds.filter(item => item !== id) : [...selectedIds, id]);
+  }, [selectedIds, setSelectedIds]);
+  const handleFileActivate = (0, import_react2.useCallback)(file => {
+    if ((0, import_folderTree.isFolder)(file)) {
+      setFolder(file.name);
+      return;
+    }
+    if (single) {
+      onPick?.(file);
+      return;
+    }
+    onOpen?.(file);
+  }, [onOpen, onPick, setFolder, single]);
+  const selectedFiles = paneFiles.filter(file => selectedIds.includes(file.name));
+  const crumbs = (0, import_folderTree.breadcrumbItems)(currentFolder);
+  const parent = (0, import_folderTree.parentFolder)(currentFolder);
+  const columns = (0, import_react2.useMemo)(() => [{
+    accessorKey: "file_name",
+    header: t("Name"),
+    cell: ({
+      row
+    }) => {
+      const file = row.original;
+      const current = currentValue != null && (currentValue === file.file_url || currentValue === file.name || currentValue === file.file_name);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        alignItems: "center",
+        gap: "$2",
+        minWidth: 0,
+        flex: 1,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(KindIcon, {
+          kind: (0, import_folderTree.fileKind)(file)
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontSize: "$3",
+          flex: 1,
+          minWidth: 0,
+          ...{
+            numberOfLines: 1,
+            title: file.file_name
+          },
+          children: file.file_name
+        }), single && current ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CheckIcon, {
+          size: 14,
+          "data-filebrowser-current-check": true,
+          "aria-hidden": true
+        }) : null]
+      });
+    }
+  }, {
+    accessorKey: "modified",
+    header: t("Modified")
+  }, {
+    accessorKey: "file_size",
+    header: t("Size"),
+    cell: ({
+      row
+    }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: "$3",
+      fontFamily: "$mono",
+      children: (0, import_folderTree.isFolder)(row.original) ? "\u2014" : formatSize(row.original.file_size)
+    })
+  }, ...(single ? [] : [{
+    id: "actions",
+    header: "",
+    enableSorting: false,
+    cell: ({
+      row
+    }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(FileRowMenu, {
+      file: row.original,
+      onOpen,
+      onDownload,
+      onRename,
+      onMove,
+      onDelete
+    })
+  }])], [currentValue, onDelete, onDownload, onMove, onOpen, onRename, single, t]);
+  const tableRows = (0, import_react2.useMemo)(() => paneFiles.map(file => ({
+    ...file,
+    id: file.name
+  })), [paneFiles]);
+  const toolbar = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    "data-filebrowser-toolbar": true,
+    alignItems: "center",
+    ...knobProps.gap,
+    paddingHorizontal: "$4",
+    paddingVertical: "$3",
+    borderBottomWidth: 1,
+    borderColor: "$borderColor",
+    children: [layout === "drill" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      chromeless: true,
+      size: "$4",
+      icon: import_react.CaretLeftIcon,
+      disabled: !parent,
+      "aria-label": t("Back"),
+      "data-filebrowser-back": true,
+      onPress: () => parent && setFolder(parent),
+      children: crumbs[crumbs.length - 1]?.label ?? t("Home")
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      flex: 1,
+      minWidth: 0,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Breadcrumbs, {
+        items: crumbs,
+        maxVisible: 4,
+        onNavigate: href => setFolder(href)
+      })
+    }), layout === "split" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+      value: search,
+      onChangeText: setSearch,
+      placeholder: t("Search files"),
+      leftIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MagnifyingGlassIcon, {
+        size: 16
+      }),
+      labelHidden: true,
+      "aria-label": t("Search files")
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      "data-filebrowser-view-switcher": true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ViewSwitcher, {
+        currentView: view,
+        onViewChange: next => setView(next),
+        views: [{
+          type: "list",
+          label: t("List"),
+          icon: import_react.ListIcon,
+          iconOnly: true
+        }, {
+          type: "grid",
+          label: t("Grid"),
+          icon: import_react.SquaresFourIcon,
+          iconOnly: true
+        }]
+      })
+    }), onUpload ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      size: "$4",
+      icon: import_react.UploadSimpleIcon,
+      onPress: () => setUploadOpen(true),
+      children: t("Upload")
+    }) : null]
+  });
+  const bulk = !single ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(BulkBar, {
+    count: selectedIds.length,
+    placement: bulkBarPlacement,
+    onDownload: () => onDownload?.(selectedFiles),
+    onMove: () => onMove?.(selectedFiles),
+    onDelete: () => onDelete?.(selectedFiles),
+    onClear: () => setSelectedIds([])
+  }) : null;
+  const renderGridItem = file => {
+    const kind = (0, import_folderTree.fileKind)(file);
+    const current = currentValue != null && (currentValue === file.file_url || currentValue === file.name || currentValue === file.file_name);
+    const checked = selectedIds.includes(file.name);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      "data-filebrowser-tile": file.name,
+      gap: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        position: "relative",
+        children: [!single ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          position: "absolute",
+          top: "$2",
+          left: "$2",
+          zIndex: 2,
+          onPress: event => {
+            event.stopPropagation();
+            toggleSelected(file.name);
+          },
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
+            checked,
+            onCheckedChange: () => toggleSelected(file.name),
+            "aria-label": t("Select {{name}}", {
+              name: file.file_name
+            }),
+            "data-filebrowser-checkbox": true
+          })
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          aspectRatio: 1,
+          backgroundColor: "$color2",
+          borderWidth: 1,
+          borderColor: "$borderColor",
+          ...knobProps.containerRadius,
+          alignItems: "center",
+          justifyContent: "center",
+          children: kind === "image" && file.file_url ?
+          // eslint-disable-next-line jsx-a11y/alt-text
+          /* @__PURE__ */
+          (0, import_jsx_runtime.jsx)("img", {
+            src: file.file_url,
+            alt: "",
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover"
+            }
+          }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(KindIcon, {
+            kind,
+            size: 28
+          })
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        alignItems: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontSize: "$3",
+          flex: 1,
+          ...{
+            numberOfLines: 1,
+            title: file.file_name
+          },
+          children: file.file_name
+        }), single && current ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CheckIcon, {
+          size: 14,
+          "data-filebrowser-current-check": true,
+          "aria-hidden": true
+        }) : null]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontSize: "$2",
+        fontFamily: "$mono",
+        color: "$color10",
+        children: (0, import_folderTree.isFolder)(file) ? "\u2014" : formatSize(file.file_size)
+      })]
+    });
+  };
+  const filesPaneReady = view === "grid" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    "data-filebrowser-files-view": "grid",
+    "data-filebrowser-tile-size": tileSize,
+    flex: 1,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ImageGrid, {
+      items: paneFiles,
+      tileSize,
+      mediaAspect,
+      renderItem: renderGridItem,
+      onItemClick: handleFileActivate,
+      emptyMessage: t("No files")
+    })
+  }) : layout === "drill" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.List, {
+    items: paneFiles,
+    "aria-label": t("Files"),
+    renderItem: file => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      alignItems: "center",
+      gap: "$3",
+      flex: 1,
+      minWidth: 0,
+      width: "100%",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(KindIcon, {
+        kind: (0, import_folderTree.fileKind)(file)
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontSize: "$3",
+        flex: 1,
+        minWidth: 0,
+        ...{
+          numberOfLines: 1,
+          title: file.file_name
+        },
+        children: file.file_name
+      }), (0, import_folderTree.isFolder)(file) ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontSize: "$2",
+        fontFamily: "$mono",
+        color: "$color10",
+        children: formatSize(file.file_size)
+      })]
+    }),
+    onItemClick: handleFileActivate,
+    emptyMessage: t("No files")
+  }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    "data-filebrowser-files-view": "list",
+    flex: 1,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table.DataTable, {
+      data: tableRows,
+      columns,
+      enableRowSelection: !single,
+      selectAllScope,
+      enableFiltering: false,
+      enableGlobalSearch: false,
+      enablePagination: false,
+      enableColumnVisibility: false,
+      enableSorting: true,
+      onRowPress: row => handleFileActivate(row),
+      rowLabel: row => row.file_name,
+      "aria-label": t("Files"),
+      bulkActions: single ? void 0 : [{
+        id: "download",
+        label: t("Download"),
+        onExecute: rows => onDownload?.(rows)
+      }, {
+        id: "move",
+        label: t("Move"),
+        onExecute: rows => onMove?.(rows)
+      }, {
+        id: "delete",
+        label: t("Delete"),
+        onExecute: rows => onDelete?.(rows)
+      }]
+    })
+  });
+  const filesBody = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    "data-filebrowser-files": true,
+    "data-filebrowser-files-state": fileStatus,
+    flex: 1,
+    minWidth: 0,
+    children: fileStatus === "loading" && view === "grid" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ImageGrid, {
+      items: [],
+      isLoading: true,
+      tileSize,
+      mediaAspect,
+      renderItem: () => null
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.AsyncBoundary, {
+      layout: view === "grid" ? "generic" : "table",
+      loading: fileStatus === "loading",
+      empty: fileStatus === "empty",
+      error: fileStatus === "error" ? filesError ?? true : null,
+      onRetry: onFilesRetry,
+      emptyTitle: t("No files"),
+      errorTitle: t("Couldn't load files"),
+      compact: true,
+      children: filesPaneReady
+    })
+  });
+  const foldersBody = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    "data-filebrowser-folders": true,
+    "data-filebrowser-folders-state": folderStatus,
+    width: layout === "split" ? RAIL_WIDTH : "100%",
+    flexGrow: layout === "split" ? 0 : 1,
+    flexShrink: 0,
+    borderRightWidth: layout === "split" ? 1 : 0,
+    borderColor: "$borderColor",
+    minWidth: 0,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.AsyncBoundary, {
+      layout: "list",
+      loading: folderStatus === "loading",
+      empty: folderStatus === "empty",
+      error: folderStatus === "error" ? foldersError ?? true : null,
+      onRetry: onFoldersRetry,
+      emptyTitle: t("No folders"),
+      errorTitle: t("Couldn't load folders"),
+      compact: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.TreeView, {
+        nodes: folderNodes,
+        selectedId: currentFolder,
+        defaultExpandedIds: (0, import_folderTree.ancestorFolderIds)(currentFolder),
+        ariaLabel: t("Folders"),
+        display: "default",
+        showExpansionArrows: true,
+        onNodeSelect: node => setFolder(node.id),
+        emptyMessage: t("No folders")
+      })
+    })
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    "data-filebrowser": true,
+    "data-filebrowser-layout": layout,
+    "data-filebrowser-view": view,
+    "data-filebrowser-selection": selectionMode,
+    "data-filebrowser-tile-size": tileSize,
+    "data-filebrowser-zebra": tableZebra ? "on" : "off",
+    borderWidth: 1,
+    borderColor: "$color5",
+    backgroundColor: "$color2",
+    overflow: "visible",
+    ...knobProps.containerRadius,
+    minHeight: 280,
+    children: [toolbar, bulkBarPlacement === "top" ? bulk : null, layout === "split" ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      flex: 1,
+      alignItems: "stretch",
+      minHeight: 200,
+      children: [foldersBody, filesBody]
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      flex: 1,
+      minHeight: 200,
+      children: filesBody
+    }), bulkBarPlacement === "bottom" ? bulk : null, uploadOpen && onUpload ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      "data-filebrowser-upload": true,
+      padding: "$4",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.FileUpload, {
+        accept,
+        multiple: true
+      })
+    }) : null]
+  });
+}