@box/metadata-template-editor 2.6.14 → 2.7.1

package/dist/chunks/metadata-field-configurator.module.js

@@ -1 +1 @@
-import '../styles/metadata-field-configurator.css';var metadata_field_configurator_module_default={fieldset:`_fieldset_cpe4h_1`,expandedContent:`_expandedContent_cpe4h_7`,basic:`_basic_cpe4h_13`,fieldTypeSelect:`_fieldTypeSelect_cpe4h_18`,typeSpecific:`_typeSpecific_cpe4h_22`,description:`_description_cpe4h_29`,labelWithTooltip:`_labelWithTooltip_cpe4h_34`,fieldActionSlot:`_fieldActionSlot_cpe4h_39`,expandedToolbarActions:`_expandedToolbarActions_cpe4h_46`,extensionTabsContainer:`_extensionTabsContainer_cpe4h_52`,extensionContent:`_extensionContent_cpe4h_58`,fieldCollapsedText:`_fieldCollapsedText_cpe4h_62`,expanded:`_expanded_cpe4h_7`,contextMenuWithCollapsedText:`_contextMenuWithCollapsedText_cpe4h_71`,fieldAccordionItem:`_fieldAccordionItem_cpe4h_77`,fieldContextMenu:`_fieldContextMenu_cpe4h_84`,menuOpen:`_menuOpen_cpe4h_87`};export{metadata_field_configurator_module_default as t};
+import '../styles/metadata-field-configurator.css';var metadata_field_configurator_module_default={fieldset:`_fieldset_1efiu_1`,expandedContent:`_expandedContent_1efiu_7`,basic:`_basic_1efiu_13`,fieldTypeSelect:`_fieldTypeSelect_1efiu_18`,typeSpecific:`_typeSpecific_1efiu_22`,description:`_description_1efiu_29`,labelWithTooltip:`_labelWithTooltip_1efiu_34`,fieldActionSlot:`_fieldActionSlot_1efiu_39`,expandedToolbarActions:`_expandedToolbarActions_1efiu_46`,extensionTabsContainer:`_extensionTabsContainer_1efiu_52`,extensionContent:`_extensionContent_1efiu_58`,fieldCollapsedText:`_fieldCollapsedText_1efiu_62`,expanded:`_expanded_1efiu_7`,contextMenuWithCollapsedText:`_contextMenuWithCollapsedText_1efiu_71`,fieldAccordionItem:`_fieldAccordionItem_1efiu_77`,fieldContextMenu:`_fieldContextMenu_1efiu_84`,menuOpen:`_menuOpen_1efiu_87`};export{metadata_field_configurator_module_default as t};

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

