@box/metadata-filter 2.1.8 → 2.2.1

package/dist/chunks/metadata-filter.js

@@ -12,35 +12,37 @@ import { jsx as u, jsxs as d } from "react/jsx-runtime";
 import '../styles/metadata-filter.css';var f = {
 	container: "_container_p63iy_1",
 	loadingIndicator: "_loadingIndicator_p63iy_7"
-}, p = ({ isAdvancedFilterEnabled: p, isModifiedMarkerEnabled: m, metadataTemplateOptions: h, portalElement: g, selectedMetadataTemplate: _, taxonomyOptionsFetcher: v, showMetadataSelector: y = !0, disableForm: b = !1, isLoading: x = !1, hasError: S = !1, locale: C = navigator.language, canUseRelativeDates: w, isMultilevelTaxonomyFieldEnabled: T = !1, filterOptionsMap: E, onAdvancedFilterOptionChange: D, fieldAdvancedFilterOptions: O, hasAccordion: k = !1, onDirtyChange: A, isAdvancedTaxonomy: j = !1, hasExperimentalVirtualization: M = !1 }) => {
-	let { setFieldValue: N } = s(), P = l();
+}, p = ({ isAdvancedFilterEnabled: p, isModifiedMarkerEnabled: m, metadataTemplateOptions: h, portalElement: g, selectedMetadataTemplate: _, taxonomyOptionsFetcher: v, showMetadataSelector: y = !0, disableForm: b = !1, isLoading: x = !1, hasError: S = !1, locale: C = navigator.language, canUseRelativeDates: w, isMultilevelTaxonomyFieldEnabled: T = !1, isTaxonomyPickerEnabled: E = !1, createTaxonomyItemsService: D, filterOptionsMap: O, onAdvancedFilterOptionChange: k, fieldAdvancedFilterOptions: A, hasAccordion: j = !1, onDirtyChange: M, isAdvancedTaxonomy: N = !1, hasExperimentalVirtualization: P = !1 }) => {
+	let { setFieldValue: F } = s(), I = l();
 	return c(() => {
-		_ ? N("metadata", a(_)) : N("metadata", e);
-	}, [_, N]), /* @__PURE__ */ d("div", {
+		_ ? F("metadata", a(_)) : F("metadata", e);
+	}, [_, F]), /* @__PURE__ */ d("div", {
 		className: f.container,
 		children: [y && /* @__PURE__ */ u(i, {
 			hasError: S,
 			metadataTemplateOptions: h,
 			portalElement: g
 		}), !S && (x ? /* @__PURE__ */ u(o, {
-			"aria-label": P.formatMessage(t.loading),
+			"aria-label": I.formatMessage(t.loading),
 			className: f.loadingIndicator
-		}) : _ ? /* @__PURE__ */ u(k ? r : n, {
+		}) : _ ? /* @__PURE__ */ u(j ? r : n, {
 			canUseRelativeDates: w,
 			disableForm: b,
-			fieldAdvancedFilterOptions: O,
-			filterOptionsMap: E,
-			hasAccordion: k,
+			fieldAdvancedFilterOptions: A,
+			filterOptionsMap: O,
+			hasAccordion: j,
 			isAdvancedFilterEnabled: p,
-			isAdvancedTaxonomy: j,
+			isAdvancedTaxonomy: N,
 			isModifiedMarkerEnabled: m,
 			isMultilevelTaxonomyFieldEnabled: T,
+			isTaxonomyPickerEnabled: E,
+			createTaxonomyItemsService: D,
 			locale: C,
-			onAdvancedFilterOptionChange: D,
-			onDirtyChange: A,
+			onAdvancedFilterOptionChange: k,
+			onDirtyChange: M,
 			portalElement: g,
 			taxonomyOptionsFetcher: v,
-			hasExperimentalVirtualization: M
+			hasExperimentalVirtualization: P
 		}) : null)]
 	});
 };

package/dist/chunks/metadata-taxonomy-field-advanced.module.js

@@ -0,0 +1,6 @@
+import '../styles/metadata-taxonomy-field-advanced.css';var e = {
+	comboboxWrapper: "_comboboxWrapper_1e1d8_1",
+	disabled: "_disabled_1e1d8_1",
+	disabledTreeView: "_disabledTreeView_1e1d8_5"
+};
+export { e as t };

package/dist/esm/index.js

@@ -7,7 +7,7 @@ import { MetadataFloatField as c } from "./lib/components/metadata-filter-fields
 import { MetadataMultiSelectField as l } from "./lib/components/metadata-filter-fields/components/metadata-multi-select-field/metadata-multi-select-field.js";
 import { MetadataStringField as u } from "./lib/components/metadata-filter-fields/components/metadata-string-field/metadata-string-field.js";
 import { MetadataTaxonomyField as d } from "./lib/components/metadata-filter-fields/components/metadata-taxonomy-field/metadata-taxonomy-field.js";
-import { t as f } from "../chunks/metadata-taxonomy-field-advanced.js";
+import { MetadataTaxonomyFieldAdvanced as f } from "./lib/components/metadata-filter-fields/components/metadata-taxonomy-field/metadata-taxonomy-field-advanced.js";
 import { t as p } from "../chunks/metadata-filter.js";
 import "./lib/components/metadata-filter-fields/components/index.js";
 export * from "@box/combobox-with-api";

package/dist/esm/lib/components/metadata-filter-fields/components/index.js

@@ -4,5 +4,5 @@ import { MetadataFloatField as r } from "./metadata-float-field/metadata-float-f
 import { MetadataMultiSelectField as i } from "./metadata-multi-select-field/metadata-multi-select-field.js";
 import { MetadataStringField as a } from "./metadata-string-field/metadata-string-field.js";
 import { MetadataTaxonomyField as o } from "./metadata-taxonomy-field/metadata-taxonomy-field.js";
-import { t as s } from "../../../../../chunks/metadata-taxonomy-field-advanced.js";
+import { MetadataTaxonomyFieldAdvanced as s } from "./metadata-taxonomy-field/metadata-taxonomy-field-advanced.js";
 export { e as MetadataDateField, t as MetadataDateFieldNonRelative, n as MetadataEnumField, r as MetadataFloatField, i as MetadataMultiSelectField, a as MetadataStringField, o as MetadataTaxonomyField, s as MetadataTaxonomyFieldAdvanced };

package/dist/esm/lib/components/metadata-filter-fields/components/metadata-taxonomy-field/legacy-metadata-taxonomy-field-advanced.js

