@box/metadata-template-editor 2.1.12 → 2.2.0

package/dist/esm/lib/messages.js

@@ -111,6 +111,18 @@ var t = e({
 	unsavedChangesKeepEditing: {
 		id: "groupSharedFeatures.metadataTemplateEditor.templateForm.unsavedChangesKeepEditing",
 		defaultMessage: "Keep Editing"
+	},
+	close: {
+		id: "groupSharedFeatures.metadataTemplateEditor.templateForm.close",
+		defaultMessage: "Close"
+	},
+	viewTitle: {
+		id: "groupSharedFeatures.metadataTemplateEditor.templateForm.viewTitle",
+		defaultMessage: "{templateName}"
+	},
+	noFields: {
+		id: "groupSharedFeatures.metadataTemplateEditor.templateForm.noFields",
+		defaultMessage: "This template contains no fields."
 	}
 });
 export { t as default };

package/dist/styles/metadata-template-editor-form.css

@@ -1 +1 @@
-._form_8cb30_1{gap:var(--space-4);flex-direction:column;max-width:620px;display:flex}._loading_8cb30_8{padding:var(--space-8) 0;justify-content:center;align-items:center;display:flex}._fields_8cb30_15{gap:var(--space-4);flex-direction:column;display:flex}._actions_8cb30_21{justify-content:flex-end;gap:var(--space-3);padding-top:var(--space-2);display:flex}._fieldsHeader_8cb30_28{align-items:center;gap:var(--space-2);justify-content:space-between;display:flex}
+._form_1f0e7_1{gap:var(--space-4);flex-direction:column;flex:1;max-width:620px;height:100%;display:flex}._loading_1f0e7_10{padding:var(--space-8) 0;justify-content:center;align-items:center;display:flex}._fields_1f0e7_17{gap:var(--space-4);flex-direction:column;display:flex}._emptyFields_1f0e7_23{flex-grow:1;justify-content:space-around}._actions_1f0e7_28{justify-content:flex-end;gap:var(--space-3);padding-top:var(--space-2);display:flex}._fieldsHeader_1f0e7_35{align-items:center;gap:var(--space-2);justify-content:space-between;display:flex}

package/dist/styles/metadata-template-editor-modal.css

@@ -1 +1 @@
-._modal_q1b7q_1{min-width:620px;min-height:620px;max-height:620px}._centeredBody_q1b7q_7{flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex}
+._modal_1s9i6_1{min-width:620px;min-height:620px;max-height:620px}._centeredBody_1s9i6_7{flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex}._modalScrollableContainer_1s9i6_15{flex-direction:column;height:100%;display:flex}._modalBody_1s9i6_21{flex-direction:column;flex:1;justify-content:center;height:100%;display:flex}

package/dist/types/lib/components/metadata-field-configurator/components/field-action-slot/field-action-slot.d.ts

@@ -20,6 +20,11 @@ type FieldActionSlotBaseProps = {
      * When expanded, FieldContextMenu is always used.
      */
     collapsedMenuSlot?: React.ReactNode;
+    /**
+     * When `true`, the context menu (…) is hidden entirely.
+     * Extension tabs (if provided) remain interactive.
+     */
+    readOnly?: boolean;
 };
 export type FieldActionSlotProps = FieldActionSlotBaseProps;
 /**
@@ -30,5 +35,5 @@ export type FieldActionSlotProps = FieldActionSlotBaseProps;
  * - Extension ContentSwitcher tabs (when extensions are provided)
  * - Field context menu, or a custom `menuSlot` when provided
  */
