@box/metadata-template-editor 2.2.24 → 2.2.25

package/dist/chunks/metadata-field-list.js

@@ -1,280 +1 @@
-import { a as e } from "./types.js";
-import { FieldTypeIcon as t } from "../esm/lib/utils/field-options/field-type-icon.js";
-import { EditorConfigContext as n, useEditorConfig as r } from "../esm/lib/components/metadata-field-configurator/context/editor-config-context.js";
-import { general as i } from "../esm/lib/components/metadata-field-configurator/messages/configurator-messages.js";
-import { useTemplateFieldSchema as a } from "../esm/lib/components/metadata-field-configurator/hooks/useTemplateFieldSchema.js";
-import { TaxonomyOptionsContext as o } from "../esm/lib/components/metadata-field-configurator/context/taxonomy-options-context.js";
-import { FieldExtensionsContext as s } from "../esm/lib/components/metadata-field-configurator/context/field-extensions-context.js";
-import { useTaxonomyFetch as c } from "../esm/lib/components/metadata-field-configurator/hooks/useTaxonomyFetch.js";
-import { MetadataFieldConfigurator as l } from "../esm/lib/components/metadata-field-configurator/metadata-field-configurator.js";
-import { Accordion as u } from "@box/blueprint-web";
-import { useIntl as d } from "react-intl";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { forwardRef as m, useCallback as h, useEffect as g, useImperativeHandle as _, useMemo as v, useRef as y, useState as b } from "react";
-import * as ee from "yup";
-import x from "clsx";
-import te from "lodash/cloneDeep";
-import S from "lodash/uniqueId";
-import { DndContext as ne, DragOverlay as re, KeyboardSensor as C, PointerSensor as ie, TouchSensor as ae, closestCenter as oe, useSensor as w, useSensors as se } from "@dnd-kit/core";
-import { SortableContext as ce, arrayMove as T, sortableKeyboardCoordinates as le, useSortable as E, verticalListSortingStrategy as ue } from "@dnd-kit/sortable";
-import { CSS as D } from "@dnd-kit/utilities";
-import '../styles/metadata-field-list.css';var O = {
-	fieldList: "_fieldList_18x5c_1",
-	fieldItem: "_fieldItem_18x5c_11",
-	dragging: "_dragging_18x5c_11",
-	accordionRootContainer: "_accordionRootContainer_18x5c_15"
-}, de = 150;
-function k(e) {
-	return e.id;
-}
-var A = 150, fe = class extends C {
-	static activators = [{
-		eventName: "onKeyDown",
-		handler: (e, t, n) => {
-			let r = e.nativeEvent?.target ?? e.target ?? null;
-			return r instanceof HTMLElement && [
-				"BUTTON",
-				"INPUT",
-				"SELECT",
-				"TEXTAREA",
-				"A"
-			].includes(r.tagName) ? !1 : C.activators[0].handler(e, t, n);
-		}
-	}];
-};
-function pe({ field: e, index: t, maxIndex: n, isExpanded: r, onChangeField: i, onDeleteAtIndex: a, onDuplicateAtIndex: o, onReorderFields: s, onRequestExpand: c, submitAttemptCount: u }) {
-	let d = k(e), { attributes: p, listeners: m, setNodeRef: h, transform: g, transition: _, isDragging: v } = E({ id: d });
-	return /* @__PURE__ */ f("li", {
-		ref: h,
-		style: {
-			transform: D.Translate.toString(g),
-			transition: _
-		},
-		"data-field-id": d,
-		className: x(O.fieldItem, { [O.dragging]: v }),
-		children: /* @__PURE__ */ f(l, {
-			values: e,
-			onValuesChange: i,
-			index: t,
-			maxIndex: n,
-			onDelete: () => a(t),
-			onDuplicate: () => o(t),
-			onReorderFields: s,
-			dndDragHandleProps: {
-				listeners: m,
-				attributes: p
-			},
-			isExpanded: r,
-			onExpandedChange: (e) => {
-				e && c();
-			},
-			submitAttemptCount: u
-		})
-	});
-}
-var j = /*#__PURE__*/ m(function({ fields: m, onChangeFields: x, onDeleteFieldAtIndex: C, onDuplicateField: E, taxonomyOptions: D, fetchTaxonomies: j, disabledFieldTypes: M, taxonomyInitialStateLabels: N, firstInvalidFieldIndex: P, submitAttemptCount: F, fieldExtensions: I, onValidationChange: L, readOnly: R = !1 }, me) {
-	let { formatMessage: he } = d(), z = r(), ge = c(j, D), B = y(null), V = y(null), H = y(new Set(m.map((e) => k(e)))), U = a(), W = y(null);
-	g(() => {
-		W.current = null;
-	}, [L]), g(() => {
-		if (!L) return;
-		let e = !1, t = setTimeout(() => {
-			ee.array().of(U).validate(m, { abortEarly: !0 }).then(() => {
-				e || W.current === !0 || (W.current = !0, L(!0));
-			}).catch(() => {
-				e || W.current === !1 || (W.current = !1, L(!1));
-			});
-		}, de);
-		return () => {
-			e = !0, clearTimeout(t);
-		};
-	}, [
-		m,
-		U,
-		L
-	]);
-	let [G, K] = b(() => {
-		let e = m.find((e) => e.isFieldNew);
-		return e ? k(e) : null;
-	});
-	_(me, () => ({ scrollToAndExpand(e) {
-		V.current = e, G === e ? (V.current = null, setTimeout(() => {
-			(B.current?.querySelector(`[data-field-id="${e}"]`))?.scrollIntoView({
-				behavior: "smooth",
-				block: "nearest"
-			});
-		}, 0)) : K(e);
-	} }), [G]), g(() => {
-		m.forEach((e) => {
-			let t = k(e);
-			H.current.has(t) || (H.current.add(t), V.current = t, K(t));
-		});
-	}, [m]), g(() => {
-		if (P == null || !F) return;
-		let e = m[P];
-		if (!e) return;
-		let t = k(e);
-		K(t), requestAnimationFrame(() => {
-			(B.current?.querySelector(`[data-field-id="${t}"]`))?.scrollIntoView({
-				behavior: "smooth",
-				block: "nearest"
-			});
-		});
-	}, [F]), g(() => {
-		let e = V.current;
-		if (!e || e !== G) return;
-		V.current = null;
-		let t = setTimeout(() => {
-			(B.current?.querySelector(`[data-field-id="${e}"]`))?.scrollIntoView({
-				behavior: "smooth",
-				block: "nearest"
-			});
-		}, A);
-		return () => clearTimeout(t);
-	}, [G]);
-	let [q, J] = b(null), _e = se(w(ie, { activationConstraint: { distance: 8 } }), w(ae, { activationConstraint: {
-		delay: 250,
-		tolerance: 5
-	} }), w(fe, { coordinateGetter: le })), ve = h((e) => {
-		J(String(e.active.id));
-	}, []), ye = h((e) => {
-		J(null);
-		let { active: t, over: n } = e;
-		if (n && t.id !== n.id) {
-			let e = m.findIndex((e) => k(e) === t.id), r = m.findIndex((e) => k(e) === n.id);
-			e !== -1 && r !== -1 && x?.(T(m, e, r));
-		}
-	}, [m, x]), be = h(() => {
-		J(null);
-	}, []), xe = h((e, t) => {
-		x?.(m.map((n, r) => r === e ? t : n));
-	}, [m, x]), Se = h((e) => {
-		let t = m[e], n = k(t);
-		K((e) => e === n ? null : e), x?.(m.filter((t, n) => n !== e)), C?.(e, t);
-	}, [
-		m,
-		x,
-		C
-	]), Ce = h((t) => {
-		let n = m[t], r = te(n);
-		r.id = S("field-"), r.key = "", r.isFieldNew = !0, r.type === e.Dropdown && (r.dropdown.options = r.dropdown.options.map((e) => ({
-			...e,
-			id: S()
-		})));
-		let i = [...m];
-		i.splice(t + 1, 0, r), x?.(i), E?.(r);
-	}, [
-		m,
-		x,
-		E
-	]), we = h((e, t) => {
-		t < 0 || t >= m.length || x?.(T(m, e, t));
-	}, [m, x]), Y = h((e) => {
-		let t = e || null;
-		K(t), t && setTimeout(() => {
-			(B.current?.querySelector(`[data-field-id="${t}"]`))?.scrollIntoView({
-				behavior: "smooth",
-				block: "nearest"
-			});
-		}, A);
-	}, []), Te = m.map((e) => k(e)), X = q ? m.find((e) => k(e) === q) : null, Z = X ? t(X.type) : null, Ee = X ? ((t) => {
-		let n = t.name || he(i.fieldNameInputPlaceholder);
-		return t.type === e.Dropdown ? `${n} (${t.dropdown?.options?.length ?? 0})` : n;
-	})(X) : "", De = v(() => ({
-		disabledFieldTypes: M ?? z.disabledFieldTypes,
-		taxonomyInitialStateLabels: N ?? z.taxonomyInitialStateLabels
-	}), [
-		M,
-		N,
-		z
-	]), Oe = R ? /* @__PURE__ */ f("ul", {
-		ref: B,
-		className: O.fieldList,
-		children: m.map((e, t) => {
-			let n = k(e);
-			return /* @__PURE__ */ f("li", {
-				"data-field-id": n,
-				className: O.fieldItem,
-				children: /* @__PURE__ */ f(l, {
-					values: e,
-					onValuesChange: () => void 0,
-					index: t,
-					maxIndex: m.length - 1,
-					onDuplicate: () => void 0,
-					onReorderFields: () => void 0,
-					onDragStart: () => void 0,
-					onDragEnd: () => void 0,
-					onTouchStart: () => void 0,
-					isExpanded: G === n,
-					onExpandedChange: (e) => {
-						e && K(n);
-					},
-					readOnly: !0
-				})
-			}, n);
-		})
-	}) : /* @__PURE__ */ f(ce, {
-		items: Te,
-		strategy: ue,
-		children: /* @__PURE__ */ f("ul", {
-			ref: B,
-			className: O.fieldList,
-			children: m.map((e, t) => {
-				let n = k(e);
-				return /* @__PURE__ */ f(pe, {
-					field: e,
-					index: t,
-					maxIndex: m.length - 1,
-					isExpanded: G === n,
-					onChangeField: (e) => xe(t, e),
-					onDeleteAtIndex: Se,
-					onDuplicateAtIndex: Ce,
-					onReorderFields: we,
-					onRequestExpand: () => K(n),
-					submitAttemptCount: F
-				}, n);
-			})
-		})
-	}), Q = /* @__PURE__ */ f("div", {
-		className: O.accordionRootContainer,
-		children: /* @__PURE__ */ f(u, {
-			type: "single",
-			collapsible: !0,
-			value: G ?? "",
-			onValueChange: Y,
-			children: Oe
-		})
-	}), ke = R ? Q : /* @__PURE__ */ p(ne, {
-		sensors: _e,
-		collisionDetection: oe,
-		onDragStart: ve,
-		onDragEnd: ye,
-		onDragCancel: be,
-		children: [Q, /* @__PURE__ */ f(re, {
-			dropAnimation: null,
-			children: X && Z ? /* @__PURE__ */ f(u, {
-				type: "single",
-				children: /* @__PURE__ */ f(u.Item, {
-					value: "ghost",
-					title: Ee,
-					startElement: /* @__PURE__ */ f(Z, {
-						fontSize: "20px",
-						role: "presentation"
-					}),
-					children: null
-				})
-			}) : null
-		})]
-	}), $ = /* @__PURE__ */ f(n.Provider, {
-		value: De,
-		children: /* @__PURE__ */ f(o.Provider, {
-			value: ge,
-			children: ke
-		})
-	});
-	return I === void 0 ? $ : /* @__PURE__ */ f(s.Provider, {
-		value: I,
-		children: $
-	});
-});
-export { j as t };
+import{a as FieldType}from"./types.js";import{FieldTypeIcon}from"../esm/lib/utils/field-options/field-type-icon.js";import{EditorConfigContext,useEditorConfig}from"../esm/lib/components/metadata-field-configurator/context/editor-config-context.js";import{general}from"../esm/lib/components/metadata-field-configurator/messages/configurator-messages.js";import{useTemplateFieldSchema}from"../esm/lib/components/metadata-field-configurator/hooks/useTemplateFieldSchema.js";import{TaxonomyOptionsContext}from"../esm/lib/components/metadata-field-configurator/context/taxonomy-options-context.js";import{FieldExtensionsContext}from"../esm/lib/components/metadata-field-configurator/context/field-extensions-context.js";import{useTaxonomyFetch}from"../esm/lib/components/metadata-field-configurator/hooks/useTaxonomyFetch.js";import{MetadataFieldConfigurator}from"../esm/lib/components/metadata-field-configurator/metadata-field-configurator.js";import{Accordion}from"@box/blueprint-web";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";import{forwardRef,useCallback,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import*as Yup from"yup";import clsx from"clsx";import cloneDeep from"lodash/cloneDeep";import uniqueId from"lodash/uniqueId";import{DndContext,DragOverlay,KeyboardSensor,PointerSensor,TouchSensor,closestCenter,useSensor,useSensors}from"@dnd-kit/core";import{SortableContext,arrayMove,sortableKeyboardCoordinates,useSortable,verticalListSortingStrategy}from"@dnd-kit/sortable";import{CSS}from"@dnd-kit/utilities";import '../styles/metadata-field-list.css';var metadata_field_list_module_default={fieldList:`_fieldList_18x5c_1`,fieldItem:`_fieldItem_18x5c_11`,dragging:`_dragging_18x5c_11`,accordionRootContainer:`_accordionRootContainer_18x5c_15`},FIELDS_AGGREGATE_VALIDATION_DEBOUNCE_MS=150;function getFieldId(field){return field.id}var ACCORDION_ANIMATION_MS=150,FieldListKeyboardSensor=class extends KeyboardSensor{static activators=[{eventName:`onKeyDown`,handler:(event,options,context)=>{let target=event.nativeEvent?.target??event.target??null;return target instanceof HTMLElement&&[`BUTTON`,`INPUT`,`SELECT`,`TEXTAREA`,`A`].includes(target.tagName)?!1:KeyboardSensor.activators[0].handler(event,options,context)}}]};function SortableFieldItem({field,index,maxIndex,isExpanded,onChangeField,onDeleteAtIndex,onDuplicateAtIndex,onReorderFields,onRequestExpand,submitAttemptCount}){let id=getFieldId(field),{attributes,listeners,setNodeRef,transform,transition,isDragging}=useSortable({id});return jsx(`li`,{ref:setNodeRef,style:{transform:CSS.Translate.toString(transform),transition},"data-field-id":id,className:clsx(metadata_field_list_module_default.fieldItem,{[metadata_field_list_module_default.dragging]:isDragging}),children:jsx(MetadataFieldConfigurator,{values:field,onValuesChange:onChangeField,index,maxIndex,onDelete:()=>onDeleteAtIndex(index),onDuplicate:()=>onDuplicateAtIndex(index),onReorderFields,dndDragHandleProps:{listeners,attributes},isExpanded,onExpandedChange:expanded=>{expanded&&onRequestExpand()},submitAttemptCount})})}var MetadataFieldList=forwardRef(function({fields,onChangeFields,onDeleteFieldAtIndex,onDuplicateField,taxonomyOptions,fetchTaxonomies,disabledFieldTypes,taxonomyInitialStateLabels,firstInvalidFieldIndex,submitAttemptCount,fieldExtensions,onValidationChange,readOnly=!1},ref){let{formatMessage}=useIntl(),parentEditorConfig=useEditorConfig(),taxonomyContextValue=useTaxonomyFetch(fetchTaxonomies,taxonomyOptions),fieldListRef=useRef(null),pendingScrollFieldIdRef=useRef(null),seenFieldIdsRef=useRef(new Set(fields.map(field=>getFieldId(field)))),fieldSchema=useTemplateFieldSchema(),lastEmittedAggregateValidRef=useRef(null);useEffect(()=>{lastEmittedAggregateValidRef.current=null},[onValidationChange]),useEffect(()=>{if(!onValidationChange)return;let cancelled=!1,timeoutId=setTimeout(()=>{Yup.array().of(fieldSchema).validate(fields,{abortEarly:!0}).then(()=>{cancelled||lastEmittedAggregateValidRef.current===!0||(lastEmittedAggregateValidRef.current=!0,onValidationChange(!0))}).catch(()=>{cancelled||lastEmittedAggregateValidRef.current===!1||(lastEmittedAggregateValidRef.current=!1,onValidationChange(!1))})},FIELDS_AGGREGATE_VALIDATION_DEBOUNCE_MS);return()=>{cancelled=!0,clearTimeout(timeoutId)}},[fields,fieldSchema,onValidationChange]);let[expandedFieldKey,setExpandedFieldKey]=useState(()=>{let firstNewField=fields.find(f=>f.isFieldNew);return firstNewField?getFieldId(firstNewField):null});useImperativeHandle(ref,()=>({scrollToAndExpand(fieldId){pendingScrollFieldIdRef.current=fieldId,expandedFieldKey===fieldId?(pendingScrollFieldIdRef.current=null,setTimeout(()=>{(fieldListRef.current?.querySelector(`[data-field-id="${fieldId}"]`))?.scrollIntoView({behavior:`smooth`,block:`nearest`})},0)):setExpandedFieldKey(fieldId)}}),[expandedFieldKey]),useEffect(()=>{fields.forEach(field=>{let id=getFieldId(field);seenFieldIdsRef.current.has(id)||(seenFieldIdsRef.current.add(id),pendingScrollFieldIdRef.current=id,setExpandedFieldKey(id))})},[fields]),useEffect(()=>{if(firstInvalidFieldIndex==null||!submitAttemptCount)return;let field=fields[firstInvalidFieldIndex];if(!field)return;let fieldId=getFieldId(field);setExpandedFieldKey(fieldId),requestAnimationFrame(()=>{(fieldListRef.current?.querySelector(`[data-field-id="${fieldId}"]`))?.scrollIntoView({behavior:`smooth`,block:`nearest`})})},[submitAttemptCount]),useEffect(()=>{let fieldId=pendingScrollFieldIdRef.current;if(!fieldId||fieldId!==expandedFieldKey)return;pendingScrollFieldIdRef.current=null;let timer=setTimeout(()=>{(fieldListRef.current?.querySelector(`[data-field-id="${fieldId}"]`))?.scrollIntoView({behavior:`smooth`,block:`nearest`})},ACCORDION_ANIMATION_MS);return()=>clearTimeout(timer)},[expandedFieldKey]);let[activeFieldId,setActiveFieldId]=useState(null),sensors=useSensors(useSensor(PointerSensor,{activationConstraint:{distance:8}}),useSensor(TouchSensor,{activationConstraint:{delay:250,tolerance:5}}),useSensor(FieldListKeyboardSensor,{coordinateGetter:sortableKeyboardCoordinates})),handleDragStart=useCallback(event=>{setActiveFieldId(String(event.active.id))},[]),handleDragEnd=useCallback(event=>{setActiveFieldId(null);let{active,over}=event;if(over&&active.id!==over.id){let oldIndex=fields.findIndex(f=>getFieldId(f)===active.id),newIndex=fields.findIndex(f=>getFieldId(f)===over.id);oldIndex!==-1&&newIndex!==-1&&onChangeFields?.(arrayMove(fields,oldIndex,newIndex))}},[fields,onChangeFields]),handleDragCancel=useCallback(()=>{setActiveFieldId(null)},[]),handleFieldChange=useCallback((index,field)=>{onChangeFields?.(fields.map((f,i)=>i===index?field:f))},[fields,onChangeFields]),handleDeleteAtIndex=useCallback(index=>{let fieldToDelete=fields[index],fieldId=getFieldId(fieldToDelete);setExpandedFieldKey(prev=>prev===fieldId?null:prev),onChangeFields?.(fields.filter((_,i)=>i!==index)),onDeleteFieldAtIndex?.(index,fieldToDelete)},[fields,onChangeFields,onDeleteFieldAtIndex]),handleDuplicateAtIndex=useCallback(index=>{let fieldToDuplicate=fields[index],duplicated=cloneDeep(fieldToDuplicate);duplicated.id=uniqueId(`field-`),duplicated.key=``,duplicated.isFieldNew=!0,duplicated.type===FieldType.Dropdown&&(duplicated.dropdown.options=duplicated.dropdown.options.map(opt=>({...opt,id:uniqueId()})));let newFields=[...fields];newFields.splice(index+1,0,duplicated),onChangeFields?.(newFields),onDuplicateField?.(duplicated)},[fields,onChangeFields,onDuplicateField]),handleReorderFields=useCallback((fromIndex,toIndex)=>{toIndex<0||toIndex>=fields.length||onChangeFields?.(arrayMove(fields,fromIndex,toIndex))},[fields,onChangeFields]),handleAccordionValueChange=useCallback(value=>{let newKey=value||null;setExpandedFieldKey(newKey),newKey&&setTimeout(()=>{(fieldListRef.current?.querySelector(`[data-field-id="${newKey}"]`))?.scrollIntoView({behavior:`smooth`,block:`nearest`})},ACCORDION_ANIMATION_MS)},[]),items=fields.map(f=>getFieldId(f)),activeField=activeFieldId?fields.find(f=>getFieldId(f)===activeFieldId):null,OverlayTitleIcon=activeField?FieldTypeIcon(activeField.type):null,overlayTitle=activeField?(field=>{let name=field.name||formatMessage(general.fieldNameInputPlaceholder);return field.type===FieldType.Dropdown?`${name} (${field.dropdown?.options?.length??0})`:name})(activeField):``,editorConfigValue=useMemo(()=>({disabledFieldTypes:disabledFieldTypes??parentEditorConfig.disabledFieldTypes,taxonomyInitialStateLabels:taxonomyInitialStateLabels??parentEditorConfig.taxonomyInitialStateLabels}),[disabledFieldTypes,taxonomyInitialStateLabels,parentEditorConfig]),listItems=readOnly?jsx(`ul`,{ref:fieldListRef,className:metadata_field_list_module_default.fieldList,children:fields.map((field,index)=>{let fieldId=getFieldId(field);return jsx(`li`,{"data-field-id":fieldId,className:metadata_field_list_module_default.fieldItem,children:jsx(MetadataFieldConfigurator,{values:field,onValuesChange:()=>void 0,index,maxIndex:fields.length-1,onDuplicate:()=>void 0,onReorderFields:()=>void 0,onDragStart:()=>void 0,onDragEnd:()=>void 0,onTouchStart:()=>void 0,isExpanded:expandedFieldKey===fieldId,onExpandedChange:expanded=>{expanded&&setExpandedFieldKey(fieldId)},readOnly:!0})},fieldId)})}):jsx(SortableContext,{items,strategy:verticalListSortingStrategy,children:jsx(`ul`,{ref:fieldListRef,className:metadata_field_list_module_default.fieldList,children:fields.map((field,index)=>{let fieldId=getFieldId(field);return jsx(SortableFieldItem,{field,index,maxIndex:fields.length-1,isExpanded:expandedFieldKey===fieldId,onChangeField:updatedField=>handleFieldChange(index,updatedField),onDeleteAtIndex:handleDeleteAtIndex,onDuplicateAtIndex:handleDuplicateAtIndex,onReorderFields:handleReorderFields,onRequestExpand:()=>setExpandedFieldKey(fieldId),submitAttemptCount},fieldId)})})}),accordionContainer=jsx(`div`,{className:metadata_field_list_module_default.accordionRootContainer,children:jsx(Accordion,{type:`single`,collapsible:!0,value:expandedFieldKey??``,onValueChange:handleAccordionValueChange,children:listItems})}),coreContent=readOnly?accordionContainer:jsxs(DndContext,{sensors,collisionDetection:closestCenter,onDragStart:handleDragStart,onDragEnd:handleDragEnd,onDragCancel:handleDragCancel,children:[accordionContainer,jsx(DragOverlay,{dropAnimation:null,children:activeField&&OverlayTitleIcon?jsx(Accordion,{type:`single`,children:jsx(Accordion.Item,{value:`ghost`,title:overlayTitle,startElement:jsx(OverlayTitleIcon,{fontSize:`20px`,role:`presentation`}),children:null})}):null})]}),listContent=jsx(EditorConfigContext.Provider,{value:editorConfigValue,children:jsx(TaxonomyOptionsContext.Provider,{value:taxonomyContextValue,children:coreContent})});return fieldExtensions===void 0?listContent:jsx(FieldExtensionsContext.Provider,{value:fieldExtensions,children:listContent})});export{MetadataFieldList as t};

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