@@ -1 +1 @@
-import{d as isUnsupportedField,o 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,InlineNotice}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,fetchTaxonomyByKey,submitAttemptCount}){let id=getFieldId(field),{attributes,listeners,setNodeRef,transform,transition,isDragging}=useSortable({id,disabled:isUnsupportedField(field)});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,fetchTaxonomyByKey})})}var MetadataFieldList=forwardRef(function({fields,onChangeFields,onDeleteFieldAtIndex,onDuplicateField,taxonomyOptions,fetchTaxonomies,fetchTaxonomyByKey,isUserFieldEnabled,disabledFieldTypes,taxonomyInitialStateLabels,firstInvalidFieldIndex,submitAttemptCount,fieldExtensions,onValidationChange,readOnly=!1},ref){let{formatMessage}=useIntl(),parentEditorConfig=useEditorConfig(),taxonomyContextValue=useTaxonomyFetch({fetchTaxonomies,staticOptions:taxonomyOptions,fetchTaxonomyByKey}),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&&!isUnsupportedField(fields[oldIndex])&&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];if(isUnsupportedField(fieldToDuplicate))return;let 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||isUnsupportedField(fields[fromIndex])||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,isUserFieldEnabled:isUserFieldEnabled??parentEditorConfig.isUserFieldEnabled}),[disabledFieldTypes,taxonomyInitialStateLabels,isUserFieldEnabled,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)},fetchTaxonomyByKey,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,fetchTaxonomyByKey},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})]}),hasUnsupportedFields=useMemo(()=>fields.some(field=>isUnsupportedField(field)),[fields]),listContent=jsx(EditorConfigContext.Provider,{value:editorConfigValue,children:jsxs(TaxonomyOptionsContext.Provider,{value:taxonomyContextValue,children:[hasUnsupportedFields&&jsx(InlineNotice,{variant:`warning`,variantIconAriaLabel:formatMessage(general.unsupportedFieldsBanner),children:formatMessage(general.unsupportedFieldsBanner)}),coreContent]})});return fieldExtensions===void 0?listContent:jsx(FieldExtensionsContext.Provider,{value:fieldExtensions,children:listContent})});export{MetadataFieldList as t};
+import{d as isUnsupportedField,o 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,InlineNotice}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_1vio8_1`,fieldItem:`_fieldItem_1vio8_11`,dragging:`_dragging_1vio8_11`,accordionRootContainer:`_accordionRootContainer_1vio8_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,fetchTaxonomyByKey,submitAttemptCount}){let id=getFieldId(field),{attributes,listeners,setNodeRef,transform,transition,isDragging}=useSortable({id,disabled:isUnsupportedField(field)});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,fetchTaxonomyByKey})})}var MetadataFieldList=forwardRef(function({fields,onChangeFields,onDeleteFieldAtIndex,onDuplicateField,taxonomyOptions,fetchTaxonomies,fetchTaxonomyByKey,isUserFieldEnabled,disabledFieldTypes,taxonomyInitialStateLabels,firstInvalidFieldIndex,submitAttemptCount,fieldExtensions,onValidationChange,readOnly=!1},ref){let{formatMessage}=useIntl(),parentEditorConfig=useEditorConfig(),taxonomyContextValue=useTaxonomyFetch({fetchTaxonomies,staticOptions:taxonomyOptions,fetchTaxonomyByKey}),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&&!isUnsupportedField(fields[oldIndex])&&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];if(isUnsupportedField(fieldToDuplicate))return;let 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||isUnsupportedField(fields[fromIndex])||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,isUserFieldEnabled:isUserFieldEnabled??parentEditorConfig.isUserFieldEnabled}),[disabledFieldTypes,taxonomyInitialStateLabels,isUserFieldEnabled,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)},fetchTaxonomyByKey,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,fetchTaxonomyByKey},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})]}),hasUnsupportedFields=useMemo(()=>fields.some(field=>isUnsupportedField(field)),[fields]),listContent=jsx(EditorConfigContext.Provider,{value:editorConfigValue,children:jsxs(TaxonomyOptionsContext.Provider,{value:taxonomyContextValue,children:[hasUnsupportedFields&&jsx(InlineNotice,{variant:`warning`,variantIconAriaLabel:formatMessage(general.unsupportedFieldsBanner),children:formatMessage(general.unsupportedFieldsBanner)}),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 +1 @@
-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,Switch,Text,TextInput,TooltipProvider}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{NoTemplates}from"@box/blueprint-web-assets/illustrations/Medium";import{Form,useFormikContext}from"formik";import '../styles/metadata-template-editor-form.css';var metadata_template_editor_form_module_default={form:`_form_5b5er_1`,templateDetails:`_templateDetails_5b5er_10`,visibilityToggle:`_visibilityToggle_5b5er_16`,fields:`_fields_5b5er_20`,emptyFields:`_emptyFields_5b5er_26`,actions:`_actions_5b5er_31`,fieldsHeader:`_fieldsHeader_5b5er_38`},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,fetchTaxonomyByKey,hideActions,isEditMode,isVisibilityToggleAllowed=!1,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,fetchTaxonomyByKey,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,fetchTaxonomyByKey,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:[jsxs(`div`,{className:metadata_template_editor_form_module_default.templateDetails,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}),isVisibilityToggleAllowed&&jsx(TooltipProvider,{children:jsx(Switch.Item,{checked:values.hidden,className:metadata_template_editor_form_module_default.visibilityToggle,disabled:readOnly,label:intl.formatMessage(messages_default.hideTemplate),labelInfoBadgeAriaLabel:intl.formatMessage(messages_default.hideTemplateInfoAriaLabel),labelInfoText:intl.formatMessage(messages_default.hideTemplateInfo),name:`hidden`,onCheckedChange:hidden=>setFieldValue(`hidden`,hidden),value:`true`})})]}),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};
+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,Switch,Text,TextInput,TooltipProvider}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{NoTemplates}from"@box/blueprint-web-assets/illustrations/Medium";import{Form,useFormikContext}from"formik";import '../styles/metadata-template-editor-form.css';var metadata_template_editor_form_module_default={form:`_form_1ehls_1`,templateDetails:`_templateDetails_1ehls_10`,visibilityToggle:`_visibilityToggle_1ehls_16`,fields:`_fields_1ehls_20`,emptyFields:`_emptyFields_1ehls_26`,actions:`_actions_1ehls_31`,fieldsHeader:`_fieldsHeader_1ehls_38`},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,fetchTaxonomyByKey,hideActions,isEditMode,isVisibilityToggleAllowed=!1,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,fetchTaxonomyByKey,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,fetchTaxonomyByKey,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:[jsxs(`div`,{className:metadata_template_editor_form_module_default.templateDetails,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}),isVisibilityToggleAllowed&&jsx(TooltipProvider,{children:jsx(Switch.Item,{checked:values.hidden,className:metadata_template_editor_form_module_default.visibilityToggle,disabled:readOnly,label:intl.formatMessage(messages_default.hideTemplate),labelInfoBadgeAriaLabel:intl.formatMessage(messages_default.hideTemplateInfoAriaLabel),labelInfoText:intl.formatMessage(messages_default.hideTemplateInfo),name:`hidden`,onCheckedChange:hidden=>setFieldValue(`hidden`,hidden),value:`true`})})]}),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 +1 @@
-import{s as MetadataTemplateEditorMode}from"./types.js";import messages_default from"../esm/lib/messages.js";import{UnsavedChangesModal}from"../esm/lib/components/unsaved-changes-modal/unsaved-changes-modal.js";import{t as MetadataTemplateEditor}from"./metadata-template-editor.js";import{IconButton,Modal}from"@box/blueprint-web";import{useIntl}from"react-intl";import{ChevronLeft}from"@box/blueprint-web-assets/icons/Medium";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import{useEffect,useId,useState}from"react";import clsx from"clsx";import '../styles/metadata-template-editor-modal.css';var metadata_template_editor_modal_module_default={modal:`_modal_7kuew_1`,modalScrollableContainer:`_modalScrollableContainer_7kuew_6`,modalBody:`_modalBody_7kuew_12`,modalBodyCentered:`_modalBodyCentered_7kuew_20`,modalContentWidth:`_modalContentWidth_7kuew_25`};function MetadataTemplateEditorModal({open,onOpenChange,onTemplateLoad,onValidationChange,onCancel,onBack,title,...editorProps}){let intl=useIntl(),formId=useId(),[isSubmitting,setIsSubmitting]=useState(!1),[isDirty,setIsDirty]=useState(!1),[loadedTemplateName,setLoadedTemplateName]=useState(void 0),[pendingClose,setPendingClose]=useState(null),isEditMode=editorProps.mode===MetadataTemplateEditorMode.Edit,isReadOnlyMode=editorProps.mode===MetadataTemplateEditorMode.ReadOnly,close=intent=>{intent===`back`?onBack?.():onCancel?.(),onOpenChange(!1)},attemptClose=intent=>{isDirty?setPendingClose(intent):close(intent)};useEffect(()=>{open||(setIsDirty(!1),setLoadedTemplateName(void 0),setPendingClose(null))},[open]);let handleOpenChange=newOpen=>{isSubmitting||(newOpen?onOpenChange(newOpen):attemptClose(`dismiss`))},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,{backButton:onBack?jsx(IconButton,{"aria-label":intl.formatMessage(messages_default.backAriaLabel),icon:ChevronLeft,onClick:()=>attemptClose(`back`),disabled:isSubmitting}):void 0,children:modalTitle}),jsx(Modal.ScrollableContainer,{className:metadata_template_editor_modal_module_default.modalScrollableContainer,children:jsxs(Modal.Body,{className:clsx(metadata_template_editor_modal_module_default.modalBody,{[metadata_template_editor_modal_module_default.modalBodyCentered]:isBodyCentered}),children:[jsx(`div`,{className:metadata_template_editor_modal_module_default.modalContentWidth,children:jsx(MetadataTemplateEditor,{...wrappedEditorProps,formId,hideActions:!0,onDirtyStateChange:setIsDirty,onValidationChange,onTemplateLoad:handleTemplateLoad})}),pendingClose&&jsx(UnsavedChangesModal,{onKeepEditing:()=>setPendingClose(null),onDiscard:()=>{setPendingClose(null),close(pendingClose)}})]})}),jsx(Modal.Footer,{children:isReadOnlyMode?jsx(Modal.Footer.PrimaryButton,{onClick:()=>attemptClose(`dismiss`),size:`large`,children:intl.formatMessage(messages_default.close)}):jsxs(Fragment,{children:[jsx(Modal.Footer.SecondaryButton,{onClick:()=>attemptClose(`dismiss`),size:`large`,disabled:isSubmitting,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),disabled:isSubmitting})]})})}export{MetadataTemplateEditorModal as t};
+import{s as MetadataTemplateEditorMode}from"./types.js";import messages_default from"../esm/lib/messages.js";import{UnsavedChangesModal}from"../esm/lib/components/unsaved-changes-modal/unsaved-changes-modal.js";import{t as MetadataTemplateEditor}from"./metadata-template-editor.js";import{IconButton,Modal}from"@box/blueprint-web";import{useIntl}from"react-intl";import{ChevronLeft}from"@box/blueprint-web-assets/icons/Medium";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import{useEffect,useId,useState}from"react";import clsx from"clsx";import '../styles/metadata-template-editor-modal.css';var metadata_template_editor_modal_module_default={modal:`_modal_io76r_1`,modalScrollableContainer:`_modalScrollableContainer_io76r_6`,modalBody:`_modalBody_io76r_12`,modalBodyCentered:`_modalBodyCentered_io76r_20`,modalContentWidth:`_modalContentWidth_io76r_25`,modalContentWidthXlarge:`_modalContentWidthXlarge_io76r_32`};function MetadataTemplateEditorModal({open,onOpenChange,onTemplateLoad,onValidationChange,onCancel,onBack,title,size=`large`,...editorProps}){let intl=useIntl(),formId=useId(),[isSubmitting,setIsSubmitting]=useState(!1),[isDirty,setIsDirty]=useState(!1),[loadedTemplateName,setLoadedTemplateName]=useState(void 0),[pendingClose,setPendingClose]=useState(null),isEditMode=editorProps.mode===MetadataTemplateEditorMode.Edit,isReadOnlyMode=editorProps.mode===MetadataTemplateEditorMode.ReadOnly,close=intent=>{intent===`back`?onBack?.():onCancel?.(),onOpenChange(!1)},attemptClose=intent=>{isDirty?setPendingClose(intent):close(intent)};useEffect(()=>{open||(setIsDirty(!1),setLoadedTemplateName(void 0),setPendingClose(null))},[open]);let handleOpenChange=newOpen=>{isSubmitting||(newOpen?onOpenChange(newOpen):attemptClose(`dismiss`))},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,className:metadata_template_editor_modal_module_default.modal,children:[jsx(Modal.Header,{backButton:onBack?jsx(IconButton,{"aria-label":intl.formatMessage(messages_default.backAriaLabel),icon:ChevronLeft,onClick:()=>attemptClose(`back`),disabled:isSubmitting}):void 0,children:modalTitle}),jsx(Modal.ScrollableContainer,{className:metadata_template_editor_modal_module_default.modalScrollableContainer,children:jsxs(Modal.Body,{className:clsx(metadata_template_editor_modal_module_default.modalBody,{[metadata_template_editor_modal_module_default.modalBodyCentered]:isBodyCentered}),children:[jsx(`div`,{className:clsx(metadata_template_editor_modal_module_default.modalContentWidth,{[metadata_template_editor_modal_module_default.modalContentWidthXlarge]:size===`xlarge`}),children:jsx(MetadataTemplateEditor,{...wrappedEditorProps,formId,hideActions:!0,onDirtyStateChange:setIsDirty,onValidationChange,onTemplateLoad:handleTemplateLoad})}),pendingClose&&jsx(UnsavedChangesModal,{onKeepEditing:()=>setPendingClose(null),onDiscard:()=>{setPendingClose(null),close(pendingClose)}})]})}),jsx(Modal.Footer,{children:isReadOnlyMode?jsx(Modal.Footer.PrimaryButton,{onClick:()=>attemptClose(`dismiss`),size:`large`,children:intl.formatMessage(messages_default.close)}):jsxs(Fragment,{children:[jsx(Modal.Footer.SecondaryButton,{onClick:()=>attemptClose(`dismiss`),size:`large`,disabled:isSubmitting,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),disabled:isSubmitting})]})})}export{MetadataTemplateEditorModal as t};