-export declare const FieldActionSlot: ({ isHidden, isExpanded, index, maxIndex, onReorderFields, onToggleVisibility, onRequestDelete, onRequestDuplicate, extensions, fieldCollapsedText, collapsedMenuSlot, }: FieldActionSlotProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FieldActionSlot: ({ isHidden, isExpanded, index, maxIndex, onReorderFields, onToggleVisibility, onRequestDelete, onRequestDuplicate, extensions, fieldCollapsedText, collapsedMenuSlot, readOnly, }: FieldActionSlotProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/lib/components/metadata-field-configurator/components/field-edit-content/field-edit-content.d.ts

@@ -9,6 +9,12 @@ export type FieldEditContentProps = {
     handleTypeChange: (fieldType: FieldData['type']) => void;
     /** When true, the description field is not rendered. */
     hideDescription?: boolean;
+    /**
+     * When `true`, all built-in inputs (field name, type selector, description) are
+     * rendered as read-only. Extension tab content is NOT affected by this flag — it
+     * remains fully interactive.
+     */
+    readOnly?: boolean;
 };
 /**
  * The built-in Edit tab content for a field configurator.
@@ -18,5 +24,5 @@ export type FieldEditContentProps = {
  * not in context (IDs, editability flag, external validation, type change
  * callback) are passed explicitly.
  */
-export declare const FieldEditContent: ({ nameInputId, descriptionInputId, isTypeEditable, externalErrors, externalTouched, handleTypeChange, hideDescription, }: FieldEditContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FieldEditContent: ({ nameInputId, descriptionInputId, isTypeEditable, externalErrors, externalTouched, handleTypeChange, hideDescription, readOnly, }: FieldEditContentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/lib/components/metadata-field-configurator/metadata-field-configurator.d.ts

@@ -115,6 +115,12 @@ export type MetadataFieldConfiguratorProps = GeneralComponentProps & (NativeDrag
      * Optional text to display in the accordion header when the field is collapsed.
      */
     fieldCollapsedText?: string;
+    /**
+     * When `true`, the field is shown in read-only display mode: all inputs are
+     * non-editable, the context menu is hidden, and drag handles are inert.
+     * Extension tabs remain interactive.
+     */
+    readOnly?: boolean;
     /**
      * Called whenever this field's internal validation state changes.
      *
@@ -191,5 +197,5 @@ export type MetadataFieldConfiguratorProps = GeneralComponentProps & (NativeDrag
  * />
  * ```
  */
-export declare const MetadataFieldConfigurator: ({ index, maxIndex, values, onValuesChange, onDelete, onDuplicate, onReorderFields, onTouchStart, onDragStart, onDragEnd, externalErrors, externalTouched, dndDragHandleProps, fieldCollapsedText, isExpanded, onExpandedChange, taxonomyOptions, fetchTaxonomies, submitAttemptCount, fieldExtensions: fieldExtensionsProp, onValidationChange, }: MetadataFieldConfiguratorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataFieldConfigurator: ({ index, maxIndex, values, onValuesChange, onDelete, onDuplicate, onReorderFields, onTouchStart, onDragStart, onDragEnd, externalErrors, externalTouched, dndDragHandleProps, fieldCollapsedText, isExpanded, onExpandedChange, taxonomyOptions, fetchTaxonomies, submitAttemptCount, fieldExtensions: fieldExtensionsProp, onValidationChange, readOnly, }: MetadataFieldConfiguratorProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/lib/components/metadata-field-list/metadata-field-list.d.ts

@@ -87,6 +87,12 @@ export type MetadataFieldListProps = {
      * ```
      */
     readonly onValidationChange?: (isValid: boolean) => void;
+    /**
+     * When `true`, the list is rendered in read-only display mode: drag-and-drop is
+     * disabled, context menus are hidden, and all field inputs are non-editable.
+     * Extension tabs remain interactive.
+     */
+    readonly readOnly?: boolean;
 };
 /**
  * Renders an ordered, drag-and-drop list of metadata field configurators.

package/dist/types/lib/components/metadata-template-editor-form/metadata-template-editor-form.d.ts

@@ -1,5 +1,5 @@
-import { MetadataFieldListProps } from '../metadata-field-list';
 import { FieldConfiguratorExtension } from '../metadata-field-configurator/context/field-extensions-context';
+import { MetadataFieldListProps } from '../metadata-field-list';
 type MetadataTemplateEditorFormProps = {
     formId?: string;
     onCancel?: () => void;
@@ -7,6 +7,15 @@ type MetadataTemplateEditorFormProps = {
     fetchTaxonomies?: MetadataFieldListProps['fetchTaxonomies'];
     hideActions?: boolean;
     isEditMode?: boolean;
+    /**
+     * When `true`, the entire form is in read-only display mode:
+     * - all text inputs are non-editable
+     * - the Add Field button and field type tiles are hidden
+     * - the context menu (…) on each field is hidden
+     * - the action bar shows a single Close button instead of Cancel / Save
+     * - extension tabs remain interactive
+     */
+    readOnly?: boolean;
     onDirtyStateChange?: (isDirty: boolean) => void;
     onValidationChange?: (isValid: boolean) => void;
     /**
@@ -16,5 +25,5 @@ type MetadataTemplateEditorFormProps = {
      */
     fieldExtensions?: FieldConfiguratorExtension[];
 };
-declare const MetadataTemplateEditorForm: ({ formId, onCancel, taxonomyOptions, fetchTaxonomies, hideActions, isEditMode, onDirtyStateChange, onValidationChange, fieldExtensions, }: MetadataTemplateEditorFormProps) => import("react/jsx-runtime").JSX.Element;
+declare const MetadataTemplateEditorForm: ({ formId, onCancel, taxonomyOptions, fetchTaxonomies, hideActions, isEditMode, readOnly, onDirtyStateChange, onValidationChange, fieldExtensions, }: MetadataTemplateEditorFormProps) => import("react/jsx-runtime").JSX.Element;
 export default MetadataTemplateEditorForm;

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

@@ -139,5 +139,20 @@ declare const _default: {
         description: string;
         id: string;
     };
+    close: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+    viewTitle: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+    noFields: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
 };
 export default _default;

package/dist/types/lib/metadata-template-editor.d.ts

@@ -212,7 +212,24 @@ type EditModeProps = {
     /** Namespace is read from the fetched template in edit mode — do not pass it from the host. */
     namespace?: never;
 };
-export type MetadataTemplateEditorProps = MetadataTemplateEditorCommonProps & (CreateModeProps | EditModeProps);
+/**
+ * Read-only mode: fetches an existing template and displays it without any
+ * editing controls (no Save, no Add Field, no context menus, no editable inputs).
+ * Extension tabs (if provided) remain interactive.
+ */
+type ReadOnlyModeProps = {
+    /** Discriminates the union; must be `MetadataTemplateEditorMode.ReadOnly` for the read-only view. */
+    mode: MetadataTemplateEditorMode.ReadOnly;
+    /**
+     * Called once (and re-called whenever the reference changes) to fetch the
+     * existing template data. Identical semantics to edit mode — see `EditModeProps`.
+     */
+    fetchTemplate: () => Promise<MetadataTemplateApiResponse>;
+    onEditTemplate?: never;
+    onCreateTemplate?: never;
+    namespace?: never;
+};
+export type MetadataTemplateEditorProps = MetadataTemplateEditorCommonProps & (CreateModeProps | EditModeProps | ReadOnlyModeProps);
 /**
  * Imperative handle exposed by `MetadataTemplateEditor` via `ref`.
  *

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

@@ -1,10 +1,11 @@
 /**
- * Discriminates between creating a new template and editing an existing one.
+ * Discriminates between creating, editing, or viewing a template in read-only mode.
  * Pass as the `mode` prop on `MetadataTemplateEditor` / `MetadataTemplateEditorModal`.
  */
 export declare enum MetadataTemplateEditorMode {
     Create = "create",
-    Edit = "edit"
+    Edit = "edit",
+    ReadOnly = "readOnly"
 }
 /**
  * Types of fields that can be defined in a metadata template:

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-template-editor",
-    "version": "2.1.12",
+    "version": "2.2.0",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^16.4.4",