@@ -1,132 +1 @@
-import { t as e } from "./field-selector.js";
-import { t } from "./field-type-dropdown.js";
-import { FieldTypeTiles as n } from "../esm/lib/components/field-type-tiles/field-type-tiles.js";
-import { createDefaultFieldValues as r } from "../esm/lib/components/metadata-field-configurator/utils.js";
-import { FieldExtensionsContext as i } from "../esm/lib/components/metadata-field-configurator/context/field-extensions-context.js";
-import { t as a } from "./metadata-field-list.js";
-import o from "../esm/lib/messages.js";
-import { Button as s, EmptyState as c, Link as l, Text as u, TextInput as d } from "@box/blueprint-web";
-import { FormattedMessage as f, useIntl as p } from "react-intl";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
-import { useEffect as _, useMemo as v, useRef as y } from "react";
-import b from "clsx";
-import { Form as x, useFormikContext as ee } from "formik";
-import { NoTemplates as S } from "@box/blueprint-web-assets/illustrations/Medium";
-import '../styles/metadata-template-editor-form.css';var C = {
-	form: "_form_1r59b_1",
-	fields: "_fields_1r59b_10",
-	emptyFields: "_emptyFields_1r59b_16",
-	actions: "_actions_1r59b_21",
-	fieldsHeader: "_fieldsHeader_1r59b_28"
-}, w = "bodyDefaultBold", T = "h2", E = "https://developer.box.com/guides/metadata/fields/", D = ({ formId: D, onCancel: O, taxonomyOptions: k, fetchTaxonomies: A, hideActions: te, isEditMode: ne, readOnly: j = !1, onDirtyStateChange: M, onValidationChange: N, fieldExtensions: P }) => {
-	let F = p(), { errors: I, values: L, setFieldValue: R, setFieldTouched: z, isSubmitting: B, isValid: V, handleChange: H, submitCount: U, dirty: W, touched: G } = ee(), K = y(null), q = y(!1), J = () => {
-		q.current = !0;
-	}, Y = () => {
-		q.current && z("displayName", !0);
-	}, X = v(() => {
-		if (!Array.isArray(I.fields)) return null;
-		let e = I.fields.findIndex(Boolean);
-		return e >= 0 ? e : null;
-	}, [I.fields]), Z = (e) => {
-		let t = r(e.type);
-		R("fields", [...L.fields, t]);
-	}, re = (e) => {
-		R("fields", e);
-	};
-	_(() => {
-		M?.(W);
-	}, [W, M]), _(() => {
-		N?.(V);
-	}, [V, N]);
-	let ie = B || ne && !W, Q;
-	Q = j && L.fields.length === 0 ? /* @__PURE__ */ h(c, {
-		size: "large",
-		illustration: S,
-		body: /* @__PURE__ */ h(u, {
-			as: "p",
-			children: F.formatMessage(o.noFields)
-		})
-	}) : j ? /* @__PURE__ */ h(a, {
-		ref: K,
-		fields: L.fields,
-		taxonomyOptions: k,
-		fetchTaxonomies: A,
-		readOnly: !0
-	}) : L.fields.length === 0 ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(n, { onFieldAdd: Z }), /* @__PURE__ */ h(l, {
-		href: E,
-		isExternal: !0,
-		target: "_blank",
-		children: /* @__PURE__ */ h(f, { ...o.fieldsLearnMore })
-	})] }) : /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(a, {
-		ref: K,
-		fields: L.fields,
-		taxonomyOptions: k,
-		fetchTaxonomies: A,
-		onChangeFields: re,
-		firstInvalidFieldIndex: X,
-		submitAttemptCount: U
-	}), /* @__PURE__ */ h(t, { onFieldAdd: Z })] });
-	let $ = /* @__PURE__ */ g(x, {
-		noValidate: !0,
-		id: D,
-		className: C.form,
-		children: [
-			/* @__PURE__ */ h("div", { children: /* @__PURE__ */ h(d, {
-				name: "displayName",
-				label: F.formatMessage(o.templateName),
-				placeholder: F.formatMessage(o.templateNameDescription),
-				value: L.displayName,
-				error: !j && G.displayName && I.displayName ? I.displayName : void 0,
-				onChange: (e) => {
-					H(e);
-				},
-				onPointerDown: J,
-				onKeyDown: J,
-				onBlur: Y,
-				readOnly: j
-			}) }),
-			/* @__PURE__ */ g("div", {
-				className: C.fieldsHeader,
-				children: [/* @__PURE__ */ h(u, {
-					as: T,
-					variant: w,
-					children: /* @__PURE__ */ h(f, { ...!j && L.fields.length === 0 ? o.fieldsAddFirst : o.fields })
-				}), L.fields.length > 0 && /* @__PURE__ */ h(e, {
-					fields: L.fields,
-					onSelect: (e) => K.current?.scrollToAndExpand(e)
-				})]
-			}),
-			/* @__PURE__ */ h("div", {
-				className: b(C.fields, { [C.emptyFields]: L.fields.length === 0 && j }),
-				children: Q
-			}),
-			!te && /* @__PURE__ */ h("div", {
-				className: C.actions,
-				children: j ? O && /* @__PURE__ */ h(s, {
-					variant: "primary",
-					type: "button",
-					onClick: O,
-					children: F.formatMessage(o.close)
-				}) : /* @__PURE__ */ g(m, { children: [O && /* @__PURE__ */ h(s, {
-					variant: "secondary",
-					type: "button",
-					onClick: O,
-					loading: B,
-					disabled: B,
-					loadingAriaLabel: F.formatMessage(o.submitting),
-					children: F.formatMessage(o.cancel)
-				}), /* @__PURE__ */ h(s, {
-					variant: "primary",
-					type: "submit",
-					disabled: ie,
-					children: F.formatMessage(o.save)
-				})] })
-			})
-		]
-	});
-	return P === void 0 ? $ : /* @__PURE__ */ h(i.Provider, {
-		value: P,
-		children: $
-	});
-};
-export { D as t };
+import{t as FieldSelector}from"./field-selector.js";import{t as FieldTypeDropdown}from"./field-type-dropdown.js";import{FieldTypeTiles}from"../esm/lib/components/field-type-tiles/field-type-tiles.js";import{createDefaultFieldValues}from"../esm/lib/components/metadata-field-configurator/utils.js";import{FieldExtensionsContext}from"../esm/lib/components/metadata-field-configurator/context/field-extensions-context.js";import{t as MetadataFieldList}from"./metadata-field-list.js";import messages_default from"../esm/lib/messages.js";import{Button,EmptyState,Link,Text,TextInput}from"@box/blueprint-web";import{FormattedMessage,useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import{useEffect,useMemo,useRef}from"react";import clsx from"clsx";import{Form,useFormikContext}from"formik";import{NoTemplates}from"@box/blueprint-web-assets/illustrations/Medium";import '../styles/metadata-template-editor-form.css';var metadata_template_editor_form_module_default={form:`_form_1r59b_1`,fields:`_fields_1r59b_10`,emptyFields:`_emptyFields_1r59b_16`,actions:`_actions_1r59b_21`,fieldsHeader:`_fieldsHeader_1r59b_28`},FIELD_NAME_VARIANT=`bodyDefaultBold`,FIELD_NAME_VARIANT_AS_ELEMENT=`h2`,BOX_METADATA_FIELDS_GUIDE_URL=`https://developer.box.com/guides/metadata/fields/`,MetadataTemplateEditorForm=({formId,onCancel,taxonomyOptions,fetchTaxonomies,hideActions,isEditMode,readOnly=!1,onDirtyStateChange,onValidationChange,fieldExtensions})=>{let intl=useIntl(),{errors,values,setFieldValue,setFieldTouched,isSubmitting,isValid,handleChange,submitCount,dirty,touched}=useFormikContext(),fieldListRef=useRef(null),hasUserFocusedDisplayNameRef=useRef(!1),markDisplayNameUserFocused=()=>{hasUserFocusedDisplayNameRef.current=!0},handleDisplayNameBlur=()=>{hasUserFocusedDisplayNameRef.current&&setFieldTouched(`displayName`,!0)},firstInvalidFieldIndex=useMemo(()=>{if(!Array.isArray(errors.fields))return null;let idx=errors.fields.findIndex(Boolean);return idx>=0?idx:null},[errors.fields]),handleFieldAdd=fieldType=>{let newField=createDefaultFieldValues(fieldType.type);setFieldValue(`fields`,[...values.fields,newField])},handleFieldsChange=fields=>{setFieldValue(`fields`,fields)};useEffect(()=>{onDirtyStateChange?.(dirty)},[dirty,onDirtyStateChange]),useEffect(()=>{onValidationChange?.(isValid)},[isValid,onValidationChange]);let isSaveDisabled=isSubmitting||isEditMode&&!dirty,fieldsContent;fieldsContent=readOnly&&values.fields.length===0?jsx(EmptyState,{size:`large`,illustration:NoTemplates,body:jsx(Text,{as:`p`,children:intl.formatMessage(messages_default.noFields)})}):readOnly?jsx(MetadataFieldList,{ref:fieldListRef,fields:values.fields,taxonomyOptions,fetchTaxonomies,readOnly:!0}):values.fields.length===0?jsxs(Fragment,{children:[jsx(FieldTypeTiles,{onFieldAdd:handleFieldAdd}),jsx(Link,{href:BOX_METADATA_FIELDS_GUIDE_URL,isExternal:!0,target:`_blank`,children:jsx(FormattedMessage,{...messages_default.fieldsLearnMore})})]}):jsxs(Fragment,{children:[jsx(MetadataFieldList,{ref:fieldListRef,fields:values.fields,taxonomyOptions,fetchTaxonomies,onChangeFields:handleFieldsChange,firstInvalidFieldIndex,submitAttemptCount:submitCount}),jsx(FieldTypeDropdown,{onFieldAdd:handleFieldAdd})]});let formElement=jsxs(Form,{noValidate:!0,id:formId,className:metadata_template_editor_form_module_default.form,children:[jsx(`div`,{children:jsx(TextInput,{name:`displayName`,label:intl.formatMessage(messages_default.templateName),placeholder:intl.formatMessage(messages_default.templateNameDescription),value:values.displayName,error:!readOnly&&touched.displayName&&errors.displayName?errors.displayName:void 0,onChange:e=>{handleChange(e)},onPointerDown:markDisplayNameUserFocused,onKeyDown:markDisplayNameUserFocused,onBlur:handleDisplayNameBlur,readOnly})}),jsxs(`div`,{className:metadata_template_editor_form_module_default.fieldsHeader,children:[jsx(Text,{as:FIELD_NAME_VARIANT_AS_ELEMENT,variant:FIELD_NAME_VARIANT,children:jsx(FormattedMessage,{...!readOnly&&values.fields.length===0?messages_default.fieldsAddFirst:messages_default.fields})}),values.fields.length>0&&jsx(FieldSelector,{fields:values.fields,onSelect:fieldId=>fieldListRef.current?.scrollToAndExpand(fieldId)})]}),jsx(`div`,{className:clsx(metadata_template_editor_form_module_default.fields,{[metadata_template_editor_form_module_default.emptyFields]:values.fields.length===0&&readOnly}),children:fieldsContent}),!hideActions&&jsx(`div`,{className:metadata_template_editor_form_module_default.actions,children:readOnly?onCancel&&jsx(Button,{variant:`primary`,type:`button`,onClick:onCancel,children:intl.formatMessage(messages_default.close)}):jsxs(Fragment,{children:[onCancel&&jsx(Button,{variant:`secondary`,type:`button`,onClick:onCancel,loading:isSubmitting,disabled:isSubmitting,loadingAriaLabel:intl.formatMessage(messages_default.submitting),children:intl.formatMessage(messages_default.cancel)}),jsx(Button,{variant:`primary`,type:`submit`,disabled:isSaveDisabled,children:intl.formatMessage(messages_default.save)})]})})]});return fieldExtensions===void 0?formElement:jsx(FieldExtensionsContext.Provider,{value:fieldExtensions,children:formElement})};export{MetadataTemplateEditorForm as t};

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

@@ -1,90 +1 @@
-import { o as e } from "./types.js";
-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 { 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 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), g(!1);
-		} finally {
-			E(!1);
-		}
-	}, 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: m.modal,
-			children: [
-				/* @__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: M ? /* @__PURE__ */ o(r.Footer.PrimaryButton, {
-					onClick: N,
-					size: "large",
-					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: 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 { h as t };
+import{o as MetadataTemplateEditorMode}from"./types.js";import messages_default from"../esm/lib/messages.js";import{t as MetadataTemplateEditor}from"./metadata-template-editor.js";import{Modal}from"@box/blueprint-web";import{useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import{useCallback,useEffect,useId,useRef,useState}from"react";import clsx from"clsx";import '../styles/metadata-template-editor-modal.css';var metadata_template_editor_modal_module_default={modal:`_modal_1s9i6_1`,centeredBody:`_centeredBody_1s9i6_7`,modalScrollableContainer:`_modalScrollableContainer_1s9i6_15`,modalBody:`_modalBody_1s9i6_21`};function MetadataTemplateEditorModal({open,onOpenChange,onTemplateLoad,onValidationChange,onCancel,title,...editorProps}){let intl=useIntl(),formId=useId(),editorRef=useRef(null),[isSubmitting,setIsSubmitting]=useState(!1),[isDirty,setIsDirty]=useState(!1),[loadedTemplateName,setLoadedTemplateName]=useState(void 0),isEditMode=editorProps.mode===MetadataTemplateEditorMode.Edit,isReadOnlyMode=editorProps.mode===MetadataTemplateEditorMode.ReadOnly,closeEditor=useCallback(()=>{onCancel?.(),onOpenChange(!1)},[onCancel,onOpenChange]);useEffect(()=>{open||(setIsDirty(!1),setLoadedTemplateName(void 0))},[open]);let handleOpenChange=newOpen=>{newOpen?onOpenChange(newOpen):editorRef.current?.requestClose()},handleTemplateLoad=template=>{setLoadedTemplateName(template.displayName),onTemplateLoad?.(template)},wrapSubmit=callback=>async(...args)=>{setIsSubmitting(!0);try{await callback(...args),onOpenChange(!1)}finally{setIsSubmitting(!1)}},wrappedEditorProps;wrappedEditorProps=isEditMode?{...editorProps,onEditTemplate:wrapSubmit(editorProps.onEditTemplate)}:isReadOnlyMode?editorProps:{...editorProps,onCreateTemplate:wrapSubmit(editorProps.onCreateTemplate)};let isSaveDisabled=isSubmitting||isEditMode&&!isDirty,isBodyCentered=(isEditMode||isReadOnlyMode)&&!loadedTemplateName,defaultTitle;defaultTitle=isReadOnlyMode?loadedTemplateName?intl.formatMessage(messages_default.viewTitle,{templateName:loadedTemplateName}):``:isEditMode&&loadedTemplateName?intl.formatMessage(messages_default.editTitle,{templateName:loadedTemplateName}):intl.formatMessage(messages_default.createTitle);let modalTitle=title??defaultTitle;return jsx(Modal,{open,onOpenChange:handleOpenChange,children:jsxs(Modal.Content,{size:`large`,className:metadata_template_editor_modal_module_default.modal,children:[jsx(Modal.Header,{children:modalTitle}),jsx(Modal.ScrollableContainer,{className:clsx(metadata_template_editor_modal_module_default.modalScrollableContainer,{[metadata_template_editor_modal_module_default.centeredBody]:isBodyCentered}),children:jsx(Modal.Body,{className:metadata_template_editor_modal_module_default.modalBody,children:jsx(MetadataTemplateEditor,{...wrappedEditorProps,ref:editorRef,formId,hideActions:!0,onCancel:closeEditor,onDirtyStateChange:setIsDirty,onValidationChange,onTemplateLoad:handleTemplateLoad})})}),jsx(Modal.Footer,{children:isReadOnlyMode?jsx(Modal.Footer.PrimaryButton,{onClick:closeEditor,size:`large`,children:intl.formatMessage(messages_default.close)}):jsxs(Fragment,{children:[jsx(Modal.Footer.SecondaryButton,{onClick:()=>editorRef.current?.requestClose(),size:`large`,children:intl.formatMessage(messages_default.cancel)}),jsx(Modal.Footer.PrimaryButton,{variant:`primary`,type:`submit`,form:formId,loading:isSubmitting,loadingAriaLabel:intl.formatMessage(messages_default.submitting),disabled:isSaveDisabled,children:intl.formatMessage(messages_default.save)})]})}),jsx(Modal.Close,{"aria-label":intl.formatMessage(messages_default.closeAriaLabel)})]})})}export{MetadataTemplateEditorModal as t};