@@ -0,0 +1,89 @@
+import e from "../../../../messages.js";
+import { t } from "../../../../../../chunks/advanced-filter-select.js";
+import { t as n } from "../../../../../../chunks/metadata-taxonomy-field-advanced.module.js";
+import { createFieldValue as r, getInitialAdvancedFilterValue as i, getInputValue as a, isBlankOption as o } from "./utils.js";
+import { ComboboxWithApiPagination as s, ComboboxWithApiTreeView as c } from "@box/combobox-with-api";
+import { Field as l, getIn as u, useFormikContext as d } from "formik";
+import { useCallback as f, useState as p } from "react";
+import { useIntl as m } from "react-intl";
+import h from "clsx";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+var y = ({ className: y, disableForm: b, fieldNamePrefix: x, label: S, portalElement: C, taxonomyOptionsFetcher: w, isMultilevelTaxonomyFieldEnabled: T, hasAccordion: E, isAdvancedFilterEnabled: D, onAdvancedFilterOptionChange: O, fieldAdvancedFilterOptions: k, filterOptionsMap: A, isModified: j }) => {
+	let { setFieldValue: M, values: N } = d(), { metadata: { templateKey: P, scope: F } } = N, I = m(), L = `${x}.value`, { key: R, optionsRules: z, levels: B } = u(N, x), V = z?.selectableLevels, H = T && V?.some((e) => e > 1), [U, W] = p(i(k, A)), [G, K] = p(!1), q = f((e) => w ? w(F, P, R, V?.[0] ?? 0, e) : Promise.resolve({ options: [] }), [
+		R,
+		F,
+		V,
+		w,
+		P
+	]), J = f((t) => t?.length === 0 ? I.formatMessage(e.multiselectPlaceholder) : "", [I]), Y = f((e, t, n) => {
+		W(e), O?.(L, e);
+		let i = r(o(e) ? [] : t, e, D);
+		n.setFieldValue(L, i);
+	}, [
+		L,
+		D,
+		O
+	]), X = f((e) => {
+		e && K(!1);
+	}, []), Z = f((e) => {
+		M(L, r(e, U, D));
+	}, [
+		U,
+		L,
+		D,
+		M
+	]);
+	return /* @__PURE__ */ _("div", {
+		"data-testid": `${S}-field`,
+		children: /* @__PURE__ */ _(l, {
+			name: L,
+			children: ({ field: e, form: r }) => {
+				let i = a(e.value, D);
+				return /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _(t, {
+					disableForm: b ?? !1,
+					fieldAdvancedFilterOptions: k,
+					fieldNamePrefix: x,
+					filterOptionsMap: A,
+					isModified: j,
+					label: S,
+					onAdvancedFilterOptionChange: O,
+					onOpenChange: K,
+					onValueChange: (e) => Y(e, i, r),
+					open: G,
+					portalElement: C,
+					showLabel: !E,
+					value: U
+				}), !o(U) && /* @__PURE__ */ _("div", {
+					className: h(n.comboboxWrapper, b && n.disabled),
+					children: H ? /* @__PURE__ */ _(c, {
+						className: h(y, b && n.disabledTreeView),
+						defaultFetcher: q,
+						disabled: b,
+						hideLabel: !0,
+						label: S,
+						levels: B,
+						multiselect: !0,
+						onOpenChange: X,
+						onValueChange: Z,
+						placeholder: J(i),
+						portalElement: C,
+						selectableLevels: V,
+						value: i
+					}) : /* @__PURE__ */ _(s, {
+						className: y,
+						defaultFetcher: q,
+						disabled: b,
+						label: void 0,
+						multiselect: !0,
+						onOpenChange: X,
+						onValueChange: Z,
+						placeholder: J(i),
+						portalElement: C,
+						value: i
+					})
+				})] });
+			}
+		})
+	});
+};
+export { y as LegacyMetadataTaxonomyFieldAdvanced, y as default };

package/dist/esm/lib/components/metadata-filter-fields/components/metadata-taxonomy-field/legacy-metadata-taxonomy-field.js

@@ -0,0 +1,46 @@
+import e from "../../../../messages.js";
+import { ComboboxWithApiPagination as t, ComboboxWithApiTreeView as n } from "@box/combobox-with-api";
+import { Field as r, getIn as i, useFormikContext as a } from "formik";
+import { useCallback as o } from "react";
+import { useIntl as s } from "react-intl";
+import { jsx as c } from "react/jsx-runtime";
+var l = ({ className: l, disableForm: u, fieldNamePrefix: d, label: f, portalElement: p, taxonomyOptionsFetcher: m, isMultilevelTaxonomyFieldEnabled: h, hasAccordion: g }) => {
+	let { setFieldValue: _, values: v } = a(), { metadata: { templateKey: y, scope: b } } = v, x = s(), S = `${d}.value`, { key: C, optionsRules: { multiSelect: w, selectableLevels: T }, levels: E } = i(v, d), D = h && T?.some((e) => e > 1), O = o((e) => m(b, y, C, T?.[0], e), [
+		C,
+		b,
+		T,
+		m,
+		y
+	]), k = o((t) => w || !t?.length ? x.formatMessage(e.taxonomyPlaceholder) : void 0, [w, x]), A = o((e) => _(S, e), [_, S]);
+	return /* @__PURE__ */ c("div", {
+		"data-testid": `${f}-field`,
+		children: /* @__PURE__ */ c(r, {
+			name: S,
+			children: ({ field: e }) => D ? /* @__PURE__ */ c(n, {
+				className: l,
+				defaultFetcher: O,
+				disabled: u,
+				hideLabel: g,
+				label: f,
+				levels: E,
+				multiselect: w,
+				onValueChange: A,
+				placeholder: k(e.value),
+				portalElement: p,
+				selectableLevels: T,
+				value: e.value
+			}) : /* @__PURE__ */ c(t, {
+				className: l,
+				defaultFetcher: O,
+				disabled: u,
+				label: g ? void 0 : f,
+				multiselect: w,
+				onValueChange: A,
+				placeholder: k(e.value),
+				portalElement: p,
+				value: e.value
+			})
+		})
+	});
+};
+export { l as LegacyMetadataTaxonomyField, l as default };

package/dist/esm/lib/components/metadata-filter-fields/components/metadata-taxonomy-field/metadata-taxonomy-field-advanced.js

@@ -1,2 +1,11 @@
-import { t as e } from "../../../../../../chunks/metadata-taxonomy-field-advanced.js";
-export { e as MetadataTaxonomyFieldAdvanced, e as default };
+import { LegacyMetadataTaxonomyFieldAdvanced as e } from "./legacy-metadata-taxonomy-field-advanced.js";
+import { MetadataTaxonomyPickerFieldAdvanced as t } from "./picker/metadata-taxonomy-picker-field-advanced.js";
+import { jsx as n } from "react/jsx-runtime";
+var r = (r) => {
+	let { isTaxonomyPickerEnabled: i, createTaxonomyItemsService: a } = r;
+	return i && a ? /* @__PURE__ */ n(t, {
+		...r,
+		createTaxonomyItemsService: a
+	}) : (i && process.env.NODE_ENV !== "production" && console.error("[metadata-filter] isTaxonomyPickerEnabled is true but createTaxonomyItemsService was not provided; falling back to the legacy taxonomy field."), /* @__PURE__ */ n(e, { ...r }));
+};
+export { r as MetadataTaxonomyFieldAdvanced, r as default };

package/dist/esm/lib/components/metadata-filter-fields/components/metadata-taxonomy-field/metadata-taxonomy-field.js

