@box/metadata-template-browser 1.16.17 → 1.17.0

package/dist/esm/lib/contexts/use-template-browser-actions.js

@@ -1,246 +1,248 @@
 import Y from "lodash/debounce";
-import { useRef as T, useMemo as $ } from "react";
-import { SEARCH_DEBOUNCE_MS as R, emptyTemplatesResponse as b, PAGE_SIZE as C, emptyNamespacesResponse as v } from "../constants.js";
-import { BrowserActionType as t } from "./reducer.js";
-const P = (c) => new Promise((l, m) => {
-  if (c.aborted) {
-    m(new DOMException("Aborted", "AbortError"));
+import { useRef as C, useMemo as $ } from "react";
+import { SEARCH_DEBOUNCE_MS as R, emptyTemplatesResponse as b, PAGE_SIZE as V, emptyNamespacesResponse as v } from "../constants.js";
+import { BrowserActionType as a } from "./reducer.js";
+const S = (i) => new Promise((n, w) => {
+  if (i.aborted) {
+    w(new DOMException("Aborted", "AbortError"));
     return;
   }
-  c.addEventListener("abort", () => m(new DOMException("Aborted", "AbortError")), {
+  i.addEventListener("abort", () => w(new DOMException("Aborted", "AbortError")), {
     once: !0
   });
-}), N = (c) => {
+}), u = (i) => {
   try {
-    const l = c();
-    l instanceof Promise && l.catch(() => {
+    const n = i();
+    n instanceof Promise && n.catch(() => {
     });
   } catch {
   }
-}, S = (c) => c instanceof Error ? c.message : typeof c == "string" ? c : "An unknown error occurred", E = async (c, l, m, a) => {
+}, L = (i) => i instanceof Error ? i.message : typeof i == "string" ? i : "An unknown error occurred", g = async (i, n, w, o) => {
   try {
-    const w = await l();
-    c.aborted || m(w);
-  } catch (w) {
-    c.aborted || a(w);
+    const M = await n();
+    i.aborted || w(M);
+  } catch (M) {
+    i.aborted || o(M);
   }
 };
-function oe(c, l, m, a, w) {
-  const f = T(null), d = T(null), F = T(Y(async (e) => {
-    d.current?.abort();
-    const r = new AbortController();
-    d.current = r;
+function or(i, n, w, o, M) {
+  const E = C(null), k = C(null), P = C(Y(async (r) => {
+    k.current?.abort();
+    const e = new AbortController();
+    k.current = e;
     const {
-      signal: o
-    } = r;
-    N(() => l.current.onSearchChange?.(e)), await E(o, () => B(e, o), (n) => a({
-      type: t.SearchLoaded,
-      results: n.entries,
-      nextMarker: n.next_marker
-    }), (n) => a({
-      type: t.SearchError,
-      error: S(n)
-    }));
+      signal: s
+    } = e;
+    u(() => n.current.onSearchChange?.(r)), u(() => n.current.onNewViewLoading?.(!0)), await g(s, () => B(r, s), (t) => o({
+      type: a.SearchLoaded,
+      results: t.entries,
+      nextMarker: t.next_marker
+    }), (t) => o({
+      type: a.SearchError,
+      error: L(t)
+    })), s.aborted || u(() => n.current.onNewViewLoading?.(!1));
   }, R)), h = () => {
-    f.current?.abort();
-    const e = new AbortController();
-    return f.current = e, e.signal;
+    E.current?.abort();
+    const r = new AbortController();
+    return E.current = r, r.signal;
   }, G = () => {
-    f.current?.abort(), f.current = null;
-  }, Q = () => {
-    d.current?.abort();
-    const e = new AbortController();
-    return d.current = e, e.signal;
+    E.current?.abort(), E.current = null;
+  }, F = () => {
+    k.current?.abort();
+    const r = new AbortController();
+    return k.current = r, r.signal;
   }, H = () => {
-    d.current?.abort(), d.current = null;
-  }, I = (e, r, o) => {
-    const n = c.current.getNamespaces;
-    return n ? Promise.race([n(e, {
-      limit: C,
-      marker: o,
-      signal: r
-    }), P(r)]) : Promise.resolve(v);
-  }, g = (e, r, o) => {
-    const n = c.current.getTemplates;
-    return n ? Promise.race([n(e, {
-      limit: C,
-      marker: o,
-      signal: r
-    }), P(r)]) : Promise.resolve(b);
-  }, B = (e, r, o) => {
-    const n = c.current.getSearchResults;
-    return n ? Promise.race([n(e, {
-      limit: C,
-      marker: o,
-      signal: r
-    }), P(r)]) : Promise.resolve(b);
-  }, U = (e, r) => {
-    a({
-      type: e,
-      error: S(r)
+    k.current?.abort(), k.current = null;
+  }, Q = (r, e, s) => {
+    const t = i.current.getNamespaces;
+    return t ? Promise.race([t(r, {
+      limit: V,
+      marker: s,
+      signal: e
+    }), S(e)]) : Promise.resolve(v);
+  }, f = (r, e, s) => {
+    const t = i.current.getTemplates;
+    return t ? Promise.race([t(r, {
+      limit: V,
+      marker: s,
+      signal: e
+    }), S(e)]) : Promise.resolve(b);
+  }, B = (r, e, s) => {
+    const t = i.current.getSearchResults;
+    return t ? Promise.race([t(r, {
+      limit: V,
+      marker: s,
+      signal: e
+    }), S(e)]) : Promise.resolve(b);
+  }, U = (r, e) => {
+    o({
+      type: r,
+      error: L(e)
     });
-  }, L = async (e, r, o) => {
-    let n = !1;
-    return await E(r, async () => {
-      const i = await I(e, r), M = i.next_marker ? b : await g(e, r);
-      return [i, M];
-    }, ([i, M]) => {
-      a({
-        type: t.BrowseLoaded,
-        namespaces: i.entries,
-        namespaceNextMarker: i.next_marker,
-        templates: M.entries,
-        templateNextMarker: M.next_marker
-      }), n = !0;
-    }, (i) => U(o, i)), n;
+  }, _ = async (r, e, s) => {
+    let t = !1;
+    return await g(e, async () => {
+      const m = await Q(r, e), x = m.next_marker ? b : await f(r, e);
+      return [m, x];
+    }, ([m, x]) => {
+      o({
+        type: a.BrowseLoaded,
+        namespaces: m.entries,
+        namespaceNextMarker: m.next_marker,
+        templates: x.entries,
+        templateNextMarker: x.next_marker
+      }), t = !0;
+    }, (m) => U(s, m)), t;
   }, Z = async () => {
-    const e = h(), {
-      namespaceFQN: r
-    } = m.current;
-    a({
-      type: t.BrowseFetchStart
-    }), await L(r, e, t.InitialLoadError);
-  }, j = async (e) => {
-    const r = h(), o = m.current;
-    w.current.set(o.namespaceFQN, {
-      namespaces: o.namespaces,
-      templates: o.templates,
-      namespaceNextMarker: o.namespaceNextMarker,
-      templateNextMarker: o.templateNextMarker,
-      isNamespacesExhausted: o.isNamespacesExhausted
-    }), a({
-      type: t.NavigateTo,
-      namespace: e
-    }), a({
-      type: t.BrowseFetchStart
-    }), await L(e.id, r, t.BrowseError) && N(() => l.current.onNamespaceChange?.(e.id));
-  }, z = (e) => {
+    const r = h(), {
+      namespaceFQN: e
+    } = w.current;
+    o({
+      type: a.BrowseFetchStart
+    }), u(() => n.current.onNewViewLoading?.(!0)), await _(e, r, a.InitialLoadError), r.aborted || u(() => n.current.onNewViewLoading?.(!1));
+  }, j = async (r) => {
+    const e = h(), s = w.current;
+    M.current.set(s.namespaceFQN, {
+      namespaces: s.namespaces,
+      templates: s.templates,
+      namespaceNextMarker: s.namespaceNextMarker,
+      templateNextMarker: s.templateNextMarker,
+      isNamespacesExhausted: s.isNamespacesExhausted
+    }), o({
+      type: a.NavigateTo,
+      namespace: r
+    }), o({
+      type: a.BrowseFetchStart
+    }), u(() => n.current.onNewViewLoading?.(!0));
+    const t = await _(r.id, e, a.BrowseError);
+    e.aborted || (u(() => n.current.onNewViewLoading?.(!1)), t && u(() => n.current.onNamespaceChange?.(r.id)));
+  }, z = (r) => {
     G();
-    const r = w.current.get(e);
-    r && (a({
-      type: t.NavigateBack,
-      fqn: e,
-      cached: r
-    }), N(() => l.current.onNamespaceChange?.(e)));
-  }, J = (e) => {
-    if (a({
-      type: t.SearchValueChange,
-      value: e
-    }), e.trim() === "") {
-      F.current.cancel(), H(), a({
-        type: t.SearchClear
-      });
+    const e = M.current.get(r);
+    e && (o({
+      type: a.NavigateBack,
+      fqn: r,
+      cached: e
+    }), u(() => n.current.onNamespaceChange?.(r)));
+  }, J = (r) => {
+    if (o({
+      type: a.SearchValueChange,
+      value: r
+    }), r.trim() === "") {
+      P.current.cancel(), H(), o({
+        type: a.SearchClear
+      }), u(() => n.current.onSearchChange?.("")), u(() => n.current.onNewViewLoading?.(!1));
       return;
     }
-    a({
-      type: t.SearchFetchStart,
-      query: e.trim()
-    }), F.current(e.trim());
-  }, O = async () => {
+    o({
+      type: a.SearchFetchStart,
+      query: r.trim()
+    }), P.current(r.trim());
+  }, I = async () => {
     const {
-      namespaceFQN: e,
-      searchQuery: r,
-      searchNextMarker: o,
-      namespaceNextMarker: n,
-      templateNextMarker: i,
-      isNamespacesExhausted: M
-    } = m.current, k = !!r, x = k && !!o, D = !k && !M && !!n, q = !k && !!i;
-    if (!(x || D || q))
+      namespaceFQN: r,
+      searchQuery: e,
+      searchNextMarker: s,
+      namespaceNextMarker: t,
+      templateNextMarker: m,
+      isNamespacesExhausted: x
+    } = w.current, d = !!e, N = d && !!s, O = !d && !x && !!t, D = !d && !!m;
+    if (!(N || O || D))
       return;
-    a({
-      type: t.LoadMoreStart
+    o({
+      type: a.LoadMoreStart
     });
-    const _ = (u) => {
-      a({
-        type: t.LoadMoreError,
-        error: S(u)
+    const A = (l) => {
+      o({
+        type: a.LoadMoreError,
+        error: L(l)
       });
-    }, V = (u) => {
-      const s = w.current.get(e);
-      s && u(s);
+    }, q = (l) => {
+      const c = M.current.get(r);
+      c && l(c);
     };
-    if (x) {
-      const u = Q();
-      await E(u, () => B(r, u, o), (s) => a({
-        type: t.LoadMoreSearchLoaded,
-        entries: s.entries,
-        nextMarker: s.next_marker
-      }), _);
+    if (N) {
+      const l = F();
+      await g(l, () => B(e, l, s), (c) => o({
+        type: a.LoadMoreSearchLoaded,
+        entries: c.entries,
+        nextMarker: c.next_marker
+      }), A);
       return;
     }
-    if (D) {
-      const u = h();
-      await E(u, async () => {
-        const s = await I(e, u, n), p = s.next_marker ? b : await g(e, u);
-        return [s, p];
-      }, ([s, p]) => {
-        const A = !s.next_marker;
-        a({
-          type: t.LoadMoreNamespacesLoaded,
-          entries: s.entries,
-          nextMarker: s.next_marker,
-          ...A && {
+    if (O) {
+      const l = h();
+      await g(l, async () => {
+        const c = await Q(r, l, t), p = c.next_marker ? b : await f(r, l);
+        return [c, p];
+      }, ([c, p]) => {
+        const T = !c.next_marker;
+        o({
+          type: a.LoadMoreNamespacesLoaded,
+          entries: c.entries,
+          nextMarker: c.next_marker,
+          ...T && {
             templates: p.entries,
             templateNextMarker: p.next_marker
           }
-        }), V((y) => {
-          y.namespaces = [...y.namespaces, ...s.entries], y.namespaceNextMarker = s.next_marker, y.isNamespacesExhausted = A, A && (y.templates = p.entries, y.templateNextMarker = p.next_marker);
+        }), q((y) => {
+          y.namespaces = [...y.namespaces, ...c.entries], y.namespaceNextMarker = c.next_marker, y.isNamespacesExhausted = T, T && (y.templates = p.entries, y.templateNextMarker = p.next_marker);
         });
-      }, _);
+      }, A);
       return;
     }
-    if (q) {
-      const u = h();
-      await E(u, () => g(e, u, i), (s) => {
-        a({
-          type: t.LoadMoreTemplatesLoaded,
-          entries: s.entries,
-          nextMarker: s.next_marker
-        }), V((p) => {
-          p.templates = [...p.templates, ...s.entries], p.templateNextMarker = s.next_marker;
+    if (D) {
+      const l = h();
+      await g(l, () => f(r, l, m), (c) => {
+        o({
+          type: a.LoadMoreTemplatesLoaded,
+          entries: c.entries,
+          nextMarker: c.next_marker
+        }), q((p) => {
+          p.templates = [...p.templates, ...c.entries], p.templateNextMarker = c.next_marker;
         });
-      }, _);
+      }, A);
     }
-  }, K = async (e) => {
-    m.current.selectedTemplateId !== e.id && (a({
-      type: t.TemplateSelect,
-      template: e
-    }), N(() => l.current.onTemplateSelect?.(e)));
-  }, W = (e) => {
-    N(() => l.current.onTemplateEdit?.(e));
+  }, K = async (r) => {
+    w.current.selectedTemplateId !== r.id && (o({
+      type: a.TemplateSelect,
+      template: r
+    }), u(() => n.current.onTemplateSelect?.(r)));
+  }, W = (r) => {
+    u(() => n.current.onTemplateEdit?.(r));
   }, X = async () => {
     const {
-      searchError: e,
-      searchQuery: r,
-      loadMoreError: o,
-      initialLoadError: n,
-      browseError: i,
-      namespaceFQN: M
-    } = m.current;
-    if (e) {
-      const k = Q();
-      a({
-        type: t.SearchFetchStart,
-        query: r
-      }), await E(k, () => B(r, k), (x) => a({
-        type: t.SearchLoaded,
-        results: x.entries,
-        nextMarker: x.next_marker
-      }), (x) => a({
-        type: t.SearchError,
-        error: S(x)
-      }));
+      searchError: r,
+      searchQuery: e,
+      loadMoreError: s,
+      initialLoadError: t,
+      browseError: m,
+      namespaceFQN: x
+    } = w.current;
+    if (r) {
+      const d = F();
+      o({
+        type: a.SearchFetchStart,
+        query: e
+      }), u(() => n.current.onNewViewLoading?.(!0)), await g(d, () => B(e, d), (N) => o({
+        type: a.SearchLoaded,
+        results: N.entries,
+        nextMarker: N.next_marker
+      }), (N) => o({
+        type: a.SearchError,
+        error: L(N)
+      })), d.aborted || u(() => n.current.onNewViewLoading?.(!1));
       return;
     }
-    if (o) {
-      await O();
+    if (s) {
+      await I();
       return;
     }
-    if (n || i) {
-      const k = h(), x = n ? t.InitialLoadError : t.BrowseError;
-      a({
-        type: t.BrowseFetchStart
-      }), await L(M, k, x);
+    if (t || m) {
+      const d = h(), N = t ? a.InitialLoadError : a.BrowseError;
+      o({
+        type: a.BrowseFetchStart
+      }), u(() => n.current.onNewViewLoading?.(!0)), await _(x, d, N), d.aborted || u(() => n.current.onNewViewLoading?.(!1));
     }
   };
   return $(
@@ -249,7 +251,7 @@ function oe(c, l, m, a, w) {
       navigateTo: j,
       navigateBack: z,
       setSearchValue: J,
-      loadMore: O,
+      loadMore: I,
       selectTemplate: K,
       editTemplate: W,
       retry: X
@@ -259,5 +261,5 @@ function oe(c, l, m, a, w) {
   );
 }
 export {
-  oe as useTemplateBrowserActions
+  or as useTemplateBrowserActions
 };

package/dist/types/lib/types.d.ts

@@ -52,6 +52,12 @@ export interface EventService {
     onSearchChange?: (query: string) => Promise<void>;
     onTemplateSelect?: (template: MetadataTemplate) => Promise<void>;
     onTemplateEdit?: (templateId: string) => void;
+    /**
+     * Called when an **initial-load, navigation, or search** fetch starts (`true`) or
+     * settles (`false`). Not called during `loadMore` pagination — that operation is
+     * tracked separately by the `isFetchingMore` flag in `BrowseStateContextValue`.
+     */
+    onNewViewLoading?: (isFetching: boolean) => void;
 }
 export interface BreadcrumbEntry {
     fqn: string;
@@ -98,7 +104,11 @@ export interface BrowserActionsContextValue {
     navigateBack: (fqn: string) => void;
     /** Updates the search query; an empty string exits search mode and returns to browse. */
     setSearchValue: (value: string) => void;
-    /** Fetches the next page of results for the current browse level or search query. */
+    /**
+     * Fetches the next page of results for the current browse level or search query.
+     * Progress is tracked by `isFetchingMore` in `BrowseStateContextValue`;
+     * `onNewViewLoading` is intentionally not called during pagination.
+     */
     loadMore: () => Promise<void>;
     /** Notifies the event service that the user has selected a template. */
     selectTemplate: (template: MetadataTemplate) => Promise<void>;

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@box/metadata-template-browser",
-    "version": "1.16.17",
+    "version": "1.17.0",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
-        "@box/blueprint-web": "^14.1.0",
-        "@box/blueprint-web-assets": "^4.111.18",
+        "@box/blueprint-web": "^14.3.0",
+        "@box/blueprint-web-assets": "^4.111.20",
         "lodash": "^4.17.15",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
@@ -12,10 +12,10 @@
         "react-aria-components": "1.16.0"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^14.1.0",
-        "@box/blueprint-web-assets": "^4.111.18",
+        "@box/blueprint-web": "^14.3.0",
+        "@box/blueprint-web-assets": "^4.111.20",
         "@box/eslint-plugin-blueprint": "1.1.9",
-        "@box/storybook-utils": "0.17.18",
+        "@box/storybook-utils": "0.17.20",
         "react-intl": "^6.4.2"
     },
     "publishConfig": {