@octaviaflow/core 3.1.0-beta.82 → 3.1.0-beta.83

package/dist/index.js

@@ -14646,6 +14646,7 @@ function FilePicker({
   searchLimit = 200,
   closeOnEsc = true,
   emptyTitle = "This folder is empty",
+  pathLabels,
   name,
   form,
   id,
@@ -14660,6 +14661,8 @@ function FilePicker({
   const value = valueProp ?? valueState;
   const [open, setOpen] = useState33(false);
   const [navPath, setNavPath] = useState33(rootPath);
+  const [trail, setTrail] = useState33([]);
+  const [nameByPath, setNameByPath] = useState33({});
   const [cache, setCache] = useState33({});
   const cacheRef = useRef24(cache);
   cacheRef.current = cache;
@@ -14681,6 +14684,11 @@ function FilePicker({
       try {
         const items2 = await loadChildren(folder);
         setCache((prev) => ({ ...prev, [folder]: { status: "loaded", items: items2 } }));
+        setNameByPath((prev) => {
+          const next = { ...prev };
+          for (const it of items2) next[it.path] = it.name;
+          return next;
+        });
         return items2;
       } catch (e) {
         const err = e?.message || "Failed to load folder.";
@@ -14693,6 +14701,7 @@ function FilePicker({
   const openAt = useCallback23(() => {
     const start = initialPath ?? (value ? parentOf(value, rootPath, separator) ?? rootPath : rootPath);
     setNavPath(start);
+    setTrail([]);
     setQuery("");
     setActiveIndex(-1);
     setOpen(true);
@@ -14777,12 +14786,13 @@ function FilePicker({
     (item) => {
       if (item.disabled) return;
       if (item.isDirectory) {
+        setTrail((t) => navPath === rootPath ? t : [...t, navPath]);
         navigate(item.path);
       } else if (canSelectFiles) {
         commit(item.path, item);
       }
     },
-    [navigate, canSelectFiles, commit]
+    [navigate, canSelectFiles, commit, navPath, rootPath]
   );
   useEffect27(() => {
     if (!open) return;
@@ -14815,11 +14825,30 @@ function FilePicker({
     if (isSearching) return search?.results ?? [];
     return [...rawItems].sort(folderFirstThenName);
   }, [isSearching, search, rawItems]);
+  const displayName = useCallback23(
+    (p) => p === rootPath ? rootLabel : nameByPath[p] ?? pathLabels?.[p] ?? baseName(p, separator),
+    [rootPath, rootLabel, nameByPath, pathLabels, separator]
+  );
   const crumbs = useMemo20(() => {
-    const chain = ancestorsOf(navPath, rootPath, separator);
-    return chain.map((p, i) => ({ path: p, label: i === 0 ? rootLabel : baseName(p, separator) }));
-  }, [navPath, rootPath, rootLabel, separator]);
-  const parent = parentOf(navPath, rootPath, separator);
+    if (navPath === rootPath) return [{ path: rootPath, label: rootLabel }];
+    const derived = ancestorsOf(navPath, rootPath, separator);
+    const derivedValid = derived[derived.length - 1] === navPath;
+    const chain = derivedValid && (derived.length > 2 || trail.length === 0) ? derived : [rootPath, ...trail.filter((p) => p !== rootPath), navPath];
+    return chain.map((p, i) => ({ path: p, label: i === 0 ? rootLabel : displayName(p) }));
+  }, [navPath, rootPath, rootLabel, separator, trail, displayName]);
+  const parent = trail.length ? trail[trail.length - 1] : parentOf(navPath, rootPath, separator);
+  const goUp = useCallback23(() => {
+    if (!parent) return;
+    setTrail((t) => t.length ? t.slice(0, -1) : t);
+    navigate(parent);
+  }, [parent, navigate]);
+  const goToCrumb = useCallback23(
+    (path, index) => {
+      setTrail(crumbs.slice(1, index).map((c) => c.path));
+      navigate(path);
+    },
+    [crumbs, navigate]
+  );
   const onPopoverKeyDown = (e) => {
     const inSearch = e.target?.tagName === "INPUT";
     if (e.key === "ArrowDown") {
@@ -14929,7 +14958,7 @@ function FilePicker({
                       className: "ods-file-picker__up",
                       "aria-label": "Up one folder",
                       disabled: !parent,
-                      onClick: () => parent && navigate(parent),
+                      onClick: goUp,
                       children: /* @__PURE__ */ jsx62(FolderParentIcon2, { size: "sm" })
                     }
                   ),
@@ -14946,7 +14975,7 @@ function FilePicker({
                           ),
                           "aria-current": isLast ? "page" : void 0,
                           disabled: isLast,
-                          onClick: () => !isLast && navigate(c.path),
+                          onClick: () => !isLast && goToCrumb(c.path, i),
                           children: c.label
                         }
                       ),
@@ -14998,7 +15027,7 @@ function FilePicker({
                       {
                         icon: /* @__PURE__ */ jsx62(FolderIcon3, {}),
                         title: isSearching ? "No matches" : emptyTitle,
-                        description: isSearching ? `Nothing under \u201C${baseName(navPath, separator) || rootLabel}\u201D matches \u201C${query.trim()}\u201D.` : void 0
+                        description: isSearching ? `Nothing under \u201C${displayName(navPath) || rootLabel}\u201D matches \u201C${query.trim()}\u201D.` : void 0
                       }
                     ) }) : items.map((it, i) => {
                       const active = i === activeIndex;
@@ -15043,14 +15072,14 @@ function FilePicker({
                 showFooter && /* @__PURE__ */ jsxs61("div", { className: "ods-file-picker__footer", children: [
                   /* @__PURE__ */ jsxs61("span", { className: "ods-file-picker__footer-path", title: navPath, children: [
                     /* @__PURE__ */ jsx62("span", { className: "ods-file-picker__footer-label", children: "Selected" }),
-                    navPath
+                    displayName(navPath)
                   ] }),
                   /* @__PURE__ */ jsxs61(
                     "button",
                     {
                       type: "button",
                       className: "ods-file-picker__use",
-                      onClick: () => commit(navPath, { name: baseName(navPath, separator), path: navPath, isDirectory: true }),
+                      onClick: () => commit(navPath, { name: displayName(navPath), path: navPath, isDirectory: true }),
                       children: [
                         "Use this folder",
                         /* @__PURE__ */ jsx62(ChevronRightIcon6, { size: "sm", "aria-hidden": "true" })