@@ -1,46 +1,11 @@
-import e from "../../../../messages.js";
-import { ComboboxWithApiPagination as t, ComboboxWithApiTreeView as n } from "@box/combobox-with-api";
-import { Field as r, getIn as i, useFormikContext as a } from "formik";
-import { useCallback as o } from "react";
-import { useIntl as s } from "react-intl";
-import { jsx as c } from "react/jsx-runtime";
-var l = ({ className: l, disableForm: u, fieldNamePrefix: d, label: f, portalElement: p, taxonomyOptionsFetcher: m, isMultilevelTaxonomyFieldEnabled: h, hasAccordion: g }) => {
-	let { setFieldValue: _, values: v } = a(), { metadata: { templateKey: y, scope: b } } = v, x = s(), S = `${d}.value`, { key: C, optionsRules: { multiSelect: w, selectableLevels: T }, levels: E } = i(v, d), D = h && T?.some((e) => e > 1), O = o((e) => m(b, y, C, T?.[0], e), [
-		C,
-		b,
-		T,
-		m,
-		y
-	]), k = o((t) => w || !t?.length ? x.formatMessage(e.taxonomyPlaceholder) : void 0, [w, x]), A = o((e) => _(S, e), [_, S]);
-	return /* @__PURE__ */ c("div", {
-		"data-testid": `${f}-field`,
-		children: /* @__PURE__ */ c(r, {
-			name: S,
-			children: ({ field: e }) => D ? /* @__PURE__ */ c(n, {
-				className: l,
-				defaultFetcher: O,
-				disabled: u,
-				hideLabel: g,
-				label: f,
-				levels: E,
-				multiselect: w,
-				onValueChange: A,
-				placeholder: k(e.value),
-				portalElement: p,
-				selectableLevels: T,
-				value: e.value
-			}) : /* @__PURE__ */ c(t, {
-				className: l,
-				defaultFetcher: O,
-				disabled: u,
-				label: g ? void 0 : f,
-				multiselect: w,
-				onValueChange: A,
-				placeholder: k(e.value),
-				portalElement: p,
-				value: e.value
-			})
-		})
-	});
+import { LegacyMetadataTaxonomyField as e } from "./legacy-metadata-taxonomy-field.js";
+import { MetadataTaxonomyPickerField as t } from "./picker/metadata-taxonomy-picker-field.js";
+import { jsx as n } from "react/jsx-runtime";
+var r = (r) => {
+	let { isTaxonomyPickerEnabled: i, createTaxonomyItemsService: a } = r;
+	return i && a ? /* @__PURE__ */ n(t, {
+		...r,
+		createTaxonomyItemsService: a
+	}) : (i && process.env.NODE_ENV !== "production" && console.error("[metadata-filter] isTaxonomyPickerEnabled is true but createTaxonomyItemsService was not provided; falling back to the legacy taxonomy field."), /* @__PURE__ */ n(e, { ...r }));
 };
-export { l as MetadataTaxonomyField, l as default };
+export { r as MetadataTaxonomyField, r as default };

package/dist/esm/lib/components/metadata-filter-fields/components/metadata-taxonomy-field/picker/metadata-taxonomy-picker-field-advanced.js

@@ -0,0 +1,84 @@
+import e from "../../../../../messages.js";
+import { t } from "../../../../../../../chunks/advanced-filter-select.js";
+import { getTaxonomyPickerMode as n, mapFormValueToTaxonomyValues as r, mapLevelsToTaxonomyLevels as i, mapTaxonomyValuesToFormValue as a } from "./value-mapping.js";
+import { t as o } from "../../../../../../../chunks/metadata-taxonomy-field-advanced.module.js";
+import { createFieldValue as s, getInitialAdvancedFilterValue as c, getInputValue as l, isBlankOption as u } from "../utils.js";
+import { Field as d, getIn as f, useFormikContext as p } from "formik";
+import { useCallback as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { useIntl as v } from "react-intl";
+import ee from "clsx";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { MetadataTaxonomyPicker as S } from "@box/metadata-taxonomy-picker";
+var C = ({ className: C, disableForm: w, fieldNamePrefix: T, label: E, portalElement: D, isMultilevelTaxonomyFieldEnabled: O, hasAccordion: k, isAdvancedFilterEnabled: A, onAdvancedFilterOptionChange: j, fieldAdvancedFilterOptions: M, filterOptionsMap: N, isModified: P, createTaxonomyItemsService: F }) => {
+	let { setFieldValue: I, values: L } = p(), { metadata: { templateKey: R, scope: z } } = L, B = v(), V = `${T}.value`, { key: H, optionsRules: U, levels: W } = f(L, T), G = U?.selectableLevels, K = n(O, G), [q, J] = _(c(M, N)), [Y, X] = _(!1), Z = g([]), Q = h(() => F({
+		scope: z,
+		templateKey: R,
+		fieldKey: H
+	}), [
+		F,
+		z,
+		R,
+		H
+	]), $ = h(() => i(W, G), [W, G]), te = m((t) => t.length === 0 ? B.formatMessage(e.multiselectPlaceholder) : "", [B]), ne = m((e, t, n) => {
+		J(e), j?.(V, e);
+		let r = [];
+		u(e) || (r = t.length ? t : Z.current);
+		let i = s(r, e, A);
+		n.setFieldValue(V, i);
+	}, [
+		V,
+		A,
+		j
+	]), re = h(() => ({ onOpenChange: (e) => {
+		e && X(!1);
+	} }), []), ie = m((e) => {
+		let t = a(e, K);
+		Z.current = t, I(V, s(t, q, A));
+	}, [
+		q,
+		V,
+		A,
+		K,
+		I
+	]);
+	return /* @__PURE__ */ b("div", {
+		"data-testid": `${E}-field`,
+		children: /* @__PURE__ */ b(d, {
+			name: V,
+			children: ({ field: e, form: n }) => {
+				let i = l(e.value, A), a = r(i);
+				return /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(t, {
+					disableForm: w ?? !1,
+					fieldAdvancedFilterOptions: M,
+					fieldNamePrefix: T,
+					filterOptionsMap: N,
+					isModified: P,
+					label: E,
+					onAdvancedFilterOptionChange: j,
+					onOpenChange: X,
+					onValueChange: (e) => ne(e, i, n),
+					open: Y,
+					portalElement: D,
+					showLabel: !k,
+					value: q
+				}), !u(q) && /* @__PURE__ */ b("div", {
+					className: ee(o.comboboxWrapper, w && o.disabled),
+					children: /* @__PURE__ */ b(S, {
+						containerClassName: C,
+						disabled: w,
+						eventService: re,
+						itemsService: Q,
+						levels: $,
+						mode: K,
+						multiSelect: !0,
+						onValueChange: ie,
+						placeholder: te(a),
+						portalElement: D,
+						value: a
+					})
+				})] });
+			}
+		})
+	});
+};
+export { C as MetadataTaxonomyPickerFieldAdvanced, C as default };

