@box/metadata-template-editor 2.3.46 → 2.4.0

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,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{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_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,fetchTaxonomyByKey,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,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:[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};
+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};

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

@@ -1 +1 @@
-import{s as MetadataTemplateEditorMode}from"./types.js";import{EditorConfigContext}from"../esm/lib/components/metadata-field-configurator/context/editor-config-context.js";import"../esm/lib/utils/constants.js";import ConfirmationModal from"../esm/lib/components/metadata-field-configurator/components/confirmation-modal/confirmation-modal.js";import messages_default from"../esm/lib/messages.js";import{t as MetadataTemplateEditorForm}from"./metadata-template-editor-form.js";import{useMetadataTemplateFormSchema}from"../esm/lib/hooks/useMetadataTemplateFormSchema.js";import{convertApiMetadataTemplateFieldToLocalConfiguratorField}from"../esm/lib/utils/template-type-conversion/convertTemplateFieldToLocalConfigurator.js";import{generateJSONPatchTemplateOperations}from"../esm/lib/utils/template-type-conversion/generateJSONPatchTemplateOperations.js";import{mapFieldsWithUniqueKeys}from"../esm/lib/utils/template-type-conversion/mapFieldsWithUniqueKeys.js";import{EmptyState,LoadingIndicator,Text,useNotification}from"@box/blueprint-web";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";import{forwardRef,useCallback,useEffect,useImperativeHandle,useMemo,useState}from"react";import{ArrowsRotating}from"@box/blueprint-web-assets/icons/Line";import{ErrorState404}from"@box/blueprint-web-assets/illustrations/Medium";import{Formik}from"formik";import '../styles/metadata-template-editor.css';var metadata_template_editor_module_default={loading:`_loading_fd3t9_1`,error:`_error_fd3t9_8`},DEFAULT_VALUES={displayName:``,templateKey:``,fields:[],hidden:!1},MetadataTemplateEditor=forwardRef(function({onCancel,onDirtyStateChange,onValidationChange,onSubmitError,onTemplateLoad,taxonomyOptions,fetchTaxonomies,fetchTaxonomyByKey,disabledFieldTypes,taxonomyInitialStateLabels,formId,hideActions=!1,fieldExtensions,...modeProps},ref){let schema=useMetadataTemplateFormSchema(),{formatMessage}=useIntl(),{addNotification}=useNotification(),isEditMode=modeProps.mode===MetadataTemplateEditorMode.Edit,isReadOnlyMode=modeProps.mode===MetadataTemplateEditorMode.ReadOnly,[isDirty,setIsDirty]=useState(!1),[isUnsavedChangesModalOpen,setIsUnsavedChangesModalOpen]=useState(!1),handleCancel=useCallback(()=>{isDirty?setIsUnsavedChangesModalOpen(!0):onCancel?.()},[isDirty,onCancel]);useImperativeHandle(ref,()=>({requestClose:handleCancel}),[handleCancel]);let handleDirtyStateChange=useCallback(dirty=>{setIsDirty(dirty),onDirtyStateChange?.(dirty)},[onDirtyStateChange]),[isLoading,setIsLoading]=useState(isEditMode||isReadOnlyMode),[hasFetchError,setHasFetchError]=useState(!1),[retryCount,setRetryCount]=useState(0),[fetchedValues,setFetchedValues]=useState(void 0),fetchTemplate=isEditMode||isReadOnlyMode?modeProps.fetchTemplate:void 0,handleRetry=()=>{setRetryCount(c=>c+1)};useEffect(()=>{if(!fetchTemplate)return;let cancelled=!1;return setIsLoading(!0),setHasFetchError(!1),setFetchedValues(void 0),(async()=>{try{let response=await fetchTemplate();cancelled||setFetchedValues(response)}catch{cancelled||setHasFetchError(!0)}finally{cancelled||setIsLoading(!1)}})(),()=>{cancelled=!0}},[fetchTemplate,retryCount]),useEffect(()=>{fetchedValues!==void 0&&onTemplateLoad?.(fetchedValues)},[fetchedValues,onTemplateLoad]);let createNamespace=isEditMode||isReadOnlyMode?void 0:modeProps.namespace,mergedInitialValues=useMemo(()=>fetchedValues?{displayName:fetchedValues.displayName,templateKey:fetchedValues.templateKey,namespace:fetchedValues.namespace,hidden:fetchedValues.hidden,fields:fetchedValues.fields.map(field=>convertApiMetadataTemplateFieldToLocalConfiguratorField(field))}:{...DEFAULT_VALUES,namespace:createNamespace??``},[fetchedValues,createNamespace]),editorConfigValue=useMemo(()=>({disabledFieldTypes,taxonomyInitialStateLabels}),[disabledFieldTypes,taxonomyInitialStateLabels]);return isLoading?jsx(`div`,{className:metadata_template_editor_module_default.loading,children:jsx(LoadingIndicator,{size:`large`,"aria-label":formatMessage(messages_default.loading)})}):hasFetchError?jsx(`div`,{className:metadata_template_editor_module_default.error,children:jsx(EmptyState,{body:jsx(Text,{as:`p`,children:formatMessage(messages_default.fetchError)}),illustration:ErrorState404,size:`large`,children:jsx(EmptyState.PrimaryAction,{startIcon:ArrowsRotating,onClick:handleRetry,children:formatMessage(messages_default.reload)})})}):jsxs(EditorConfigContext.Provider,{value:editorConfigValue,children:[jsx(Formik,{initialValues:mergedInitialValues,validationSchema:isReadOnlyMode?void 0:schema,onSubmit:async values=>{if(!isReadOnlyMode)try{if(isEditMode){let patchItems=generateJSONPatchTemplateOperations(mergedInitialValues,values);await modeProps.onEditTemplate(patchItems,{namespaceFQN:mergedInitialValues.namespace,templateKey:mergedInitialValues.templateKey})}else{let convertedFields=mapFieldsWithUniqueKeys(values.fields),createBody={namespace:values.namespace,templateKey:values.templateKey,displayName:values.displayName,hidden:values.hidden,fields:convertedFields};await modeProps.onCreateTemplate(createBody)}addNotification({sensitivity:`foreground`,variant:`success`,styledText:formatMessage(messages_default.saveSuccessNotification),typeIconAriaLabel:formatMessage(messages_default.notificationSuccessIconAriaLabel),closeButtonAriaLabel:formatMessage(messages_default.notificationCloseButtonAriaLabel)})}catch(error){let errorMessage;if(error instanceof Error&&`status`in error){let{status}=error;errorMessage=formatMessage(status===409?messages_default.displayNameUsedBefore:messages_default.saveErrorNotification)}else errorMessage=formatMessage(messages_default.saveErrorNotification);addNotification({sensitivity:`foreground`,variant:`error`,styledText:errorMessage,typeIconAriaLabel:formatMessage(messages_default.notificationErrorIconAriaLabel),closeButtonAriaLabel:formatMessage(messages_default.notificationCloseButtonAriaLabel)});try{onSubmitError?.(error)}catch{}throw error}},children:jsx(MetadataTemplateEditorForm,{formId,onCancel:handleCancel,taxonomyOptions,fetchTaxonomies,fetchTaxonomyByKey,hideActions,isEditMode,readOnly:isReadOnlyMode,onDirtyStateChange:handleDirtyStateChange,onValidationChange,fieldExtensions})}),isUnsavedChangesModalOpen&&jsx(ConfirmationModal,{onClose:()=>setIsUnsavedChangesModalOpen(!1),onConfirm:()=>{setIsUnsavedChangesModalOpen(!1),onCancel?.()},title:formatMessage(messages_default.unsavedChangesTitle),body:formatMessage(messages_default.unsavedChangesBody),confirmLabel:formatMessage(messages_default.unsavedChangesDiscard),cancelLabel:formatMessage(messages_default.unsavedChangesKeepEditing)})]})});export{MetadataTemplateEditor as t};
+import{s as MetadataTemplateEditorMode}from"./types.js";import{EditorConfigContext}from"../esm/lib/components/metadata-field-configurator/context/editor-config-context.js";import"../esm/lib/utils/constants.js";import ConfirmationModal from"../esm/lib/components/metadata-field-configurator/components/confirmation-modal/confirmation-modal.js";import messages_default from"../esm/lib/messages.js";import{t as MetadataTemplateEditorForm}from"./metadata-template-editor-form.js";import{useMetadataTemplateFormSchema}from"../esm/lib/hooks/useMetadataTemplateFormSchema.js";import{convertApiMetadataTemplateFieldToLocalConfiguratorField}from"../esm/lib/utils/template-type-conversion/convertTemplateFieldToLocalConfigurator.js";import{generateJSONPatchTemplateOperations}from"../esm/lib/utils/template-type-conversion/generateJSONPatchTemplateOperations.js";import{mapFieldsWithUniqueKeys}from"../esm/lib/utils/template-type-conversion/mapFieldsWithUniqueKeys.js";import{EmptyState,LoadingIndicator,Text,useNotification}from"@box/blueprint-web";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";import{forwardRef,useCallback,useEffect,useImperativeHandle,useMemo,useState}from"react";import{ArrowsRotating}from"@box/blueprint-web-assets/icons/Line";import{ErrorState404}from"@box/blueprint-web-assets/illustrations/Medium";import{Formik}from"formik";import '../styles/metadata-template-editor.css';var metadata_template_editor_module_default={loading:`_loading_fd3t9_1`,error:`_error_fd3t9_8`},DEFAULT_VALUES={displayName:``,templateKey:``,fields:[],hidden:!1},MetadataTemplateEditor=forwardRef(function({onCancel,onDirtyStateChange,onValidationChange,onSubmitError,onTemplateLoad,taxonomyOptions,fetchTaxonomies,fetchTaxonomyByKey,disabledFieldTypes,taxonomyInitialStateLabels,formId,hideActions=!1,isVisibilityToggleAllowed=!1,fieldExtensions,...modeProps},ref){let schema=useMetadataTemplateFormSchema(),{formatMessage}=useIntl(),{addNotification}=useNotification(),isEditMode=modeProps.mode===MetadataTemplateEditorMode.Edit,isReadOnlyMode=modeProps.mode===MetadataTemplateEditorMode.ReadOnly,[isDirty,setIsDirty]=useState(!1),[isUnsavedChangesModalOpen,setIsUnsavedChangesModalOpen]=useState(!1),handleCancel=useCallback(()=>{isDirty?setIsUnsavedChangesModalOpen(!0):onCancel?.()},[isDirty,onCancel]);useImperativeHandle(ref,()=>({requestClose:handleCancel}),[handleCancel]);let handleDirtyStateChange=useCallback(dirty=>{setIsDirty(dirty),onDirtyStateChange?.(dirty)},[onDirtyStateChange]),[isLoading,setIsLoading]=useState(isEditMode||isReadOnlyMode),[hasFetchError,setHasFetchError]=useState(!1),[retryCount,setRetryCount]=useState(0),[fetchedValues,setFetchedValues]=useState(void 0),fetchTemplate=isEditMode||isReadOnlyMode?modeProps.fetchTemplate:void 0,handleRetry=()=>{setRetryCount(c=>c+1)};useEffect(()=>{if(!fetchTemplate)return;let cancelled=!1;return setIsLoading(!0),setHasFetchError(!1),setFetchedValues(void 0),(async()=>{try{let response=await fetchTemplate();cancelled||setFetchedValues(response)}catch{cancelled||setHasFetchError(!0)}finally{cancelled||setIsLoading(!1)}})(),()=>{cancelled=!0}},[fetchTemplate,retryCount]),useEffect(()=>{fetchedValues!==void 0&&onTemplateLoad?.(fetchedValues)},[fetchedValues,onTemplateLoad]);let createNamespace=isEditMode||isReadOnlyMode?void 0:modeProps.namespace,mergedInitialValues=useMemo(()=>fetchedValues?{displayName:fetchedValues.displayName,templateKey:fetchedValues.templateKey,namespace:fetchedValues.namespace,hidden:fetchedValues.hidden,fields:fetchedValues.fields.map(field=>convertApiMetadataTemplateFieldToLocalConfiguratorField(field))}:{...DEFAULT_VALUES,namespace:createNamespace??``},[fetchedValues,createNamespace]),editorConfigValue=useMemo(()=>({disabledFieldTypes,taxonomyInitialStateLabels}),[disabledFieldTypes,taxonomyInitialStateLabels]);return isLoading?jsx(`div`,{className:metadata_template_editor_module_default.loading,children:jsx(LoadingIndicator,{size:`large`,"aria-label":formatMessage(messages_default.loading)})}):hasFetchError?jsx(`div`,{className:metadata_template_editor_module_default.error,children:jsx(EmptyState,{body:jsx(Text,{as:`p`,children:formatMessage(messages_default.fetchError)}),illustration:ErrorState404,size:`large`,children:jsx(EmptyState.PrimaryAction,{startIcon:ArrowsRotating,onClick:handleRetry,children:formatMessage(messages_default.reload)})})}):jsxs(EditorConfigContext.Provider,{value:editorConfigValue,children:[jsx(Formik,{initialValues:mergedInitialValues,validationSchema:isReadOnlyMode?void 0:schema,onSubmit:async values=>{if(!isReadOnlyMode)try{if(isEditMode){let patchItems=generateJSONPatchTemplateOperations(mergedInitialValues,values);await modeProps.onEditTemplate(patchItems,{namespaceFQN:mergedInitialValues.namespace,templateKey:mergedInitialValues.templateKey})}else{let convertedFields=mapFieldsWithUniqueKeys(values.fields),createBody={namespace:values.namespace,templateKey:values.templateKey,displayName:values.displayName,hidden:values.hidden,fields:convertedFields};await modeProps.onCreateTemplate(createBody)}addNotification({sensitivity:`foreground`,variant:`success`,styledText:formatMessage(messages_default.saveSuccessNotification),typeIconAriaLabel:formatMessage(messages_default.notificationSuccessIconAriaLabel),closeButtonAriaLabel:formatMessage(messages_default.notificationCloseButtonAriaLabel)})}catch(error){let errorMessage;if(error instanceof Error&&`status`in error){let{status}=error;errorMessage=formatMessage(status===409?messages_default.displayNameUsedBefore:messages_default.saveErrorNotification)}else errorMessage=formatMessage(messages_default.saveErrorNotification);addNotification({sensitivity:`foreground`,variant:`error`,styledText:errorMessage,typeIconAriaLabel:formatMessage(messages_default.notificationErrorIconAriaLabel),closeButtonAriaLabel:formatMessage(messages_default.notificationCloseButtonAriaLabel)});try{onSubmitError?.(error)}catch{}throw error}},children:jsx(MetadataTemplateEditorForm,{formId,onCancel:handleCancel,taxonomyOptions,fetchTaxonomies,fetchTaxonomyByKey,hideActions,isEditMode,isVisibilityToggleAllowed,readOnly:isReadOnlyMode,onDirtyStateChange:handleDirtyStateChange,onValidationChange,fieldExtensions})}),isUnsavedChangesModalOpen&&jsx(ConfirmationModal,{onClose:()=>setIsUnsavedChangesModalOpen(!1),onConfirm:()=>{setIsUnsavedChangesModalOpen(!1),onCancel?.()},title:formatMessage(messages_default.unsavedChangesTitle),body:formatMessage(messages_default.unsavedChangesBody),confirmLabel:formatMessage(messages_default.unsavedChangesDiscard),cancelLabel:formatMessage(messages_default.unsavedChangesKeepEditing)})]})});export{MetadataTemplateEditor as t};

