@box/metadata-template-editor 2.2.25 → 2.2.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/field-context-menu.js +1 -1
- package/dist/chunks/sortable-option-list.js +1 -1
- package/dist/esm/lib/components/field-type-tiles/field-type-tiles.js +1 -1
- package/dist/esm/lib/components/metadata-field-configurator/components/field-action-slot/field-action-slot.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{general}from"../esm/lib/components/metadata-field-configurator/messages/configurator-messages.js";import{Divider,DropdownMenu,IconButton,Text}from"@box/blueprint-web";import{FormattedMessage,useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import{Ellipsis}from"@box/blueprint-web-assets/icons/Fill";import React from"react";import{IconIconErrorOnLight}from"@box/blueprint-web-assets/tokens/tokens";import{ArrowDown,ArrowUp,Hidden,Trash,TwoFiles,Visible}from"@box/blueprint-web-assets/icons/Line";import
|
|
1
|
+
import{general}from"../esm/lib/components/metadata-field-configurator/messages/configurator-messages.js";import{Divider,DropdownMenu,IconButton,Text}from"@box/blueprint-web";import{FormattedMessage,useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import{Ellipsis}from"@box/blueprint-web-assets/icons/Fill";import React from"react";import{IconIconErrorOnLight}from"@box/blueprint-web-assets/tokens/tokens";import clsx from"clsx";import{ArrowDown,ArrowUp,Hidden,Trash,TwoFiles,Visible}from"@box/blueprint-web-assets/icons/Line";import '../styles/field-context-menu.css';var field_context_menu_module_default={contextMenuTrigger:`_contextMenuTrigger_102vn_1`,menuItem:`_menuItem_102vn_5`,contextMenu:`_contextMenu_102vn_1`,divider:`_divider_102vn_14`},FieldContextMenu=({className,index,maxIndex,isHidden=!1,onReorderFields,onToggleVisibility,onRequestDelete,onRequestDuplicate,onOpenChange})=>{let intl=useIntl(),[contextMenuOpen,setContextMenuOpen]=React.useState(!1),contextMenuRef=React.useRef(null),handleOpenChange=open=>{setContextMenuOpen(open),onOpenChange?.(open)},handleMoveUp=()=>{index>0&&onReorderFields?.(index,index-1)},handleMoveDown=()=>{onReorderFields?.(index,index+1)},hasItemsAboveDelete=!!(onReorderFields||onRequestDuplicate||onToggleVisibility);return jsxs(DropdownMenu.Root,{open:contextMenuOpen,onOpenChange:handleOpenChange,modal:!1,children:[jsx(DropdownMenu.Trigger,{className:clsx(field_context_menu_module_default.contextMenuTrigger,className),children:jsx(IconButton,{icon:Ellipsis,"aria-label":intl.formatMessage(general.contextMenuAriaLabel),size:`large`})}),jsxs(DropdownMenu.Content,{ref:contextMenuRef,align:`end`,className:field_context_menu_module_default.contextMenu,children:[onReorderFields&&jsxs(Fragment,{children:[jsx(DropdownMenu.Item,{disabled:index===0,onClick:handleMoveUp,"aria-label":intl.formatMessage(general.moveUpAriaLabel),children:jsxs(`div`,{className:field_context_menu_module_default.menuItem,children:[jsx(ArrowUp,{"aria-hidden":`true`}),jsx(FormattedMessage,{...general.moveUp})]})}),jsx(DropdownMenu.Item,{disabled:index===maxIndex,onClick:handleMoveDown,"aria-label":intl.formatMessage(general.moveDownAriaLabel),children:jsxs(`div`,{className:field_context_menu_module_default.menuItem,children:[jsx(ArrowDown,{"aria-hidden":`true`}),jsx(FormattedMessage,{...general.moveDown})]})})]}),onRequestDuplicate&&jsx(DropdownMenu.Item,{onClick:onRequestDuplicate,"aria-label":intl.formatMessage(general.duplicateFieldAriaLabel),children:jsxs(`div`,{className:field_context_menu_module_default.menuItem,children:[jsx(TwoFiles,{"aria-hidden":`true`}),jsx(FormattedMessage,{...general.duplicateField})]})}),onToggleVisibility&&jsx(DropdownMenu.Item,{onClick:()=>onToggleVisibility(!isHidden),"aria-label":intl.formatMessage(isHidden?general.showField:general.hideField),children:jsxs(`div`,{className:field_context_menu_module_default.menuItem,children:[jsx(isHidden?Visible:Hidden,{"aria-hidden":`true`}),jsx(FormattedMessage,{...isHidden?general.showField:general.hideField})]})}),onRequestDelete&&jsxs(Fragment,{children:[hasItemsAboveDelete&&jsx(Divider,{className:field_context_menu_module_default.divider}),jsx(DropdownMenu.Item,{onClick:onRequestDelete,"aria-label":intl.formatMessage(general.deleteFieldAriaLabel),children:jsxs(`div`,{className:field_context_menu_module_default.menuItem,children:[jsx(Trash,{color:IconIconErrorOnLight,"aria-hidden":`true`}),jsx(Text,{as:`span`,color:`textOnLightError`,children:jsx(FormattedMessage,{...general.deleteField})})]})})]})]})]})};export{FieldContextMenu as t};
|
|
@@ -1 +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{Trash}from"@box/blueprint-web-assets/icons/Line";import
|
|
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useFieldOptions}from"../../utils/field-options/useFieldOptions.js";import{emptyStateMessages}from"./messages.js";import{RadioTiles}from"@box/blueprint-web";import{useIntl}from"react-intl";import{jsx}from"react/jsx-runtime";import{
|
|
1
|
+
import{useFieldOptions}from"../../utils/field-options/useFieldOptions.js";import{emptyStateMessages}from"./messages.js";import{RadioTiles}from"@box/blueprint-web";import{useIntl}from"react-intl";import{jsx}from"react/jsx-runtime";import{bpSize080,bpSurfaceSurfaceBrand}from"@box/blueprint-web-assets/tokens/tokens";function FieldTypeTiles({onFieldAdd}){let{formatMessage}=useIntl(),fieldTypes=useFieldOptions();return jsx(`div`,{"data-testid":`md-template-type-picker-tiles`,children:jsx(RadioTiles,{name:`field-type-picker`,value:void 0,columns:5,"aria-label":formatMessage(emptyStateMessages.selectFieldTypeAriaLabel),onChange:event=>{let fieldType=fieldTypes.availableFieldTypes.find(ft=>ft.type===event.target.value);fieldType&&onFieldAdd(fieldType)},children:fieldTypes.availableFieldTypes.map(fieldType=>jsx(RadioTiles.Option,{value:fieldType.type,label:fieldType.label,icon:jsx(fieldType.Icon,{"aria-hidden":!0,color:bpSurfaceSurfaceBrand,height:bpSize080,width:bpSize080})},fieldType.type))})})}export{FieldTypeTiles,FieldTypeTiles as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{general}from"../../messages/configurator-messages.js";import{t as
|
|
1
|
+
import{general}from"../../messages/configurator-messages.js";import{t as FieldContextMenu}from"../../../../../../chunks/field-context-menu.js";import{t as metadata_field_configurator_module_default}from"../../../../../../chunks/metadata-field-configurator.module.js";import{Status,Tabs,Text}from"@box/blueprint-web";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";import{useState}from"react";import{bpSurfaceStatusSurfaceGray}from"@box/blueprint-web-assets/tokens/tokens";import clsx from"clsx";import{Hidden,Pencil}from"@box/blueprint-web-assets/icons/Line";var FieldActionSlot=({isHidden,isExpanded=!1,index,maxIndex,onReorderFields,onToggleVisibility,onRequestDelete,onRequestDuplicate,extensions,fieldCollapsedText,collapsedMenuSlot,readOnly=!1})=>{let{formatMessage}=useIntl(),[isMenuOpen,setIsMenuOpen]=useState(!1),menuContent=!isExpanded&&collapsedMenuSlot?jsx(`div`,{className:metadata_field_configurator_module_default.contextMenuWithCollapsedText,children:collapsedMenuSlot}):jsx(FieldContextMenu,{className:clsx(metadata_field_configurator_module_default.fieldContextMenu,{[metadata_field_configurator_module_default.menuOpen]:isMenuOpen,[metadata_field_configurator_module_default.contextMenuWithCollapsedText]:fieldCollapsedText&&!isExpanded}),index,isHidden,maxIndex,onOpenChange:setIsMenuOpen,onReorderFields,onRequestDelete,onRequestDuplicate,onToggleVisibility});return jsxs(`div`,{className:clsx(metadata_field_configurator_module_default.fieldActionSlot,{[metadata_field_configurator_module_default.expanded]:isExpanded}),children:[isHidden&&jsx(Status,{className:metadata_field_configurator_module_default.hiddenBadge,color:bpSurfaceStatusSurfaceGray,icon:Hidden,iconPosition:`left`,text:formatMessage(general.hiddenStatus).toUpperCase()}),fieldCollapsedText&&!isExpanded&&jsx(Text,{as:`span`,className:clsx(metadata_field_configurator_module_default.fieldCollapsedText,{[metadata_field_configurator_module_default.menuOpen]:isMenuOpen}),color:`textOnLightSecondary`,variant:`bodySmall`,children:fieldCollapsedText}),jsxs(`div`,{className:clsx(metadata_field_configurator_module_default.expandedToolbarActions,{[metadata_field_configurator_module_default.menuOpen]:isMenuOpen}),children:[extensions.length>0&&jsxs(Tabs.TabList,{containerClassname:metadata_field_configurator_module_default.extensionTabsContainer,variant:`contentSwitcher`,children:[jsx(Tabs.Tab,{"aria-label":formatMessage(general.editTabAriaLabel),id:`edit`,variant:`contentSwitcher`,children:jsx(Pencil,{"aria-hidden":`true`})}),extensions.map((ext,i)=>jsx(Tabs.Tab,{"aria-label":ext.label,id:`ext-${i}`,variant:`contentSwitcher`,children:jsx(ext.icon,{"aria-hidden":`true`})},ext.label))]}),!readOnly&&menuContent]})]})};export{FieldActionSlot};
|