package/dist/esm/lib/components/metadata-filter-fields/components/metadata-taxonomy-field/picker/metadata-taxonomy-picker-field.js

@@ -0,0 +1,46 @@
+import e from "../../../../../messages.js";
+import { getTaxonomyPickerMode as t, mapFormValueToTaxonomyValues as n, mapLevelsToTaxonomyLevels as r, mapTaxonomyValuesToFormValue as i } from "./value-mapping.js";
+import { Field as a, getIn as o, useFormikContext as s } from "formik";
+import { useCallback as c, useMemo as l } from "react";
+import { useIntl as u } from "react-intl";
+import { jsx as d } from "react/jsx-runtime";
+import { MetadataTaxonomyPicker as f } from "@box/metadata-taxonomy-picker";
+var p = ({ className: p, disableForm: m, fieldNamePrefix: h, label: g, portalElement: _, isMultilevelTaxonomyFieldEnabled: v, hasAccordion: y, createTaxonomyItemsService: b }) => {
+	let { setFieldValue: x, values: S } = s(), { metadata: { templateKey: C, scope: w } } = S, T = u(), E = `${h}.value`, { key: D, optionsRules: { multiSelect: O, selectableLevels: k }, levels: A } = o(S, h), j = t(v, k), M = l(() => b({
+		scope: w,
+		templateKey: C,
+		fieldKey: D
+	}), [
+		b,
+		w,
+		C,
+		D
+	]), N = l(() => r(A, k), [A, k]), P = c((t) => O || !t.length ? T.formatMessage(e.taxonomyPlaceholder) : void 0, [O, T]), F = c((e) => x(E, i(e, j)), [
+		x,
+		E,
+		j
+	]);
+	return /* @__PURE__ */ d("div", {
+		"data-testid": `${g}-field`,
+		children: /* @__PURE__ */ d(a, {
+			name: E,
+			children: ({ field: e }) => {
+				let t = n(e.value);
+				return /* @__PURE__ */ d(f, {
+					containerClassName: p,
+					disabled: m,
+					itemsService: M,
+					label: y ? void 0 : g,
+					levels: N,
+					mode: j,
+					multiSelect: O,
+					onValueChange: F,
+					placeholder: P(t),
+					portalElement: _,
+					value: t
+				});
+			}
+		})
+	});
+};
+export { p as MetadataTaxonomyPickerField, p as default };

package/dist/esm/lib/components/metadata-filter-fields/components/metadata-taxonomy-field/picker/value-mapping.js

@@ -0,0 +1,32 @@
+import { TaxonomyPickerMode as e } from "@box/metadata-taxonomy-picker";
+function t(e) {
+	return Array.isArray(e) ? e.map((e) => ({
+		id: e.value,
+		displayName: e.displayValue ?? "",
+		level: e.level,
+		ancestors: e.ancestors
+	})) : [];
+}
+function n(t, n) {
+	return n === e.SingleLevel ? t.map((e) => ({
+		value: e.id,
+		displayValue: e.displayName
+	})) : t.map((e) => ({
+		value: e.id,
+		displayValue: e.displayName,
+		level: e.level,
+		selectable: !0,
+		ancestors: e.ancestors
+	}));
+}
+function r(t, n) {
+	return t && n?.some((e) => e > 1) ? e.MultiLevel : e.SingleLevel;
+}
+function i(e, t) {
+	return e?.map((e) => ({
+		level: e.level,
+		displayName: e.displayName,
+		selectable: !!t?.includes(e.level)
+	})) ?? [];
+}
+export { r as getTaxonomyPickerMode, t as mapFormValueToTaxonomyValues, i as mapLevelsToTaxonomyLevels, n as mapTaxonomyValuesToFormValue };

package/dist/esm/lib/components/metadata-filter-fields/filter-field-types.js

@@ -7,7 +7,7 @@ import { MetadataMultiSelectFieldAdvanced as a } from "./components/metadata-mul
 import { MetadataMultiSelectField as o } from "./components/metadata-multi-select-field/metadata-multi-select-field.js";
 import { MetadataStringField as s } from "./components/metadata-string-field/metadata-string-field.js";
 import { MetadataTaxonomyField as c } from "./components/metadata-taxonomy-field/metadata-taxonomy-field.js";
