@box/metadata-template-browser 1.17.32 → 1.19.0

package/dist/chunks/metadata-template-browser-list-box.js

@@ -1,57 +1,65 @@
-import { useBrowseState as e, useBrowserActions as t, useConsumerState as n, useSearchState as r, useSelectionState as i } from "../esm/lib/contexts/hooks.js";
-import { t as a } from "./loader-skeleton.js";
-import { BrowseList as o } from "../esm/lib/components/browse-list/browse-list.js";
-import { SearchList as s } from "../esm/lib/components/search-list/search-list.js";
-import { useIsInitialBrowseLoading as c } from "../esm/lib/hooks/use-is-initial-browse-loading.js";
-import l from "clsx";
-import { useCallback as u, useMemo as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import '../styles/metadata-template-browser-list-box.css';var m = {
+import { useBrowseState as e, useBrowserActions as t, useConsumerState as n, useNavigationState as r, useSearchState as i, useSelectionState as a } from "../esm/lib/contexts/hooks.js";
+import { t as o } from "./loader-skeleton.js";
+import { BrowseList as s } from "../esm/lib/components/browse-list/browse-list.js";
+import { SearchList as c } from "../esm/lib/components/search-list/search-list.js";
+import { useIsInitialBrowseLoading as l } from "../esm/lib/hooks/use-is-initial-browse-loading.js";
+import { useFocusFirstRowAfterNavigation as u } from "../esm/lib/hooks/use-focus-first-row-after-navigation.js";
+import d from "clsx";
+import { useCallback as f, useMemo as p, useRef as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import '../styles/metadata-template-browser-list-box.css';var _ = {
 	listBox: "_listBox_1qbmg_1",
 	browseWrapper: "_browseWrapper_1qbmg_9",
 	hidden: "_hidden_1qbmg_16"
 };
-function h() {
-	let { isDisabled: h } = n(), g = c(), { searchValue: _, searchResults: v } = r(), { namespaces: y, templates: b } = e(), { selectedTemplateId: x } = i(), { selectTemplate: S, navigateTo: C } = t(), w = _.length > 0, T = u((e) => {
-		if (h) return;
+function v() {
+	let { isDisabled: v } = n(), y = l(), { searchValue: b, searchResults: x } = i(), { namespaces: S, templates: C, isFetching: w } = e(), { selectedTemplateId: T } = a(), { selectTemplate: E, navigateTo: D } = t(), { path: O } = r(), k = b.length > 0, A = m(null);
+	u({
+		containerRef: A,
+		path: O,
+		isFetching: w
+	});
+	let j = f((e) => {
+		if (v) return;
 		let t = String(e);
-		if (w) {
-			let e = v.find((e) => e.id === t);
-			e && S(e);
+		if (k) {
+			let e = x.find((e) => e.id === t);
+			e && E(e);
 			return;
 		}
-		let n = b.find((e) => e.id === t);
+		let n = C.find((e) => e.id === t);
 		if (n) {
-			S(n);
+			E(n);
 			return;
 		}
-		let r = y.find((e) => e.id === t);
-		r && C(r);
+		let r = S.find((e) => e.id === t);
+		r && D(r);
 	}, [
-		h,
-		w,
 		v,
-		b,
-		y,
+		k,
+		x,
+		C,
 		S,
-		C
-	]), E = d(() => x ? new Set([x]) : /* @__PURE__ */ new Set(), [x]);
-	return g ? /* @__PURE__ */ f("div", {
-		className: m.listBox,
-		children: /* @__PURE__ */ f(a, {})
-	}) : /* @__PURE__ */ p("div", {
-		className: m.listBox,
-		children: [/* @__PURE__ */ f("div", {
-			"aria-hidden": w,
-			className: l(m.browseWrapper, w && m.hidden),
-			children: /* @__PURE__ */ f(o, {
-				onAction: T,
-				selectedKeys: E
+		E,
+		D
+	]), M = p(() => T ? new Set([T]) : /* @__PURE__ */ new Set(), [T]);
+	return y ? /* @__PURE__ */ h("div", {
+		className: _.listBox,
+		children: /* @__PURE__ */ h(o, {})
+	}) : /* @__PURE__ */ g("div", {
+		className: _.listBox,
+		children: [/* @__PURE__ */ h("div", {
+			ref: A,
+			"aria-hidden": k,
+			className: d(_.browseWrapper, k && _.hidden),
+			children: /* @__PURE__ */ h(s, {
+				onAction: j,
+				selectedKeys: M
 			})
-		}), w && /* @__PURE__ */ f(s, {
-			onAction: T,
-			selectedKeys: E
+		}), k && /* @__PURE__ */ h(c, {
+			onAction: j,
+			selectedKeys: M
 		})]
 	});
 }
-export { h as t };
+export { v as t };

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

@@ -13,7 +13,7 @@ var o = (e) => new Promise((t, n) => {
 		let t = e();
 		t instanceof Promise && t.catch(() => void 0);
 	} catch {}
-}, c = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "An unknown error occurred", l = async (e, t, n, r) => {
+}, c = (e) => e.trim().replaceAll(/\s+/g, " "), l = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "An unknown error occurred", u = async (e, t, n, r) => {
 	try {
 		let r = await t();
 		e.aborted || n(r);
@@ -21,139 +21,141 @@ var o = (e) => new Promise((t, n) => {
 		e.aborted || r(t);
 	}
 };
-function u(u, d, f, p, m) {
-	let h = i(null), g = i(null), _ = i(a(async (t) => {
-		g.current?.abort();
+function d(d, f, p, m, h) {
+	let g = i(null), _ = i(null), v = i(a(async (t) => {
+		_.current?.abort();
 		let n = new AbortController();
-		g.current = n;
+		_.current = n;
 		let { signal: r } = n;
-		s(() => d.current.onSearchChange?.(t)), s(() => d.current.onNewViewLoading?.(!0)), await l(r, () => w(t, r), (t) => p({
+		s(() => f.current.onSearchChange?.(t)), s(() => f.current.onNewViewLoading?.(!0)), await u(r, () => T(t, r), (t) => m({
 			type: e.SearchLoaded,
 			results: t.entries,
 			nextMarker: t.next_marker
-		}), (t) => p({
+		}), (t) => m({
 			type: e.SearchError,
-			error: c(t)
-		})), r.aborted || s(() => d.current.onNewViewLoading?.(!1));
-	}, 500)), v = () => {
-		h.current?.abort();
-		let e = new AbortController();
-		return h.current = e, e.signal;
-	}, y = () => {
-		h.current?.abort(), h.current = null;
-	}, b = () => {
+			error: l(t)
+		})), r.aborted || s(() => f.current.onNewViewLoading?.(!1));
+	}, 500)), y = () => {
 		g.current?.abort();
 		let e = new AbortController();
 		return g.current = e, e.signal;
-	}, x = () => {
+	}, b = () => {
 		g.current?.abort(), g.current = null;
-	}, S = (e, n, r) => {
-		let i = u.current.getNamespaces;
+	}, x = () => {
+		_.current?.abort();
+		let e = new AbortController();
+		return _.current = e, e.signal;
+	}, S = () => {
+		_.current?.abort(), _.current = null;
+	}, C = (e, n, r) => {
+		let i = d.current.getNamespaces;
 		return i ? Promise.race([i(e, {
 			limit: 200,
 			marker: r,
 			signal: n
 		}), o(n)]) : Promise.resolve(t);
-	}, C = (e, t, r) => {
-		let i = u.current.getTemplates;
+	}, w = (e, t, r) => {
+		let i = d.current.getTemplates;
 		return i ? Promise.race([i(e, {
 			limit: 200,
 			marker: r,
 			signal: t
 		}), o(t)]) : Promise.resolve(n);
-	}, w = (e, t, r) => {
-		let i = u.current.getSearchResults;
+	}, T = (e, t, r) => {
+		let i = d.current.getSearchResults;
 		return i ? Promise.race([i(e, {
 			limit: 200,
 			marker: r,
 			signal: t
 		}), o(t)]) : Promise.resolve(n);
-	}, T = (e, t) => {
-		p({
+	}, E = (e, t) => {
+		m({
 			type: e,
-			error: c(t)
+			error: l(t)
 		});
-	}, E = async (t, r, i) => {
+	}, D = async (t, r, i) => {
 		let a = !1;
-		return await l(r, async () => {
-			let e = await S(t, r);
-			return [e, e.next_marker ? n : await C(t, r)];
+		return await u(r, async () => {
+			let e = await C(t, r);
+			return [e, e.next_marker ? n : await w(t, r)];
 		}, ([t, n]) => {
-			p({
+			m({
 				type: e.BrowseLoaded,
 				namespaces: t.entries,
 				namespaceNextMarker: t.next_marker,
 				templates: n.entries,
 				templateNextMarker: n.next_marker
 			}), a = !0;
-		}, (e) => T(i, e)), a;
-	}, D = async () => {
-		let t = v(), { namespaceFQN: n } = f.current;
-		p({ type: e.BrowseFetchStart }), s(() => d.current.onNewViewLoading?.(!0)), await E(n, t, e.InitialLoadError), t.aborted || s(() => d.current.onNewViewLoading?.(!1));
-	}, O = async (t) => {
-		let n = v(), r = f.current;
-		m.current.set(r.namespaceFQN, {
+		}, (e) => E(i, e)), a;
+	}, O = async () => {
+		let t = y(), { namespaceFQN: n } = p.current;
+		m({ type: e.BrowseFetchStart }), s(() => f.current.onNewViewLoading?.(!0)), await D(n, t, e.InitialLoadError), t.aborted || s(() => f.current.onNewViewLoading?.(!1));
+	}, k = async (t) => {
+		let n = y(), r = p.current;
+		h.current.set(r.namespaceFQN, {
 			namespaces: r.namespaces,
 			templates: r.templates,
 			namespaceNextMarker: r.namespaceNextMarker,
 			templateNextMarker: r.templateNextMarker,
 			isNamespacesExhausted: r.isNamespacesExhausted
-		}), p({
+		}), m({
 			type: e.NavigateTo,
 			namespace: t
-		}), p({ type: e.BrowseFetchStart }), s(() => d.current.onNewViewLoading?.(!0));
-		let i = await E(t.id, n, e.BrowseError);
-		n.aborted || (s(() => d.current.onNewViewLoading?.(!1)), i && s(() => d.current.onNamespaceChange?.(t.id)));
-	}, k = (t) => {
-		y();
-		let n = m.current.get(t);
-		n && (p({
+		}), m({ type: e.BrowseFetchStart }), s(() => f.current.onNewViewLoading?.(!0));
+		let i = await D(t.id, n, e.BrowseError);
+		n.aborted || (s(() => f.current.onNewViewLoading?.(!1)), i && s(() => f.current.onNamespaceChange?.(t.id)));
+	}, A = (t) => {
+		b();
+		let n = h.current.get(t);
+		n && (m({
 			type: e.NavigateBack,
 			fqn: t,
 			cached: n
-		}), s(() => d.current.onNamespaceChange?.(t)));
-	}, A = (t) => {
-		if (p({
+		}), s(() => f.current.onNamespaceChange?.(t)));
+	}, j = (t) => {
+		m({
 			type: e.SearchValueChange,
 			value: t
-		}), t.trim() === "") {
-			_.current.cancel(), x(), p({ type: e.SearchClear }), s(() => d.current.onSearchChange?.("")), s(() => d.current.onNewViewLoading?.(!1));
+		});
+		let n = c(t);
+		if (n === "") {
+			v.current.cancel(), S(), m({ type: e.SearchClear }), s(() => f.current.onSearchChange?.("")), s(() => f.current.onNewViewLoading?.(!1));
 			return;
 		}
-		p({
+		m({
 			type: e.SearchFetchStart,
-			query: t.trim()
-		}), _.current(t.trim());
-	}, j = async () => {
-		let { namespaceFQN: t, searchQuery: r, searchNextMarker: i, namespaceNextMarker: a, templateNextMarker: o, isNamespacesExhausted: s } = f.current, u = !!r, d = u && !!i, h = !u && !s && !!a, g = !u && !!o;
-		if (!(d || h || g)) return;
-		p({ type: e.LoadMoreStart });
+			query: n
+		}), v.current(n);
+	}, M = async () => {
+		let { namespaceFQN: t, searchQuery: r, searchNextMarker: i, namespaceNextMarker: a, templateNextMarker: o, isNamespacesExhausted: s } = p.current, c = !!r, d = c && !!i, f = !c && !s && !!a, g = !c && !!o;
+		if (!(d || f || g)) return;
+		m({ type: e.LoadMoreStart });
 		let _ = (t) => {
-			p({
+			m({
 				type: e.LoadMoreError,
-				error: c(t)
+				error: l(t)
 			});
-		}, y = (e) => {
-			let n = m.current.get(t);
+		}, v = (e) => {
+			let n = h.current.get(t);
 			n && e(n);
 		};
 		if (d) {
-			let t = b();
-			await l(t, () => w(r, t, i), (t) => p({
+			let t = x();
+			await u(t, () => T(r, t, i), (t) => m({
 				type: e.LoadMoreSearchLoaded,
 				entries: t.entries,
 				nextMarker: t.next_marker
 			}), _);
 			return;
 		}
-		if (h) {
-			let r = v();
-			await l(r, async () => {
-				let e = await S(t, r, a);
-				return [e, e.next_marker ? n : await C(t, r)];
+		if (f) {
+			let r = y();
+			await u(r, async () => {
+				let e = await C(t, r, a);
+				return [e, e.next_marker ? n : await w(t, r)];
 			}, ([t, n]) => {
 				let r = !t.next_marker;
-				p({
+				m({
 					type: e.LoadMoreNamespacesLoaded,
 					entries: t.entries,
 					nextMarker: t.next_marker,
@@ -161,66 +163,66 @@ function u(u, d, f, p, m) {
 						templates: n.entries,
 						templateNextMarker: n.next_marker
 					}
-				}), y((e) => {
+				}), v((e) => {
 					e.namespaces = [...e.namespaces, ...t.entries], e.namespaceNextMarker = t.next_marker, e.isNamespacesExhausted = r, r && (e.templates = n.entries, e.templateNextMarker = n.next_marker);
 				});
 			}, _);
 			return;
 		}
 		if (g) {
-			let n = v();
-			await l(n, () => C(t, n, o), (t) => {
-				p({
+			let n = y();
+			await u(n, () => w(t, n, o), (t) => {
+				m({
 					type: e.LoadMoreTemplatesLoaded,
 					entries: t.entries,
 					nextMarker: t.next_marker
-				}), y((e) => {
+				}), v((e) => {
 					e.templates = [...e.templates, ...t.entries], e.templateNextMarker = t.next_marker;
 				});
 			}, _);
 		}
-	}, M = async (t) => {
-		f.current.selectedTemplateId !== t.id && (p({
+	}, N = async (t) => {
+		p.current.selectedTemplateId !== t.id && (m({
 			type: e.TemplateSelect,
 			template: t
-		}), s(() => d.current.onTemplateSelect?.(t)));
-	}, N = (e) => {
-		s(() => d.current.onTemplateEdit?.(e));
-	}, P = async () => {
-		let { searchError: t, searchQuery: n, loadMoreError: r, initialLoadError: i, browseError: a, namespaceFQN: o } = f.current;
+		}), s(() => f.current.onTemplateSelect?.(t)));
+	}, P = (e) => {
+		s(() => f.current.onTemplateEdit?.(e));
+	}, F = async () => {
+		let { searchError: t, searchQuery: n, loadMoreError: r, initialLoadError: i, browseError: a, namespaceFQN: o } = p.current;
 		if (t) {
-			let t = b();
-			p({
+			let t = x();
+			m({
 				type: e.SearchFetchStart,
 				query: n
-			}), s(() => d.current.onNewViewLoading?.(!0)), await l(t, () => w(n, t), (t) => p({
+			}), s(() => f.current.onNewViewLoading?.(!0)), await u(t, () => T(n, t), (t) => m({
 				type: e.SearchLoaded,
 				results: t.entries,
 				nextMarker: t.next_marker
-			}), (t) => p({
+			}), (t) => m({
 				type: e.SearchError,
-				error: c(t)
-			})), t.aborted || s(() => d.current.onNewViewLoading?.(!1));
+				error: l(t)
+			})), t.aborted || s(() => f.current.onNewViewLoading?.(!1));
 			return;
 		}
 		if (r) {
-			await j();
+			await M();
 			return;
 		}
 		if (i || a) {
-			let t = v(), n = i ? e.InitialLoadError : e.BrowseError;
-			p({ type: e.BrowseFetchStart }), s(() => d.current.onNewViewLoading?.(!0)), await E(o, t, n), t.aborted || s(() => d.current.onNewViewLoading?.(!1));
+			let t = y(), n = i ? e.InitialLoadError : e.BrowseError;
+			m({ type: e.BrowseFetchStart }), s(() => f.current.onNewViewLoading?.(!0)), await D(o, t, n), t.aborted || s(() => f.current.onNewViewLoading?.(!1));
 		}
 	};
 	return r(() => ({
-		initialLoad: D,
-		navigateTo: O,
-		navigateBack: k,
-		setSearchValue: A,
-		loadMore: j,
-		selectTemplate: M,
-		editTemplate: N,
-		retry: P
+		initialLoad: O,
+		navigateTo: k,
+		navigateBack: A,
+		setSearchValue: j,
+		loadMore: M,
+		selectTemplate: N,
+		editTemplate: P,
+		retry: F
 	}), []);
 }
-export { u as useTemplateBrowserActions };
+export { d as useTemplateBrowserActions };

package/dist/esm/lib/hooks/use-focus-first-row-after-navigation.js

@@ -0,0 +1,32 @@
+import { useEffect as e, useRef as t } from "react";
+var n = "[role=\"row\"]";
+function r({ containerRef: r, path: i, isFetching: a }) {
+	let o = t(i), s = t(!1);
+	e(() => {
+		i !== o.current && (o.current = i, s.current = !0);
+		let e = r.current;
+		if (!s.current || a || !e) return;
+		s.current = !1;
+		let t = () => {
+			let { activeElement: t, body: r } = e.ownerDocument;
+			if (!(t === null || t === r || e.contains(t))) return !0;
+			let i = e.querySelector(n);
+			return i ? (i.focus(), !0) : !1;
+		};
+		if (t()) return;
+		let c = new MutationObserver(() => {
+			t() && c.disconnect();
+		});
+		return c.observe(e, {
+			childList: !0,
+			subtree: !0
+		}), () => {
+			c.disconnect();
+		};
+	}, [
+		i,
+		a,
+		r
+	]);
+}
+export { r as useFocusFirstRowAfterNavigation };

package/dist/types/lib/hooks/use-focus-first-row-after-navigation.d.ts

@@ -0,0 +1,28 @@
+import { RefObject } from 'react';
+import { BreadcrumbEntry } from '../types';
+interface UseFocusFirstRowAfterNavigationParams {
+    /** Container holding the browse list. The first descendant `[role="row"]` is focused. */
+    readonly containerRef: RefObject<HTMLElement | null>;
+    /** Current navigation path. A change in reference is treated as a user navigation. */
+    readonly path: readonly BreadcrumbEntry[];
+    /** True while the post-navigation fetch is in flight. Focus is deferred until it settles. */
+    readonly isFetching: boolean;
+}
+/**
+ * Restores keyboard focus to the first row of the browse list after a namespace
+ * navigation. Without this, the user-activated `NamespaceRow` unmounts during the
+ * in-flight fetch (the list is replaced by a loading skeleton), DOM focus drops
+ * to `<body>`, and arrow-key navigation appears broken until the user re-tabs in.
+ *
+ * No-op on initial render — `path` hasn't changed yet, so focus stays wherever
+ * the host page placed it. Only user-initiated path transitions trigger the restore.
+ *
+ * @example
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * const { path } = useNavigationState();
+ * const { isFetching } = useBrowseState();
+ * useFocusFirstRowAfterNavigation({ containerRef, path, isFetching });
+ * return <div ref={containerRef}><BrowseList ... /></div>;
+ */
+export declare function useFocusFirstRowAfterNavigation({ containerRef, path, isFetching, }: UseFocusFirstRowAfterNavigationParams): void;
+export {};

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@box/metadata-template-browser",
-    "version": "1.17.32",
+    "version": "1.19.0",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
-        "@box/blueprint-web": "^14.15.2",
-        "@box/blueprint-web-assets": "^4.114.8",
+        "@box/blueprint-web": "^14.16.0",
+        "@box/blueprint-web-assets": "^4.115.0",
         "lodash": "^4.17.15",
         "react": "^18.0.0",
         "react-aria-components": "1.16.0",
@@ -12,10 +12,10 @@
         "react-intl": "^6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^14.15.2",
-        "@box/blueprint-web-assets": "^4.114.8",
+        "@box/blueprint-web": "^14.16.0",
+        "@box/blueprint-web-assets": "^4.115.0",
         "@box/eslint-plugin-blueprint": "1.1.17",
-        "@box/storybook-utils": "0.17.50",
+        "@box/storybook-utils": "0.18.0",
         "react-intl": "^6.4.2"
     },
     "publishConfig": {