package/dist/esm/lib/messages.js

@@ -1 +1 @@
-import{defineMessages}from"react-intl";var messages_default=defineMessages({createTitle:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.createTitle`,defaultMessage:`New Metadata Template`},editTitle:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.editTitle`,defaultMessage:`Edit "{templateName}" Metadata Template`},templateName:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.templateName.label`,defaultMessage:`Template Name`},templateNameDescription:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.templateName.description`,defaultMessage:`Display name of the template shown to users`},cancel:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.cancel`,defaultMessage:`Cancel`},save:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.save`,defaultMessage:`Save`},fields:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.fields.label`,defaultMessage:`Fields`},fieldsAddFirst:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.fields.description`,defaultMessage:`Add your first field to the Template:`},fieldsLearnMore:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.fields.learnMore`,defaultMessage:`Learn more about Metadata Field Types`},fieldRequired:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.fieldRequired`,defaultMessage:`This field is required`},forbiddenDisplayName:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.forbiddenDisplayName`,defaultMessage:`This display name is forbidden. Please choose another one.`},invalidCharacters:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.invalidCharacters`,defaultMessage:`The field contains illegal characters.`},fieldNameTooLong:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.fieldNameTooLong`,defaultMessage:`The field name is too long.`},displayNameUsedBefore:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.displayNameUsedBefore`,defaultMessage:`This display name has already been used before. Please choose another one.`},submitting:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.submitting`,defaultMessage:`Submitting...`},closeAriaLabel:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.closeAriaLabel`,defaultMessage:`Close metadata template editor`},saveSuccessNotification:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.saveSuccessNotification`,defaultMessage:`Template saved successfully.`},saveErrorNotification:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.saveErrorNotification`,defaultMessage:`Failed to save template. Please try again.`},notificationSuccessIconAriaLabel:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.notificationSuccessIconAriaLabel`,defaultMessage:`Success`},notificationErrorIconAriaLabel:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.notificationErrorIconAriaLabel`,defaultMessage:`Error`},notificationCloseButtonAriaLabel:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.notificationCloseButtonAriaLabel`,defaultMessage:`Close notification`},loading:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.loading`,defaultMessage:`Loading template…`},fetchError:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.fetchError`,defaultMessage:`Something went wrong. Please reload to try again.`},reload:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.reload`,defaultMessage:`Reload`},unsavedChangesTitle:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.unsavedChangesTitle`,defaultMessage:`Unsaved Changes`},unsavedChangesBody:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.unsavedChangesBody`,defaultMessage:`You have unsaved changes. If you leave now, your changes will be lost.`},unsavedChangesDiscard:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.unsavedChangesDiscard`,defaultMessage:`Leave Without Saving`},unsavedChangesKeepEditing:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.unsavedChangesKeepEditing`,defaultMessage:`Keep Editing`},close:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.close`,defaultMessage:`Close`},viewTitle:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.viewTitle`,defaultMessage:`{templateName}`},noFields:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.noFields`,defaultMessage:`This template contains no fields.`}});export{messages_default as default};
+import{defineMessages}from"react-intl";var messages_default=defineMessages({createTitle:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.createTitle`,defaultMessage:`New Metadata Template`},editTitle:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.editTitle`,defaultMessage:`Edit "{templateName}" Metadata Template`},templateName:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.templateName.label`,defaultMessage:`Template Name`},templateNameDescription:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.templateName.description`,defaultMessage:`Display name of the template shown to users`},hideTemplate:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.hideTemplate`,defaultMessage:`Hide Template`},hideTemplateInfo:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.hideTemplate.info`,defaultMessage:`When hidden, the template is still available via the Box API`},hideTemplateInfoAriaLabel:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.hideTemplate.infoAriaLabel`,defaultMessage:`More information about hiding the template`},cancel:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.cancel`,defaultMessage:`Cancel`},save:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.save`,defaultMessage:`Save`},fields:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.fields.label`,defaultMessage:`Fields`},fieldsAddFirst:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.fields.description`,defaultMessage:`Add your first field to the Template:`},fieldsLearnMore:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.fields.learnMore`,defaultMessage:`Learn more about Metadata Field Types`},fieldRequired:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.fieldRequired`,defaultMessage:`This field is required`},forbiddenDisplayName:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.forbiddenDisplayName`,defaultMessage:`This display name is forbidden. Please choose another one.`},invalidCharacters:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.invalidCharacters`,defaultMessage:`The field contains illegal characters.`},fieldNameTooLong:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.fieldNameTooLong`,defaultMessage:`The field name is too long.`},displayNameUsedBefore:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.displayNameUsedBefore`,defaultMessage:`This display name has already been used before. Please choose another one.`},submitting:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.submitting`,defaultMessage:`Submitting...`},closeAriaLabel:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.closeAriaLabel`,defaultMessage:`Close metadata template editor`},saveSuccessNotification:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.saveSuccessNotification`,defaultMessage:`Template saved successfully.`},saveErrorNotification:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.saveErrorNotification`,defaultMessage:`Failed to save template. Please try again.`},notificationSuccessIconAriaLabel:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.notificationSuccessIconAriaLabel`,defaultMessage:`Success`},notificationErrorIconAriaLabel:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.notificationErrorIconAriaLabel`,defaultMessage:`Error`},notificationCloseButtonAriaLabel:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.notificationCloseButtonAriaLabel`,defaultMessage:`Close notification`},loading:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.loading`,defaultMessage:`Loading template…`},fetchError:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.fetchError`,defaultMessage:`Something went wrong. Please reload to try again.`},reload:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.reload`,defaultMessage:`Reload`},unsavedChangesTitle:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.unsavedChangesTitle`,defaultMessage:`Unsaved Changes`},unsavedChangesBody:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.unsavedChangesBody`,defaultMessage:`You have unsaved changes. If you leave now, your changes will be lost.`},unsavedChangesDiscard:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.unsavedChangesDiscard`,defaultMessage:`Leave Without Saving`},unsavedChangesKeepEditing:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.unsavedChangesKeepEditing`,defaultMessage:`Keep Editing`},close:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.close`,defaultMessage:`Close`},viewTitle:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.viewTitle`,defaultMessage:`{templateName}`},noFields:{id:`groupSharedFeatures.metadataTemplateEditor.templateForm.noFields`,defaultMessage:`This template contains no fields.`}});export{messages_default as default};

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