-import { t as l } from "../../../../chunks/metadata-taxonomy-field-advanced.js";
+import { MetadataTaxonomyFieldAdvanced as l } from "./components/metadata-taxonomy-field/metadata-taxonomy-field-advanced.js";
 import { jsx as u } from "react/jsx-runtime";
 var d = {
 	date: (e) => /* @__PURE__ */ u(t, { ...e }),

package/dist/esm/lib/components/metadata-filter-fields/metadata-filter-fields-accordion.js

@@ -7,25 +7,25 @@ import { FieldArray as o, getIn as s, useFormikContext as c } from "formik";
 import { useMemo as l } from "react";
 import { FormattedMessage as u, useIntl as d } from "react-intl";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
-var m = ({ disableForm: m, locale: h, portalElement: g, taxonomyOptionsFetcher: _, canUseRelativeDates: v, isAdvancedFilterEnabled: y, isModifiedMarkerEnabled: b, onAdvancedFilterOptionChange: x, fieldAdvancedFilterOptions: S, isMultilevelTaxonomyFieldEnabled: C, filterOptionsMap: w, hasAccordion: T, isAdvancedTaxonomy: E }) => {
-	let { values: D } = c(), O = d(), k = "metadata.fields", A = s(D, k), j = l(() => A.map((e, t) => `field-${e.key}-${t}`), [A]);
-	return A.length ? /* @__PURE__ */ f(o, {
-		name: k,
+var m = ({ disableForm: m, locale: h, portalElement: g, taxonomyOptionsFetcher: _, canUseRelativeDates: v, isAdvancedFilterEnabled: y, isModifiedMarkerEnabled: b, onAdvancedFilterOptionChange: x, fieldAdvancedFilterOptions: S, isMultilevelTaxonomyFieldEnabled: C, isTaxonomyPickerEnabled: w, createTaxonomyItemsService: T, filterOptionsMap: E, hasAccordion: D, isAdvancedTaxonomy: O }) => {
+	let { values: k } = c(), A = d(), j = "metadata.fields", M = s(k, j), N = l(() => M.map((e, t) => `field-${e.key}-${t}`), [M]);
+	return M.length ? /* @__PURE__ */ f(o, {
+		name: j,
 		validateOnChange: !1,
 		children: () => /* @__PURE__ */ f(i, {
-			defaultValue: j,
+			defaultValue: N,
 			type: "multiple",
-			children: A.map((t, o) => {
+			children: M.map((t, o) => {
 				let { MetadataFilterField: c, showField: l, getFilterOptionsForField: u } = n({
 					field: t,
 					isAdvancedFilterEnabled: y,
-					isAdvancedTaxonomy: E,
-					intl: O,
-					filterOptionsMap: w
-				}), d = s(D, `metadata.fields[${o}].value`), k = S?.[t.key], A = r(t.type, d, y, k);
+					isAdvancedTaxonomy: O,
+					intl: A,
+					filterOptionsMap: E
+				}), d = s(k, `metadata.fields[${o}].value`), j = S?.[t.key], M = r(t.type, d, y, j);
 				return l && /* @__PURE__ */ f(i.Item, {
-					iconAriaLabel: A && b ? O.formatMessage(e.filterModifiedAriaLabel) : void 0,
-					iconVariant: A && b ? "status-modified" : void 0,
+					iconAriaLabel: M && b ? A.formatMessage(e.filterModifiedAriaLabel) : void 0,
+					iconVariant: M && b ? "status-modified" : void 0,
 					title: t.displayName,
 					value: `field-${t.key}-${o}`,
 					children: /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f(c, {
@@ -34,9 +34,11 @@ var m = ({ disableForm: m, locale: h, portalElement: g, taxonomyOptionsFetcher:
 						fieldAdvancedFilterOptions: S?.[t.key],
 						fieldNamePrefix: `metadata.fields[${o}]`,
 						filterOptionsMap: u(),
-						hasAccordion: T,
+						hasAccordion: D,
 						isAdvancedFilterEnabled: y,
 						isMultilevelTaxonomyFieldEnabled: C,
+						isTaxonomyPickerEnabled: w,
+						createTaxonomyItemsService: T,
 						label: t.displayName,
 						locale: h,
 						onAdvancedFilterOptionChange: x,

package/dist/esm/lib/components/metadata-filter-fields/metadata-filter-fields.js

@@ -7,26 +7,26 @@ import { FieldArray as o, getIn as s, useFormikContext as c } from "formik";
 import { useEffect as l } from "react";
 import { FormattedMessage as u, useIntl as d } from "react-intl";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
-var m = ({ disableForm: m, locale: h, portalElement: g, taxonomyOptionsFetcher: _, canUseRelativeDates: v, isAdvancedFilterEnabled: y, isModifiedMarkerEnabled: b, onAdvancedFilterOptionChange: x, fieldAdvancedFilterOptions: S, isMultilevelTaxonomyFieldEnabled: C, filterOptionsMap: w, onDirtyChange: T, isAdvancedTaxonomy: E, hasExperimentalVirtualization: D }) => {
-	let { values: O } = c(), k = d(), A = "metadata.fields", j = s(O, A);
+var m = ({ disableForm: m, locale: h, portalElement: g, taxonomyOptionsFetcher: _, canUseRelativeDates: v, isAdvancedFilterEnabled: y, isModifiedMarkerEnabled: b, onAdvancedFilterOptionChange: x, fieldAdvancedFilterOptions: S, isMultilevelTaxonomyFieldEnabled: C, isTaxonomyPickerEnabled: w, createTaxonomyItemsService: T, filterOptionsMap: E, onDirtyChange: D, isAdvancedTaxonomy: O, hasExperimentalVirtualization: k }) => {
+	let { values: A } = c(), j = d(), M = "metadata.fields", N = s(A, M);
 	return l(() => {
-		T && T(r(j, O, y));
+		D && D(r(N, A, y));
 	}, [
-		O,
+		A,
 		y,
-		T,
-		j
-	]), j.length ? /* @__PURE__ */ f(o, {
-		name: A,
+		D,
+		N
+	]), N.length ? /* @__PURE__ */ f(o, {
+		name: M,
 		validateOnChange: !1,
-		children: () => j.map((e, t) => {
+		children: () => N.map((e, t) => {
 			let { MetadataFilterField: r, showField: o, getFilterOptionsForField: c } = n({
 				field: e,
 				isAdvancedFilterEnabled: y,
-				isAdvancedTaxonomy: E,
-				intl: k,
-				filterOptionsMap: w
-			}), l = s(O, `metadata.fields[${t}].value`), u = e.advancedFilterOptionToExecute, d = i(e.type, l, y, u);
+				isAdvancedTaxonomy: O,
+				intl: j,
+				filterOptionsMap: E
+			}), l = s(A, `metadata.fields[${t}].value`), u = e.advancedFilterOptionToExecute, d = i(e.type, l, y, u);
 			return o && /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f(r, {
 				canUseRelativeDates: v,
 				disableForm: m,
@@ -36,12 +36,14 @@ var m = ({ disableForm: m, locale: h, portalElement: g, taxonomyOptionsFetcher:
 				isAdvancedFilterEnabled: y,
 				isModified: d && b,
 				isMultilevelTaxonomyFieldEnabled: C,
+				isTaxonomyPickerEnabled: w,
+				createTaxonomyItemsService: T,
 				label: e.displayName,
 				locale: h,
 				onAdvancedFilterOptionChange: x,
 				portalElement: g,
 				taxonomyOptionsFetcher: _,
-				hasExperimentalVirtualization: D
+				hasExperimentalVirtualization: k
 			}), !!e.description && /* @__PURE__ */ f(a, {
 				as: "span",
 				color: "textOnLightSecondary",

package/dist/types/lib/components/metadata-filter-fields/components/metadata-taxonomy-field/legacy-metadata-taxonomy-field-advanced.d.ts

@@ -0,0 +1,3 @@
+import { MetadataTaxonomyFieldProps } from '../../types';
+export declare const LegacyMetadataTaxonomyFieldAdvanced: ({ className, disableForm, fieldNamePrefix, label, portalElement, taxonomyOptionsFetcher, isMultilevelTaxonomyFieldEnabled, hasAccordion, isAdvancedFilterEnabled, onAdvancedFilterOptionChange, fieldAdvancedFilterOptions, filterOptionsMap, isModified, }: MetadataTaxonomyFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default LegacyMetadataTaxonomyFieldAdvanced;

package/dist/types/lib/components/metadata-filter-fields/components/metadata-taxonomy-field/legacy-metadata-taxonomy-field.d.ts

@@ -0,0 +1,3 @@
+import { MetadataTaxonomyFieldProps } from '../../types';
+export declare const LegacyMetadataTaxonomyField: ({ className, disableForm, fieldNamePrefix, label, portalElement, taxonomyOptionsFetcher, isMultilevelTaxonomyFieldEnabled, hasAccordion, }: MetadataTaxonomyFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default LegacyMetadataTaxonomyField;

package/dist/types/lib/components/metadata-filter-fields/components/metadata-taxonomy-field/metadata-taxonomy-field-advanced.d.ts

@@ -1,3 +1,11 @@
 import { MetadataTaxonomyFieldProps } from '../../types';
-export declare const MetadataTaxonomyFieldAdvanced: ({ className, disableForm, fieldNamePrefix, label, portalElement, taxonomyOptionsFetcher, isMultilevelTaxonomyFieldEnabled, hasAccordion, isAdvancedFilterEnabled, onAdvancedFilterOptionChange, fieldAdvancedFilterOptions, filterOptionsMap, isModified, }: MetadataTaxonomyFieldProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Dispatches the advanced taxonomy filter field between the new
+ * `MetadataTaxonomyPicker` experience (when `isTaxonomyPickerEnabled` is set and a
+ * `createTaxonomyItemsService` factory is provided) and the legacy
+ * `@box/combobox-with-api` field otherwise. The operator dropdown,
+ * blank-operator collapse, and wrapped `{ value, advancedFilterOption }` payload
+ * behave identically across both branches.
+ */
+export declare const MetadataTaxonomyFieldAdvanced: (props: MetadataTaxonomyFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default MetadataTaxonomyFieldAdvanced;

package/dist/types/lib/components/metadata-filter-fields/components/metadata-taxonomy-field/metadata-taxonomy-field.d.ts

@@ -1,3 +1,11 @@
 import { MetadataTaxonomyFieldProps } from '../../types';
-export declare const MetadataTaxonomyField: ({ className, disableForm, fieldNamePrefix, label, portalElement, taxonomyOptionsFetcher, isMultilevelTaxonomyFieldEnabled, hasAccordion, }: MetadataTaxonomyFieldProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Dispatches the basic taxonomy filter field between the new
+ * `MetadataTaxonomyPicker` experience (when `isTaxonomyPickerEnabled` is set and a
+ * `createTaxonomyItemsService` factory is provided) and the legacy
+ * `@box/combobox-with-api` field otherwise. This branch is the single migration
+ * boundary; remove the legacy field and this dispatcher's fallback once the
+ * picker is fully rolled out.
+ */
+export declare const MetadataTaxonomyField: (props: MetadataTaxonomyFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default MetadataTaxonomyField;

package/dist/types/lib/components/metadata-filter-fields/components/metadata-taxonomy-field/picker/metadata-taxonomy-picker-field-advanced.d.ts

@@ -0,0 +1,16 @@
+import { MetadataTaxonomyFieldProps } from '../../../types';
+import { CreateTaxonomyItemsService } from '../types';
+export type MetadataTaxonomyPickerFieldAdvancedProps = MetadataTaxonomyFieldProps & {
+    createTaxonomyItemsService: CreateTaxonomyItemsService;
+};
+/**
+ * Advanced taxonomy filter field backed by `@box/metadata-taxonomy-picker`.
+ * Keeps the operator dropdown (match any / match all / is blank / is not blank)
+ * above the picker, hides the picker for blank operators, forces multi-select,
+ * and preserves the wrapped `{ value, advancedFilterOption }` payload so saved
+ * filters round-trip unchanged. The picker's `itemsService` is built from the
+ * host-provided `createTaxonomyItemsService` factory. Selected via the
+ * `isTaxonomyPickerEnabled` flag in `MetadataTaxonomyFieldAdvanced`.
+ */
+export declare const MetadataTaxonomyPickerFieldAdvanced: ({ className, disableForm, fieldNamePrefix, label, portalElement, isMultilevelTaxonomyFieldEnabled, hasAccordion, isAdvancedFilterEnabled, onAdvancedFilterOptionChange, fieldAdvancedFilterOptions, filterOptionsMap, isModified, createTaxonomyItemsService, }: MetadataTaxonomyPickerFieldAdvancedProps) => import("react/jsx-runtime").JSX.Element;
+export default MetadataTaxonomyPickerFieldAdvanced;

package/dist/types/lib/components/metadata-filter-fields/components/metadata-taxonomy-field/picker/metadata-taxonomy-picker-field.d.ts

@@ -0,0 +1,14 @@
+import { MetadataTaxonomyFieldProps } from '../../../types';
+import { CreateTaxonomyItemsService } from '../types';
+export type MetadataTaxonomyPickerFieldProps = MetadataTaxonomyFieldProps & {
+    createTaxonomyItemsService: CreateTaxonomyItemsService;
+};
+/**
+ * Basic taxonomy filter field backed by `@box/metadata-taxonomy-picker`. Builds
+ * the picker's `itemsService` from the host-provided `createTaxonomyItemsService`
+ * factory and keeps the Formik value shape identical to the legacy combobox so
+ * persisted filters round-trip unchanged. Selected via the
+ * `isTaxonomyPickerEnabled` flag in `MetadataTaxonomyField`.
+ */
+export declare const MetadataTaxonomyPickerField: ({ className, disableForm, fieldNamePrefix, label, portalElement, isMultilevelTaxonomyFieldEnabled, hasAccordion, createTaxonomyItemsService, }: MetadataTaxonomyPickerFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default MetadataTaxonomyPickerField;

package/dist/types/lib/components/metadata-filter-fields/components/metadata-taxonomy-field/picker/value-mapping.d.ts

@@ -0,0 +1,33 @@
+import { Level, TreeOptionType } from '@box/combobox-with-api';
+import { TaxonomyLevel, TaxonomyValue, TaxonomyPickerMode } from '@box/metadata-taxonomy-picker';
+/**
+ * Maps the Formik-stored taxonomy value to the picker's `TaxonomyValue[]`.
+ *
+ * The filter persists single-level values as bare `{ value, displayValue }`
+ * options and multi-level values as full `TreeOptionType`s; both map to the
+ * picker shape. Non-array inputs (e.g. an empty `''`) map to `[]`.
+ */
+export declare function mapFormValueToTaxonomyValues(value: unknown): TaxonomyValue[];
+/**
+ * Maps the picker's `TaxonomyValue[]` back to the Formik value shape.
+ *
+ * To keep the persisted filter payload byte-for-byte identical to the legacy
+ * comboboxes, single-level values are written as bare `{ value, displayValue }`
+ * (matching `ComboboxWithApiPagination`'s `BaseOptionType`) while multi-level
+ * values carry the full `{ value, displayValue, level, selectable, ancestors }`
+ * shape (matching `ComboboxWithApiTreeView`'s `TreeOptionType`).
+ */
+export declare function mapTaxonomyValuesToFormValue(values: TaxonomyValue[], mode: TaxonomyPickerMode): TreeOptionType[];
+/**
+ * Derives the picker mode the same way the legacy field chose between the tree
+ * view and the flat pagination combobox: multi-level only when the
+ * multi-level feature flag is on AND the field has a selectable level deeper
+ * than the root.
+ */
+export declare function getTaxonomyPickerMode(isMultilevelTaxonomyFieldEnabled: boolean | undefined, selectableLevels: number[] | undefined): TaxonomyPickerMode;
+/**
+ * Maps the field's taxonomy `levels` to the picker's `TaxonomyLevel[]`, marking
+ * each level selectable based on `selectableLevels`. Drives the level-filter
+ * dropdown and search auto-scope in multi-level mode.
+ */
+export declare function mapLevelsToTaxonomyLevels(levels: Level[] | undefined, selectableLevels: number[] | undefined): TaxonomyLevel[];

package/dist/types/lib/components/metadata-filter-fields/components/metadata-taxonomy-field/types.d.ts

@@ -1,10 +1,23 @@
 import { FetcherResponse, TreeOptionType, TreeQueryInput } from '@box/combobox-with-api';
+import { TaxonomyItemsService } from '@box/metadata-taxonomy-picker';
 import { FilterKey, FilterOption, TaxonomyMultiSelectFilterKey, TaxonomySingleSelectFilterKey } from '../../../../types';
 import { MetadataFieldProps } from '../../types';
 export type MetadataTaxonomyFieldProps = Omit<MetadataFieldProps, 'portalElement'> & {
     portalElement?: HTMLElement | (() => HTMLElement);
 };
 export type TaxonomyOptionsFetcher = (scope: string, templateKey: string, fieldKey: string, level: number, options: TreeQueryInput) => Promise<FetcherResponse<TreeOptionType>>;
+/**
+ * Builds the per-field `TaxonomyItemsService` consumed by the new
+ * `MetadataTaxonomyPicker` experience. Called once per taxonomy field with that
+ * field's identity; browse/search level scoping is supplied by the picker per
+ * request, so it is intentionally not a parameter here. Mirrors the
+ * `metadata-editor` integration so hosts can share a single factory.
+ */
+export type CreateTaxonomyItemsService = (params: {
+    scope: string;
+    templateKey: string;
+    fieldKey: string;
+}) => TaxonomyItemsService;
 export interface TaxonomyFieldValue<T> {
     value: T[];
     advancedFilterOption: FilterKey;

package/dist/types/lib/components/metadata-filter-fields/metadata-filter-fields-accordion.d.ts

@@ -1,3 +1,3 @@
 import { MetadataFilterFieldsProps } from './types';
-export declare const MetadataFilterFieldsAccordion: ({ disableForm, locale, portalElement, taxonomyOptionsFetcher, canUseRelativeDates, isAdvancedFilterEnabled, isModifiedMarkerEnabled, onAdvancedFilterOptionChange, fieldAdvancedFilterOptions, isMultilevelTaxonomyFieldEnabled, filterOptionsMap, hasAccordion, isAdvancedTaxonomy, }: MetadataFilterFieldsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataFilterFieldsAccordion: ({ disableForm, locale, portalElement, taxonomyOptionsFetcher, canUseRelativeDates, isAdvancedFilterEnabled, isModifiedMarkerEnabled, onAdvancedFilterOptionChange, fieldAdvancedFilterOptions, isMultilevelTaxonomyFieldEnabled, isTaxonomyPickerEnabled, createTaxonomyItemsService, filterOptionsMap, hasAccordion, isAdvancedTaxonomy, }: MetadataFilterFieldsProps) => import("react/jsx-runtime").JSX.Element;
 export default MetadataFilterFieldsAccordion;

package/dist/types/lib/components/metadata-filter-fields/metadata-filter-fields.d.ts

@@ -1,3 +1,3 @@
 import { MetadataFilterFieldsProps } from './types';
-export declare const MetadataFilterFields: ({ disableForm, locale, portalElement, taxonomyOptionsFetcher, canUseRelativeDates, isAdvancedFilterEnabled, isModifiedMarkerEnabled, onAdvancedFilterOptionChange, fieldAdvancedFilterOptions, isMultilevelTaxonomyFieldEnabled, filterOptionsMap, onDirtyChange, isAdvancedTaxonomy, hasExperimentalVirtualization, }: MetadataFilterFieldsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataFilterFields: ({ disableForm, locale, portalElement, taxonomyOptionsFetcher, canUseRelativeDates, isAdvancedFilterEnabled, isModifiedMarkerEnabled, onAdvancedFilterOptionChange, fieldAdvancedFilterOptions, isMultilevelTaxonomyFieldEnabled, isTaxonomyPickerEnabled, createTaxonomyItemsService, filterOptionsMap, onDirtyChange, isAdvancedTaxonomy, hasExperimentalVirtualization, }: MetadataFilterFieldsProps) => import("react/jsx-runtime").JSX.Element;
 export default MetadataFilterFields;

package/dist/types/lib/components/metadata-filter-fields/types.d.ts

@@ -1,6 +1,6 @@
 import { Level } from '@box/combobox-with-api';
 import { FilterKey, FilterOption, FilterOptionsMap, MetadataTemplateFieldOption, MetadataTemplateFieldType, RangeValue } from '../../types';
-import { TaxonomyOptionsFetcher } from './components/metadata-taxonomy-field/types';
+import { CreateTaxonomyItemsService, TaxonomyOptionsFetcher } from './components/metadata-taxonomy-field/types';
 export type CustomDateFilterOption = {
     name: string;
     from: number;
@@ -20,6 +20,10 @@ export type MetadataFilterFieldsProps = {
     taxonomyOptionsFetcher: TaxonomyOptionsFetcher;
     canUseRelativeDates: boolean;
     isMultilevelTaxonomyFieldEnabled?: boolean;
+    /** When true, taxonomy filter fields render the new `MetadataTaxonomyPicker` experience instead of the legacy comboboxes. */
+    isTaxonomyPickerEnabled?: boolean;
+    /** Builds the per-field `TaxonomyItemsService` for the new picker experience. Required when `isTaxonomyPickerEnabled` is true. */
+    createTaxonomyItemsService?: CreateTaxonomyItemsService;
     isAdvancedFilterEnabled?: boolean;
     isModifiedMarkerEnabled?: boolean;
     filterOptionsMap?: FilterOptionsMap;
@@ -41,6 +45,10 @@ export type MetadataFieldProps = {
     canUseRelativeDates?: boolean;
     isAdvancedFilterEnabled?: boolean;
     isMultilevelTaxonomyFieldEnabled?: boolean;
+    /** When true, taxonomy filter fields render the new `MetadataTaxonomyPicker` experience instead of the legacy comboboxes. */
+    isTaxonomyPickerEnabled?: boolean;
+    /** Builds the per-field `TaxonomyItemsService` for the new picker experience. Required when `isTaxonomyPickerEnabled` is true. */
+    createTaxonomyItemsService?: CreateTaxonomyItemsService;
     levels?: Level[];
     filterOptionsMap?: FilterOption[];
     onAdvancedFilterOptionChange?: (fieldKey: string, option: FilterKey) => void;

package/dist/types/lib/metadata-filter.d.ts

@@ -1,2 +1,2 @@
 import { MetadataFilterProps } from './types';
-export declare const MetadataFilter: ({ isAdvancedFilterEnabled, isModifiedMarkerEnabled, metadataTemplateOptions, portalElement, selectedMetadataTemplate, taxonomyOptionsFetcher, showMetadataSelector, disableForm, isLoading, hasError, locale, canUseRelativeDates, isMultilevelTaxonomyFieldEnabled, filterOptionsMap, onAdvancedFilterOptionChange, fieldAdvancedFilterOptions, hasAccordion, onDirtyChange, isAdvancedTaxonomy, hasExperimentalVirtualization, }: MetadataFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataFilter: ({ isAdvancedFilterEnabled, isModifiedMarkerEnabled, metadataTemplateOptions, portalElement, selectedMetadataTemplate, taxonomyOptionsFetcher, showMetadataSelector, disableForm, isLoading, hasError, locale, canUseRelativeDates, isMultilevelTaxonomyFieldEnabled, isTaxonomyPickerEnabled, createTaxonomyItemsService, filterOptionsMap, onAdvancedFilterOptionChange, fieldAdvancedFilterOptions, hasAccordion, onDirtyChange, isAdvancedTaxonomy, hasExperimentalVirtualization, }: MetadataFilterProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { BaseOptionType, Level } from '@box/combobox-with-api';
-import { TaxonomyOptionsFetcher } from './components/metadata-filter-fields/components/metadata-taxonomy-field/types';
+import { CreateTaxonomyItemsService, TaxonomyOptionsFetcher } from './components/metadata-filter-fields/components/metadata-taxonomy-field/types';
 export type MetadataFormFieldValue = EnumType | RangeType | FloatType;
 export type EnumType = {
     enum: Array<string>;
@@ -124,6 +124,10 @@ export type MetadataFilterProps = {
     taxonomyOptionsFetcher: TaxonomyOptionsFetcher;
     canUseRelativeDates?: boolean;
     isMultilevelTaxonomyFieldEnabled?: boolean;
+    /** When true, taxonomy filter fields render the new `MetadataTaxonomyPicker` experience instead of the legacy comboboxes. */
+    isTaxonomyPickerEnabled?: boolean;
+    /** Builds the per-field `TaxonomyItemsService` for the new picker experience. Required when `isTaxonomyPickerEnabled` is true. */
+    createTaxonomyItemsService?: CreateTaxonomyItemsService;
     isAdvancedFilterEnabled?: boolean;
     isModifiedMarkerEnabled?: boolean;
     filterOptionsMap?: FilterOptionsMap;

package/package.json

@@ -1,19 +1,21 @@
 {
     "name": "@box/metadata-filter",
-    "version": "2.1.8",
+    "version": "2.2.1",
     "peerDependencies": {
-        "@box/blueprint-web": "^16.4.0",
-        "@box/blueprint-web-assets": "^5.2.5",
-        "@box/combobox-with-api": "^2.1.8",
+        "@box/blueprint-web": "^16.4.2",
+        "@box/blueprint-web-assets": "^5.2.7",
+        "@box/combobox-with-api": "^2.1.10",
+        "@box/metadata-taxonomy-picker": "^3.1.10",
         "formik": "^2.0.3",
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0",
         "react-intl": "6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^16.4.0",
-        "@box/blueprint-web-assets": "^5.2.5",
-        "@box/storybook-utils": "^1.1.7",
+        "@box/blueprint-web": "^16.4.2",
+        "@box/blueprint-web-assets": "^5.2.7",
+        "@box/metadata-taxonomy-picker": "^3.1.10",
+        "@box/storybook-utils": "^1.1.9",
         "react": "^18.3.0",
         "react-dom": "^18.3.0",
         "react-intl": "6.4.2"

package/dist/chunks/metadata-taxonomy-field-advanced.js

@@ -1,92 +0,0 @@
-import e from "../esm/lib/messages.js";
-import { t } from "./advanced-filter-select.js";
-import { createFieldValue as n, getInitialAdvancedFilterValue as r, getInputValue as i, isBlankOption as a } from "../esm/lib/components/metadata-filter-fields/components/metadata-taxonomy-field/utils.js";
-import { ComboboxWithApiPagination as o, ComboboxWithApiTreeView as s } from "@box/combobox-with-api";
-import { Field as c, getIn as l, useFormikContext as u } from "formik";
-import { useCallback as d, useState as f } from "react";
-import { useIntl as p } from "react-intl";
-import m from "clsx";
-import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
-import '../styles/metadata-taxonomy-field-advanced.css';var v = {
-	comboboxWrapper: "_comboboxWrapper_1e1d8_1",
-	disabled: "_disabled_1e1d8_1",
-	disabledTreeView: "_disabledTreeView_1e1d8_5"
-}, y = ({ className: y, disableForm: b, fieldNamePrefix: x, label: S, portalElement: C, taxonomyOptionsFetcher: w, isMultilevelTaxonomyFieldEnabled: T, hasAccordion: E, isAdvancedFilterEnabled: D, onAdvancedFilterOptionChange: O, fieldAdvancedFilterOptions: k, filterOptionsMap: A, isModified: j }) => {
-	let { setFieldValue: M, values: N } = u(), { metadata: { templateKey: P, scope: F } } = N, I = p(), L = `${x}.value`, { key: R, optionsRules: z, levels: B } = l(N, x), V = z?.selectableLevels, H = T && V?.some((e) => e > 1), [U, W] = f(r(k, A)), [G, K] = f(!1), q = d((e) => w ? w(F, P, R, V?.[0] ?? 0, e) : Promise.resolve({ options: [] }), [
-		R,
-		F,
-		V,
-		w,
-		P
-	]), J = d((t) => t?.length === 0 ? I.formatMessage(e.multiselectPlaceholder) : "", [I]), Y = d((e, t, r) => {
-		W(e), O?.(L, e);
-		let i = n(a(e) ? [] : t, e, D);
-		r.setFieldValue(L, i);
-	}, [
-		L,
-		D,
-		O
-	]), X = d((e) => {
-		e && K(!1);
-	}, []), Z = d((e) => {
-		M(L, n(e, U, D));
-	}, [
-		U,
-		L,
-		D,
-		M
-	]);
-	return /* @__PURE__ */ g("div", {
-		"data-testid": `${S}-field`,
-		children: /* @__PURE__ */ g(c, {
-			name: L,
-			children: ({ field: e, form: n }) => {
-				let r = i(e.value, D);
-				return /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(t, {
-					disableForm: b ?? !1,
-					fieldAdvancedFilterOptions: k,
-					fieldNamePrefix: x,
-					filterOptionsMap: A,
-					isModified: j,
-					label: S,
-					onAdvancedFilterOptionChange: O,
-					onOpenChange: K,
-					onValueChange: (e) => Y(e, r, n),
-					open: G,
-					portalElement: C,
-					showLabel: !E,
-					value: U
-				}), !a(U) && /* @__PURE__ */ g("div", {
-					className: m(v.comboboxWrapper, b && v.disabled),
-					children: H ? /* @__PURE__ */ g(s, {
-						className: m(y, b && v.disabledTreeView),
-						defaultFetcher: q,
-						disabled: b,
-						hideLabel: !0,
-						label: S,
-						levels: B,
-						multiselect: !0,
-						onOpenChange: X,
-						onValueChange: Z,
-						placeholder: J(r),
-						portalElement: C,
-						selectableLevels: V,
-						value: r
-					}) : /* @__PURE__ */ g(o, {
-						className: y,
-						defaultFetcher: q,
-						disabled: b,
-						label: void 0,
-						multiselect: !0,
-						onOpenChange: X,
-						onValueChange: Z,
-						placeholder: J(r),
-						portalElement: C,
-						value: r
-					})
-				})] });
-			}
-		})
-	});
-};
-export { y as t };