@box/metadata-template-browser 1.18.0 → 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/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,6 +1,6 @@
 {
     "name": "@box/metadata-template-browser",
-    "version": "1.18.0",
+    "version": "1.19.0",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^14.16.0",