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

package/dist/components/FilePicker/FilePicker.d.ts

@@ -50,6 +50,11 @@ export interface FilePickerProps {
     closeOnEsc?: boolean;
     /** Empty-folder copy. */
     emptyTitle?: string;
+    /** Display names for opaque paths. Some backends use ids as "paths"
+     *  (cloud drives) — seed this with known `path → name` pairs (e.g. a saved
+     *  value's display name) so crumbs and the folder footer never show raw
+     *  ids. Names discovered while browsing are learned automatically. */
+    pathLabels?: Record<string, string>;
     /** Hidden input name for form submission. */
     name?: string;
     form?: string;
@@ -57,7 +62,7 @@ export interface FilePickerProps {
     className?: string;
     "aria-label"?: string;
 }
-export declare function FilePicker({ value: valueProp, defaultValue, onChange, loadChildren, rootPath, rootLabel, separator, selectMode, initialPath, placeholder, disabled, size, error, helperText, label, required, clearable, searchable, onSearch, searchDepth, searchLimit, closeOnEsc, emptyTitle, name, form, id, className, "aria-label": ariaLabel, }: FilePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilePicker({ value: valueProp, defaultValue, onChange, loadChildren, rootPath, rootLabel, separator, selectMode, initialPath, placeholder, disabled, size, error, helperText, label, required, clearable, searchable, onSearch, searchDepth, searchLimit, closeOnEsc, emptyTitle, pathLabels, name, form, id, className, "aria-label": ariaLabel, }: FilePickerProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace FilePicker {
     var displayName: string;
 }

package/dist/components/FilePicker/FilePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker.d.ts","sourceRoot":"","sources":["../../../src/components/FilePicker/FilePicker.tsx"],"names":[],"mappings":"AAeA,OAAO,EAEL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAgBhD,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC9D,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhD,MAAM,WAAW,eAAe;IAC9B,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IACvD,6DAA6D;IAC7D,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC;IACxD,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,kFAAkF;IAClF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,mBAAmB;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;+DAC2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;oCAEgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC;IACtD,4EAA4E;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAoDD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,QAAc,EACd,SAAkB,EAClB,SAAe,EACf,UAAmB,EACnB,WAAW,EACX,WAA8B,EAC9B,QAAgB,EAChB,IAAW,EACX,KAAK,EACL,UAAU,EACV,KAAK,EACL,QAAgB,EAChB,SAAgB,EAChB,UAAkB,EAClB,QAAQ,EACR,WAAe,EACf,WAAiB,EACjB,UAAiB,EACjB,UAAmC,EACnC,IAAI,EACJ,IAAI,EACJ,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACxB,EAAE,eAAe,2CAwejB;yBArgBe,UAAU"}
+{"version":3,"file":"FilePicker.d.ts","sourceRoot":"","sources":["../../../src/components/FilePicker/FilePicker.tsx"],"names":[],"mappings":"AAeA,OAAO,EAEL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAgBhD,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC9D,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhD,MAAM,WAAW,eAAe;IAC9B,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IACvD,6DAA6D;IAC7D,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC;IACxD,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,kFAAkF;IAClF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,mBAAmB;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;+DAC2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;oCAEgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC;IACtD,4EAA4E;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;0EAGsE;IACtE,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAoDD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,QAAc,EACd,SAAkB,EAClB,SAAe,EACf,UAAmB,EACnB,WAAW,EACX,WAA8B,EAC9B,QAAgB,EAChB,IAAW,EACX,KAAK,EACL,UAAU,EACV,KAAK,EACL,QAAgB,EAChB,SAAgB,EAChB,UAAkB,EAClB,QAAQ,EACR,WAAe,EACf,WAAiB,EACjB,UAAiB,EACjB,UAAmC,EACnC,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACxB,EAAE,eAAe,2CAuhBjB;yBArjBe,UAAU"}

package/dist/index.cjs

@@ -19889,6 +19889,7 @@ function FilePicker({
   searchLimit = 200,
   closeOnEsc = true,
   emptyTitle = "This folder is empty",
+  pathLabels,
   name,
   form,
   id,
@@ -19903,6 +19904,8 @@ function FilePicker({
   const value = valueProp ?? valueState;
   const [open, setOpen] = (0, import_react97.useState)(false);
   const [navPath, setNavPath] = (0, import_react97.useState)(rootPath);
+  const [trail, setTrail] = (0, import_react97.useState)([]);
+  const [nameByPath, setNameByPath] = (0, import_react97.useState)({});
   const [cache, setCache] = (0, import_react97.useState)({});
   const cacheRef = (0, import_react97.useRef)(cache);
   cacheRef.current = cache;
@@ -19924,6 +19927,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.";
@@ -19936,6 +19944,7 @@ function FilePicker({
   const openAt = (0, import_react97.useCallback)(() => {
     const start = initialPath ?? (value ? parentOf(value, rootPath, separator) ?? rootPath : rootPath);
     setNavPath(start);
+    setTrail([]);
     setQuery("");
     setActiveIndex(-1);
     setOpen(true);
@@ -20020,12 +20029,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]
   );
   (0, import_react97.useEffect)(() => {
     if (!open) return;
@@ -20058,11 +20068,30 @@ function FilePicker({
     if (isSearching) return search?.results ?? [];
     return [...rawItems].sort(folderFirstThenName);
   }, [isSearching, search, rawItems]);
+  const displayName = (0, import_react97.useCallback)(
+    (p) => p === rootPath ? rootLabel : nameByPath[p] ?? pathLabels?.[p] ?? baseName(p, separator),
+    [rootPath, rootLabel, nameByPath, pathLabels, separator]
+  );
   const crumbs = (0, import_react97.useMemo)(() => {
-    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 = (0, import_react97.useCallback)(() => {
+    if (!parent) return;
+    setTrail((t) => t.length ? t.slice(0, -1) : t);
+    navigate(parent);
+  }, [parent, navigate]);
+  const goToCrumb = (0, import_react97.useCallback)(
+    (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") {
@@ -20172,7 +20201,7 @@ function FilePicker({
                       className: "ods-file-picker__up",
                       "aria-label": "Up one folder",
                       disabled: !parent,
-                      onClick: () => parent && navigate(parent),
+                      onClick: goUp,
                       children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_icons36.FolderParentIcon, { size: "sm" })
                     }
                   ),
@@ -20189,7 +20218,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
                         }
                       ),
@@ -20241,7 +20270,7 @@ function FilePicker({
                       {
                         icon: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_icons36.FolderIcon, {}),
                         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;
@@ -20286,14 +20315,14 @@ function FilePicker({
                 showFooter && /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "ods-file-picker__footer", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("span", { className: "ods-file-picker__footer-path", title: navPath, children: [
                     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "ods-file-picker__footer-label", children: "Selected" }),
-                    navPath
+                    displayName(navPath)
                   ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
                     "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__ */ (0, import_jsx_runtime82.jsx)(import_icons36.ChevronRightIcon, { size: "sm", "aria-hidden": "true" })