@box/metadata-editor 2.0.1 → 2.2.0

package/dist/chunks/combobox-with-api-pagination.js

@@ -18,7 +18,7 @@ import '../styles/combobox-with-api-pagination.css';var E = {
 	option: "_option_5alez_38",
 	errorComboboxOption: "_errorComboboxOption_5alez_42",
 	errorComboboxOptionText: "_errorComboboxOptionText_5alez_47"
-}, D = /* @__PURE__ */ d(({ onTryAgain: t }, n) => {
+}, D = /*#__PURE__*/ d(({ onTryAgain: t }, n) => {
 	let { formatMessage: r } = _();
 	return /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(a, {
 		variant: "error",
@@ -49,7 +49,7 @@ import '../styles/combobox-with-api-pagination.css';var E = {
 		boxSizing: "border-box"
 	},
 	width: T
-}), M = /* @__PURE__ */ d(function(a, s) {
+}), M = /*#__PURE__*/ d(function(a, s) {
 	let { defaultFetcher: l, onInputValueChange: u, value: d, onValueChange: g, noResultMessage: y, defaultValue: x = [], loadingAriaLabel: C, multiselect: w = !1, disabled: T, className: M, displaySingleSelectionAsChip: N = !0, ...P } = a, { formatMessage: F } = _(), I = h(null), L = h(!0), R = t({ async load({ marker: e, searchInput: t, signal: n }) {
 		let r = await l({
 			signal: n,

package/dist/chunks/metadata-instance-form-autofill-button.js

@@ -14,7 +14,7 @@ import '../styles/metadata-instance-form-autofill-button.css';var T = {
 	loadingIndicator: "_loadingIndicator_zhzu0_1",
 	actionMenuItem: "_actionMenuItem_zhzu0_11",
 	splitButtonIcon: "_splitButtonIcon_zhzu0_17"
-}, E = /* @__PURE__ */ p(({ isButtonDisabled: t, onAutofill: n, onAgentChange: r, storedAgent: i, icon: o, ...c }, l) => {
+}, E = /*#__PURE__*/ p(({ isButtonDisabled: t, onAutofill: n, onAgentChange: r, storedAgent: i, icon: o, ...c }, l) => {
 	let f = _(), [p, m] = g(i || "standard"), h = (e) => {
 		m(e), r(e), setTimeout(() => {
 			n(e);

package/dist/chunks/update-mode-field-wrapper.js

@@ -67,7 +67,7 @@ import '../styles/update-mode-field-wrapper.css';var h = {
 				})
 			}), g(E) && D && /* @__PURE__ */ l("div", {
 				className: h.additionalFieldContainer,
-				children: /* @__PURE__ */ s.cloneElement(D, {
+				children: /*#__PURE__*/ s.cloneElement(D, {
 					updateModePrefix: `${y}.updateMode`,
 					options: O,
 					label: w.formatMessage(n.with)

package/dist/chunks/utils.js

@@ -26,7 +26,7 @@ function g({ as: e, fieldDescription: t, fieldName: r, labelClassName: i, labelR
 	let g = u(null), _ = o(g, l);
 	return /* @__PURE__ */ f(a, {
 		content: s(g) ? /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("div", { children: r }), /* @__PURE__ */ f("div", { children: t })] }) : t,
-		children: /* @__PURE__ */ f(d, { render: /* @__PURE__ */ c(e, {
+		children: /* @__PURE__ */ f(d, { render: /*#__PURE__*/ c(e, {
 			className: m(i, n.interactiveTextHint),
 			...h,
 			ref: _
@@ -34,7 +34,7 @@ function g({ as: e, fieldDescription: t, fieldName: r, labelClassName: i, labelR
 	});
 }
 function _({ as: e, fieldName: t, labelClassName: n, labelRef: r, ...i }) {
-	let l = u(null), p = o(l, r), m = s(l) ? t : void 0, h = /* @__PURE__ */ c(e, {
+	let l = u(null), p = o(l, r), m = s(l) ? t : void 0, h = /*#__PURE__*/ c(e, {
 		className: n,
 		...i,
 		ref: p
@@ -44,7 +44,7 @@ function _({ as: e, fieldName: t, labelClassName: n, labelRef: r, ...i }) {
 		children: /* @__PURE__ */ f(d, { render: h })
 	}) : h;
 }
-var v = /* @__PURE__ */ l(function({ fieldName: t, fieldDescription: n, isAiSuggestionApplied: a, as: o, confidenceScore: s, labelProps: c }) {
+var v = /*#__PURE__*/ l(function({ fieldName: t, fieldDescription: n, isAiSuggestionApplied: a, as: o, confidenceScore: s, labelProps: c }) {
 	let { className: l, ref: u, ...d } = c, v = m(l || h.labelText, h.labelTruncated), y = !!s && e(s), b = () => s && y ? /* @__PURE__ */ f(i, {}) : a || s ? /* @__PURE__ */ f(r, { confidenceScore: s }) : null, x = n ? /* @__PURE__ */ f(g, {
 		as: o,
 		fieldDescription: n,
@@ -73,7 +73,14 @@ var v = /* @__PURE__ */ l(function({ fieldName: t, fieldDescription: n, isAiSugg
 	fieldName: e,
 	isAiSuggestionApplied: n,
 	labelProps: a
-}), b = (e) => {
+}), b = (e, t, n = !1, r) => /* @__PURE__ */ f(v, {
+	as: "span",
+	confidenceScore: r,
+	fieldDescription: t,
+	fieldName: e,
+	isAiSuggestionApplied: n,
+	labelProps: {}
+}), x = (e) => {
 	try {
 		let n = t(e), r = new Date(n);
 		return isNaN(r.getTime()) ? null : n;
@@ -81,4 +88,4 @@ var v = /* @__PURE__ */ l(function({ fieldName: t, fieldDescription: n, isAiSugg
 		return null;
 	}
 };
-export { b as n, h as r, y as t };
+export { h as i, b as n, x as r, y as t };

package/dist/esm/lib/components/combobox-with-api-pagination/use-async-list.js

@@ -1,12 +1,9 @@
 import { RequestStates as e } from "./request.js";
 import { isAbortError as t } from "./utils/is-abort-error.js";
 import { useReducer as n } from "react";
-var r = /* @__PURE__ */ function(e) {
-	return e.LOAD_MORE = "LOAD_MORE", e.RELOAD = "RELOAD", e.SEARCH = "SEARCH", e.SET_ERROR = "SET_ERROR", e.SET_LOADING = "SET_LOADING", e;
-}(r || {});
-function i(t, n) {
+function r(t, n) {
 	switch (n.type) {
-		case r.LOAD_MORE: return {
+		case "LOAD_MORE": return {
 			...t,
 			abortController: n.abortController,
 			error: null,
@@ -14,7 +11,7 @@ function i(t, n) {
 			marker: n.marker,
 			requestState: e.SUCCESS
 		};
-		case r.RELOAD: return n.abortController === t.abortController ? {
+		case "RELOAD": return n.abortController === t.abortController ? {
 			...t,
 			abortController: null,
 			error: null,
@@ -23,7 +20,7 @@ function i(t, n) {
 			requestState: e.SUCCESS,
 			searchInput: ""
 		} : t;
-		case r.SEARCH: return {
+		case "SEARCH": return {
 			...t,
 			abortController: n.abortController,
 			error: null,
@@ -32,13 +29,13 @@ function i(t, n) {
 			requestState: e.SUCCESS,
 			searchInput: n.searchInput ?? t.searchInput
 		};
-		case r.SET_ERROR: return {
+		case "SET_ERROR": return {
 			...t,
-			items: r.LOAD_MORE ? t.items : [],
+			items: t.items,
 			error: n.error,
 			requestState: e.ERROR
 		};
-		case r.SET_LOADING: return {
+		case "SET_LOADING": return {
 			...t,
 			requestInitiator: n.requestInitiator,
 			requestState: e.IN_PROGRESS,
@@ -47,54 +44,54 @@ function i(t, n) {
 		default: throw Error(`Invalid action type "${n.type}"`);
 	}
 }
+function i(t, n) {
+	return t.type === "SEARCH" && n.requestState === e.IN_PROGRESS;
+}
 function a(t, n) {
-	return t.type === r.SEARCH && n.requestState === e.IN_PROGRESS;
+	return n.requestInitiator === "LOAD_MORE" && n.requestState === e.IN_PROGRESS && t.type === "LOAD_MORE";
 }
-function o(t, n) {
-	return n.requestInitiator === r.LOAD_MORE && n.requestState === e.IN_PROGRESS && t.type === r.LOAD_MORE;
+function o(e, t) {
+	return i(e, t) || a(e, t);
 }
 function s(e, t) {
-	return a(e, t) || o(e, t);
+	i(e, t) && t.abortController.abort(), a(e, t) && e.abortController?.abort();
 }
 function c(e, t) {
-	a(e, t) && t.abortController.abort(), o(e, t) && e.abortController?.abort();
-}
-function l(e, t) {
-	return o(e, t);
+	return a(e, t);
 }
-async function u(e, n, i, a) {
-	let o = new AbortController();
-	if (s(e, i) && c(e, i), !l(e, i)) {
-		a({
-			type: r.SET_LOADING,
+async function l(e, n, r, i) {
+	let a = new AbortController();
+	if (o(e, r) && s(e, r), !c(e, r)) {
+		i({
+			type: "SET_LOADING",
 			requestInitiator: e.type,
-			abortController: o
+			abortController: a
 		});
 		try {
 			let t = await n({
-				items: i.items.slice(),
-				signal: o.signal,
-				marker: e.type === r.LOAD_MORE ? i.marker : null,
-				searchInput: e.searchInput ?? i.searchInput
-			}), s = t.searchInput ?? e.searchInput ?? i.searchInput;
-			a({
+				items: r.items.slice(),
+				signal: a.signal,
+				marker: e.type === "LOAD_MORE" ? r.marker : null,
+				searchInput: e.searchInput ?? r.searchInput
+			}), o = t.searchInput ?? e.searchInput ?? r.searchInput;
+			i({
 				type: e.type,
 				...t,
-				searchInput: s,
-				abortController: o
+				searchInput: o,
+				abortController: a
 			});
 		} catch (e) {
 			if (t(e)) return;
-			a({
-				type: r.SET_ERROR,
+			i({
+				type: "SET_ERROR",
 				error: e,
-				abortController: o
+				abortController: a
 			});
 		}
 	}
 }
-function d(t) {
-	let { load: a } = t, [o, s] = n(i, {
+function u(t) {
+	let { load: i } = t, [a, o] = n(r, {
 		error: null,
 		items: [],
 		requestInitiator: null,
@@ -102,20 +99,20 @@ function d(t) {
 		searchInput: ""
 	});
 	return {
-		hasError: o.requestState === e.ERROR,
-		hasNextPage: o.requestState === e.ERROR ? !1 : o.marker != null,
-		isEmpty: o.items.length === 0,
-		isLoading: o.requestState === e.IN_PROGRESS,
-		isReloading: o.requestState === e.IN_PROGRESS && (o.requestInitiator === r.RELOAD || o.requestInitiator === r.SEARCH),
-		items: o.items,
-		loadMore: () => u({ type: r.LOAD_MORE }, a, o, s),
-		reload: () => u({ type: r.RELOAD }, a, o, s),
-		requestInitiator: o.requestInitiator,
-		searchInput: o.searchInput,
-		search: (e) => u({
-			type: r.SEARCH,
+		hasError: a.requestState === e.ERROR,
+		hasNextPage: a.requestState === e.ERROR ? !1 : a.marker != null,
+		isEmpty: a.items.length === 0,
+		isLoading: a.requestState === e.IN_PROGRESS,
+		isReloading: a.requestState === e.IN_PROGRESS && (a.requestInitiator === "RELOAD" || a.requestInitiator === "SEARCH"),
+		items: a.items,
+		loadMore: () => l({ type: "LOAD_MORE" }, i, a, o),
+		reload: () => l({ type: "RELOAD" }, i, a, o),
+		requestInitiator: a.requestInitiator,
+		searchInput: a.searchInput,
+		search: (e) => l({
+			type: "SEARCH",
 			searchInput: e
-		}, a, o, s)
+		}, i, a, o)
 	};
 }
-export { d as useAsyncList };
+export { u as useAsyncList };

package/dist/esm/lib/components/metadata-editor-fields/components/metadata-date-field/metadata-date-field.js

@@ -6,7 +6,7 @@ import { forwardRef as o, memo as s, useCallback as c, useMemo as l } from "reac
 import { useIntl as u } from "react-intl";
 import { jsx as d } from "react/jsx-runtime";
 import { getIn as f, useFormikContext as p } from "formik";
-var m = /* @__PURE__ */ s(a), h = /* @__PURE__ */ o(({ className: a, description: o, isAiSuggestionApplied: s, confidenceScore: h, disableForm: g, fieldNamePrefix: _, label: v, onValueEdited: y, portalElement: b, updateModePrefix: x }, S) => {
+var m = /*#__PURE__*/ s(a), h = /*#__PURE__*/ o(({ className: a, description: o, isAiSuggestionApplied: s, confidenceScore: h, disableForm: g, fieldNamePrefix: _, label: v, onValueEdited: y, portalElement: b, updateModePrefix: x }, S) => {
 	let C = `${x ?? _}.value`, w = u(), { values: T, errors: E, touched: D, setFieldTouched: O, setFieldValue: k } = p(), A = f(T, C), j = l(() => n(A), [A]), M = f(D, C) ? f(E, C) : void 0, N = r(v, o, s, "span", h), P = c((e) => {
 		k(C, t(e)), y();
 	}, [

package/dist/esm/lib/components/metadata-editor-fields/components/metadata-enum-field/metadata-enum-field.js

@@ -7,7 +7,7 @@ import { forwardRef as a } from "react";
 import { FormattedMessage as o, useIntl as s } from "react-intl";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 import { Field as u, getIn as d, useFormikContext as f } from "formik";
-var p = /* @__PURE__ */ a(({ className: a, isAiSuggestionApplied: p, confidenceScore: m, description: h, disableForm: g, fieldNamePrefix: _, updateModePrefix: v, label: y, onValueEdited: b, options: x, portalElement: S }, C) => {
+var p = /*#__PURE__*/ a(({ className: a, isAiSuggestionApplied: p, confidenceScore: m, description: h, disableForm: g, fieldNamePrefix: _, updateModePrefix: v, label: y, onValueEdited: b, options: x, portalElement: S }, C) => {
 	let { setFieldValue: w, values: T } = f(), { formatMessage: E } = s(), D = `${v ?? _}.value`, O = E(t.multipleValues), k = (x || d(T, `${_}.options`, [])).map((e) => typeof e == "string" ? e : e.key), A = E(e.selectValuePlaceholder), j = n(y, h, p, "label", m), M = (e) => e === "Multiple values" ? O : e;
 	return /* @__PURE__ */ c("div", {
 		"data-testid": `${y}-field`,

package/dist/esm/lib/components/metadata-editor-fields/components/metadata-float-field/metadata-float-field.js

@@ -4,7 +4,7 @@ import { TextInput as n } from "@box/blueprint-web";
 import { forwardRef as r, useRef as i } from "react";
 import { jsx as a } from "react/jsx-runtime";
 import { Field as o, getIn as s, useFormikContext as c } from "formik";
-var l = /* @__PURE__ */ r(({ className: r, description: l, isAiSuggestionApplied: u, confidenceScore: d, label: f, fieldNamePrefix: p, disableForm: m, onValueEdited: h, updateModePrefix: g }, _) => {
+var l = /*#__PURE__*/ r(({ className: r, description: l, isAiSuggestionApplied: u, confidenceScore: d, label: f, fieldNamePrefix: p, disableForm: m, onValueEdited: h, updateModePrefix: g }, _) => {
 	let { values: v, setFieldValue: y, setFieldTouched: b } = c(), x = `${g ?? p}.value`, S = i(s(v, x)), { validateFloats: C } = t(), w = e(f, l, u, "label", d), T = (e) => {
 		S.current = e, y(x, e), h();
 	}, E = (e) => {

package/dist/esm/lib/components/metadata-editor-fields/components/metadata-multi-select-field/metadata-multi-select-field.js

@@ -7,7 +7,7 @@ import { forwardRef as i } from "react";
 import { useIntl as a } from "react-intl";
 import { jsx as o } from "react/jsx-runtime";
 import { Field as s, getIn as c, useFormikContext as l } from "formik";
-var u = /* @__PURE__ */ i(({ className: i, isAiSuggestionApplied: u, confidenceScore: d, description: f, disableForm: p, fieldNamePrefix: m, label: h, onValueEdited: g, options: _, portalElement: v, updateModePrefix: y }, b) => {
+var u = /*#__PURE__*/ i(({ className: i, isAiSuggestionApplied: u, confidenceScore: d, description: f, disableForm: p, fieldNamePrefix: m, label: h, onValueEdited: g, options: _, portalElement: v, updateModePrefix: y }, b) => {
 	let { setFieldValue: x, values: S } = l(), { formatMessage: C } = a(), w = `${y ?? m}.value`, T = C(t.multipleValues), E = (_ || c(S, `${m}.options`, [])).map((e) => typeof e == "string" ? e : e.key), D = n(h, f, u, "label", d), O = (e, t) => t.toLowerCase().includes(e.toLowerCase());
 	return /* @__PURE__ */ o("div", {
 		"data-testid": `${h}-field`,

package/dist/esm/lib/components/metadata-editor-fields/components/metadata-string-field/metadata-string-field.js

@@ -5,7 +5,7 @@ import { forwardRef as r } from "react";
 import { useIntl as i } from "react-intl";
 import { jsx as a } from "react/jsx-runtime";
 import { Field as o } from "formik";
-var s = /* @__PURE__ */ r(({ className: r, description: s, isAiSuggestionApplied: c, confidenceScore: l, disableForm: u, fieldNamePrefix: d, label: f, onValueEdited: p, updateModePrefix: m }, h) => {
+var s = /*#__PURE__*/ r(({ className: r, description: s, isAiSuggestionApplied: c, confidenceScore: l, disableForm: u, fieldNamePrefix: d, label: f, onValueEdited: p, updateModePrefix: m }, h) => {
 	let g = i(), _ = `${m ?? d}.value`, v = t(f, s, c, "label", l);
 	return /* @__PURE__ */ a("div", {
 		"data-testid": `${f}-field`,

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

@@ -0,0 +1,67 @@
+import e from "../../../../messages.js";
+import "../update-mode-field-wrapper/mulitple-values-utils.js";
+import { messages as t } from "../update-mode-field-wrapper/messages.js";
+import { useMemoizedFieldLabel as n } from "../../hooks/use-memoized-field-label.js";
+import { Tooltip as r } from "@box/blueprint-web";
+import { forwardRef as i, useCallback as a } from "react";
+import { useIntl as o } from "react-intl";
+import { jsx as s } from "react/jsx-runtime";
+import { Field as c, getIn as l, useFormikContext as u } from "formik";
+import { ComboboxWithApiPagination as d, ComboboxWithApiTreeView as f } from "@box/combobox-with-api";
+var p = (e, t) => e === "Multiple values" ? t : e, m = /*#__PURE__*/ i(({ description: i, disableForm: m, isAiSuggestionApplied: h, confidenceScore: g, fieldNamePrefix: _, label: v, onValueEdited: y, portalElement: b, taxonomyOptionsFetcher: x, updateModePrefix: S, className: C, isExternallyOwned: w, isMultilevelTaxonomyFieldEnabled: T }, E) => {
+	let { formatMessage: D } = o(), O = `${S ?? _}.value`, { setFieldValue: k, values: A } = u(), { metadata: { templateKey: j, scope: M } } = A, { key: N, optionsRules: { multiSelect: P, selectableLevels: F }, levels: I } = l(A, _), L = D(t.multipleValues), R = T && F?.some((e) => e > 1), z = m || w, B = n(v, i, h, "label", g), V = a((e) => x(M, j, N, F?.[0], e), [
+		N,
+		M,
+		F,
+		x,
+		j
+	]), H = (t) => P || !t?.length ? D(e.taxonomyPlaceholder) : void 0, U = (e) => {
+		k(O, e), y();
+	}, W = /* @__PURE__ */ s("div", {
+		"data-testid": `${v}-field`,
+		onKeyDown: (e) => e.stopPropagation(),
+		role: "presentation",
+		children: /* @__PURE__ */ s(c, {
+			name: O,
+			children: ({ field: e }) => {
+				let t = Array.isArray(e.value) ? e.value.map((e) => ({
+					...e,
+					displayValue: p(e.displayValue, L)
+				})) : e.value;
+				return R ? /* @__PURE__ */ s(f, {
+					ref: E,
+					className: C,
+					closeOnSelection: R,
+					dataTargetId: "ComboboxWithApiTreeView-MetadataEditorTaxonomyField",
+					defaultFetcher: V,
+					disabled: z,
+					label: B,
+					levels: I,
+					multiselect: P,
+					onValueChange: U,
+					placeholder: H(e.value),
+					portalElement: b,
+					selectableLevels: F,
+					value: t
+				}) : /* @__PURE__ */ s(d, {
+					ref: E,
+					className: C,
+					dataTargetId: "ComboboxWithApiPagination-MetadataEditorTaxonomyField",
+					defaultFetcher: V,
+					disabled: z,
+					label: B,
+					multiselect: P,
+					onValueChange: U,
+					placeholder: H(e.value),
+					portalElement: b,
+					value: t
+				});
+			}
+		})
+	});
+	return w ? /* @__PURE__ */ s(r, {
+		content: D(e.taxonomyExternallyOwned),
+		children: W
+	}) : W;
+});
+export { m as LegacyMetadataTaxonomyField };

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

@@ -1,67 +1,16 @@
-import e from "../../../../messages.js";
-import "../update-mode-field-wrapper/mulitple-values-utils.js";
-import { messages as t } from "../update-mode-field-wrapper/messages.js";
-import { useMemoizedFieldLabel as n } from "../../hooks/use-memoized-field-label.js";
-import { Tooltip as r } from "@box/blueprint-web";
-import { forwardRef as i, useCallback as a } from "react";
-import { useIntl as o } from "react-intl";
-import { jsx as s } from "react/jsx-runtime";
-import { Field as c, getIn as l, useFormikContext as u } from "formik";
-import { ComboboxWithApiPagination as d, ComboboxWithApiTreeView as f } from "@box/combobox-with-api";
-var p = (e, t) => e === "Multiple values" ? t : e, m = /* @__PURE__ */ i(({ description: i, disableForm: m, isAiSuggestionApplied: h, confidenceScore: g, fieldNamePrefix: _, label: v, onValueEdited: y, portalElement: b, taxonomyOptionsFetcher: x, updateModePrefix: S, className: C, isExternallyOwned: w, isMultilevelTaxonomyFieldEnabled: T }, E) => {
-	let { formatMessage: D } = o(), O = `${S ?? _}.value`, { setFieldValue: k, values: A } = u(), { metadata: { templateKey: j, scope: M } } = A, { key: N, optionsRules: { multiSelect: P, selectableLevels: F }, levels: I } = l(A, _), L = D(t.multipleValues), R = T && F?.some((e) => e > 1), z = m || w, B = n(v, i, h, "label", g), V = a((e) => x(M, j, N, F?.[0], e), [
-		N,
-		M,
-		F,
-		x,
-		j
-	]), H = (t) => P || !t?.length ? D(e.taxonomyPlaceholder) : void 0, U = (e) => {
-		k(O, e), y();
-	}, W = /* @__PURE__ */ s("div", {
-		"data-testid": `${v}-field`,
-		onKeyDown: (e) => e.stopPropagation(),
-		role: "presentation",
-		children: /* @__PURE__ */ s(c, {
-			name: O,
-			children: ({ field: e }) => {
-				let t = Array.isArray(e.value) ? e.value.map((e) => ({
-					...e,
-					displayValue: p(e.displayValue, L)
-				})) : e.value;
-				return R ? /* @__PURE__ */ s(f, {
-					ref: E,
-					className: C,
-					closeOnSelection: R,
-					dataTargetId: "ComboboxWithApiTreeView-MetadataEditorTaxonomyField",
-					defaultFetcher: V,
-					disabled: z,
-					label: B,
-					levels: I,
-					multiselect: P,
-					onValueChange: U,
-					placeholder: H(e.value),
-					portalElement: b,
-					selectableLevels: F,
-					value: t
-				}) : /* @__PURE__ */ s(d, {
-					ref: E,
-					className: C,
-					dataTargetId: "ComboboxWithApiPagination-MetadataEditorTaxonomyField",
-					defaultFetcher: V,
-					disabled: z,
-					label: B,
-					multiselect: P,
-					onValueChange: U,
-					placeholder: H(e.value),
-					portalElement: b,
-					value: t
-				});
-			}
-		})
-	});
-	return w ? /* @__PURE__ */ s(r, {
-		content: D(e.taxonomyExternallyOwned),
-		children: W
-	}) : W;
+import { LegacyMetadataTaxonomyField as e } from "./legacy-metadata-taxonomy-field.js";
+import { MetadataTaxonomyPickerField as t } from "./metadata-taxonomy-picker-field/metadata-taxonomy-picker-field.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+var i = /*#__PURE__*/ n((n, i) => {
+	let { isTaxonomyPickerEnabled: a, createTaxonomyItemsService: o } = n;
+	return a && o ? /* @__PURE__ */ r(t, {
+		...n,
+		ref: i,
+		createTaxonomyItemsService: o
+	}) : (a && process.env.NODE_ENV !== "production" && console.error("[metadata-editor] isTaxonomyPickerEnabled is true but createTaxonomyItemsService was not provided; falling back to the legacy taxonomy field."), /* @__PURE__ */ r(e, {
+		...n,
+		ref: i
+	}));
 });
-export { m as MetadataTaxonomyField };
+export { i as MetadataTaxonomyField };

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

@@ -0,0 +1,53 @@
+import e from "../../../../../messages.js";
+import { messages as t } from "../../update-mode-field-wrapper/messages.js";
+import { n } from "../../../../../../../chunks/utils.js";
+import { getTaxonomyPickerMode as r, mapFormValueToTaxonomyValues as i, mapLevelsToTaxonomyLevels as a, mapTaxonomyValuesToFormValue as o } from "./value-mapping.js";
+import { Tooltip as s } from "@box/blueprint-web";
+import { forwardRef as c, useMemo as l } from "react";
+import { useIntl as u } from "react-intl";
+import { jsx as d } from "react/jsx-runtime";
+import { Field as f, getIn as p, useFormikContext as m } from "formik";
+import { MetadataTaxonomyPicker as h } from "@box/metadata-taxonomy-picker";
+var g = /*#__PURE__*/ c(({ description: c, disableForm: g, isAiSuggestionApplied: _, confidenceScore: v, fieldNamePrefix: y, label: b, onValueEdited: x, portalElement: S, updateModePrefix: C, className: w, isExternallyOwned: T, createTaxonomyItemsService: E }, D) => {
+	let { formatMessage: O } = u(), k = `${C ?? y}.value`, { setFieldValue: A, values: j } = m(), { metadata: { templateKey: M, scope: N } } = j, { key: P, optionsRules: { multiSelect: F, selectableLevels: I }, levels: L } = p(j, y), R = O(t.multipleValues), z = g || T, B = l(() => E({
+		scope: N,
+		templateKey: M,
+		fieldKey: P
+	}), [
+		E,
+		N,
+		M,
+		P
+	]), V = r(I), H = l(() => a(L, I), [L, I]), U = n(b, c ?? void 0, _, v), W = (t) => F || !t.length ? O(e.taxonomyPlaceholder) : void 0, G = (e) => {
+		A(k, o(e)), x();
+	}, K = /* @__PURE__ */ d("div", {
+		"data-testid": `${b}-field`,
+		onKeyDown: (e) => e.stopPropagation(),
+		role: "presentation",
+		children: /* @__PURE__ */ d(f, {
+			name: k,
+			children: ({ field: e }) => {
+				let t = i(e.value, R);
+				return /* @__PURE__ */ d(h, {
+					ref: D,
+					containerClassName: w,
+					disabled: z,
+					itemsService: B,
+					label: U,
+					levels: H,
+					mode: V,
+					multiSelect: F,
+					onValueChange: G,
+					placeholder: W(t),
+					portalElement: S,
+					value: t
+				});
+			}
+		})
+	});
+	return T ? /* @__PURE__ */ d(s, {
+		content: O(e.taxonomyExternallyOwned),
+		children: K
+	}) : K;
+});
+export { g as MetadataTaxonomyPickerField };

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

@@ -0,0 +1,30 @@
+import "../../update-mode-field-wrapper/mulitple-values-utils.js";
+import { TaxonomyPickerMode as e } from "@box/metadata-taxonomy-picker";
+function t(e, t) {
+	return Array.isArray(e) ? e.map((e) => ({
+		id: e.value,
+		displayName: e.value === "Multiple values" ? t : e.displayValue ?? "",
+		level: e.level,
+		ancestors: e.ancestors
+	})) : [];
+}
+function n(e) {
+	return e.map((e) => ({
+		value: e.id,
+		displayValue: e.displayName,
+		level: e.level,
+		selectable: !0,
+		ancestors: e.ancestors
+	}));
+}
+function r(t) {
+	return t && t.length > 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-editor-fields/editor-field-types.js

@@ -7,23 +7,23 @@ import { MetadataTaxonomyField as a } from "./components/metadata-taxonomy-field
 import { forwardRef as o } from "react";
 import { jsx as s } from "react/jsx-runtime";
 var c = {
-	date: /* @__PURE__ */ o((t, n) => /* @__PURE__ */ s(e, {
+	date: /*#__PURE__*/ o((t, n) => /* @__PURE__ */ s(e, {
 		...t,
 		ref: n
 	})),
-	enum: /* @__PURE__ */ o((e, n) => /* @__PURE__ */ s(t, {
+	enum: /*#__PURE__*/ o((e, n) => /* @__PURE__ */ s(t, {
 		...e,
 		ref: n
 	})),
-	float: /* @__PURE__ */ o((e, t) => /* @__PURE__ */ s(n, {
+	float: /*#__PURE__*/ o((e, t) => /* @__PURE__ */ s(n, {
 		...e,
 		ref: t
 	})),
-	multiSelect: /* @__PURE__ */ o((e, t) => /* @__PURE__ */ s(r, {
+	multiSelect: /*#__PURE__*/ o((e, t) => /* @__PURE__ */ s(r, {
 		...e,
 		ref: t
 	})),
-	string: /* @__PURE__ */ o((e, t) => /* @__PURE__ */ s(i, {
+	string: /*#__PURE__*/ o((e, t) => /* @__PURE__ */ s(i, {
 		...e,
 		ref: t
 	})),