@box/metadata-template-editor 2.1.12 → 2.2.0

package/dist/chunks/metadata-template-editor-modal.js

@@ -3,75 +3,88 @@ import t from "../esm/lib/messages.js";
 import { t as n } from "./metadata-template-editor.js";
 import { Modal as r } from "@box/blueprint-web";
 import { useIntl as i } from "react-intl";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useCallback as s, useEffect as c, useId as l, useRef as u, useState as d } from "react";
-import f from "clsx";
-import '../styles/metadata-template-editor-modal.css';var p = {
-	modal: "_modal_q1b7q_1",
-	centeredBody: "_centeredBody_q1b7q_7"
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useCallback as c, useEffect as l, useId as u, useRef as d, useState as f } from "react";
+import p from "clsx";
+import '../styles/metadata-template-editor-modal.css';var m = {
+	modal: "_modal_1s9i6_1",
+	centeredBody: "_centeredBody_1s9i6_7",
+	modalScrollableContainer: "_modalScrollableContainer_1s9i6_15",
+	modalBody: "_modalBody_1s9i6_21"
 };
-function m({ open: m, onOpenChange: h, onTemplateLoad: g, onValidationChange: _, onCancel: v, title: y, ...b }) {
-	let x = i(), S = l(), C = u(null), [w, T] = d(!1), [E, D] = d(!1), [O, k] = d(void 0), A = b.mode === e.Edit, j = s(() => {
-		v?.(), h(!1);
-	}, [v, h]);
-	c(() => {
-		m || (D(!1), k(void 0));
-	}, [m]);
-	let M = (e) => {
-		e ? h(e) : C.current?.requestClose();
-	}, N = (e) => {
-		k(e.displayName), g?.(e);
-	}, P = (e) => async (...t) => {
-		T(!0);
+function h({ open: h, onOpenChange: g, onTemplateLoad: _, onValidationChange: v, onCancel: y, title: b, ...x }) {
+	let S = i(), C = u(), w = d(null), [T, E] = f(!1), [D, O] = f(!1), [k, A] = f(void 0), j = x.mode === e.Edit, M = x.mode === e.ReadOnly, N = c(() => {
+		y?.(), g(!1);
+	}, [y, g]);
+	l(() => {
+		h || (O(!1), A(void 0));
+	}, [h]);
+	let P = (e) => {
+		e ? g(e) : w.current?.requestClose();
+	}, F = (e) => {
+		A(e.displayName), _?.(e);
+	}, I = (e) => async (...t) => {
+		E(!0);
 		try {
-			await e(...t), h(!1);
+			await e(...t), g(!1);
 		} finally {
-			T(!1);
+			E(!1);
 		}
-	}, F = A ? {
-		...b,
-		onEditTemplate: P(b.onEditTemplate)
-	} : {
-		...b,
-		onCreateTemplate: P(b.onCreateTemplate)
-	}, I = w || A && !E, L = A && !O;
-	return /* @__PURE__ */ a(r, {
-		open: m,
-		onOpenChange: M,
-		children: /* @__PURE__ */ o(r.Content, {
+	}, L;
+	L = j ? {
+		...x,
+		onEditTemplate: I(x.onEditTemplate)
+	} : M ? x : {
+		...x,
+		onCreateTemplate: I(x.onCreateTemplate)
+	};
+	let R = T || j && !D, z = (j || M) && !k, B;
+	B = M ? k ? S.formatMessage(t.viewTitle, { templateName: k }) : "" : j && k ? S.formatMessage(t.editTitle, { templateName: k }) : S.formatMessage(t.createTitle);
+	let V = b ?? B;
+	return /* @__PURE__ */ o(r, {
+		open: h,
+		onOpenChange: P,
+		children: /* @__PURE__ */ s(r.Content, {
 			size: "large",
-			className: p.modal,
+			className: m.modal,
 			children: [
-				/* @__PURE__ */ a(r.Header, { children: y ?? (A && O ? x.formatMessage(t.editTitle, { templateName: O }) : x.formatMessage(t.createTitle)) }),
-				/* @__PURE__ */ a(r.ScrollableContainer, {
-					className: f({ [p.centeredBody]: L }),
-					children: /* @__PURE__ */ a(r.Body, { children: /* @__PURE__ */ a(n, {
-						...F,
-						ref: C,
-						formId: S,
-						hideActions: !0,
-						onCancel: j,
-						onDirtyStateChange: D,
-						onValidationChange: _,
-						onTemplateLoad: N
-					}) })
+				/* @__PURE__ */ o(r.Header, { children: V }),
+				/* @__PURE__ */ o(r.ScrollableContainer, {
+					className: p(m.modalScrollableContainer, { [m.centeredBody]: z }),
+					children: /* @__PURE__ */ o(r.Body, {
+						className: m.modalBody,
+						children: /* @__PURE__ */ o(n, {
+							...L,
+							ref: w,
+							formId: C,
+							hideActions: !0,
+							onCancel: N,
+							onDirtyStateChange: O,
+							onValidationChange: v,
+							onTemplateLoad: F
+						})
+					})
 				}),
-				/* @__PURE__ */ o(r.Footer, { children: [/* @__PURE__ */ a(r.Footer.SecondaryButton, {
-					onClick: () => C.current?.requestClose(),
+				/* @__PURE__ */ o(r.Footer, { children: M ? /* @__PURE__ */ o(r.Footer.PrimaryButton, {
+					onClick: N,
 					size: "large",
-					children: x.formatMessage(t.cancel)
-				}), /* @__PURE__ */ a(r.Footer.PrimaryButton, {
+					children: S.formatMessage(t.close)
+				}) : /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(r.Footer.SecondaryButton, {
+					onClick: () => w.current?.requestClose(),
+					size: "large",
+					children: S.formatMessage(t.cancel)
+				}), /* @__PURE__ */ o(r.Footer.PrimaryButton, {
 					variant: "primary",
 					type: "submit",
-					form: S,
-					loading: w,
-					loadingAriaLabel: x.formatMessage(t.submitting),
-					disabled: I,
-					children: x.formatMessage(t.save)
-				})] }),
-				/* @__PURE__ */ a(r.Close, { "aria-label": x.formatMessage(t.closeAriaLabel) })
+					form: C,
+					loading: T,
+					loadingAriaLabel: S.formatMessage(t.submitting),
+					disabled: R,
+					children: S.formatMessage(t.save)
+				})] }) }),
+				/* @__PURE__ */ o(r.Close, { "aria-label": S.formatMessage(t.closeAriaLabel) })
 			]
 		})
 	});
 }
-export { m as t };
+export { h as t };

package/dist/chunks/metadata-template-editor.js

@@ -27,15 +27,15 @@ import '../styles/metadata-template-editor.css';var C = {
 	templateKey: "",
 	fields: [],
 	hidden: !1
-}, w = /*#__PURE__*/ m(function({ onCancel: m, onDirtyStateChange: w, onValidationChange: re, onSubmitError: ie, onTemplateLoad: T, taxonomyOptions: E, fetchTaxonomies: D, disabledFieldTypes: O, taxonomyInitialStateLabels: k, formId: A, hideActions: j = !1, fieldExtensions: M, ...N }, P) {
-	let F = i(), { formatMessage: I } = te(), { addNotification: L } = ee(), R = N.mode === e.Edit, [z, B] = y(!1), [V, H] = y(!1), U = h(() => {
+}, w = /*#__PURE__*/ m(function({ onCancel: m, onDirtyStateChange: w, onValidationChange: re, onSubmitError: ie, onTemplateLoad: T, taxonomyOptions: ae, fetchTaxonomies: E, disabledFieldTypes: D, taxonomyInitialStateLabels: O, formId: k, hideActions: A = !1, fieldExtensions: j, ...M }, N) {
+	let P = i(), { formatMessage: F } = te(), { addNotification: I } = ee(), L = M.mode === e.Edit, R = M.mode === e.ReadOnly, [z, B] = y(!1), [V, H] = y(!1), U = h(() => {
 		z ? H(!0) : m?.();
 	}, [z, m]);
-	_(P, () => ({ requestClose: U }), [U]);
+	_(N, () => ({ requestClose: U }), [U]);
 	let W = h((e) => {
 		B(e), w?.(e);
-	}, [w]), [G, K] = y(R), [q, J] = y(!1), [ae, oe] = y(0), [Y, X] = y(void 0), Z = R ? N.fetchTemplate : void 0, se = () => {
-		oe((e) => e + 1);
+	}, [w]), [G, K] = y(L || R), [q, J] = y(!1), [oe, se] = y(0), [Y, X] = y(void 0), Z = L || R ? M.fetchTemplate : void 0, ce = () => {
+		se((e) => e + 1);
 	};
 	g(() => {
 		if (!Z) return;
@@ -52,10 +52,10 @@ import '../styles/metadata-template-editor.css';var C = {
 		})(), () => {
 			e = !0;
 		};
-	}, [Z, ae]), g(() => {
+	}, [Z, oe]), g(() => {
 		Y !== void 0 && T?.(Y);
 	}, [Y, T]);
-	let Q = R ? void 0 : N.namespace, $ = v(() => Y ? {
+	let Q = L || R ? void 0 : M.namespace, $ = v(() => Y ? {
 		displayName: Y.displayName,
 		templateKey: Y.templateKey,
 		namespace: Y.namespace,
@@ -64,41 +64,41 @@ import '../styles/metadata-template-editor.css';var C = {
 	} : {
 		...ne,
 		namespace: Q ?? ""
-	}, [Y, Q]), ce = v(() => ({
-		disabledFieldTypes: O,
-		taxonomyInitialStateLabels: k
-	}), [O, k]);
+	}, [Y, Q]), le = v(() => ({
+		disabledFieldTypes: D,
+		taxonomyInitialStateLabels: O
+	}), [D, O]);
 	return G ? /* @__PURE__ */ f("div", {
 		className: C.loading,
 		children: /* @__PURE__ */ f(u, {
 			size: "large",
-			"aria-label": I(r.loading)
+			"aria-label": F(r.loading)
 		})
 	}) : q ? /* @__PURE__ */ f("div", {
 		className: C.error,
 		children: /* @__PURE__ */ f(l, {
 			body: /* @__PURE__ */ f(d, {
 				as: "p",
-				children: I(r.fetchError)
+				children: F(r.fetchError)
 			}),
 			illustration: S,
 			size: "large",
 			children: /* @__PURE__ */ f(l.PrimaryAction, {
 				startIcon: b,
-				onClick: se,
-				children: I(r.reload)
+				onClick: ce,
+				children: F(r.reload)
 			})
 		})
 	}) : /* @__PURE__ */ p(t.Provider, {
-		value: ce,
+		value: le,
 		children: [/* @__PURE__ */ f(x, {
 			initialValues: $,
-			validationSchema: F,
+			validationSchema: R ? void 0 : P,
 			onSubmit: async (e) => {
-				try {
-					if (R) {
+				if (!R) try {
+					if (L) {
 						let t = s($, e);
-						await N.onEditTemplate(t, {
+						await M.onEditTemplate(t, {
 							namespaceFQN: $.namespace,
 							templateKey: $.templateKey
 						});
@@ -110,27 +110,27 @@ import '../styles/metadata-template-editor.css';var C = {
 							hidden: e.hidden,
 							fields: t
 						};
-						await N.onCreateTemplate(n);
+						await M.onCreateTemplate(n);
 					}
-					L({
+					I({
 						sensitivity: "foreground",
 						variant: "success",
-						styledText: I(r.saveSuccessNotification),
-						typeIconAriaLabel: I(r.notificationSuccessIconAriaLabel),
-						closeButtonAriaLabel: I(r.notificationCloseButtonAriaLabel)
+						styledText: F(r.saveSuccessNotification),
+						typeIconAriaLabel: F(r.notificationSuccessIconAriaLabel),
+						closeButtonAriaLabel: F(r.notificationCloseButtonAriaLabel)
 					});
 				} catch (e) {
 					let t;
 					if (e instanceof Error && "status" in e) {
 						let { status: n } = e;
-						t = I(n === 409 ? r.displayNameUsedBefore : r.saveErrorNotification);
-					} else t = I(r.saveErrorNotification);
-					L({
+						t = F(n === 409 ? r.displayNameUsedBefore : r.saveErrorNotification);
+					} else t = F(r.saveErrorNotification);
+					I({
 						sensitivity: "foreground",
 						variant: "error",
 						styledText: t,
-						typeIconAriaLabel: I(r.notificationErrorIconAriaLabel),
-						closeButtonAriaLabel: I(r.notificationCloseButtonAriaLabel)
+						typeIconAriaLabel: F(r.notificationErrorIconAriaLabel),
+						closeButtonAriaLabel: F(r.notificationCloseButtonAriaLabel)
 					});
 					try {
 						ie?.(e);
@@ -139,25 +139,26 @@ import '../styles/metadata-template-editor.css';var C = {
 				}
 			},
 			children: /* @__PURE__ */ f(c, {
-				formId: A,
+				formId: k,
 				onCancel: U,
-				taxonomyOptions: E,
-				fetchTaxonomies: D,
-				hideActions: j,
-				isEditMode: R,
+				taxonomyOptions: ae,
+				fetchTaxonomies: E,
+				hideActions: A,
+				isEditMode: L,
+				readOnly: R,
 				onDirtyStateChange: W,
 				onValidationChange: re,
-				fieldExtensions: M
+				fieldExtensions: j
 			})
 		}), V && /* @__PURE__ */ f(n, {
 			onClose: () => H(!1),
 			onConfirm: () => {
 				H(!1), m?.();
 			},
-			title: I(r.unsavedChangesTitle),
-			body: I(r.unsavedChangesBody),
-			confirmLabel: I(r.unsavedChangesDiscard),
-			cancelLabel: I(r.unsavedChangesKeepEditing)
+			title: F(r.unsavedChangesTitle),
+			body: F(r.unsavedChangesBody),
+			confirmLabel: F(r.unsavedChangesDiscard),
+			cancelLabel: F(r.unsavedChangesKeepEditing)
 		})]
 	});
 });

package/dist/chunks/types.js

@@ -1,5 +1,5 @@
 var e = /* @__PURE__ */ function(e) {
-	return e.Create = "create", e.Edit = "edit", e;
+	return e.Create = "create", e.Edit = "edit", e.ReadOnly = "readOnly", e;
 }({}), t = /* @__PURE__ */ function(e) {
 	return e.Text = "text", e.Number = "number", e.Date = "date", e.Dropdown = "dropdown", e.Taxonomy = "taxonomy", e;
 }({}), n = /* @__PURE__ */ function(e) {

package/dist/esm/lib/components/metadata-field-configurator/components/field-action-slot/field-action-slot.js

@@ -8,13 +8,13 @@ import { useState as l } from "react";
 import { SurfaceStatusSurfaceGray as u } from "@box/blueprint-web-assets/tokens/tokens";
 import { Hidden as d, Pencil as f } from "@box/blueprint-web-assets/icons/Line";
 import p from "clsx";
-var m = ({ isHidden: m, isExpanded: h = !1, index: g, maxIndex: _, onReorderFields: v, onToggleVisibility: y, onRequestDelete: b, onRequestDuplicate: x, extensions: S, fieldCollapsedText: C, collapsedMenuSlot: w }) => {
-	let T = o(), [E, D] = l(!1), O = !h && w ? /* @__PURE__ */ s("div", {
+var m = ({ isHidden: m, isExpanded: h = !1, index: g, maxIndex: _, onReorderFields: v, onToggleVisibility: y, onRequestDelete: b, onRequestDuplicate: x, extensions: S, fieldCollapsedText: C, collapsedMenuSlot: w, readOnly: T = !1 }) => {
+	let E = o(), [D, O] = l(!1), k = !h && w ? /* @__PURE__ */ s("div", {
 		className: t.contextMenuWithCollapsedText,
 		children: w
 	}) : /* @__PURE__ */ s(n, {
 		className: p(t.fieldContextMenu, {
-			[t.menuOpen]: E,
+			[t.menuOpen]: D,
 			[t.contextMenuWithCollapsedText]: C && !h
 		}),
 		index: g,
@@ -24,7 +24,7 @@ var m = ({ isHidden: m, isExpanded: h = !1, index: g, maxIndex: _, onReorderFiel
 		onToggleVisibility: y,
 		onRequestDelete: b,
 		onRequestDuplicate: x,
-		onOpenChange: D
+		onOpenChange: O
 	});
 	return /* @__PURE__ */ c("div", {
 		className: p(t.fieldActionSlot, { [t.expanded]: h }),
@@ -33,25 +33,25 @@ var m = ({ isHidden: m, isExpanded: h = !1, index: g, maxIndex: _, onReorderFiel
 				icon: d,
 				iconPosition: "left",
 				color: u,
-				text: T.formatMessage(e.hiddenStatus).toUpperCase(),
+				text: E.formatMessage(e.hiddenStatus).toUpperCase(),
 				className: t.hiddenBadge
 			}),
 			C && !h && /* @__PURE__ */ s(a, {
 				as: "span",
 				variant: "bodySmall",
 				color: "textOnLightSecondary",
-				className: p(t.fieldCollapsedText, { [t.menuOpen]: E }),
+				className: p(t.fieldCollapsedText, { [t.menuOpen]: D }),
 				children: C
 			}),
 			/* @__PURE__ */ c("div", {
-				className: p(t.expandedToolbarActions, { [t.menuOpen]: E }),
+				className: p(t.expandedToolbarActions, { [t.menuOpen]: D }),
 				children: [S.length > 0 && /* @__PURE__ */ c(i.TabList, {
 					variant: "contentSwitcher",
 					containerClassname: t.extensionTabsContainer,
 					children: [/* @__PURE__ */ s(i.Tab, {
 						id: "edit",
 						variant: "contentSwitcher",
-						"aria-label": T.formatMessage(e.editTabAriaLabel),
+						"aria-label": E.formatMessage(e.editTabAriaLabel),
 						children: /* @__PURE__ */ s(f, { "aria-hidden": "true" })
 					}), S.map((e, t) => /* @__PURE__ */ s(i.Tab, {
 						id: `ext-${t}`,
@@ -59,7 +59,7 @@ var m = ({ isHidden: m, isExpanded: h = !1, index: g, maxIndex: _, onReorderFiel
 						"aria-label": e.label,
 						children: /* @__PURE__ */ s(e.icon, { "aria-hidden": "true" })
 					}, e.label))]
-				}), O]
+				}), !T && k]
 			})
 		]
 	});

package/dist/esm/lib/components/metadata-field-configurator/components/field-edit-content/field-edit-content.js

@@ -8,22 +8,21 @@ import { Select as o, TextInput as s, TextWithInfoBadge as c, TooltipProvider as
 import { useIntl as u } from "react-intl";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 import { useMemo as p } from "react";
-var m = ({ nameInputId: m, descriptionInputId: h, isTypeEditable: g, externalErrors: _, externalTouched: v, handleTypeChange: y, hideDescription: b = !1 }) => {
-	let x = u(), S = t(), { values: C, errors: w, touched: T, handleChange: E, handleBlur: D } = i(), O = (e) => {
+var m = ({ nameInputId: m, descriptionInputId: h, isTypeEditable: g, externalErrors: _, externalTouched: v, handleTypeChange: y, hideDescription: b = !1, readOnly: x = !1 }) => {
+	let S = u(), C = t(), { values: w, errors: T, touched: E, handleChange: D, handleBlur: O } = i(), k = (e) => {
 		if (_ && v?.[e]) return _[e];
-		let t = w[e];
-		if (T[e] && t != null && typeof t == "string") return t;
-	}, k = p(() => /* @__PURE__ */ d(l, { children: /* @__PURE__ */ d(c, {
-		infoBadgeAriaLabel: x.formatMessage(n.descriptionLearnMoreBadgeAriaLabel),
-		infoText: x.formatMessage(n.descriptionInfoTooltip),
+		let t = T[e];
+		if (E[e] && t != null && typeof t == "string") return t;
+	}, A = p(() => /* @__PURE__ */ d(l, { children: /* @__PURE__ */ d(c, {
+		infoBadgeAriaLabel: S.formatMessage(n.descriptionLearnMoreBadgeAriaLabel),
+		infoText: S.formatMessage(n.descriptionInfoTooltip),
 		children: /* @__PURE__ */ d("label", {
 			className: r.labelWithTooltip,
 			htmlFor: h,
-			children: x.formatMessage(n.fieldDescriptionLabel)
+			children: S.formatMessage(n.fieldDescriptionLabel)
 		})
-	}) }), [x, h]);
+	}) }), [S, h]), j = x || w.isFieldReadOnly;
 	return /* @__PURE__ */ d("fieldset", {
-		disabled: C.isFieldReadOnly,
 		className: r.fieldset,
 		children: /* @__PURE__ */ f("div", {
 			className: r.expandedContent,
@@ -33,48 +32,47 @@ var m = ({ nameInputId: m, descriptionInputId: h, isTypeEditable: g, externalErr
 					children: [/* @__PURE__ */ d(s, {
 						name: "name",
 						id: m,
-						label: x.formatMessage(n.fieldNameLabel),
-						placeholder: x.formatMessage(n.fieldNameInputPlaceholder),
-						value: C.name,
-						error: O("name"),
-						onChange: E,
-						onBlur: D,
-						disabled: C.isFieldReadOnly,
-						required: !0
+						label: S.formatMessage(n.fieldNameLabel),
+						placeholder: S.formatMessage(n.fieldNameInputPlaceholder),
+						value: w.name,
+						error: j ? void 0 : k("name"),
+						onChange: D,
+						onBlur: O,
+						readOnly: j,
+						required: !j
 					}), /* @__PURE__ */ d(o, {
 						name: "type",
-						label: x.formatMessage(n.fieldTypeLabel),
-						placeholder: x.formatMessage(n.fieldTypePlaceholder),
-						value: C.type,
-						"aria-readonly": !g,
-						readonly: !g,
-						disabled: C.isFieldReadOnly,
+						label: S.formatMessage(n.fieldTypeLabel),
+						placeholder: S.formatMessage(n.fieldTypePlaceholder),
+						value: w.type,
+						"aria-readonly": j || !g,
+						readonly: j || !g,
 						onValueChange: y,
 						className: r.fieldTypeSelect,
-						required: !0,
-						children: /* @__PURE__ */ d(o.Content, { children: S.availableFieldTypes.map((e) => /* @__PURE__ */ d(o.Option, {
+						required: !j,
+						children: /* @__PURE__ */ d(o.Content, { children: C.availableFieldTypes.map((e) => /* @__PURE__ */ d(o.Option, {
 							text: typeof e.label == "string" ? e.label : String(e.label),
 							value: e.type
 						}, e.type)) })
 					})]
 				}),
-				[e.Dropdown, e.Taxonomy].includes(C.type) && /* @__PURE__ */ d("div", {
+				[e.Dropdown, e.Taxonomy].includes(w.type) && /* @__PURE__ */ d("div", {
 					className: r.typeSpecific,
-					children: a(C.type)
+					children: a(w.type)
 				}),
 				!b && /* @__PURE__ */ d("div", {
 					className: r.description,
 					children: /* @__PURE__ */ d(s, {
 						name: "description",
 						id: h,
-						label: k,
-						placeholder: x.formatMessage(n.fieldDescriptionInputPlaceholder),
-						value: C.description ?? "",
-						error: O("description"),
+						label: A,
+						placeholder: S.formatMessage(n.fieldDescriptionInputPlaceholder),
+						value: w.description ?? "",
+						error: j ? void 0 : k("description"),
 						hideLabel: !0,
-						disabled: C.isFieldReadOnly,
-						onChange: E,
-						onBlur: D
+						readOnly: j,
+						onChange: D,
+						onBlur: O
 					})
 				})
 			]

package/dist/esm/lib/components/metadata-field-configurator/metadata-field-configurator.js

@@ -1,18 +1,18 @@
 import { general as e } from "./messages/configurator-messages.js";
 import t from "./components/confirmation-modal/confirmation-modal.js";
 import { t as n } from "../../../../chunks/metadata-field-configurator.module.js";
-import { FieldActionSlot as ee } from "./components/field-action-slot/field-action-slot.js";
-import { FieldConfiguratorContext as te } from "./context/field-configurator-context.js";
-import { TaxonomyOptionsContext as r } from "./context/taxonomy-options-context.js";
-import { FieldEditContent as i } from "./components/field-edit-content/field-edit-content.js";
+import { FieldActionSlot as r } from "./components/field-action-slot/field-action-slot.js";
+import { FieldConfiguratorContext as i } from "./context/field-configurator-context.js";
+import { TaxonomyOptionsContext as ee } from "./context/taxonomy-options-context.js";
+import { FieldEditContent as te } from "./components/field-edit-content/field-edit-content.js";
 import { FieldExtensionsContext as a } from "./context/field-extensions-context.js";
-import { EDIT_TAB_ID as o, useFieldConfiguratorBehavior as ne } from "./hooks/useFieldConfiguratorBehavior.js";
-import { Accordion as s, Tabs as c } from "@box/blueprint-web";
-import { useIntl as l } from "react-intl";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { EDIT_TAB_ID as o, useFieldConfiguratorBehavior as s } from "./hooks/useFieldConfiguratorBehavior.js";
+import { Accordion as c, Tabs as l } from "@box/blueprint-web";
+import { useIntl as u } from "react-intl";
+import { Fragment as ne, jsx as d, jsxs as f } from "react/jsx-runtime";
 import "react";
-var p = ({ index: p, maxIndex: m, values: h, onValuesChange: g, onDelete: _, onDuplicate: v, onReorderFields: re, onTouchStart: y, onDragStart: b, onDragEnd: x, externalErrors: ie, externalTouched: ae, dndDragHandleProps: S, fieldCollapsedText: C, isExpanded: w, onExpandedChange: T, taxonomyOptions: E, fetchTaxonomies: D, submitAttemptCount: O, fieldExtensions: k, onValidationChange: A }) => {
-	let j = l(), { contextValue: M, taxonomyContextValue: N, extensions: P, isActive: F, handleAccordionValueChange: I, isDeleteConfirmationModalOpen: L, openConfirmationModal: oe, closeConfirmationModal: R, handleDeleteField: z, activeTabId: B, setActiveTabId: V, isTypeEditable: H, uniqueKey: U, nameInputId: W, descriptionInputId: G, accordionTitle: K, TitleIcon: q, hasErrors: se, handleTypeChange: ce, handleChangeVisibility: le } = ne({
+var p = ({ index: p, maxIndex: m, values: h, onValuesChange: g, onDelete: _, onDuplicate: v, onReorderFields: y, onTouchStart: b, onDragStart: x, onDragEnd: S, externalErrors: re, externalTouched: ie, dndDragHandleProps: C, fieldCollapsedText: ae, isExpanded: w, onExpandedChange: T, taxonomyOptions: E, fetchTaxonomies: D, submitAttemptCount: O, fieldExtensions: k, onValidationChange: A, readOnly: j = !1 }) => {
+	let M = u(), { contextValue: N, taxonomyContextValue: P, extensions: F, isActive: I, handleAccordionValueChange: L, isDeleteConfirmationModalOpen: R, openConfirmationModal: z, closeConfirmationModal: oe, handleDeleteField: B, activeTabId: V, setActiveTabId: H, isTypeEditable: U, uniqueKey: W, nameInputId: G, descriptionInputId: K, accordionTitle: q, TitleIcon: se, hasErrors: ce, handleTypeChange: le, handleChangeVisibility: ue } = s({
 		values: h,
 		onValuesChange: g,
 		onDelete: _,
@@ -23,71 +23,79 @@ var p = ({ index: p, maxIndex: m, values: h, onValuesChange: g, onDelete: _, onD
 		fetchTaxonomies: D,
 		fieldExtensionsProp: k,
 		onValidationChange: A
-	}), J = /* @__PURE__ */ d(i, {
-		nameInputId: W,
-		descriptionInputId: G,
-		isTypeEditable: H,
-		externalErrors: ie,
-		externalTouched: ae,
-		handleTypeChange: ce
-	}), ue = P.length > 0 ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(c.TabPanel, {
+	}), de = j ? {
+		...N,
+		values: {
+			...N.values,
+			isFieldReadOnly: !0
+		}
+	} : N, J = /* @__PURE__ */ d(te, {
+		nameInputId: G,
+		descriptionInputId: K,
+		isTypeEditable: U,
+		externalErrors: re,
+		externalTouched: ie,
+		handleTypeChange: le,
+		readOnly: j
+	}), fe = F.length > 0 ? /* @__PURE__ */ f(ne, { children: [/* @__PURE__ */ d(l.TabPanel, {
 		tabId: o,
 		children: J
-	}), P.map((e, t) => /* @__PURE__ */ d(c.TabPanel, {
+	}), F.map((e, t) => /* @__PURE__ */ d(l.TabPanel, {
 		tabId: `ext-${t}`,
 		className: n.extensionContent,
 		children: e.renderContent(h)
-	}, e.label))] }) : J, Y = w === !1, X = /* @__PURE__ */ d(s.Item, {
+	}, e.label))] }) : J, Y = w === !1, X = /* @__PURE__ */ d(c.Item, {
 		highlighted: !0,
-		startElement: /* @__PURE__ */ d(q, {
+		startElement: /* @__PURE__ */ d(se, {
 			fontSize: "20px",
 			role: "presentation"
 		}),
-		value: U,
-		title: K,
-		action: /* @__PURE__ */ d(ee, {
-			fieldCollapsedText: C,
+		value: W,
+		title: q,
+		action: /* @__PURE__ */ d(r, {
+			fieldCollapsedText: ae,
 			isHidden: h.hidden,
-			isExpanded: F,
+			isExpanded: I,
 			index: p,
 			maxIndex: m,
-			onReorderFields: re,
-			onToggleVisibility: le,
-			onRequestDelete: oe,
+			onReorderFields: y,
+			onToggleVisibility: ue,
+			onRequestDelete: z,
 			onRequestDuplicate: v,
-			extensions: P
+			extensions: F,
+			readOnly: j
 		}),
 		className: n.fieldAccordionItem,
-		iconVariant: se ? "alert-error" : void 0,
-		children: ue
-	}), Z = P.length > 0 ? /* @__PURE__ */ d(c, {
-		selectedId: B,
-		setSelectedId: (e) => V(e ?? "edit"),
+		iconVariant: ce ? "alert-error" : void 0,
+		children: fe
+	}), Z = F.length > 0 ? /* @__PURE__ */ d(l, {
+		selectedId: V,
+		setSelectedId: (e) => H(e ?? "edit"),
 		children: X
-	}) : X, Q = /* @__PURE__ */ f(te.Provider, {
-		value: M,
+	}) : X, Q = /* @__PURE__ */ f(i.Provider, {
+		value: de,
 		children: [/* @__PURE__ */ d("div", {
-			draggable: Y && !S,
-			onDragStart: Y && !S && b ? (e) => b(e, p) : void 0,
-			onDragEnd: Y && !S && x ? (e) => x(e, p) : void 0,
-			onTouchStart: Y && !S && y ? (e) => y(e, p) : void 0,
-			...Y ? S?.listeners ?? {} : {},
-			...Y ? S?.attributes ?? {} : {},
-			children: w === void 0 ? /* @__PURE__ */ d(s, {
+			draggable: Y && !C,
+			onDragStart: Y && !C && x ? (e) => x(e, p) : void 0,
+			onDragEnd: Y && !C && S ? (e) => S(e, p) : void 0,
+			onTouchStart: Y && !C && b ? (e) => b(e, p) : void 0,
+			...Y ? C?.listeners ?? {} : {},
+			...Y ? C?.attributes ?? {} : {},
+			children: w === void 0 ? /* @__PURE__ */ d(c, {
 				type: "single",
 				collapsible: !0,
-				value: F ? U : "",
-				onValueChange: I,
+				value: I ? W : "",
+				onValueChange: L,
 				children: Z
 			}) : Z
-		}), L && /* @__PURE__ */ d(t, {
-			onClose: R,
-			onConfirm: z,
-			title: j.formatMessage(e.deleteFieldTitle, { fieldName: h.name }),
-			body: j.formatMessage(e.deleteFieldDescription)
+		}), R && /* @__PURE__ */ d(t, {
+			onClose: oe,
+			onConfirm: B,
+			title: M.formatMessage(e.deleteFieldTitle, { fieldName: h.name }),
+			body: M.formatMessage(e.deleteFieldDescription)
 		})]
-	}), $ = E !== void 0 || D !== void 0 ? /* @__PURE__ */ d(r.Provider, {
-		value: N,
+	}), $ = E !== void 0 || D !== void 0 ? /* @__PURE__ */ d(ee.Provider, {
+		value: P,
 		children: Q
 	}) : Q;
 	return k === void 0 ? $ : /* @__PURE__ */ d(a.Provider, {