@@ -1 +1 @@
-._form_1r59b_1{gap:var(--space-4);flex-direction:column;flex:1;max-width:620px;height:100%;display:flex}._fields_1r59b_10{gap:var(--space-4);flex-direction:column;display:flex}._emptyFields_1r59b_16{flex-grow:1;justify-content:space-around}._actions_1r59b_21{justify-content:flex-end;gap:var(--space-3);padding-top:var(--space-2);display:flex}._fieldsHeader_1r59b_28{align-items:center;gap:var(--space-2);justify-content:space-between;display:flex}
+._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}

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

@@ -8,6 +8,7 @@ type MetadataTemplateEditorFormProps = {
     fetchTaxonomyByKey: MetadataFieldListProps['fetchTaxonomyByKey'];
     hideActions?: boolean;
     isEditMode?: boolean;
+    isVisibilityToggleAllowed?: boolean;
     /**
      * When `true`, the entire form is in read-only display mode:
      * - all text inputs are non-editable
@@ -26,5 +27,5 @@ type MetadataTemplateEditorFormProps = {
      */
     fieldExtensions?: FieldConfiguratorExtension[];
 };
-declare const MetadataTemplateEditorForm: ({ formId, onCancel, taxonomyOptions, fetchTaxonomies, fetchTaxonomyByKey, hideActions, isEditMode, readOnly, onDirtyStateChange, onValidationChange, fieldExtensions, }: MetadataTemplateEditorFormProps) => import("react/jsx-runtime").JSX.Element;
+declare const MetadataTemplateEditorForm: ({ formId, onCancel, taxonomyOptions, fetchTaxonomies, fetchTaxonomyByKey, hideActions, isEditMode, isVisibilityToggleAllowed, readOnly, onDirtyStateChange, onValidationChange, fieldExtensions, }: MetadataTemplateEditorFormProps) => import("react/jsx-runtime").JSX.Element;
 export default MetadataTemplateEditorForm;

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

@@ -19,6 +19,21 @@ declare const _default: {
         description: string;
         id: string;
     };
+    hideTemplate: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+    hideTemplateInfo: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+    hideTemplateInfoAriaLabel: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
     cancel: {
         defaultMessage: string;
         description: string;

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

@@ -154,6 +154,13 @@ type MetadataTemplateEditorCommonProps = {
      * Use this together with `formId` when the parent (e.g. a modal) owns the actions.
      */
     hideActions?: boolean;
+    /**
+     * When `true`, displays a toggle below the template name that allows the
+     * template to be hidden from or made visible to users.
+     *
+     * @default false
+     */
+    isVisibilityToggleAllowed?: boolean;
     /**
      * Domain-specific extensions injected into every field configurator in this editor.
      *

package/package.json

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