@box/metadata-view 1.59.15 → 1.60.1

package/dist/esm/lib/components/filter-row/advanced-field-content.js

@@ -1,31 +1,39 @@
 import { useAdvancedFilterContext as e } from "./advanced-filter-context.js";
-import { MetadataDateField as t, MetadataFloatField as n, MetadataMultiSelectField as r, MetadataStringField as i } from "@box/metadata-filter";
-import { jsx as a } from "react/jsx-runtime";
-var o = ({ fieldNamePrefix: t, filterOptionsMap: n, label: r }) => {
-	let i = e();
+import { useFilterChipPopoverPortalElement as t } from "./filter-chip-popover-context.js";
+import { MetadataDateField as n, MetadataFloatField as r, MetadataMultiSelectField as i, MetadataStringField as a, MetadataTaxonomyFieldAdvanced as o } from "@box/metadata-filter";
+import { jsx as s } from "react/jsx-runtime";
+var c = ({ fieldNamePrefix: t, filterOptionsMap: n, label: r, portalElement: i }) => {
+	let a = e();
 	return {
-		key: i?.resetKey,
-		fieldAdvancedFilterOptions: i?.currentOption,
+		key: a?.resetKey,
+		fieldAdvancedFilterOptions: a?.currentOption,
 		fieldNamePrefix: t,
 		filterOptionsMap: n,
 		isAdvancedFilterEnabled: !0,
 		label: r,
-		onAdvancedFilterOptionChange: i ? (e, t) => i.onOptionChange(t) : void 0
+		onAdvancedFilterOptionChange: a ? (e, t) => a.onOptionChange(t) : void 0,
+		portalElement: i ?? void 0
 	};
-}, s = ({ fieldType: e, fieldNamePrefix: s, filterOptionsMap: c, label: l, locale: u }) => {
-	let d = o({
-		fieldNamePrefix: s,
-		filterOptionsMap: c,
-		label: l
+}, l = ({ fieldType: e, fieldNamePrefix: l, filterOptionsMap: u, isMultilevelTaxonomyFieldEnabled: d, label: f, locale: p, portalElement: m, taxonomyOptionsFetcher: h }) => {
+	let g = c({
+		fieldNamePrefix: l,
+		filterOptionsMap: u,
+		label: f,
+		portalElement: t() ?? m
 	});
 	switch (e) {
-		case "date": return /* @__PURE__ */ a(t, {
-			...d,
-			locale: u
+		case "date": return /* @__PURE__ */ s(n, {
+			...g,
+			locale: p
 		});
-		case "float": return /* @__PURE__ */ a(n, { ...d });
-		case "string": return /* @__PURE__ */ a(i, { ...d });
-		default: return /* @__PURE__ */ a(r, { ...d });
+		case "float": return /* @__PURE__ */ s(r, { ...g });
+		case "string": return /* @__PURE__ */ s(a, { ...g });
+		case "taxonomy": return /* @__PURE__ */ s(o, {
+			...g,
+			isMultilevelTaxonomyFieldEnabled: d,
+			taxonomyOptionsFetcher: h
+		});
+		default: return /* @__PURE__ */ s(i, { ...g });
 	}
 };
-export { s as AdvancedFieldContent };
+export { l as AdvancedFieldContent };

package/dist/esm/lib/components/filter-row/filter-chip-popover-context.js

@@ -0,0 +1,3 @@
+import { createContext as e, useContext as t } from "react";
+var n = /* @__PURE__ */ e(null), r = n.Provider, i = () => t(n);
+export { r as FilterChipPopoverPortalProvider, i as useFilterChipPopoverPortalElement };

package/dist/esm/lib/components/filter-row/filter-row.js

@@ -7,31 +7,40 @@ import { FilterChip as a } from "@box/blueprint-web";
 import { useMemo as o, useRef as s } from "react";
 import { Form as c, Formik as l } from "formik";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
-var f = ({ dataTargetPrefix: f, predefinedFilterOptions: p, containerRef: m, filterGroups: h = [], initialFilterValues: g, isAllFiltersDisabled: _, onAllFiltersClick: v, onFilterSubmit: y }) => {
-	let b = i(p), x = ({ metadata: { fields: e } }) => {
-		y && y(e);
-	}, S = [...b, ...h], C = S.flatMap(({ filters: e }) => e).sort((e, t) => (e.position ?? 0) - (t.position ?? 0)), w = o(() => e(C, g), [C.map((e) => `${e.id}:${e.fieldType}`).sort().join("|"), g]), T = s(null);
+var f = (e) => {
+	let t = e.fieldType === "taxonomy" ? [
+		e.key,
+		JSON.stringify(e.optionsRules),
+		JSON.stringify(e.levels),
+		e.scope,
+		e.templateKey
+	].join(":") : "";
+	return `${e.id}:${e.fieldType}:${t}`;
+}, p = ({ dataTargetPrefix: p, predefinedFilterOptions: m, containerRef: h, filterGroups: g = [], initialFilterValues: _, isAllFiltersDisabled: v, onAllFiltersClick: y, onFilterSubmit: b }) => {
+	let x = i(m), S = ({ metadata: { fields: e } }) => {
+		b && b(e);
+	}, C = [...x, ...g], w = C.flatMap(({ filters: e }) => e).sort((e, t) => (e.position ?? 0) - (t.position ?? 0)), T = o(() => e(w, _), [w.map((e) => f(e)).sort().join("|"), _]), E = s(null);
 	return /* @__PURE__ */ u(l, {
 		enableReinitialize: !0,
-		initialValues: w,
-		onSubmit: x,
+		initialValues: T,
+		onSubmit: S,
 		children: /* @__PURE__ */ u(c, {
-			ref: T,
+			ref: E,
 			children: /* @__PURE__ */ d(a.Group, {
 				className: t.filterChipGroup,
 				name: "metadata-view-filters",
 				type: "multiple",
-				children: [_ ? null : /* @__PURE__ */ u(n, {
-					containerRef: m,
-					dataTargetPrefix: f,
-					filterGroups: S,
-					onAllFiltersClick: v
-				}), C.filter((e) => e.shouldRenderChip).map((e) => /* @__PURE__ */ u(r, {
+				children: [v ? null : /* @__PURE__ */ u(n, {
+					containerRef: h,
+					dataTargetPrefix: p,
+					filterGroups: C,
+					onAllFiltersClick: y
+				}), w.filter((e) => e.shouldRenderChip).map((e) => /* @__PURE__ */ u(r, {
 					filterOption: e,
-					formRef: T
+					formRef: E
 				}, e.id))]
 			})
 		})
 	});
 };
-export { f as FilterRow };
+export { p as FilterRow };

package/dist/esm/lib/components/filter-row/form-filter-chip.js

@@ -4,82 +4,96 @@ import { extractAdvancedFilterOption as n, isFilterSelected as r } from "./is-fi
 import i from "./messages.js";
 import { t as a } from "../../../../chunks/filter-row.module.js";
 import { AdvancedFilterContext as o } from "./advanced-filter-context.js";
-import { useFormFilterChip as s } from "./use-form-filter-chip.js";
-import { Button as c, FilterChip as l, Popover as u } from "@box/blueprint-web";
-import { useMemo as d, useState as f } from "react";
-import { useIntl as p } from "react-intl";
-import { getIn as m, useFormikContext as h } from "formik";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-var v = ({ children: v, formRef: y, icon: b, id: x, name: S = "", isAdvancedFilterEnabled: C, advancedFilterOptionsMap: w }) => {
-	let { formatMessage: T } = p(), [E, D] = f(!1), { handleSubmit: O, setFieldValue: k, resetForm: A, values: j } = h(), M = m(j, `metadata.fields.${x}.fieldType`), N = m(j, `metadata.fields.${x}.value`), { appliedAdvancedFilterOption: P, currentAdvancedFilterOption: F, dynamicDisplayName: I, handleAdvancedFilterOptionChange: L, handleApply: R, handleCancel: z, handleClear: B } = s({
-		name: S,
-		advancedFilterOptionsMap: w,
-		initialAdvancedFilterOption: C && N ? n(N) : void 0
-	}), [V, H] = f(0), U = () => {
-		C && R(), O(), D(!1);
-	}, [W, G] = f(j), K = (e) => {
-		D(e), e ? (G(j), C && H((e) => e + 1)) : (A({ values: W }), C && z());
-	}, q = () => {
-		k(`metadata.fields.${x}.value`, e({
-			fieldType: M,
-			isAdvancedFilterEnabled: C
-		})), C && B();
-	}, J = d(() => {
-		if (C && t(P)) return !0;
-		let e = m(j, `metadata.fields.${x}.value`);
+import { FilterChipPopoverPortalProvider as s } from "./filter-chip-popover-context.js";
+import { useFormFilterChip as c } from "./use-form-filter-chip.js";
+import { useNestedOverlayPopoverOpenChange as l } from "./use-nested-overlay-popover-open-change.js";
+import { Button as u, FilterChip as d, Popover as f } from "@box/blueprint-web";
+import { useMemo as p, useState as m } from "react";
+import { useIntl as h } from "react-intl";
+import { getIn as g, useFormikContext as _ } from "formik";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+var b = ({ children: b, formRef: x, icon: S, id: C, name: w = "", isAdvancedFilterEnabled: T, advancedFilterOptionsMap: E }) => {
+	let { formatMessage: D } = h(), [O, k] = m(!1), { handleSubmit: A, setFieldValue: j, resetForm: M, values: N } = _(), P = g(N, `metadata.fields.${C}.fieldType`), F = g(N, `metadata.fields.${C}.value`), { appliedAdvancedFilterOption: I, currentAdvancedFilterOption: L, dynamicDisplayName: R, handleAdvancedFilterOptionChange: z, handleApply: B, handleCancel: V, handleClear: H } = c({
+		name: w,
+		advancedFilterOptionsMap: E,
+		initialAdvancedFilterOption: T && F ? n(F) : void 0
+	}), [U, W] = m(0), G = () => {
+		T && B(), A(), k(!1);
+	}, [K, q] = m(N), { handlePopoverOpenChange: J, portalElement: Y, setPopoverContentRef: X } = l({
+		onOpenChange: (e) => {
+			k(e), e ? (q(N), T && W((e) => e + 1)) : (M({ values: K }), T && V());
+		},
+		popoverOpen: O
+	}), Z = () => {
+		j(`metadata.fields.${C}.value`, e({
+			fieldType: P,
+			isAdvancedFilterEnabled: T
+		})), T && H();
+	}, Q = p(() => {
+		if (T && t(I)) return !0;
+		let e = g(N, `metadata.fields.${C}.value`);
 		return e ? r(e) : !1;
 	}, [
-		j,
-		x,
+		N,
 		C,
-		P
-	]), Y = () => {
-		if (M === "date") {
-			let e = m(j, `metadata.fields.${x}.value.customType`), t = e && e !== "anyTime" && e !== "customRange", n = m(j, `metadata.fields.${x}.value.relativeType`);
-			return (t || n && n !== "customRange") && !J;
+		T,
+		I
+	]), $ = () => {
+		if (P === "date") {
+			let e = g(N, `metadata.fields.${C}.value.customType`), t = e && e !== "anyTime" && e !== "customRange", n = g(N, `metadata.fields.${C}.value.relativeType`);
+			return (t || n && n !== "customRange") && !Q;
 		}
 		return !1;
-	}, X = C && J ? I : S, Z = C ? /* @__PURE__ */ g(o.Provider, {
-		value: {
-			currentOption: F,
-			onOptionChange: L,
-			resetKey: V
-		},
-		children: v
-	}) : v;
-	return /* @__PURE__ */ g("div", { children: /* @__PURE__ */ _(u.Root, {
-		onOpenChange: K,
-		open: E,
-		children: [/* @__PURE__ */ g(u.Trigger, { children: /* @__PURE__ */ _(l.TriggerChip, {
-			selected: J,
-			value: x,
+	}, ee = T && Q ? R : w, te = p(() => ({
+		currentOption: L,
+		onOptionChange: z,
+		resetKey: U
+	}), [
+		L,
+		z,
+		U
+	]), ne = T ? /* @__PURE__ */ v(o.Provider, {
+		value: te,
+		children: b
+	}) : b;
+	return /* @__PURE__ */ v("div", { children: /* @__PURE__ */ y(f.Root, {
+		modal: !1,
+		onOpenChange: J,
+		open: O,
+		children: [/* @__PURE__ */ v(f.Trigger, { children: /* @__PURE__ */ y(d.TriggerChip, {
+			selected: Q,
+			value: C,
 			children: [
-				b && /* @__PURE__ */ g(l.Icon, { icon: b }),
-				/* @__PURE__ */ g(l.Label, { children: X }),
-				/* @__PURE__ */ g(l.DropdownIndicator, {})
+				S && /* @__PURE__ */ v(d.Icon, { icon: S }),
+				/* @__PURE__ */ v(d.Label, { children: ee }),
+				/* @__PURE__ */ v(d.DropdownIndicator, {})
 			]
-		}, x) }), /* @__PURE__ */ _(u.ContentContainer, {
+		}, C) }), /* @__PURE__ */ v(f.ContentContainer, {
+			ref: X,
 			align: "start",
 			className: a.popoverContent,
-			container: y.current,
+			container: x.current,
 			"data-testid": "form-filter-chip-popover",
-			children: [/* @__PURE__ */ g(u.MainContent, { children: Z }), /* @__PURE__ */ _(u.Footer, {
-				className: a.popoverFooter,
-				children: [/* @__PURE__ */ g(c, {
-					onClick: q,
-					size: "small",
-					variant: "secondary",
-					children: T(i.clearButton)
-				}), /* @__PURE__ */ g(c, {
-					disabled: Y(),
-					onClick: U,
-					size: "small",
-					type: "submit",
-					variant: "primary",
-					children: T(i.applyButton)
+			children: /* @__PURE__ */ y(s, {
+				value: Y,
+				children: [/* @__PURE__ */ v(f.MainContent, { children: ne }), /* @__PURE__ */ y(f.Footer, {
+					className: a.popoverFooter,
+					children: [/* @__PURE__ */ v(u, {
+						onClick: Z,
+						size: "small",
+						variant: "secondary",
+						children: D(i.clearButton)
+					}), /* @__PURE__ */ v(u, {
+						disabled: $(),
+						onClick: G,
+						size: "small",
+						type: "submit",
+						variant: "primary",
+						children: D(i.applyButton)
+					})]
 				})]
-			})]
+			})
 		})]
 	}) });
 };
-export { v as FormFilterChip };
+export { b as FormFilterChip };

package/dist/esm/lib/components/filter-row/initial-field-values.js

@@ -1,32 +1,47 @@
-var e = (e) => ({
+import { FilterKeyTypes as e } from "@box/metadata-filter";
+var t = (e) => ({
 	key: e,
 	id: e
-}), t = ({ fieldType: t, options: n }) => ["enum", "multiSelect"].includes(t) ? (n || []).map(e) : [], n = ({ fieldType: e, isAdvancedFilterEnabled: t }) => e === "date" ? {
+}), n = ({ fieldType: e, options: n }) => ["enum", "multiSelect"].includes(e) ? (n || []).map(t) : [], r = ({ fieldType: t, isAdvancedFilterEnabled: n }) => t === "taxonomy" ? n ? {
+	value: [],
+	advancedFilterOption: e.MATCH_ANY
+} : [] : t === "date" ? {
 	customType: "anyTime",
 	range: {
 		gt: "",
 		lt: ""
 	}
-} : e === "float" ? t ? { enum: [] } : { range: {
+} : t === "float" ? n ? { enum: [] } : { range: {
 	gt: "",
 	lt: ""
-} } : { enum: [] }, r = (e) => Array.isArray(e) ? e.length > 1 ? "multiSelect" : "enum" : !e || typeof e != "object" ? "enum" : "customDays" in e || "relativeDays" in e || "customType" in e || "relativeType" in e ? "date" : "range" in e ? "float" : "enum" in e && e.enum.length > 1 ? "multiSelect" : "enum", i = (e, i) => {
-	let a = e.reduce((e, r) => {
-		let a = i?.[r.id]?.value, o = n({
-			fieldType: r.fieldType,
-			isAdvancedFilterEnabled: r.isAdvancedFilterEnabled
-		});
-		return e[r.id] = {
+} } : { enum: [] }, i = (e) => Array.isArray(e) ? e.length > 1 ? "multiSelect" : "enum" : !e || typeof e != "object" ? "enum" : "customDays" in e || "relativeDays" in e || "customType" in e || "relativeType" in e ? "date" : "range" in e ? "float" : "value" in e && Array.isArray(e.value) ? "taxonomy" : "enum" in e && e.enum.length > 1 ? "multiSelect" : "enum", a = (e, t) => {
+	let a = e.reduce((e, i) => {
+		let a = t?.[i.id]?.value, o = r({
+			fieldType: i.fieldType,
+			isAdvancedFilterEnabled: i.isAdvancedFilterEnabled
+		}), s = {
 			value: a ?? o,
-			fieldType: r.fieldType,
-			options: t(r)
-		}, e;
+			fieldType: i.fieldType,
+			options: n(i)
+		};
+		return e[i.id] = i.fieldType === "taxonomy" ? {
+			...s,
+			key: i.key ?? i.id,
+			levels: i.levels,
+			optionsRules: i.optionsRules
+		} : s, e;
 	}, {});
-	return i && Object.keys(i).filter((e) => !a[e]).forEach((e) => {
+	t && Object.keys(t).filter((e) => !a[e]).forEach((e) => {
 		a[e] = {
-			value: i[e].value,
-			fieldType: r(i[e].value)
+			value: t[e].value,
+			fieldType: i(t[e].value)
 		};
-	}), { metadata: { fields: a } };
+	});
+	let o = e.find((e) => e.fieldType === "taxonomy");
+	return { metadata: {
+		fields: a,
+		scope: o?.scope,
+		templateKey: o?.templateKey
+	} };
 };
-export { n as getDefaultFieldValue, i as getInitialFieldValues, r as inferFieldType };
+export { r as getDefaultFieldValue, a as getInitialFieldValues, i as inferFieldType };

package/dist/esm/lib/components/filter-row/is-filter-selected.js

@@ -20,7 +20,9 @@ var n = (e) => !!e && typeof e == "object" && !Array.isArray(e) && "advancedFilt
 	let n = o(e);
 	return n && n !== t.SELECT_FILTER_TYPE ? n : void 0;
 }, c = (t) => {
+	if (Array.isArray(t)) return t.length > 0;
 	if ("advancedFilterOption" in t && e(t.advancedFilterOption)) return !0;
+	if ("value" in t && Array.isArray(t.value)) return t.value.length > 0;
 	if ("range" in t) {
 		let { range: e } = t;
 		return !!(e && (e.gt || e.lt));

package/dist/esm/lib/components/filter-row/metadata-filter-chip.js

@@ -6,21 +6,24 @@ import { useIntl as i } from "react-intl";
 import { MetadataDateField as a, MetadataFloatField as o, MetadataStringField as s } from "@box/metadata-filter";
 import { jsx as c } from "react/jsx-runtime";
 var l = ({ filterOption: l, formRef: u }) => {
-	let { advancedFilterOptionsMap: d, canUseRelativeDates: f, customDateFilterOptions: p, fieldType: m, icon: h, id: g, isAdvancedFilterEnabled: _, name: v, options: y, placeholder: b, variant: x } = l, { locale: S } = i(), C = `metadata.fields.${g}`, w = v ?? "";
-	if (m === "multiSelect" && x === "file") return /* @__PURE__ */ c(e, { id: g });
+	let { advancedFilterOptionsMap: d, canUseRelativeDates: f, customDateFilterOptions: p, fieldType: m, icon: h, id: g, isAdvancedFilterEnabled: _, isMultilevelTaxonomyFieldEnabled: v, name: y, options: b, placeholder: x, taxonomyOptionsFetcher: S, variant: C } = l, { locale: w } = i(), T = `metadata.fields.${g}`, E = y ?? "";
+	if (m === "multiSelect" && C === "file") return /* @__PURE__ */ c(e, { id: g });
 	if (_) return /* @__PURE__ */ c(n, {
 		advancedFilterOptionsMap: d,
 		formRef: u,
 		icon: h,
 		id: g,
 		isAdvancedFilterEnabled: !0,
-		name: v,
+		name: y,
 		children: /* @__PURE__ */ c(t, {
 			fieldType: m,
-			fieldNamePrefix: C,
+			fieldNamePrefix: T,
 			filterOptionsMap: d,
-			label: w,
-			locale: S
+			isMultilevelTaxonomyFieldEnabled: v,
+			label: E,
+			locale: w,
+			portalElement: u.current,
+			taxonomyOptionsFetcher: S
 		})
 	}, g);
 	switch (m) {
@@ -28,45 +31,45 @@ var l = ({ filterOption: l, formRef: u }) => {
 			formRef: u,
 			icon: h,
 			id: g,
-			name: v,
+			name: y,
 			children: /* @__PURE__ */ c(a, {
 				canUseRelativeDates: f,
 				customDateFilterOptions: p,
 				direction: "vertical",
-				fieldNamePrefix: C,
-				label: w,
-				locale: S
+				fieldNamePrefix: T,
+				label: E,
+				locale: w
 			})
 		}, g);
 		case "float": return /* @__PURE__ */ c(n, {
 			formRef: u,
 			icon: h,
 			id: g,
-			name: v,
+			name: y,
 			children: /* @__PURE__ */ c(o, {
-				fieldNamePrefix: C,
-				label: w
+				fieldNamePrefix: T,
+				label: E
 			})
 		}, g);
 		case "string": return /* @__PURE__ */ c(n, {
 			formRef: u,
 			icon: h,
 			id: g,
-			name: v,
+			name: y,
 			children: /* @__PURE__ */ c(s, {
-				fieldNamePrefix: C,
-				label: w
+				fieldNamePrefix: T,
+				label: E
 			})
 		}, g);
 		case "multiSelect":
 		case "enum": return /* @__PURE__ */ c(r, {
-			fieldNamePrefix: C,
+			fieldNamePrefix: T,
 			formRef: u,
 			icon: h,
 			id: g,
-			name: v,
-			options: y,
-			placeholder: b,
+			name: y,
+			options: b,
+			placeholder: x,
 			type: m
 		});
 		default: return null;

package/dist/esm/lib/components/filter-row/use-nested-overlay-popover-open-change.js

@@ -0,0 +1,30 @@
+import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
+var i = ({ onOpenChange: i, popoverOpen: a }) => {
+	let o = n(null), s = n(!1), [c, l] = r(null);
+	return t(() => {
+		if (!a) return;
+		let e = () => {
+			let e = o.current;
+			return e ? !!(e.querySelector("[role=\"combobox\"][aria-expanded=\"true\"]") ?? e.querySelector("[aria-haspopup=\"tree\"][aria-expanded=\"true\"]")) : !1;
+		}, t = (t) => {
+			if (t.key !== "Escape") return;
+			let n = o.current;
+			!n || !(t.target instanceof Node) || !n.contains(t.target) || (s.current = e());
+		}, n = (t) => {
+			let n = o.current;
+			n && t.target instanceof Node && n.contains(t.target) || (s.current = e());
+		};
+		return document.addEventListener("keydown", t, !0), document.addEventListener("pointerdown", n, !0), () => {
+			document.removeEventListener("keydown", t, !0), document.removeEventListener("pointerdown", n, !0);
+		};
+	}, [a]), {
+		handlePopoverOpenChange: e((e) => {
+			e ? i(!0) : s.current ? s.current = !1 : i(!1);
+		}, [i]),
+		portalElement: c,
+		setPopoverContentRef: e((e) => {
+			o.current = e, l(e);
+		}, [])
+	};
+};
+export { i as useNestedOverlayPopoverOpenChange };

package/dist/types/lib/components/filter-row/advanced-field-content.d.ts

@@ -1,12 +1,15 @@
-import { AdvancedFilterOptionsMap, FilterOption } from './types';
+import { AdvancedFilterOptionsMap, FilterOption, TaxonomyOptionsFetcher } from './types';
 type BaseAdvancedFieldProps = {
     fieldNamePrefix: string;
     filterOptionsMap?: AdvancedFilterOptionsMap;
     label: string;
+    portalElement?: HTMLElement | null;
 };
 type AdvancedFieldContentProps = BaseAdvancedFieldProps & {
     fieldType: FilterOption['fieldType'];
+    isMultilevelTaxonomyFieldEnabled?: boolean;
     locale: string;
+    taxonomyOptionsFetcher?: TaxonomyOptionsFetcher;
 };
-export declare const AdvancedFieldContent: ({ fieldType, fieldNamePrefix, filterOptionsMap, label, locale, }: AdvancedFieldContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AdvancedFieldContent: ({ fieldType, fieldNamePrefix, filterOptionsMap, isMultilevelTaxonomyFieldEnabled, label, locale, portalElement, taxonomyOptionsFetcher, }: AdvancedFieldContentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/lib/components/filter-row/filter-chip-popover-context.d.ts

@@ -0,0 +1,2 @@
+export declare const FilterChipPopoverPortalProvider: import('react').Provider<HTMLElement>;
+export declare const useFilterChipPopoverPortalElement: () => HTMLElement | null;

package/dist/types/lib/components/filter-row/initial-field-values.d.ts

@@ -1,9 +1,8 @@
-import { MetadataFormFieldValue } from '@box/metadata-filter';
 import { MetadataFieldType } from '../../types';
-import { FilterOption, InitialFilterValues, MetadataFormValues } from './types';
+import { FilterFieldValue, FilterOption, InitialFilterValues, MetadataFormValues } from './types';
 export declare const getDefaultFieldValue: ({ fieldType, isAdvancedFilterEnabled, }: {
     fieldType?: MetadataFieldType;
     isAdvancedFilterEnabled?: boolean;
-}) => MetadataFormFieldValue;
-export declare const inferFieldType: (value: MetadataFormFieldValue) => MetadataFieldType;
+}) => FilterFieldValue;
+export declare const inferFieldType: (value: FilterFieldValue) => MetadataFieldType;
 export declare const getInitialFieldValues: (filterOptions: FilterOption[], customFieldValues?: InitialFilterValues) => MetadataFormValues;

package/dist/types/lib/components/filter-row/is-filter-selected.d.ts

@@ -1,8 +1,14 @@
 import { FilterKey, MetadataFormFieldValue } from '@box/metadata-filter';
-export declare const extractAdvancedFilterOption: (value: MetadataFormFieldValue) => FilterKey | undefined;
+type TaxonomyFieldValue = {
+    value?: unknown[];
+    advancedFilterOption?: FilterKey;
+};
+type FilterFieldValue = MetadataFormFieldValue | TaxonomyFieldValue;
+export declare const extractAdvancedFilterOption: (value: FilterFieldValue) => FilterKey | undefined;
 /**
  * Returns true if the given field value is considered "selected" (i.e., not empty).
  * Also returns true when an isBlank/isNotBlank advanced filter option is applied,
  * since those filters are active even when the field value itself is empty.
  */
-export declare const isFilterSelected: (value: MetadataFormFieldValue) => boolean;
+export declare const isFilterSelected: (value: FilterFieldValue) => boolean;
+export {};

package/dist/types/lib/components/filter-row/types.d.ts

@@ -1,4 +1,4 @@
-import { FilterKey, MetadataFormFieldValue, MetadataTemplateFieldOption } from '@box/metadata-filter';
+import { FetcherResponse, FilterKey, Level, MetadataFormFieldValue, MetadataTemplateFieldOption, TaxonomyOptionsRules, TreeOptionType, TreeQueryInput } from '@box/metadata-filter';
 import { ReactNode } from 'react';
 import { FilterVariant, MetadataFieldType } from '../../types';
 export interface CustomDateFilterOption {
@@ -19,17 +19,28 @@ export interface FilterGroup {
     toggleable: boolean;
 }
 export type AdvancedFilterOptionsMap = [FilterKey, string][];
-export interface FilterOption {
+export type TaxonomyOptionsFetcher = (scope: string, templateKey: string, fieldKey: string, level: number, options: TreeQueryInput) => Promise<FetcherResponse<TreeOptionType>>;
+export type TaxonomyFilterValue = TreeOptionType[] | {
+    value: TreeOptionType[];
+    advancedFilterOption: FilterKey;
+};
+export type FilterFieldValue = MetadataFormFieldValue | TaxonomyFilterValue;
+interface BaseFilterOption {
     customLabels?: string[];
-    fieldType: MetadataFieldType;
     icon?: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, 'ref'> & React.RefAttributes<SVGSVGElement>>;
     id: string;
-    isAdvancedFilterEnabled?: boolean;
     advancedFilterOptionsMap?: AdvancedFilterOptionsMap;
+    isMultilevelTaxonomyFieldEnabled?: boolean;
     isItemMetadata?: boolean;
+    key?: string;
+    levels?: Level[];
     name?: string;
     options?: string[];
+    optionsRules?: TaxonomyOptionsRules;
     placeholder?: string;
+    scope?: string;
+    taxonomyOptionsFetcher?: TaxonomyOptionsFetcher;
+    templateKey?: string;
     canUseRelativeDates?: boolean;
     customDateFilterOptions?: Array<CustomDateFilterOptionsProps>;
     selected: boolean;
@@ -43,6 +54,15 @@ export interface FilterOption {
      */
     position?: number;
 }
+interface TaxonomyFilterOption extends BaseFilterOption {
+    fieldType: 'taxonomy';
+    isAdvancedFilterEnabled: true;
+}
+interface NonTaxonomyFilterOption extends BaseFilterOption {
+    fieldType: Exclude<MetadataFieldType, 'taxonomy'>;
+    isAdvancedFilterEnabled?: boolean;
+}
+export type FilterOption = TaxonomyFilterOption | NonTaxonomyFilterOption;
 export interface FilterChipProps {
     formRef: React.RefObject<HTMLFormElement>;
     icon?: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, 'ref'> & React.RefAttributes<SVGSVGElement>>;
@@ -52,14 +72,20 @@ export interface FilterChipProps {
 }
 export type FilterValues = Record<string, {
     fieldType: MetadataFieldType;
+    key?: string;
+    levels?: Level[];
     options?: Array<MetadataTemplateFieldOption>;
-    value: MetadataFormFieldValue;
+    optionsRules?: TaxonomyOptionsRules;
+    value: FilterFieldValue;
 }>;
 export type InitialFilterValues = Record<string, {
-    value: MetadataFormFieldValue;
+    value: FilterFieldValue;
 }>;
 export type MetadataFormValues = {
     metadata: {
         fields: FilterValues;
+        scope?: string;
+        templateKey?: string;
     };
 };
+export {};

package/dist/types/lib/components/filter-row/use-nested-overlay-popover-open-change.d.ts

@@ -0,0 +1,15 @@
+type UseNestedOverlayPopoverOpenChangeProps = {
+    onOpenChange: (open: boolean) => void;
+    popoverOpen: boolean;
+};
+/**
+ * Default Popover dismissal treats Escape or outside pointer events from nested combobox/tree
+ * overlays as a parent close too. Taxonomy/combobox filters need that first dismiss to close
+ * only the nested overlay while keeping the filter popover open.
+ */
+export declare const useNestedOverlayPopoverOpenChange: ({ onOpenChange, popoverOpen, }: UseNestedOverlayPopoverOpenChangeProps) => {
+    handlePopoverOpenChange: (open: boolean) => void;
+    portalElement: HTMLElement;
+    setPopoverContentRef: (node: HTMLDivElement | null) => void;
+};
+export {};

package/dist/types/lib/components/filter-sidepanel/filter.d.ts

@@ -1,6 +1,6 @@
 import { FilterOption } from '../filter-row/types';
-interface FilterProps extends FilterOption {
+type FilterProps = FilterOption & {
     parentRef: HTMLElement;
-}
+};
 export declare const Filter: ({ ...props }: FilterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/lib/test-utils/mock-data.d.ts

@@ -30,6 +30,7 @@ export declare const ADVANCED_FILTER_IDS: {
     readonly fileSize: "file-size-filter";
     readonly phoneNumber: "phone-number-filter";
     readonly roleAdvanced: "role-advanced-filter";
+    readonly taxonomyAdvanced: "taxonomy-advanced-filter";
 };
 export declare const mockAdvancedFilterOptions: FilterOption[];
 export declare const mockFilterOptionsWithEnumPlaceholder: FilterOption[];

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

@@ -4,7 +4,7 @@ import { Selection } from 'react-aria-components';
 import { ActionBarProps, MetadataTableProps, PaginationProps } from './components';
 import { ItemActionMenuProps } from './components/item-action-menu';
 export declare const SELECT_ALL: "all";
-export type MetadataFieldType = 'date' | 'enum' | 'float' | 'multiSelect' | 'string';
+export type MetadataFieldType = 'date' | 'enum' | 'float' | 'multiSelect' | 'string' | 'taxonomy';
 export type FilterVariant = 'default' | 'search' | 'file' | 'radio' | 'relative' | 'checkbox';
 export interface Column extends Partial<ColumnProps> {
     cellRenderer?: (item: Item, column: Column) => React.ReactNode | undefined;

package/package.json

@@ -1,15 +1,15 @@
 {
     "name": "@box/metadata-view",
-    "version": "1.59.15",
+    "version": "1.60.1",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
-        "@box/blueprint-web": "^14.36.0",
-        "@box/blueprint-web-assets": "^4.120.2",
-        "@box/box-item-type-selector": "^1.41.24",
-        "@box/content-field": "^1.42.24",
-        "@box/item-icon": "^2.35.24",
-        "@box/metadata-filter": "^1.83.24",
-        "@box/types": "2.2.3",
+        "@box/blueprint-web": "^14.36.1",
+        "@box/blueprint-web-assets": "^4.120.3",
+        "@box/box-item-type-selector": "^1.41.25",
+        "@box/content-field": "^1.42.25",
+        "@box/item-icon": "^2.35.25",
+        "@box/metadata-filter": "^1.83.26",
+        "@box/types": "2.2.4",
         "@tanstack/react-virtual": "^3.10.8",
         "formik": "^2.4.5",
         "lodash": "^4.17.15",
@@ -19,15 +19,15 @@
         "react-intl": "^6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^14.36.0",
-        "@box/blueprint-web-assets": "^4.120.2",
-        "@box/box-item-type-selector": "^1.41.24",
-        "@box/content-field": "^1.42.24",
-        "@box/eslint-plugin-blueprint": "1.2.3",
-        "@box/item-icon": "^2.35.24",
-        "@box/metadata-filter": "^1.83.24",
-        "@box/storybook-utils": "0.19.17",
-        "@box/types": "2.2.3",
+        "@box/blueprint-web": "^14.36.1",
+        "@box/blueprint-web-assets": "^4.120.3",
+        "@box/box-item-type-selector": "^1.41.25",
+        "@box/content-field": "^1.42.25",
+        "@box/eslint-plugin-blueprint": "1.2.4",
+        "@box/item-icon": "^2.35.25",
+        "@box/metadata-filter": "^1.83.26",
+        "@box/storybook-utils": "0.19.18",
+        "@box/types": "2.2.4",
         "@tanstack/react-virtual": "^3.10.8",
         "react-intl": "^6.4.2"
     },