package/dist/styles/metadata-field-configurator.css

@@ -1 +1 @@
-._fieldset_cpe4h_1{border:0;margin:0;padding:0}._expandedContent_cpe4h_7{gap:var(--space-4);flex-direction:column;display:flex}._basic_cpe4h_13{gap:var(--space-4);grid-template-columns:3fr 2fr;display:grid}._basic_cpe4h_13 ._fieldTypeSelect_cpe4h_18{min-width:145px}._typeSpecific_cpe4h_22{margin-top:var(--space-2);gap:var(--space-4);flex-direction:column;display:flex}._description_cpe4h_29{gap:var(--space-4);flex-direction:column;display:flex}._description_cpe4h_29 ._labelWithTooltip_cpe4h_34{margin-block-end:var(--space-2);display:inline-block}._fieldActionSlot_cpe4h_39{align-items:center;gap:var(--space-2);display:flex;position:relative}._expandedToolbarActions_cpe4h_46{align-items:center;gap:var(--space-1);display:flex}._extensionTabsContainer_cpe4h_52{border-right:1px solid var(--border-border-on-light);height:auto;overflow:visible}._extensionContent_cpe4h_58{padding:var(--space-4) 0}._fieldCollapsedText_cpe4h_62{visibility:visible;display:block}._expanded_cpe4h_7 ._fieldCollapsedText_cpe4h_62{visibility:hidden}._contextMenuWithCollapsedText_cpe4h_71{background-color:#0000;position:absolute;right:0}._fieldAccordionItem_cpe4h_77{max-width:650px}._fieldAccordionItem_cpe4h_77[data-state=closed] ._fieldActionSlot_cpe4h_39{position:relative}._fieldAccordionItem_cpe4h_77[data-state=closed] ._fieldContextMenu_cpe4h_84{display:none}._fieldAccordionItem_cpe4h_77[data-state=closed] ._fieldContextMenu_cpe4h_84._menuOpen_cpe4h_87{display:flex}._fieldAccordionItem_cpe4h_77[data-state=closed] ._extensionTabsContainer_cpe4h_52{display:none}._fieldAccordionItem_cpe4h_77[data-state=closed]:has(>:hover) ._fieldContextMenu_cpe4h_84{display:flex}._fieldAccordionItem_cpe4h_77[data-state=closed]:has(>:hover) ._contextMenuWithCollapsedText_cpe4h_71{position:absolute;top:-50%;right:0}
+._fieldset_1efiu_1{border:0;margin:0;padding:0}._expandedContent_1efiu_7{gap:var(--space-4);flex-direction:column;display:flex}._basic_1efiu_13{gap:var(--space-4);grid-template-columns:3fr 2fr;display:grid}._basic_1efiu_13 ._fieldTypeSelect_1efiu_18{min-width:145px}._typeSpecific_1efiu_22{margin-top:var(--space-2);gap:var(--space-4);flex-direction:column;display:flex}._description_1efiu_29{gap:var(--space-4);flex-direction:column;display:flex}._description_1efiu_29 ._labelWithTooltip_1efiu_34{margin-block-end:var(--space-2);display:inline-block}._fieldActionSlot_1efiu_39{align-items:center;gap:var(--space-2);display:flex;position:relative}._expandedToolbarActions_1efiu_46{align-items:center;gap:var(--space-1);display:flex}._extensionTabsContainer_1efiu_52{border-right:1px solid var(--border-border-on-light);height:auto;overflow:visible}._extensionContent_1efiu_58{padding:var(--space-4) 0}._fieldCollapsedText_1efiu_62{visibility:visible;display:block}._expanded_1efiu_7 ._fieldCollapsedText_1efiu_62{visibility:hidden}._contextMenuWithCollapsedText_1efiu_71{background-color:#0000;position:absolute;right:0}._fieldAccordionItem_1efiu_77{max-width:var(--metadata-template-editor-field-max-width,650px)}._fieldAccordionItem_1efiu_77[data-state=closed] ._fieldActionSlot_1efiu_39{position:relative}._fieldAccordionItem_1efiu_77[data-state=closed] ._fieldContextMenu_1efiu_84{display:none}._fieldAccordionItem_1efiu_77[data-state=closed] ._fieldContextMenu_1efiu_84._menuOpen_1efiu_87{display:flex}._fieldAccordionItem_1efiu_77[data-state=closed] ._extensionTabsContainer_1efiu_52{display:none}._fieldAccordionItem_1efiu_77[data-state=closed]:has(>:hover) ._fieldContextMenu_1efiu_84{display:flex}._fieldAccordionItem_1efiu_77[data-state=closed]:has(>:hover) ._contextMenuWithCollapsedText_1efiu_71{position:absolute;top:-50%;right:0}

package/dist/styles/metadata-field-list.css

@@ -1 +1 @@
-._fieldList_18x5c_1{gap:var(--space-2);flex-direction:column;max-width:650px;margin:0;padding:0;list-style:none;display:flex}._fieldItem_18x5c_11._dragging_18x5c_11{opacity:0}._accordionRootContainer_18x5c_15>*{padding:0}
+._fieldList_1vio8_1{gap:var(--space-2);max-width:var(--metadata-template-editor-field-max-width,650px);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}._fieldItem_1vio8_11._dragging_1vio8_11{opacity:0}._accordionRootContainer_1vio8_15>*{padding:0}

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

@@ -1 +1 @@
-._form_5b5er_1{gap:var(--space-4);flex-direction:column;flex:1;max-width:620px;height:100%;display:flex}._templateDetails_5b5er_10{gap:var(--bp-space-040);flex-direction:column;display:flex}._visibilityToggle_5b5er_16 label{align-items:center}._fields_5b5er_20{gap:var(--space-4);flex-direction:column;display:flex}._emptyFields_5b5er_26{flex-grow:1;justify-content:space-around}._actions_5b5er_31{justify-content:flex-end;gap:var(--space-3);padding-top:var(--space-2);display:flex}._fieldsHeader_5b5er_38{align-items:center;gap:var(--space-2);justify-content:space-between;display:flex}
+._form_1ehls_1{gap:var(--space-4);max-width:var(--metadata-template-editor-max-width,620px);flex-direction:column;flex:1;height:100%;display:flex}._templateDetails_1ehls_10{gap:var(--bp-space-040);flex-direction:column;display:flex}._visibilityToggle_1ehls_16 label{align-items:center}._fields_1ehls_20{gap:var(--space-4);flex-direction:column;display:flex}._emptyFields_1ehls_26{flex-grow:1;justify-content:space-around}._actions_1ehls_31{justify-content:flex-end;gap:var(--space-3);padding-top:var(--space-2);display:flex}._fieldsHeader_1ehls_38{align-items:center;gap:var(--space-2);justify-content:space-between;display:flex}

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

@@ -1 +1 @@
-._modal_7kuew_1{min-height:620px;max-height:620px}._modalScrollableContainer_7kuew_6{flex-direction:column;height:100%;display:flex}._modalBody_7kuew_12{flex-direction:column;flex:1;justify-content:flex-start;height:100%;display:flex}._modalBodyCentered_7kuew_20{justify-content:center;align-items:center}._modalContentWidth_7kuew_25{min-width:calc(620px - 2 * var(--bp-space-060))}
+._modal_io76r_1{min-height:620px;max-height:620px}._modalScrollableContainer_io76r_6{flex-direction:column;height:100%;display:flex}._modalBody_io76r_12{flex-direction:column;flex:1;justify-content:flex-start;height:100%;display:flex}._modalBodyCentered_io76r_20{justify-content:center;align-items:center}._modalContentWidth_io76r_25{--metadata-template-editor-modal-width:620px;--metadata-template-editor-max-width:none;--metadata-template-editor-field-max-width:none;min-width:min(var(--metadata-template-editor-modal-width) - 2 * var(--bp-space-060), 100vw - 2 * var(--bp-space-080) - 2 * var(--bp-space-060))}._modalContentWidthXlarge_io76r_32{--metadata-template-editor-modal-width:768px}

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

@@ -18,6 +18,11 @@ export type MetadataTemplateEditorModalProps = MetadataTemplateEditorProps & {
      * `onCancel`, then the modal closes as usual. Omit to hide the button.
      */
     onBack?: () => void;
+    /**
+     * Blueprint modal size. `xlarge` widens the modal to 768px and the editor fills it.
+     * @default 'large'
+     */
+    size?: 'large' | 'xlarge';
 };
 /**
  * Modal wrapper around `MetadataTemplateEditor`.
@@ -59,5 +64,5 @@ export type MetadataTemplateEditorModalProps = MetadataTemplateEditorProps & {
  * />
  * ```
  */
-export declare function MetadataTemplateEditorModal({ open, onOpenChange, onTemplateLoad, onValidationChange, onCancel, onBack, title, ...editorProps }: MetadataTemplateEditorModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetadataTemplateEditorModal({ open, onOpenChange, onTemplateLoad, onValidationChange, onCancel, onBack, title, size, ...editorProps }: MetadataTemplateEditorModalProps): import("react/jsx-runtime").JSX.Element;
 export default MetadataTemplateEditorModal;

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@box/metadata-template-editor",
-    "version": "2.6.14",
+    "version": "2.7.1",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
-        "@box/blueprint-web": "^18.0.0",
-        "@box/blueprint-web-assets": "^5.11.14",
+        "@box/blueprint-web": "^18.1.0",
+        "@box/blueprint-web-assets": "^5.11.15",
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/sortable": "^8.0.0",
         "@dnd-kit/utilities": "^3.2.2",
@@ -17,10 +17,10 @@
         "yup": "^1.6.1"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^18.0.0",
-        "@box/blueprint-web-assets": "^5.11.14",
+        "@box/blueprint-web": "^18.1.0",
+        "@box/blueprint-web-assets": "^5.11.15",
         "@box/eslint-plugin-blueprint": "2.2.28",
-        "@box/storybook-utils": "1.4.9",
+        "@box/storybook-utils": "1.4.10",
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/sortable": "^8.0.0",
         "@dnd-kit/utilities": "^3.2.2",