@box/metadata-template-editor 2.3.0 → 2.3.2

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

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

package/dist/chunks/sortable-option-list.js

@@ -1 +1 @@
-import ConfirmationModal from"../esm/lib/components/metadata-field-configurator/components/confirmation-modal/confirmation-modal.js";import{useFieldConfigurator}from"../esm/lib/components/metadata-field-configurator/context/field-configurator-context.js";import dropdown_messages_default from"../esm/lib/components/metadata-field-configurator/messages/dropdown-messages.js";import{IconButton,TextInput}from"@box/blueprint-web";import{useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import{DragDots}from"@box/blueprint-web-assets/icons/Fill";import{useCallback,useEffect,useRef,useState}from"react";import clsx from"clsx";import{Trash}from"@box/blueprint-web-assets/icons/Line";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/sortable-option-list.css';var sortable_option_list_module_default={sortableOptionList:`_sortableOptionList_dhce1_1`,option:`_option_dhce1_9`,editable:`_editable_dhce1_9`,dragging:`_dragging_dhce1_22`,dragHandle:`_dragHandle_dhce1_26`,input:`_input_dhce1_41`,deleteButtonContainer:`_deleteButtonContainer_dhce1_47`,optionDragOverlay:`_optionDragOverlay_dhce1_53`};function getOptionError(errors,touched,index,option,allOptions,lastChangedOptionId){let err=touched?.dropdown?.options?.[index]&&typeof errors==`object`&&!!errors&&typeof errors.dropdown==`object`&&errors.dropdown?.options?.[index]?.key;if(typeof err!=`string`)return``;if(lastChangedOptionId!==null&&option.id!==lastChangedOptionId){let lastChangedKey=allOptions.find(opt=>opt.id===lastChangedOptionId)?.key;if(lastChangedKey&&option.key===lastChangedKey&&allOptions.some((opt,i)=>i!==index&&opt.key===lastChangedKey))return``}return err}function SortableOptionItem({option,index,isFieldReadOnly,onInputChange,onDelete,onInputRef,error,handleBlur,canDelete,dragAriaLabel,inputPlaceholder,deleteAriaLabel}){let{attributes,listeners,setNodeRef,transform,transition,isDragging}=useSortable({id:option.id});return jsxs(`li`,{ref:setNodeRef,style:{transform:CSS.Translate.toString(transform),transition},className:clsx(sortable_option_list_module_default.option,{[sortable_option_list_module_default.dragging]:isDragging,[sortable_option_list_module_default.editable]:!isFieldReadOnly}),children:[!isFieldReadOnly&&jsx(`div`,{className:sortable_option_list_module_default.dragHandle,...listeners,...attributes,"aria-label":dragAriaLabel,tabIndex:-1,children:jsx(DragDots,{fontSize:20,"aria-hidden":`true`})}),jsx(TextInput,{disabled:isFieldReadOnly,placeholder:inputPlaceholder,label:inputPlaceholder,hideLabel:!0,onBlur:handleBlur,id:`dropdown.options.${index}.key`,name:`dropdown.options.${index}.key`,value:option.key,className:sortable_option_list_module_default.input,onChange:e=>onInputChange(e,option.id),ref:el=>onInputRef(el,index),error}),!isFieldReadOnly&&jsx(`div`,{className:sortable_option_list_module_default.deleteButtonContainer,children:jsx(IconButton,{onClick:()=>onDelete(option),"aria-label":deleteAriaLabel,icon:Trash,size:`x-small`,variant:`default`,tabIndex:-1,focusable:!0,disabled:!canDelete,className:sortable_option_list_module_default.deleteButton})})]})}function SortableOptionList({shouldFocusLastOption=!1,onFocusConsumed}){let{formatMessage}=useIntl(),{values,errors,touched,setFieldValue,setFieldTouched,setTouched,handleBlur}=useFieldConfigurator(),sensors=useSensors(useSensor(PointerSensor,{activationConstraint:{distance:8}}),useSensor(TouchSensor,{activationConstraint:{delay:250,tolerance:5}}),useSensor(KeyboardSensor,{coordinateGetter:sortableKeyboardCoordinates})),{options}=values.dropdown,{isFieldReadOnly}=values,[currentItems,setCurrentItems]=useState(options),[lastChangedOptionId,setLastChangedOptionId]=useState(null),focusTimeoutRef=useRef(null),[activeId,setActiveId]=useState(null),[isConfirmationModalOpen,setIsConfirmationModalOpen]=useState(!1),[optionToDelete,setOptionToDelete]=useState(null);useEffect(()=>{setCurrentItems(options)},[options]),useEffect(()=>()=>{focusTimeoutRef.current&&clearTimeout(focusTimeoutRef.current)},[]);let updateFormValue=useCallback(newItems=>{setFieldValue(`dropdown`,{...values.dropdown,options:newItems})},[values.dropdown,setFieldValue]),handleInputChange=(event,optionId)=>{setLastChangedOptionId(optionId);let updatedItems=currentItems.map((option,index)=>option.id===optionId?(setFieldTouched(`dropdown.options.${index}.key`,!0),{...option,key:event.target.value}):option);setCurrentItems(updatedItems),updateFormValue(updatedItems)},closeConfirmationModal=()=>{setOptionToDelete(null),setIsConfirmationModalOpen(!1)},handleDelete=optionId=>{if(!optionId)return;let updatedItems=currentItems.filter(option=>option.id!==optionId);setCurrentItems(updatedItems),updateFormValue(updatedItems),optionId===lastChangedOptionId&&setLastChangedOptionId(null);let updatedTouched={...touched},dropdownTouched=updatedTouched.dropdown;dropdownTouched?.options&&(dropdownTouched.options=dropdownTouched.options.filter((_,index)=>currentItems[index]?.id!==optionId)),setTouched(updatedTouched),updatedItems.length===0&&setFieldValue(`dropdown`,{...values.dropdown,options:[{id:uniqueId(),key:``,isNew:!0}]}),closeConfirmationModal()},openConfirmationModal=option=>{option.isNew?handleDelete(option.id):(setOptionToDelete(option),setIsConfirmationModalOpen(!0))},handleDragStart=({active})=>{setActiveId(String(active.id))},handleDragCancel=()=>{setActiveId(null)},handleDragEnd=event=>{setActiveId(null);let{active,over}=event;if(over&&active.id!==over.id){let oldIndex=currentItems.findIndex(item=>item.id===active.id),newIndex=currentItems.findIndex(item=>item.id===over.id);if(oldIndex!==-1&&newIndex!==-1){let newItems=arrayMove(currentItems,oldIndex,newIndex);setCurrentItems(newItems),updateFormValue(newItems);let touchedOptions=touched?.dropdown?.options;touchedOptions&&touchedOptions.length>0&&setTouched({...touched,dropdown:{...touched.dropdown??{},options:arrayMove(touchedOptions,oldIndex,newIndex)}})}}},handleInputRef=useCallback((inputElement,index)=>{inputElement&&shouldFocusLastOption&&index===currentItems.length-1&&(focusTimeoutRef.current&&clearTimeout(focusTimeoutRef.current),focusTimeoutRef.current=setTimeout(()=>{inputElement.focus(),onFocusConsumed(),focusTimeoutRef.current=null},0))},[shouldFocusLastOption,onFocusConsumed,currentItems.length]),activeOption=activeId?currentItems.find(item=>item.id===activeId):null;return jsxs(Fragment,{children:[jsxs(DndContext,{sensors,collisionDetection:closestCenter,onDragStart:handleDragStart,onDragEnd:handleDragEnd,onDragCancel:handleDragCancel,children:[jsx(SortableContext,{items:currentItems.map(item=>item.id),strategy:verticalListSortingStrategy,children:jsx(`ul`,{className:sortable_option_list_module_default.sortableOptionList,children:currentItems.map((option,index)=>jsx(SortableOptionItem,{option,index,isFieldReadOnly:!!isFieldReadOnly,onInputChange:handleInputChange,onDelete:openConfirmationModal,onInputRef:handleInputRef,error:getOptionError(errors,touched,index,option,currentItems,lastChangedOptionId),handleBlur,canDelete:currentItems.length>=2,dragAriaLabel:formatMessage(dropdown_messages_default.dragAndDropOptionAriaLabel),inputPlaceholder:formatMessage(dropdown_messages_default.addAnOptionOptionPlaceholder),deleteAriaLabel:formatMessage(dropdown_messages_default.deleteDropdownOptionAriaLabel)},option.id))})}),jsx(DragOverlay,{dropAnimation:null,children:activeOption?jsxs(`li`,{className:clsx(sortable_option_list_module_default.option,sortable_option_list_module_default.optionDragOverlay,{[sortable_option_list_module_default.editable]:!isFieldReadOnly}),children:[!isFieldReadOnly&&jsx(`div`,{className:sortable_option_list_module_default.dragHandle,children:jsx(DragDots,{fontSize:20,"aria-hidden":`true`})}),jsx(TextInput,{disabled:isFieldReadOnly,placeholder:formatMessage(dropdown_messages_default.addAnOptionOptionPlaceholder),label:formatMessage(dropdown_messages_default.addAnOptionOptionPlaceholder),hideLabel:!0,id:`drag-overlay-option`,name:`drag-overlay-option`,value:activeOption.key,className:sortable_option_list_module_default.input}),!isFieldReadOnly&&jsx(`div`,{className:sortable_option_list_module_default.deleteButtonContainer,children:jsx(IconButton,{icon:Trash,size:`x-small`,variant:`default`,tabIndex:-1,focusable:!0,disabled:currentItems.length<2,className:sortable_option_list_module_default.deleteButton,"aria-label":``})})]}):null})]}),isConfirmationModalOpen&&jsx(ConfirmationModal,{onClose:closeConfirmationModal,onConfirm:()=>handleDelete(optionToDelete?.id??null),title:formatMessage(dropdown_messages_default.deleteOptionTitle,{optionName:optionToDelete?.key??``}),body:formatMessage(dropdown_messages_default.deleteOptionDescription)})]})}export{SortableOptionList as t};
+import ConfirmationModal from"../esm/lib/components/metadata-field-configurator/components/confirmation-modal/confirmation-modal.js";import{useFieldConfigurator}from"../esm/lib/components/metadata-field-configurator/context/field-configurator-context.js";import dropdown_messages_default from"../esm/lib/components/metadata-field-configurator/messages/dropdown-messages.js";import{IconButton,TextInput}from"@box/blueprint-web";import{useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import{DragDots}from"@box/blueprint-web-assets/icons/Fill";import{useCallback,useEffect,useRef,useState}from"react";import clsx from"clsx";import{Trash}from"@box/blueprint-web-assets/icons/Line";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/sortable-option-list.css';var sortable_option_list_module_default={sortableOptionList:`_sortableOptionList_dhce1_1`,option:`_option_dhce1_9`,editable:`_editable_dhce1_9`,dragging:`_dragging_dhce1_22`,dragHandle:`_dragHandle_dhce1_26`,input:`_input_dhce1_41`,deleteButtonContainer:`_deleteButtonContainer_dhce1_47`,optionDragOverlay:`_optionDragOverlay_dhce1_53`};function getOptionError(errors,touched,index,option,allOptions,lastChangedOptionId){let err=touched?.dropdown?.options?.[index]&&typeof errors==`object`&&!!errors&&typeof errors.dropdown==`object`&&errors.dropdown?.options?.[index]?.key;if(typeof err!=`string`)return``;if(lastChangedOptionId!==null&&option.id!==lastChangedOptionId){let lastChangedKey=allOptions.find(opt=>opt.id===lastChangedOptionId)?.key;if(lastChangedKey&&option.key===lastChangedKey&&allOptions.some((opt,i)=>i!==index&&opt.key===lastChangedKey))return``}return err}function SortableOptionItem({option,index,isFieldReadOnly,onInputChange,onDelete,onInputRef,error,handleBlur,canDelete,dragAriaLabel,inputPlaceholder,deleteAriaLabel}){let{attributes,listeners,setNodeRef,transform,transition,isDragging}=useSortable({id:option.id});return jsxs(`li`,{ref:setNodeRef,style:{transform:CSS.Translate.toString(transform),transition},className:clsx(sortable_option_list_module_default.option,{[sortable_option_list_module_default.dragging]:isDragging,[sortable_option_list_module_default.editable]:!isFieldReadOnly}),children:[!isFieldReadOnly&&jsx(`div`,{className:sortable_option_list_module_default.dragHandle,...listeners,...attributes,"aria-label":dragAriaLabel,tabIndex:-1,children:jsx(DragDots,{fontSize:20,"aria-hidden":`true`})}),jsx(TextInput,{disabled:isFieldReadOnly,placeholder:inputPlaceholder,label:inputPlaceholder,hideLabel:!0,onBlur:handleBlur,id:`dropdown.options.${index}.key`,name:`dropdown.options.${index}.key`,value:option.key,className:sortable_option_list_module_default.input,onChange:e=>onInputChange(e,option.id),ref:el=>onInputRef(el,index),error}),!isFieldReadOnly&&jsx(`div`,{className:sortable_option_list_module_default.deleteButtonContainer,children:jsx(IconButton,{onClick:()=>onDelete(option),"aria-label":deleteAriaLabel,icon:Trash,size:`x-small`,variant:`default`,tabIndex:-1,focusable:!0,disabled:!canDelete})})]})}function SortableOptionList({shouldFocusLastOption=!1,onFocusConsumed}){let{formatMessage}=useIntl(),{values,errors,touched,setFieldValue,setFieldTouched,setTouched,handleBlur}=useFieldConfigurator(),sensors=useSensors(useSensor(PointerSensor,{activationConstraint:{distance:8}}),useSensor(TouchSensor,{activationConstraint:{delay:250,tolerance:5}}),useSensor(KeyboardSensor,{coordinateGetter:sortableKeyboardCoordinates})),{options}=values.dropdown,{isFieldReadOnly}=values,[currentItems,setCurrentItems]=useState(options),[lastChangedOptionId,setLastChangedOptionId]=useState(null),focusTimeoutRef=useRef(null),[activeId,setActiveId]=useState(null),[isConfirmationModalOpen,setIsConfirmationModalOpen]=useState(!1),[optionToDelete,setOptionToDelete]=useState(null);useEffect(()=>{setCurrentItems(options)},[options]),useEffect(()=>()=>{focusTimeoutRef.current&&clearTimeout(focusTimeoutRef.current)},[]);let updateFormValue=useCallback(newItems=>{setFieldValue(`dropdown`,{...values.dropdown,options:newItems})},[values.dropdown,setFieldValue]),handleInputChange=(event,optionId)=>{setLastChangedOptionId(optionId);let updatedItems=currentItems.map((option,index)=>option.id===optionId?(setFieldTouched(`dropdown.options.${index}.key`,!0),{...option,key:event.target.value}):option);setCurrentItems(updatedItems),updateFormValue(updatedItems)},closeConfirmationModal=()=>{setOptionToDelete(null),setIsConfirmationModalOpen(!1)},handleDelete=optionId=>{if(!optionId)return;let updatedItems=currentItems.filter(option=>option.id!==optionId);setCurrentItems(updatedItems),updateFormValue(updatedItems),optionId===lastChangedOptionId&&setLastChangedOptionId(null);let updatedTouched={...touched},dropdownTouched=updatedTouched.dropdown;dropdownTouched?.options&&(dropdownTouched.options=dropdownTouched.options.filter((_,index)=>currentItems[index]?.id!==optionId)),setTouched(updatedTouched),updatedItems.length===0&&setFieldValue(`dropdown`,{...values.dropdown,options:[{id:uniqueId(),key:``,isNew:!0}]}),closeConfirmationModal()},openConfirmationModal=option=>{option.isNew?handleDelete(option.id):(setOptionToDelete(option),setIsConfirmationModalOpen(!0))},handleDragStart=({active})=>{setActiveId(String(active.id))},handleDragCancel=()=>{setActiveId(null)},handleDragEnd=event=>{setActiveId(null);let{active,over}=event;if(over&&active.id!==over.id){let oldIndex=currentItems.findIndex(item=>item.id===active.id),newIndex=currentItems.findIndex(item=>item.id===over.id);if(oldIndex!==-1&&newIndex!==-1){let newItems=arrayMove(currentItems,oldIndex,newIndex);setCurrentItems(newItems),updateFormValue(newItems);let touchedOptions=touched?.dropdown?.options;touchedOptions&&touchedOptions.length>0&&setTouched({...touched,dropdown:{...touched.dropdown??{},options:arrayMove(touchedOptions,oldIndex,newIndex)}})}}},handleInputRef=useCallback((inputElement,index)=>{inputElement&&shouldFocusLastOption&&index===currentItems.length-1&&(focusTimeoutRef.current&&clearTimeout(focusTimeoutRef.current),focusTimeoutRef.current=setTimeout(()=>{inputElement.focus(),onFocusConsumed(),focusTimeoutRef.current=null},0))},[shouldFocusLastOption,onFocusConsumed,currentItems.length]),activeOption=activeId?currentItems.find(item=>item.id===activeId):null;return jsxs(Fragment,{children:[jsxs(DndContext,{sensors,collisionDetection:closestCenter,onDragStart:handleDragStart,onDragEnd:handleDragEnd,onDragCancel:handleDragCancel,children:[jsx(SortableContext,{items:currentItems.map(item=>item.id),strategy:verticalListSortingStrategy,children:jsx(`ul`,{className:sortable_option_list_module_default.sortableOptionList,children:currentItems.map((option,index)=>jsx(SortableOptionItem,{option,index,isFieldReadOnly:!!isFieldReadOnly,onInputChange:handleInputChange,onDelete:openConfirmationModal,onInputRef:handleInputRef,error:getOptionError(errors,touched,index,option,currentItems,lastChangedOptionId),handleBlur,canDelete:currentItems.length>=2,dragAriaLabel:formatMessage(dropdown_messages_default.dragAndDropOptionAriaLabel),inputPlaceholder:formatMessage(dropdown_messages_default.addAnOptionOptionPlaceholder),deleteAriaLabel:formatMessage(dropdown_messages_default.deleteDropdownOptionAriaLabel)},option.id))})}),jsx(DragOverlay,{dropAnimation:null,children:activeOption?jsxs(`li`,{className:clsx(sortable_option_list_module_default.option,sortable_option_list_module_default.optionDragOverlay,{[sortable_option_list_module_default.editable]:!isFieldReadOnly}),children:[!isFieldReadOnly&&jsx(`div`,{className:sortable_option_list_module_default.dragHandle,children:jsx(DragDots,{fontSize:20,"aria-hidden":`true`})}),jsx(TextInput,{disabled:isFieldReadOnly,placeholder:formatMessage(dropdown_messages_default.addAnOptionOptionPlaceholder),label:formatMessage(dropdown_messages_default.addAnOptionOptionPlaceholder),hideLabel:!0,id:`drag-overlay-option`,name:`drag-overlay-option`,value:activeOption.key,className:sortable_option_list_module_default.input}),!isFieldReadOnly&&jsx(`div`,{className:sortable_option_list_module_default.deleteButtonContainer,children:jsx(IconButton,{icon:Trash,size:`x-small`,variant:`default`,tabIndex:-1,focusable:!0,disabled:currentItems.length<2,"aria-label":``})})]}):null})]}),isConfirmationModalOpen&&jsx(ConfirmationModal,{onClose:closeConfirmationModal,onConfirm:()=>handleDelete(optionToDelete?.id??null),title:formatMessage(dropdown_messages_default.deleteOptionTitle,{optionName:optionToDelete?.key??``}),body:formatMessage(dropdown_messages_default.deleteOptionDescription)})]})}export{SortableOptionList as t};

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

@@ -1 +1 @@
-._modal_1s9i6_1{min-width:620px;min-height:620px;max-height:620px}._centeredBody_1s9i6_7{flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex}._modalScrollableContainer_1s9i6_15{flex-direction:column;height:100%;display:flex}._modalBody_1s9i6_21{flex-direction:column;flex:1;justify-content:center;height:100%;display:flex}
+._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))}

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@box/metadata-template-editor",
-    "version": "2.3.0",
+    "version": "2.3.2",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
-        "@box/blueprint-web": "^16.14.0",
-        "@box/blueprint-web-assets": "^5.6.0",
+        "@box/blueprint-web": "^16.14.2",
+        "@box/blueprint-web-assets": "^5.6.2",
         "@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": "^16.14.0",
-        "@box/blueprint-web-assets": "^5.6.0",
+        "@box/blueprint-web": "^16.14.2",
+        "@box/blueprint-web-assets": "^5.6.2",
         "@box/eslint-plugin-blueprint": "2.2.0",
-        "@box/storybook-utils": "1.2.0",
+        "@box/storybook-utils": "1.2.2",
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/sortable": "^8.0.0",
         "@dnd-kit/utilities": "^3.2.2",