@box/metadata-taxonomy-picker 3.1.1 → 3.1.2

package/dist/chunks/metadata-taxonomy-picker-shell.js

@@ -3,64 +3,64 @@ import { useTaxonomyPickerController as t } from "../esm/lib/hooks/use-taxonomy-
 import { t as n } from "./taxonomy-items-list.js";
 import { t as r } from "./taxonomy-level-filter.js";
 import { messages as i } from "../esm/lib/components/metadata-taxonomy-picker-shell/messages.js";
-import { forwardRef as a, useCallback as o, useEffect as ee, useId as te, useLayoutEffect as s, useMemo as c, useRef as l, useState as ne } from "react";
-import { Breadcrumb as re, ChipsGroup as ie, IconButton as ae, InputChip as u, Popover as d, useForkRef as oe } from "@box/blueprint-web";
-import { Search as se, XMark as ce } from "@box/blueprint-web-assets/icons/Fill";
-import le from "clsx";
-import { useIntl as ue } from "react-intl";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import '../styles/metadata-taxonomy-picker-shell.css';var m = /* @__PURE__ */ function(e) {
+import { forwardRef as a, useCallback as o, useEffect as ee, useId as te, useLayoutEffect as s, useMemo as c, useRef as l, useState as u } from "react";
+import { Breadcrumb as ne, ChipsGroup as re, IconButton as ie, InputChip as d, Popover as f, useForkRef as ae } from "@box/blueprint-web";
+import { Search as oe, XMark as se } from "@box/blueprint-web-assets/icons/Fill";
+import ce from "clsx";
+import { useIntl as le } from "react-intl";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import '../styles/metadata-taxonomy-picker-shell.css';var h = /* @__PURE__ */ function(e) {
 	return e.SingleLevel = "single-level", e.MultiLevel = "multi-level", e;
-}({}), h = {
-	container: "_container_bnccr_1",
-	label: "_label_bnccr_8",
-	trigger: "_trigger_bnccr_16",
-	searchInput: "_searchInput_bnccr_34",
-	chips: "_chips_bnccr_47",
-	searchIcon: "_searchIcon_bnccr_73",
-	emptyState: "_emptyState_bnccr_81",
-	popover: "_popover_bnccr_87",
-	clearButton: "_clearButton_bnccr_92",
-	breadcrumbContainer: "_breadcrumbContainer_bnccr_96"
+}({}), g = {
+	container: "_container_z60ed_1",
+	label: "_label_z60ed_8",
+	trigger: "_trigger_z60ed_16",
+	searchInput: "_searchInput_z60ed_34",
+	chips: "_chips_z60ed_47",
+	searchIcon: "_searchIcon_z60ed_73",
+	emptyState: "_emptyState_z60ed_81",
+	popover: "_popover_z60ed_87",
+	clearButton: "_clearButton_z60ed_95",
+	breadcrumbContainer: "_breadcrumbContainer_z60ed_99"
 };
-function de(e) {
+function ue(e) {
 	let t = null;
 	for (let n of e) n.selectable !== !1 && (t === null || n.level > t) && (t = n.level);
 	return t;
 }
-var fe = [];
-function pe(e) {
+var de = [];
+function fe(e) {
 	if (e != null) return (typeof e == "function" ? e() : e) ?? void 0;
 }
-var g = /*#__PURE__*/ a(function({ itemsService: a, eventService: g, levels: _ = fe, mode: me, multiSelect: v, value: y, onValueChange: b, placeholder: he, disabled: x = !1, label: S, containerClassName: ge, portalElement: _e }, ve) {
-	let { formatMessage: C } = ue(), w = te(), T = `${w}-listbox`, E = l(null), ye = oe(E, ve), D = l(null), O = l(null), k = l(0), A = l(!1), be = pe(_e), j = me === m.SingleLevel, { state: M, isOpen: N, handleOpenChange: P, handleInputValueChange: F, actions: I } = t(a, _, g), { items: L, levelStack: R } = M, { drillDown: z, navigateBack: B, loadMore: xe, setSearchScopeOverride: V } = I, H = M.searchInputValue !== "", U = c(() => de(M.availableLevels), [M.availableLevels]);
+var _ = /*#__PURE__*/ a(function({ itemsService: a, eventService: _, levels: v = de, mode: pe, multiSelect: y, value: b, onValueChange: x, placeholder: me, disabled: S = !1, label: C, containerClassName: he, portalElement: ge }, _e) {
+	let { formatMessage: w } = le(), T = te(), E = `${T}-listbox`, D = l(null), ve = ae(D, _e), O = l(null), k = l(null), [ye, be] = u(null), A = l(0), j = l(!1), xe = fe(ge), M = pe === h.SingleLevel, { state: N, isOpen: P, handleOpenChange: F, handleInputValueChange: I, actions: L } = t(a, v, _), { items: R, levelStack: z } = N, { drillDown: B, navigateBack: V, loadMore: Se, setSearchScopeOverride: H } = L, U = N.searchInputValue !== "", W = c(() => ue(N.availableLevels), [N.availableLevels]);
 	ee(() => {
-		V(j && U !== null ? {
+		H(M && W !== null ? {
 			parentId: null,
-			levelFilter: U
+			levelFilter: W
 		} : void 0);
 	}, [
-		j,
-		U,
-		V
+		M,
+		W,
+		H
 	]);
-	let [Se, W] = ne(""), G = l(!1), Ce = o(() => {
-		G.current = !0;
-	}, []), we = o((e) => {
-		G.current = !1, F(e.target.value);
-	}, [F]);
+	let [Ce, G] = u(""), K = l(!1), we = o(() => {
+		K.current = !0;
+	}, []), Te = o((e) => {
+		K.current = !1, I(e.target.value);
+	}, [I]);
 	s(() => {
-		G.current ? M.searchInputValue === "" && (G.current = !1, W("")) : W(M.searchInputValue);
-	}, [M.searchInputValue]), s(() => {
+		K.current ? N.searchInputValue === "" && (K.current = !1, G("")) : G(N.searchInputValue);
+	}, [N.searchInputValue]), s(() => {
 		let e;
-		return !H && A.current && (e = requestAnimationFrame(() => {
-			O.current?.scrollTo(k.current);
-		})), A.current = H, () => {
+		return !U && j.current && (e = requestAnimationFrame(() => {
+			k.current?.scrollTo(A.current);
+		})), j.current = U, () => {
 			e !== void 0 && cancelAnimationFrame(e);
 		};
-	}, [H]);
-	let K = c(() => new Set(y.map((e) => e.id)), [y]), Te = c(() => !v && y.length === 1 ? y[0].id : "", [v, y]), q = o((e, t = !0) => {
-		let n = L.find((t) => t.id === e);
+	}, [U]);
+	let q = c(() => new Set(b.map((e) => e.id)), [b]), Ee = c(() => !y && b.length === 1 ? b[0].id : "", [y, b]), J = o((e, t = !0) => {
+		let n = R.find((t) => t.id === e);
 		if (!n || !n.selectable) return;
 		let r = {
 			id: n.id,
@@ -68,16 +68,16 @@ var g = /*#__PURE__*/ a(function({ itemsService: a, eventService: g, levels: _ =
 			level: n.level,
 			ancestors: n.ancestors
 		};
-		v ? b(K.has(e) ? y.filter((t) => t.id !== e) : [...y, r]) : (b([r]), t && P(!1));
+		y ? x(q.has(e) ? b.filter((t) => t.id !== e) : [...b, r]) : (x([r]), t && F(!1));
 	}, [
-		L,
-		v,
-		K,
+		R,
 		y,
+		q,
 		b,
-		P
-	]), J = o((e, t = !0) => {
-		let n = M.searchResults.find((t) => t.id === e);
+		x,
+		F
+	]), Y = o((e, t = !0) => {
+		let n = N.searchResults.find((t) => t.id === e);
 		if (!n || !n.selectable) return;
 		let r = {
 			id: n.id,
@@ -85,194 +85,196 @@ var g = /*#__PURE__*/ a(function({ itemsService: a, eventService: g, levels: _ =
 			level: n.level,
 			ancestors: n.ancestors
 		};
-		v ? b(K.has(e) ? y.filter((t) => t.id !== e) : [...y, r]) : (b([r]), t !== !1 && P(!1));
+		y ? x(q.has(e) ? b.filter((t) => t.id !== e) : [...b, r]) : (x([r]), t !== !1 && F(!1));
 	}, [
-		M.searchResults,
-		v,
-		K,
+		N.searchResults,
 		y,
+		q,
 		b,
-		P
-	]), Y = o((e) => {
-		let t = M.searchResults.find((t) => t.id === e);
-		t && I.drillDown({
+		x,
+		F
+	]), X = o((e) => {
+		let t = N.searchResults.find((t) => t.id === e);
+		t && L.drillDown({
 			id: t.id,
 			displayName: t.displayName,
 			ancestors: t.ancestors
 		});
-	}, [M.searchResults, I]), X = o((e) => {
-		let t = M.items.find((t) => t.id === e);
-		t && z({
+	}, [N.searchResults, L]), De = o((e) => {
+		let t = N.items.find((t) => t.id === e);
+		t && B({
 			id: t.id,
 			displayName: t.displayName
 		});
-	}, [M.items, z]), Z = o((e) => !(!e.hasChildren || j && U !== null && e.level >= U), [j, U]), Ee = c(() => L.map((e) => ({
+	}, [N.items, B]), Z = o((e) => !(!e.hasChildren || M && W !== null && e.level >= W), [M, W]), Oe = c(() => R.map((e) => ({
 		id: e.id,
 		displayName: e.displayName,
 		selectable: e.selectable,
-		multiSelect: v,
-		isSelected: K.has(e.id),
+		multiSelect: y,
+		isSelected: q.has(e.id),
 		showDrillDown: Z(e),
 		ancestors: e.ancestors,
-		onSelect: q,
-		onDrillDown: X
+		onSelect: J,
+		onDrillDown: De
 	})), [
-		L,
-		v,
-		K,
-		Z,
+		R,
+		y,
 		q,
-		X
-	]), Q = c(() => R.length === 0 ? [] : [{
+		Z,
+		J,
+		De
+	]), Q = c(() => z.length === 0 ? [] : [{
 		id: e,
-		name: C(i.breadcrumbRootLabel)
-	}, ...R.map((e) => ({
+		name: w(i.breadcrumbRootLabel)
+	}, ...z.map((e) => ({
 		id: e.id,
 		name: e.displayName
-	}))], [R, C]), De = o((e) => {
-		B(e === "__breadcrumb_root__" ? null : e);
-	}, [B]), Oe = !j && H && M.availableLevels.length > 1, ke = c(() => M.searchResults.map((e) => ({
+	}))], [z, w]), ke = o((e) => {
+		V(e === "__breadcrumb_root__" ? null : e);
+	}, [V]), Ae = !M && U && N.availableLevels.length > 1, je = c(() => N.searchResults.map((e) => ({
 		id: e.id,
 		displayName: e.displayName,
 		selectable: e.selectable,
-		multiSelect: v,
-		isSelected: K.has(e.id),
+		multiSelect: y,
+		isSelected: q.has(e.id),
 		showDrillDown: Z(e),
 		ancestors: e.ancestors,
-		onSelect: J,
-		onDrillDown: Y
+		onSelect: Y,
+		onDrillDown: X
 	})), [
-		M.searchResults,
-		v,
-		K,
+		N.searchResults,
+		y,
+		q,
 		Z,
-		J,
-		Y
-	]), Ae = o((e) => {
-		e.target === e.currentTarget && E.current?.focus();
-	}, [E]), $ = y.length > 0, je = he ?? C(i.placeholder), Me = (e) => {
-		!x && e.target === e.currentTarget && (e.preventDefault(), E.current?.focus());
-	}, Ne = () => {
-		!x && !N && P(!0);
-	}, Pe = o(() => {
-		x || (b([]), F(""));
+		Y,
+		X
+	]), Me = o((e) => {
+		e.target === e.currentTarget && D.current?.focus();
+	}, [D]), $ = b.length > 0, Ne = me ?? w(i.placeholder), Pe = (e) => {
+		!S && e.target === e.currentTarget && (e.preventDefault(), D.current?.focus());
+	}, Fe = () => {
+		!S && !P && F(!0);
+	}, Ie = o(() => {
+		S || (x([]), I(""));
 	}, [
+		S,
 		x,
-		b,
-		F
-	]), Fe = (e) => {
-		!H && e.target.value && (k.current = O.current?.getScrollTop() ?? 0), W(e.target.value), G.current || F(e.target.value);
-	}, Ie = (e) => {
-		x || b(y.filter((t) => t.id !== e.id));
+		I
+	]), Le = (e) => {
+		!U && e.target.value && (A.current = k.current?.getScrollTop() ?? 0), G(e.target.value), K.current || I(e.target.value);
+	}, Re = (e) => {
+		S || x(b.filter((t) => t.id !== e.id));
 	};
-	return /* @__PURE__ */ p(d.Root, {
+	return /* @__PURE__ */ m(f.Root, {
 		modal: !1,
-		onOpenChange: P,
-		open: N,
-		children: [/* @__PURE__ */ f(d.Anchor, { children: /* @__PURE__ */ p("div", {
-			className: le(h.container, ge),
-			children: [S && /* @__PURE__ */ f("label", {
-				className: h.label,
-				htmlFor: w,
-				children: S
-			}), /* @__PURE__ */ p("div", {
-				className: h.trigger,
-				"data-disabled": x,
-				onMouseDown: Me,
-				ref: D,
+		onOpenChange: F,
+		open: P,
+		children: [/* @__PURE__ */ p(f.Anchor, { children: /* @__PURE__ */ m("div", {
+			className: ce(g.container, he),
+			children: [C && /* @__PURE__ */ p("label", {
+				className: g.label,
+				htmlFor: T,
+				children: C
+			}), /* @__PURE__ */ m("div", {
+				className: g.trigger,
+				"data-disabled": S,
+				onMouseDown: Pe,
+				ref: O,
 				children: [
-					v && $ && /* @__PURE__ */ f(ie, {
-						onClick: Ae,
-						children: y.map((e) => /* @__PURE__ */ f(u, {
+					y && $ && /* @__PURE__ */ p(re, {
+						onClick: Me,
+						children: b.map((e) => /* @__PURE__ */ p(d, {
 							label: e.displayName,
-							onDelete: () => Ie(e),
-							tabIndex: x ? -1 : void 0
+							onDelete: () => Re(e),
+							tabIndex: S ? -1 : void 0
 						}, e.id))
 					}),
-					!v && $ && /* @__PURE__ */ f(u, {
-						label: y[0].displayName,
-						tabIndex: x ? -1 : void 0
+					!y && $ && /* @__PURE__ */ p(d, {
+						label: b[0].displayName,
+						tabIndex: S ? -1 : void 0
 					}),
-					/* @__PURE__ */ f("input", {
-						"aria-controls": T,
-						"aria-expanded": N,
+					/* @__PURE__ */ p("input", {
+						"aria-controls": E,
+						"aria-expanded": P,
 						"aria-haspopup": "listbox",
-						className: h.searchInput,
-						disabled: x,
-						id: w,
-						onChange: Fe,
-						onCompositionStart: Ce,
-						onCompositionEnd: we,
-						onFocus: Ne,
-						placeholder: $ ? void 0 : je,
-						ref: ye,
+						className: g.searchInput,
+						disabled: S,
+						id: T,
+						onChange: Le,
+						onCompositionStart: we,
+						onCompositionEnd: Te,
+						onFocus: Fe,
+						placeholder: $ ? void 0 : Ne,
+						ref: ve,
 						role: "combobox",
 						type: "text",
-						value: Se
+						value: Ce
 					}),
-					!v && $ && /* @__PURE__ */ f(ae, {
-						"aria-label": C(i.clearAriaLabel),
-						className: h.clearButton,
-						icon: ce,
+					!y && $ && /* @__PURE__ */ p(ie, {
+						"aria-label": w(i.clearAriaLabel),
+						className: g.clearButton,
+						icon: se,
 						size: "x-small",
-						tabIndex: x ? -1 : void 0,
-						onClick: Pe
+						tabIndex: S ? -1 : void 0,
+						onClick: Ie
 					}),
-					/* @__PURE__ */ f(se, {
+					/* @__PURE__ */ p(oe, {
 						"aria-hidden": "true",
-						className: h.searchIcon,
+						className: g.searchIcon,
 						role: "presentation"
 					})
 				]
 			})]
-		}) }), /* @__PURE__ */ p(d.ContentContainer, {
+		}) }), /* @__PURE__ */ m(f.ContentContainer, {
 			align: "start",
-			className: h.popover,
-			container: be,
+			className: g.popover,
+			container: xe,
 			onInteractOutside: (e) => {
-				D.current?.contains(e.target) && e.preventDefault();
+				O.current?.contains(e.target) && e.preventDefault();
 			},
 			onOpenAutoFocus: (e) => e.preventDefault(),
+			ref: be,
 			children: [
-				Q.length > 0 && !H && /* @__PURE__ */ f("div", {
-					className: h.breadcrumbContainer,
-					children: /* @__PURE__ */ f(re, {
-						breadcrumbAriaLabel: C(i.breadcrumbAriaLabel),
+				Q.length > 0 && !U && /* @__PURE__ */ p("div", {
+					className: g.breadcrumbContainer,
+					children: /* @__PURE__ */ p(ne, {
+						breadcrumbAriaLabel: w(i.breadcrumbAriaLabel),
 						crumbs: Q,
-						onPageLinkClick: De,
+						onPageLinkClick: ke,
 						rootIconVariant: "taxonomy",
-						isInteractive: !x,
+						isInteractive: !S,
 						isResponsiveEnabled: !1,
 						size: "small",
-						truncatedLinksIconAriaLabel: C(i.breadcrumbTruncatedLinksLabel),
+						truncatedLinksIconAriaLabel: w(i.breadcrumbTruncatedLinksLabel),
 						truncationMethod: "folder-tree"
 					})
 				}),
-				Oe && /* @__PURE__ */ f(r, {
-					availableLevels: _,
-					levelFilter: M.levelFilter,
-					onLevelFilterChange: I.setLevelFilter
+				Ae && /* @__PURE__ */ p(r, {
+					availableLevels: v,
+					container: ye,
+					levelFilter: N.levelFilter,
+					onLevelFilterChange: L.setLevelFilter
 				}),
-				/* @__PURE__ */ f(n, {
-					error: H ? M.searchError : M.initialLoadError,
-					estimatedRowHeight: H ? 44 : void 0,
-					hasMore: H ? M.searchNextMarker !== void 0 : M.itemsNextMarker !== void 0,
-					hasVariableRowHeight: H,
-					isFetching: H ? M.isFetchingSearch : M.isFetching,
-					isFetchingMore: H ? M.isFetchingSearchMore : M.isFetchingMore,
-					isSearchMode: H,
-					items: H ? ke : Ee,
-					listboxId: T,
-					loadMoreError: H ? M.searchLoadMoreError : M.loadMoreError,
-					multiSelect: v,
-					onFocusExit: () => E.current?.focus(),
-					onLoadMore: H ? I.searchLoadMore : xe,
-					onRetry: I.retry,
-					ref: O,
-					selectedValue: Te
+				/* @__PURE__ */ p(n, {
+					error: U ? N.searchError : N.initialLoadError,
+					estimatedRowHeight: U ? 44 : void 0,
+					hasMore: U ? N.searchNextMarker !== void 0 : N.itemsNextMarker !== void 0,
+					hasVariableRowHeight: U,
+					isFetching: U ? N.isFetchingSearch : N.isFetching,
+					isFetchingMore: U ? N.isFetchingSearchMore : N.isFetchingMore,
+					isSearchMode: U,
+					items: U ? je : Oe,
+					listboxId: E,
+					loadMoreError: U ? N.searchLoadMoreError : N.loadMoreError,
+					multiSelect: y,
+					onFocusExit: () => D.current?.focus(),
+					onLoadMore: U ? L.searchLoadMore : Se,
+					onRetry: L.retry,
+					ref: k,
+					selectedValue: Ee
 				})
 			]
 		})]
 	});
 });
-export { m as n, g as t };
+export { h as n, _ as t };

package/dist/chunks/taxonomy-level-filter.js

@@ -9,8 +9,8 @@ import '../styles/taxonomy-level-filter.css';var c = {
 	itemStartElement: "_itemStartElement_mbgfz_16",
 	levelFilterButton: "_levelFilterButton_mbgfz_26"
 };
-function l({ availableLevels: l, levelFilter: u, onLevelFilterChange: d }) {
-	let { formatMessage: f } = r(), p = f(e.allOption), m = u === null ? p : l.find((e) => e.level === u)?.displayName ?? p;
+function l({ availableLevels: l, levelFilter: u, onLevelFilterChange: d, container: f }) {
+	let { formatMessage: p } = r(), m = p(e.allOption), h = u === null ? m : l.find((e) => e.level === u)?.displayName ?? m;
 	return /* @__PURE__ */ i("div", {
 		className: c.container,
 		children: /* @__PURE__ */ a(t.Root, {
@@ -19,17 +19,18 @@ function l({ availableLevels: l, levelFilter: u, onLevelFilterChange: d }) {
 				className: c.levelFilterButton,
 				icon: s,
 				variant: "bodyDefault",
-				children: m
+				children: h
 			}) }), /* @__PURE__ */ a(t.Content, {
 				className: c.popoverContent,
 				align: "start",
+				container: f,
 				children: [
 					/* @__PURE__ */ a(t.Item, {
 						onClick: () => d(null),
 						children: [/* @__PURE__ */ i(t.Item.StartElement, {
 							className: c.itemStartElement,
 							icon: u === null ? o : void 0
-						}), /* @__PURE__ */ i(t.Item.MainContent, { label: p })]
+						}), /* @__PURE__ */ i(t.Item.MainContent, { label: m })]
 					}),
 					/* @__PURE__ */ i(t.Separator, {}),
 					l.map((e) => /* @__PURE__ */ a(t.Item, {

package/dist/styles/metadata-taxonomy-picker-shell.css

@@ -1 +1 @@
-._container_bnccr_1{gap:var(--bp-space-020,.5rem);flex-direction:column;width:100%;display:flex}._label_bnccr_8{color:var(--bp-text-text-on-light);font-size:var(--bp-font-size-040,1rem);font-weight:var(--bp-font-weight-bold,600);line-height:var(--bp-line-height-040,1.5rem);cursor:pointer}._trigger_bnccr_16{box-sizing:border-box;align-items:center;gap:var(--space-2);width:100%;min-height:var(--bp-size-090,2.25rem);padding-block:var(--bp-space-020,.5rem);padding-inline:var(--bp-space-030,.75rem);color:var(--bp-text-text-on-light);background-color:var(--surface-dropdown-surface);border:var(--bp-border-01,.0625rem) solid var(--bp-border-input-border);border-radius:var(--bp-radius-06,.75rem);font:inherit;cursor:pointer;outline:none;flex-wrap:wrap;display:flex}._trigger_bnccr_16:has(._searchInput_bnccr_34:focus){background-color:var(--surface-dropdown-surface-focus);border-color:var(--outline-focus-on-light);border-width:var(--bp-border-02,.125rem)}._trigger_bnccr_16[data-disabled=true]{opacity:.6;cursor:not-allowed}._trigger_bnccr_16[data-disabled=true] button{pointer-events:none}._chips_bnccr_47{gap:var(--space-2);flex-wrap:wrap;display:flex}._trigger_bnccr_16[data-disabled=true] ._chips_bnccr_47{pointer-events:none}._searchInput_bnccr_34{min-width:var(--size-12);color:var(--bp-text-text-on-light);font:inherit;cursor:inherit;background:0 0;border:none;outline:none;flex:1;padding:0}._searchInput_bnccr_34::placeholder{color:var(--bp-text-text-on-light-secondary);font-size:var(--bp-font-size-05,.9375rem);font-weight:var(--bp-font-weight-regular,400)}._searchIcon_bnccr_73{width:var(--bp-size-040,1rem);height:var(--bp-size-040,1rem);color:var(--bp-icon-icon-on-light-secondary);pointer-events:none;flex-shrink:0}._emptyState_bnccr_81{padding-block:var(--space-3);padding-inline:var(--space-3);text-align:center}._popover_bnccr_87{width:var(--radix-popover-trigger-width);max-width:none}._clearButton_bnccr_92{flex-shrink:0}._breadcrumbContainer_bnccr_96{min-width:0;padding-block:var(--bp-space-020,.5rem);padding-inline:var(--bp-space-020,.5rem);border-bottom:var(--bp-border-01,.0625rem) solid var(--bp-border-divider);align-items:center;display:flex}._breadcrumbContainer_bnccr_96 li:first-child:has(button){margin-inline-start:calc(-1 * var(--bp-space-010,.25rem))}
+._container_z60ed_1{gap:var(--bp-space-020,.5rem);flex-direction:column;width:100%;display:flex}._label_z60ed_8{color:var(--bp-text-text-on-light);font-size:var(--bp-font-size-040,1rem);font-weight:var(--bp-font-weight-bold,600);line-height:var(--bp-line-height-040,1.5rem);cursor:pointer}._trigger_z60ed_16{box-sizing:border-box;align-items:center;gap:var(--space-2);width:100%;min-height:var(--bp-size-090,2.25rem);padding-block:var(--bp-space-020,.5rem);padding-inline:var(--bp-space-030,.75rem);color:var(--bp-text-text-on-light);background-color:var(--surface-dropdown-surface);border:var(--bp-border-01,.0625rem) solid var(--bp-border-input-border);border-radius:var(--bp-radius-06,.75rem);font:inherit;cursor:pointer;outline:none;flex-wrap:wrap;display:flex}._trigger_z60ed_16:has(._searchInput_z60ed_34:focus){background-color:var(--surface-dropdown-surface-focus);border-color:var(--outline-focus-on-light);border-width:var(--bp-border-02,.125rem)}._trigger_z60ed_16[data-disabled=true]{opacity:.6;cursor:not-allowed}._trigger_z60ed_16[data-disabled=true] button{pointer-events:none}._chips_z60ed_47{gap:var(--space-2);flex-wrap:wrap;display:flex}._trigger_z60ed_16[data-disabled=true] ._chips_z60ed_47{pointer-events:none}._searchInput_z60ed_34{min-width:var(--size-12);color:var(--bp-text-text-on-light);font:inherit;cursor:inherit;background:0 0;border:none;outline:none;flex:1;padding:0}._searchInput_z60ed_34::placeholder{color:var(--bp-text-text-on-light-secondary);font-size:var(--bp-font-size-05,.9375rem);font-weight:var(--bp-font-weight-regular,400)}._searchIcon_z60ed_73{width:var(--bp-size-040,1rem);height:var(--bp-size-040,1rem);color:var(--bp-icon-icon-on-light-secondary);pointer-events:none;flex-shrink:0}._emptyState_z60ed_81{padding-block:var(--space-3);padding-inline:var(--space-3);text-align:center}._popover_z60ed_87{width:var(--radix-popover-trigger-width);max-width:none}._popover_z60ed_87 div[data-radix-popper-content-wrapper]:has([role=menu]){background-color:var(--bp-surface-menu-surface-dropdown)}._clearButton_z60ed_95{flex-shrink:0}._breadcrumbContainer_z60ed_99{min-width:0;padding-block:var(--bp-space-020,.5rem);padding-inline:var(--bp-space-020,.5rem);border-bottom:var(--bp-border-01,.0625rem) solid var(--bp-border-divider);align-items:center;display:flex}._breadcrumbContainer_z60ed_99 li:first-child:has(button){margin-inline-start:calc(-1 * var(--bp-space-010,.25rem))}

package/dist/types/lib/components/taxonomy-level-filter/taxonomy-level-filter.d.ts

@@ -3,9 +3,15 @@ export interface TaxonomyLevelFilterProps {
     availableLevels: readonly TaxonomyLevel[];
     levelFilter: number | null;
     onLevelFilterChange: (level: number | null) => void;
+    /**
+     * Element to portal the dropdown content into. Defaults to `document.body`.
+     * Passed by the picker shell so the menu mounts inside the popover and stays
+     * within its dismissable layer.
+     */
+    container?: HTMLElement | null;
 }
 /**
  * Dropdown above the search results that scopes search to a single taxonomy
  * level. "All levels" clears the filter.
  */
-export declare function TaxonomyLevelFilter({ availableLevels, levelFilter, onLevelFilterChange }: TaxonomyLevelFilterProps): import("react/jsx-runtime").JSX.Element;
+export declare function TaxonomyLevelFilter({ availableLevels, levelFilter, onLevelFilterChange, container, }: TaxonomyLevelFilterProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/stories/tests/level-filter.interaction-tests.stories.d.ts

@@ -77,6 +77,19 @@ export declare const LevelFilterAutoSelectsChildLevelAfterDrillDown: Story;
  * available taxonomy level.
  */
 export declare const LevelFilterDropdownListsAllLevels: Story;
+/**
+ * The level filter dropdown renders inside the picker's popover layer rather
+ * than as a separate `document.body` portal. This keeps the menu within the
+ * popover's dismissable layer, so interacting with it does not dismiss the
+ * picker.
+ */
+export declare const LevelFilterDropdownRendersInsidePickerPopover: Story;
+/**
+ * Opening the level filter dropdown keeps the picker popover open — the menu
+ * is inside the dismissable layer, so opening it is not treated as an
+ * interaction outside the picker.
+ */
+export declare const OpeningLevelFilterKeepsPickerOpen: Story;
 /**
  * Selecting a level from the dropdown re-runs the search restricted to that
  * level, so only matching nodes from that level appear.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-taxonomy-picker",
-    "version": "3.1.1",
+    "version": "3.1.2",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@ariakit/react": "^0.4.21",