@multiplatform.one/frappe-ui 7.4.1 → 7.6.0

package/dist/esm/FileBrowser/index.native.js

@@ -0,0 +1,753 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AsyncBoundary, Breadcrumbs, DropdownMenu, ImageGrid, List, TreeView, ViewSwitcher } from "@multiplatform.one/components";
+import { Button, Checkbox, FileUpload, Input } from "@multiplatform.one/forms";
+import { DataTable } from "@multiplatform.one/table";
+import { OVERLAY_BREAKPOINT, useResolvedKnobs } from "@multiplatform.one/theme";
+import { CaretLeftIcon, CheckIcon, DotsThreeVerticalIcon, DownloadSimpleIcon, EyeIcon, FileIcon, FileArchiveIcon, FileImageIcon, FileTextIcon, FileVideoIcon, FolderIcon, FolderOpenIcon, ListIcon, MagnifyingGlassIcon, PencilSimpleIcon, SquaresFourIcon, TrashIcon, UploadSimpleIcon, XIcon } from "@phosphor-icons/react";
+import { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Text, XStack, YStack, useWindowDimensions } from "tamagui";
+import { ancestorFolderIds, breadcrumbItems, buildFolderTree, childrenOf, fileKind, isFolder, parentFolder } from "./folderTree.native.js";
+import { readPersistedView, writePersistedView } from "./viewPersistence.native.js";
+var RAIL_WIDTH = 240;
+function KindIcon(param) {
+  var {
+    kind,
+    size = 16
+  } = param;
+  var props = {
+    size,
+    color: "$color9"
+  };
+  if (kind === "folder") return /* @__PURE__ */_jsx(FolderIcon, {
+    ...props
+  });
+  if (kind === "image") return /* @__PURE__ */_jsx(FileImageIcon, {
+    ...props
+  });
+  if (kind === "video") return /* @__PURE__ */_jsx(FileVideoIcon, {
+    ...props
+  });
+  if (kind === "text") return /* @__PURE__ */_jsx(FileTextIcon, {
+    ...props
+  });
+  if (kind === "zip") return /* @__PURE__ */_jsx(FileArchiveIcon, {
+    ...props
+  });
+  return /* @__PURE__ */_jsx(FileIcon, {
+    ...props
+  });
+}
+function formatSize(bytes) {
+  if (bytes == null || Number.isNaN(bytes)) return "\u2014";
+  if (bytes === 0) return "0 B";
+  var units = ["B", "KB", "MB", "GB"];
+  var i = Math.min(units.length - 1, Math.floor(Math.log(bytes) / Math.log(1024)));
+  return `${(bytes / Math.pow(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(param) {
+  var {
+    file,
+    onOpen,
+    onDownload,
+    onRename,
+    onMove,
+    onDelete
+  } = param;
+  var {
+    t
+  } = useTranslation();
+  return /* @__PURE__ */_jsx(DropdownMenu, {
+    placement: "bottom-start",
+    items: [{
+      key: "open",
+      label: t("Open"),
+      icon: /* @__PURE__ */_jsx(EyeIcon, {
+        size: 16
+      }),
+      onSelect: function onSelect() {
+        return onOpen === null || onOpen === void 0 ? void 0 : onOpen(file);
+      }
+    }, {
+      key: "download",
+      label: t("Download"),
+      icon: /* @__PURE__ */_jsx(DownloadSimpleIcon, {
+        size: 16
+      }),
+      onSelect: function onSelect() {
+        return onDownload === null || onDownload === void 0 ? void 0 : onDownload([file]);
+      }
+    }, {
+      key: "rename",
+      label: t("Rename"),
+      icon: /* @__PURE__ */_jsx(PencilSimpleIcon, {
+        size: 16
+      }),
+      onSelect: function onSelect() {
+        return onRename === null || onRename === void 0 ? void 0 : onRename(file);
+      }
+    }, {
+      key: "move",
+      label: t("Move to\u2026"),
+      icon: /* @__PURE__ */_jsx(UploadSimpleIcon, {
+        size: 16
+      }),
+      onSelect: function onSelect() {
+        return onMove === null || onMove === void 0 ? void 0 : onMove([file]);
+      }
+    }, {
+      separator: true
+    }, {
+      key: "delete",
+      label: t("Delete"),
+      icon: /* @__PURE__ */_jsx(TrashIcon, {
+        size: 16
+      }),
+      destructive: true,
+      onSelect: function onSelect() {
+        return onDelete === null || onDelete === void 0 ? void 0 : onDelete([file]);
+      }
+    }],
+    children: /* @__PURE__ */_jsx(Button, {
+      chromeless: true,
+      size: "$2",
+      icon: DotsThreeVerticalIcon,
+      "aria-label": t("Actions"),
+      "data-filebrowser-kebab": true
+    })
+  });
+}
+function BulkBar(param) {
+  var {
+    count,
+    placement,
+    onDownload,
+    onMove,
+    onDelete,
+    onClear
+  } = param;
+  var {
+    t
+  } = useTranslation();
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  if (count === 0) return null;
+  return /* @__PURE__ */_jsxs(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__ */_jsx(Text, {
+      fontWeight: "600",
+      fontSize: "$3",
+      children: t("{{count}} selected", {
+        count
+      })
+    }), /* @__PURE__ */_jsx(Button, {
+      size: "$4",
+      chromeless: true,
+      icon: DownloadSimpleIcon,
+      onPress: onDownload,
+      children: t("Download")
+    }), /* @__PURE__ */_jsx(Button, {
+      size: "$4",
+      chromeless: true,
+      icon: UploadSimpleIcon,
+      onPress: onMove,
+      children: t("Move")
+    }), /* @__PURE__ */_jsx(Button, {
+      size: "$4",
+      chromeless: true,
+      icon: TrashIcon,
+      onPress: onDelete,
+      children: t("Delete")
+    }), /* @__PURE__ */_jsx(XStack, {
+      flex: 1
+    }), /* @__PURE__ */_jsx(Button, {
+      size: "$4",
+      chromeless: true,
+      icon: XIcon,
+      onPress: onClear,
+      children: t("Clear")
+    })]
+  });
+}
+function FileBrowser(param) {
+  var {
+    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
+  } = param;
+  var _ref, _ref1;
+  var _crumbs_;
+  var {
+    t
+  } = useTranslation();
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var {
+    width
+  } = useWindowDimensions();
+  var layout = layoutProp !== null && layoutProp !== void 0 ? layoutProp : width < OVERLAY_BREAKPOINT ? "drill" : "split";
+  var persisted = readPersistedView(surfaceId);
+  var [uncontrolledView, setUncontrolledView] = useState((_ref = viewProp !== null && viewProp !== void 0 ? viewProp : persisted) !== null && _ref !== void 0 ? _ref : defaultView);
+  var view = viewProp !== null && viewProp !== void 0 ? viewProp : uncontrolledView;
+  var setView = useCallback(function (next) {
+    if (viewProp === void 0) setUncontrolledView(next);
+    writePersistedView(surfaceId, next);
+    onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(next);
+  }, [onViewChange, surfaceId, viewProp]);
+  var [uncontrolledFolder, setUncontrolledFolder] = useState(currentFolderProp !== null && currentFolderProp !== void 0 ? currentFolderProp : "Home");
+  var currentFolder = currentFolderProp !== null && currentFolderProp !== void 0 ? currentFolderProp : uncontrolledFolder;
+  var setFolder = useCallback(function (next) {
+    if (currentFolderProp === void 0) setUncontrolledFolder(next);
+    onCurrentFolderChange === null || onCurrentFolderChange === void 0 ? void 0 : onCurrentFolderChange(next);
+  }, [currentFolderProp, onCurrentFolderChange]);
+  var [uncontrolledSelected, setUncontrolledSelected] = useState(selectedIdsProp !== null && selectedIdsProp !== void 0 ? selectedIdsProp : []);
+  var selectedIds = selectedIdsProp !== null && selectedIdsProp !== void 0 ? selectedIdsProp : uncontrolledSelected;
+  var setSelectedIds = useCallback(function (next) {
+    if (selectedIdsProp === void 0) setUncontrolledSelected(next);
+    onSelectedIdsChange === null || onSelectedIdsChange === void 0 ? void 0 : onSelectedIdsChange(next);
+  }, [onSelectedIdsChange, selectedIdsProp]);
+  var [uncontrolledSearch, setUncontrolledSearch] = useState(searchProp !== null && searchProp !== void 0 ? searchProp : "");
+  var search = searchProp !== null && searchProp !== void 0 ? searchProp : uncontrolledSearch;
+  var setSearch = useCallback(function (next) {
+    if (searchProp === void 0) setUncontrolledSearch(next);
+    onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange(next);
+  }, [onSearchChange, searchProp]);
+  var [uploadOpen, setUploadOpen] = useState(false);
+  var folderNodes = useMemo(function () {
+    var withFolderIcons = function withFolderIcons1(nodes) {
+      return nodes.map(function (node) {
+        return {
+          ...node,
+          icon: /* @__PURE__ */_jsx(FolderIcon, {
+            size: 16,
+            weight: "duotone"
+          }),
+          iconWhenExpanded: /* @__PURE__ */_jsx(FolderOpenIcon, {
+            size: 16,
+            weight: "duotone"
+          }),
+          children: node.children ? withFolderIcons(node.children) : void 0
+        };
+      });
+    };
+    return withFolderIcons(buildFolderTree(files));
+  }, [files]);
+  var paneFiles = useMemo(function () {
+    var kids = childrenOf(files, currentFolder);
+    if (!search.trim()) return kids;
+    var q = search.trim().toLowerCase();
+    return kids.filter(function (file) {
+      return file.file_name.toLowerCase().includes(q);
+    });
+  }, [currentFolder, files, search]);
+  var folderStatus = resolveStatus(foldersStatus, folderNodes, foldersError);
+  var fileStatus = resolveStatus(filesStatus, paneFiles, filesError);
+  var single = selectionMode === "single";
+  var toggleSelected = useCallback(function (id) {
+    setSelectedIds(selectedIds.includes(id) ? selectedIds.filter(function (item) {
+      return item !== id;
+    }) : [...selectedIds, id]);
+  }, [selectedIds, setSelectedIds]);
+  var handleFileActivate = useCallback(function (file) {
+    if (isFolder(file)) {
+      setFolder(file.name);
+      return;
+    }
+    if (single) {
+      onPick === null || onPick === void 0 ? void 0 : onPick(file);
+      return;
+    }
+    onOpen === null || onOpen === void 0 ? void 0 : onOpen(file);
+  }, [onOpen, onPick, setFolder, single]);
+  var selectedFiles = paneFiles.filter(function (file) {
+    return selectedIds.includes(file.name);
+  });
+  var crumbs = breadcrumbItems(currentFolder);
+  var parent = parentFolder(currentFolder);
+  var columns = useMemo(function () {
+    return [{
+      accessorKey: "file_name",
+      header: t("Name"),
+      cell: function cell(param2) {
+        var {
+          row
+        } = param2;
+        var file = row.original;
+        var current = currentValue != null && (currentValue === file.file_url || currentValue === file.name || currentValue === file.file_name);
+        return /* @__PURE__ */_jsxs(XStack, {
+          alignItems: "center",
+          gap: "$2",
+          minWidth: 0,
+          flex: 1,
+          children: [/* @__PURE__ */_jsx(KindIcon, {
+            kind: fileKind(file)
+          }), /* @__PURE__ */_jsx(Text, {
+            fontSize: "$3",
+            flex: 1,
+            minWidth: 0,
+            ...{
+              numberOfLines: 1,
+              title: file.file_name
+            },
+            children: file.file_name
+          }), single && current ? /* @__PURE__ */_jsx(CheckIcon, {
+            size: 14,
+            "data-filebrowser-current-check": true,
+            "aria-hidden": true
+          }) : null]
+        });
+      }
+    }, {
+      accessorKey: "modified",
+      header: t("Modified")
+    }, {
+      accessorKey: "file_size",
+      header: t("Size"),
+      cell: function cell(param2) {
+        var {
+          row
+        } = param2;
+        return /* @__PURE__ */_jsx(Text, {
+          fontSize: "$3",
+          fontFamily: "$mono",
+          children: isFolder(row.original) ? "\u2014" : formatSize(row.original.file_size)
+        });
+      }
+    }, ...(single ? [] : [{
+      id: "actions",
+      header: "",
+      enableSorting: false,
+      cell: function cell(param2) {
+        var {
+          row
+        } = param2;
+        return /* @__PURE__ */_jsx(FileRowMenu, {
+          file: row.original,
+          onOpen,
+          onDownload,
+          onRename,
+          onMove,
+          onDelete
+        });
+      }
+    }])];
+  }, [currentValue, onDelete, onDownload, onMove, onOpen, onRename, single, t]);
+  var tableRows = useMemo(function () {
+    return paneFiles.map(function (file) {
+      return {
+        ...file,
+        id: file.name
+      };
+    });
+  }, [paneFiles]);
+  var toolbar = /* @__PURE__ */_jsxs(XStack, {
+    "data-filebrowser-toolbar": true,
+    alignItems: "center",
+    ...knobProps.gap,
+    paddingHorizontal: "$4",
+    paddingVertical: "$3",
+    borderBottomWidth: 1,
+    borderColor: "$borderColor",
+    children: [layout === "drill" ? /* @__PURE__ */_jsx(Button, {
+      chromeless: true,
+      size: "$4",
+      icon: CaretLeftIcon,
+      disabled: !parent,
+      "aria-label": t("Back"),
+      "data-filebrowser-back": true,
+      onPress: function onPress() {
+        return parent && setFolder(parent);
+      },
+      children: (_ref1 = (_crumbs_ = crumbs[crumbs.length - 1]) === null || _crumbs_ === void 0 ? void 0 : _crumbs_.label) !== null && _ref1 !== void 0 ? _ref1 : t("Home")
+    }) : /* @__PURE__ */_jsx(XStack, {
+      flex: 1,
+      minWidth: 0,
+      children: /* @__PURE__ */_jsx(Breadcrumbs, {
+        items: crumbs,
+        maxVisible: 4,
+        onNavigate: function onNavigate(href) {
+          return setFolder(href);
+        }
+      })
+    }), layout === "split" ? /* @__PURE__ */_jsx(Input, {
+      value: search,
+      onChangeText: setSearch,
+      placeholder: t("Search files"),
+      leftIcon: /* @__PURE__ */_jsx(MagnifyingGlassIcon, {
+        size: 16
+      }),
+      labelHidden: true,
+      "aria-label": t("Search files")
+    }) : null, /* @__PURE__ */_jsx(YStack, {
+      "data-filebrowser-view-switcher": true,
+      children: /* @__PURE__ */_jsx(ViewSwitcher, {
+        currentView: view,
+        onViewChange: function onViewChange2(next) {
+          return setView(next);
+        },
+        views: [{
+          type: "list",
+          label: t("List"),
+          icon: ListIcon,
+          iconOnly: true
+        }, {
+          type: "grid",
+          label: t("Grid"),
+          icon: SquaresFourIcon,
+          iconOnly: true
+        }]
+      })
+    }), onUpload ? /* @__PURE__ */_jsx(Button, {
+      size: "$4",
+      icon: UploadSimpleIcon,
+      onPress: function onPress() {
+        return setUploadOpen(true);
+      },
+      children: t("Upload")
+    }) : null]
+  });
+  var bulk = !single ? /* @__PURE__ */_jsx(BulkBar, {
+    count: selectedIds.length,
+    placement: bulkBarPlacement,
+    onDownload: function onDownload1() {
+      return onDownload === null || onDownload === void 0 ? void 0 : onDownload(selectedFiles);
+    },
+    onMove: function onMove1() {
+      return onMove === null || onMove === void 0 ? void 0 : onMove(selectedFiles);
+    },
+    onDelete: function onDelete1() {
+      return onDelete === null || onDelete === void 0 ? void 0 : onDelete(selectedFiles);
+    },
+    onClear: function onClear() {
+      return setSelectedIds([]);
+    }
+  }) : null;
+  var renderGridItem = function renderGridItem2(file) {
+    var kind = fileKind(file);
+    var current = currentValue != null && (currentValue === file.file_url || currentValue === file.name || currentValue === file.file_name);
+    var checked = selectedIds.includes(file.name);
+    return /* @__PURE__ */_jsxs(YStack, {
+      "data-filebrowser-tile": file.name,
+      gap: "$2",
+      children: [/* @__PURE__ */_jsxs(YStack, {
+        position: "relative",
+        children: [!single ? /* @__PURE__ */_jsx(YStack, {
+          position: "absolute",
+          top: "$2",
+          left: "$2",
+          zIndex: 2,
+          onPress: function onPress(event) {
+            event.stopPropagation();
+            toggleSelected(file.name);
+          },
+          children: /* @__PURE__ */_jsx(Checkbox, {
+            checked,
+            onCheckedChange: function onCheckedChange() {
+              return toggleSelected(file.name);
+            },
+            "aria-label": t("Select {{name}}", {
+              name: file.file_name
+            }),
+            "data-filebrowser-checkbox": true
+          })
+        }) : null, /* @__PURE__ */_jsx(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__ */
+          _jsx("img", {
+            src: file.file_url,
+            alt: "",
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover"
+            }
+          }) : /* @__PURE__ */_jsx(KindIcon, {
+            kind,
+            size: 28
+          })
+        })]
+      }), /* @__PURE__ */_jsxs(XStack, {
+        alignItems: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */_jsx(Text, {
+          fontSize: "$3",
+          flex: 1,
+          ...{
+            numberOfLines: 1,
+            title: file.file_name
+          },
+          children: file.file_name
+        }), single && current ? /* @__PURE__ */_jsx(CheckIcon, {
+          size: 14,
+          "data-filebrowser-current-check": true,
+          "aria-hidden": true
+        }) : null]
+      }), /* @__PURE__ */_jsx(Text, {
+        fontSize: "$2",
+        fontFamily: "$mono",
+        color: "$color10",
+        children: isFolder(file) ? "\u2014" : formatSize(file.file_size)
+      })]
+    });
+  };
+  var filesPaneReady = view === "grid" ? /* @__PURE__ */_jsx(YStack, {
+    "data-filebrowser-files-view": "grid",
+    "data-filebrowser-tile-size": tileSize,
+    // The tile wall is ImageGrid's PAGE-FLOW mode (no height prop): the
+    // wall's own height must reach the frame so the browser grows with it
+    // (flex basis 0 kept the pane at the frame floor and the wall bled
+    // straight through the frame edge — measured on the harness).
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "auto",
+    children: /* @__PURE__ */_jsx(ImageGrid, {
+      items: paneFiles,
+      tileSize,
+      mediaAspect,
+      renderItem: renderGridItem,
+      onItemClick: handleFileActivate,
+      emptyMessage: t("No files")
+    })
+  }) : layout === "drill" ? /* @__PURE__ */_jsx(List, {
+    items: paneFiles,
+    "aria-label": t("Files"),
+    renderItem: function renderItem(file) {
+      return /* @__PURE__ */_jsxs(XStack, {
+        alignItems: "center",
+        gap: "$3",
+        flex: 1,
+        minWidth: 0,
+        width: "100%",
+        children: [/* @__PURE__ */_jsx(KindIcon, {
+          kind: fileKind(file)
+        }), /* @__PURE__ */_jsx(Text, {
+          fontSize: "$3",
+          flex: 1,
+          minWidth: 0,
+          ...{
+            numberOfLines: 1,
+            title: file.file_name
+          },
+          children: file.file_name
+        }), isFolder(file) ? null : /* @__PURE__ */_jsx(Text, {
+          fontSize: "$2",
+          fontFamily: "$mono",
+          color: "$color10",
+          children: formatSize(file.file_size)
+        })]
+      });
+    },
+    onItemClick: handleFileActivate,
+    emptyMessage: t("No files")
+  }) : /* @__PURE__ */_jsx(YStack, {
+    "data-filebrowser-files-view": "list",
+    flex: 1,
+    children: /* @__PURE__ */_jsx(DataTable, {
+      data: tableRows,
+      columns,
+      enableRowSelection: !single,
+      selectAllScope,
+      enableFiltering: false,
+      enableGlobalSearch: false,
+      enablePagination: false,
+      enableColumnVisibility: false,
+      enableSorting: true,
+      onRowPress: function onRowPress(row) {
+        return handleFileActivate(row);
+      },
+      rowLabel: function rowLabel(row) {
+        return row.file_name;
+      },
+      "aria-label": t("Files"),
+      bulkActions: single ? void 0 : [{
+        id: "download",
+        label: t("Download"),
+        onExecute: function onExecute(rows) {
+          return onDownload === null || onDownload === void 0 ? void 0 : onDownload(rows);
+        }
+      }, {
+        id: "move",
+        label: t("Move"),
+        onExecute: function onExecute(rows) {
+          return onMove === null || onMove === void 0 ? void 0 : onMove(rows);
+        }
+      }, {
+        id: "delete",
+        label: t("Delete"),
+        onExecute: function onExecute(rows) {
+          return onDelete === null || onDelete === void 0 ? void 0 : onDelete(rows);
+        }
+      }]
+    })
+  });
+  var filesBody = /* @__PURE__ */_jsx(YStack, {
+    "data-filebrowser-files": true,
+    "data-filebrowser-files-state": fileStatus,
+    flex: 1,
+    minWidth: 0,
+    children: fileStatus === "loading" && view === "grid" ? /* @__PURE__ */_jsx(ImageGrid, {
+      items: [],
+      isLoading: true,
+      tileSize,
+      mediaAspect,
+      renderItem: function renderItem() {
+        return null;
+      }
+    }) : /* @__PURE__ */_jsx(AsyncBoundary, {
+      layout: view === "grid" ? "generic" : "table",
+      loading: fileStatus === "loading",
+      empty: fileStatus === "empty",
+      error: fileStatus === "error" ? filesError !== null && filesError !== void 0 ? filesError : true : null,
+      onRetry: onFilesRetry,
+      emptyTitle: t("No files"),
+      errorTitle: t("Couldn't load files"),
+      compact: true,
+      // LIST: the DataTable paints at height 100% of this chain, so the
+      // boundary needs a DEFINITE height (flex basis 0). Without it the
+      // stack sat at auto/0, the table clipped to its 2px border sum, and
+      // the ready pane painted NOTHING (measured on the Storybook
+      // harness: table h=2 overflow hidden, rows laid out at 70 but
+      // invisible in both schemes). GRID: ImageGrid runs page-flow and
+      // its wall height must propagate UP (basis auto), or tiles bleed
+      // through the frame edge instead of growing it.
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: view === "grid" ? "auto" : 0,
+      children: filesPaneReady
+    })
+  });
+  var foldersBody = /* @__PURE__ */_jsx(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__ */_jsx(AsyncBoundary, {
+      layout: "list",
+      loading: folderStatus === "loading",
+      empty: folderStatus === "empty",
+      error: folderStatus === "error" ? foldersError !== null && foldersError !== void 0 ? foldersError : true : null,
+      onRetry: onFoldersRetry,
+      emptyTitle: t("No folders"),
+      errorTitle: t("Couldn't load folders"),
+      compact: true,
+      flex: 1,
+      // The rail skeleton must live and die inside the rail (LC-20/LC-61);
+      // unbounded it bled past the frame in the measured shot. The frame
+      // keeps LC-72 overflow visible — this clips only the pane.
+      overflow: "hidden",
+      children: /* @__PURE__ */_jsx(TreeView, {
+        nodes: folderNodes,
+        selectedId: currentFolder,
+        defaultExpandedIds: ancestorFolderIds(currentFolder),
+        ariaLabel: t("Folders"),
+        display: "default",
+        showExpansionArrows: true,
+        onNodeSelect: function onNodeSelect(node) {
+          return setFolder(node.id);
+        },
+        emptyMessage: t("No folders")
+      })
+    })
+  });
+  return /* @__PURE__ */_jsxs(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" ?
+    // flexBasis auto, not 0: the panes' content height (the grid wall in
+    // page flow) must reach the frame so it grows past the 280 floor.
+    /* @__PURE__ */
+    _jsxs(XStack, {
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: "auto",
+      alignItems: "stretch",
+      minHeight: 200,
+      children: [foldersBody, filesBody]
+    }) : /* @__PURE__ */_jsx(YStack, {
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: "auto",
+      minHeight: 200,
+      children: filesBody
+    }), bulkBarPlacement === "bottom" ? bulk : null, uploadOpen && onUpload ? /* @__PURE__ */_jsx(YStack, {
+      "data-filebrowser-upload": true,
+      padding: "$4",
+      children: /* @__PURE__ */_jsx(FileUpload, {
+        accept,
+        multiple: true
+      })
+    }) : null]
+  });
+}
+export { FileBrowser };
+//# sourceMappingURL=index.native.js.map