@strapi/content-type-builder 5.8.1 → 5.10.0

package/dist/admin/chunks/index-BhX2euW0.mjs

@@ -0,0 +1,1384 @@
+import { ArrowClockwise, Clock, Layout } from '@strapi/icons';
+import { createSlice } from '@reduxjs/toolkit';
+import { current } from 'immer';
+import get from 'lodash/get';
+import set from 'lodash/set';
+import snakeCase from 'lodash/snakeCase';
+import pluralize from 'pluralize';
+import slugify from '@sindresorhus/slugify';
+import cloneDeep from 'lodash/cloneDeep';
+import * as yup from 'yup';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Flex, Box, Typography, Link } from '@strapi/design-system';
+import { createPortal } from 'react-dom';
+import { useIntl } from 'react-intl';
+import { keyframes, styled } from 'styled-components';
+
+const PERMISSIONS = {
+    // This permission regards the main component (App) and is used to tell
+    // If the plugin link should be displayed in the menu
+    // And also if the plugin is accessible. This use case is found when a user types the url of the
+    // plugin directly in the browser
+    main: [
+        {
+            action: 'plugin::content-type-builder.read',
+            subject: null
+        }
+    ]
+};
+const MAX_COMPONENT_DEPTH = 6;
+
+const pluginId = 'content-type-builder';
+
+/**
+ *
+ * Retrieves the relation type
+ */ const getRelationType = (relation, targetAttribute)=>{
+    const hasNotTargetAttribute = targetAttribute === undefined || targetAttribute === null;
+    if (relation === 'oneToOne' && hasNotTargetAttribute) {
+        return 'oneWay';
+    }
+    if (relation === 'oneToMany' && hasNotTargetAttribute) {
+        return 'manyWay';
+    }
+    return relation;
+};
+
+const makeUnique = (array)=>[
+        ...new Set(array)
+    ];
+
+const retrieveComponentsFromSchema = (attributes, allComponentsData)=>{
+    const allComponents = attributes.reduce((acc, current)=>{
+        const type = current.type;
+        if (type === 'component') {
+            const currentComponentName = current.component;
+            // Push the existing compo
+            acc.push(currentComponentName);
+            const currentComponentAttributes = get(allComponentsData, [
+                currentComponentName,
+                'schema',
+                'attributes'
+            ], []);
+            // Retrieve the nested ones
+            acc.push(...retrieveComponentsFromSchema(currentComponentAttributes, allComponentsData));
+        }
+        if (type === 'dynamiczone') {
+            const dynamicZoneComponents = current.components;
+            const componentsFromDZComponents = dynamicZoneComponents.reduce((acc2, currentUid)=>{
+                const compoAttrs = get(allComponentsData, [
+                    currentUid,
+                    'schema',
+                    'attributes'
+                ], []);
+                return [
+                    ...acc2,
+                    ...retrieveComponentsFromSchema(compoAttrs, allComponentsData)
+                ];
+            }, []);
+            return [
+                ...acc,
+                ...dynamicZoneComponents,
+                ...componentsFromDZComponents
+            ];
+        }
+        return acc;
+    }, []);
+    return makeUnique(allComponents);
+};
+
+const DEFAULT_MODIFIED_DATA = {
+    components: {},
+    contentTypes: {}
+};
+const initialState$1 = {
+    components: {},
+    contentTypes: {},
+    initialComponents: {},
+    initialContentTypes: {},
+    initialData: {},
+    modifiedData: {
+        ...DEFAULT_MODIFIED_DATA
+    },
+    reservedNames: {},
+    isLoading: true
+};
+const ONE_SIDE_RELATIONS = [
+    'oneWay',
+    'manyWay'
+];
+const getOppositeRelation = (originalRelation)=>{
+    if (originalRelation === 'manyToOne') {
+        return 'oneToMany';
+    }
+    if (originalRelation === 'oneToMany') {
+        return 'manyToOne';
+    }
+    return originalRelation;
+};
+const findAttributeIndex = (schema, attributeToFind)=>{
+    return schema.schema.attributes.findIndex(({ name })=>name === attributeToFind);
+};
+const slice$1 = createSlice({
+    name: 'data-manager',
+    initialState: initialState$1,
+    reducers: {
+        init: (state, action)=>{
+            const { components, contentTypes, reservedNames } = action.payload;
+            state.components = components;
+            state.initialComponents = components;
+            state.initialContentTypes = contentTypes;
+            state.contentTypes = contentTypes;
+            state.reservedNames = reservedNames;
+            state.isLoading = false;
+            state.modifiedData = {
+                ...DEFAULT_MODIFIED_DATA,
+                component: state.modifiedData.component ? components[state.modifiedData.component.uid] : undefined,
+                contentType: state.modifiedData.contentType ? contentTypes[state.modifiedData.contentType.uid] : undefined,
+                components: state.modifiedData.components ? Object.keys(state.modifiedData.components).reduce((acc, key)=>{
+                    acc[key] = components[key];
+                    return acc;
+                }, {}) : {},
+                contentTypes: state.modifiedData.contentTypes ? Object.keys(state.modifiedData.contentTypes).reduce((acc, key)=>{
+                    acc[key] = contentTypes[key];
+                    return acc;
+                }, {}) : {}
+            };
+            state.initialData = state.modifiedData;
+        },
+        addAttribute: (state, action)=>{
+            const { attributeToSet, forTarget, targetUid, shouldAddComponentToData } = action.payload;
+            const { name, ...rest } = attributeToSet;
+            delete rest.createComponent;
+            const pathToDataToEdit = [
+                'component',
+                'contentType'
+            ].includes(forTarget) ? [
+                forTarget
+            ] : [
+                forTarget,
+                targetUid
+            ];
+            const currentAttributes = get(state, [
+                'modifiedData',
+                ...pathToDataToEdit,
+                'schema',
+                'attributes'
+            ], []).slice();
+            // Add the createdAttribute
+            const updatedAttributes = [
+                ...currentAttributes,
+                {
+                    ...rest,
+                    name
+                }
+            ];
+            set(state, [
+                'modifiedData',
+                ...pathToDataToEdit,
+                'schema',
+                'attributes'
+            ], updatedAttributes);
+            if (shouldAddComponentToData) {
+                const componentToAddUID = rest.component;
+                const componentToAdd = state.components[componentToAddUID];
+                const isTemporaryComponent = componentToAdd?.isTemporary;
+                const hasComponentAlreadyBeenAdded = state.modifiedData.components?.[componentToAddUID] !== undefined;
+                if (isTemporaryComponent || hasComponentAlreadyBeenAdded) {
+                    return;
+                }
+                // Initialize modifiedData.components if it is undefined
+                if (!state.modifiedData.components) {
+                    state.modifiedData.components = {};
+                }
+                // Add the added component to the modifiedData.components
+                state.modifiedData.components[componentToAddUID] = componentToAdd;
+                const nestedComponents = retrieveComponentsFromSchema(componentToAdd.schema.attributes, state.components);
+                // We dont' need to set the already added components otherwise all modifications will be lost so we need to only add the not modified ones
+                const nestedComponentsToAddInModifiedData = nestedComponents.filter((compoUID)=>{
+                    return get(state, [
+                        'modifiedData',
+                        'components',
+                        compoUID
+                    ]) === undefined;
+                });
+                nestedComponentsToAddInModifiedData.forEach((compoUID)=>{
+                    const compoSchema = get(state, [
+                        'components',
+                        compoUID
+                    ], {});
+                    const isTemporary = compoSchema.isTemporary || false;
+                    // If the nested component has not been saved we don't need to add them as they are already in the state
+                    if (!isTemporary) {
+                        if (!state.modifiedData.components) {
+                            state.modifiedData.components = {};
+                        }
+                        state.modifiedData.components[compoUID] = compoSchema;
+                    }
+                });
+                return;
+            }
+            const isCreatingRelationAttribute = rest.type === 'relation';
+            if (isCreatingRelationAttribute) {
+                const target = rest.target;
+                const targetAttribute = rest.targetAttribute || null;
+                const relation = rest.relation;
+                const relationType = getRelationType(relation, targetAttribute);
+                const currentUid = get(state, [
+                    'modifiedData',
+                    ...pathToDataToEdit,
+                    'uid'
+                ]);
+                // When the user in creating a relation with the same content type we need to create another attribute
+                // that is the opposite of the created one
+                if (rest.type === 'relation' && relationType !== 'oneWay' && relationType !== 'manyWay' && target === currentUid) {
+                    const oppositeAttribute = {
+                        name: targetAttribute,
+                        relation: getOppositeRelation(relationType),
+                        target,
+                        targetAttribute: name,
+                        type: 'relation'
+                    };
+                    if (rest.private) {
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        oppositeAttribute.private = rest.private;
+                    }
+                    const attributesToSet = [
+                        ...updatedAttributes,
+                        oppositeAttribute
+                    ];
+                    set(state, [
+                        'modifiedData',
+                        ...pathToDataToEdit,
+                        'schema',
+                        'attributes'
+                    ], attributesToSet);
+                }
+            }
+        },
+        addCreatedComponentToDynamicZone: (state, action)=>{
+            const { dynamicZoneTarget, componentsToAdd } = action.payload;
+            const dzAttributeIndex = findAttributeIndex(state.modifiedData.contentType, dynamicZoneTarget);
+            componentsToAdd.forEach((componentUid)=>{
+                if (!state.modifiedData.contentType) {
+                    return;
+                }
+                if (!state.modifiedData.contentType.schema.attributes[dzAttributeIndex].components) {
+                    state.modifiedData.contentType.schema.attributes[dzAttributeIndex].components = [];
+                }
+                state.modifiedData.contentType.schema.attributes[dzAttributeIndex].components.push(componentUid);
+            });
+        },
+        addCustomFieldAttribute: (state, action)=>{
+            const { attributeToSet, forTarget, targetUid } = action.payload;
+            const { name, ...rest } = attributeToSet;
+            const pathToDataToEdit = [
+                'component',
+                'contentType'
+            ].includes(forTarget) ? [
+                forTarget
+            ] : [
+                forTarget,
+                targetUid
+            ];
+            const currentAttributes = get(state, [
+                'modifiedData',
+                ...pathToDataToEdit,
+                'schema',
+                'attributes'
+            ], []).slice();
+            // Add the createdAttribute
+            const updatedAttributes = [
+                ...currentAttributes,
+                {
+                    ...rest,
+                    name
+                }
+            ];
+            set(state, [
+                'modifiedData',
+                ...pathToDataToEdit,
+                'schema',
+                'attributes'
+            ], updatedAttributes);
+        },
+        changeDynamicZoneComponents: (state, action)=>{
+            const { dynamicZoneTarget, newComponents } = action.payload;
+            const dzAttributeIndex = findAttributeIndex(state.modifiedData.contentType, dynamicZoneTarget);
+            const currentDZComponents = (state.modifiedData.contentType?.schema.attributes[dzAttributeIndex]).components;
+            const updatedComponents = makeUnique([
+                ...currentDZComponents,
+                ...newComponents
+            ]);
+            (state.modifiedData.contentType?.schema.attributes[dzAttributeIndex]).components = updatedComponents;
+            // Retrieve all the components that needs to be added to the modifiedData.components
+            const nestedComponents = retrieveComponentsFromSchema(current(state.modifiedData.contentType?.schema.attributes), state.components);
+            // We dont' need to set the already added components otherwise all modifications will be lost so we need to only add the not modified ones
+            const nestedComponentsToAddInModifiedData = nestedComponents.filter((compoUID)=>{
+                return get(state, [
+                    'modifiedData',
+                    'components',
+                    compoUID
+                ]) === undefined;
+            });
+            nestedComponentsToAddInModifiedData.forEach((compoUID)=>{
+                const compoSchema = get(state, [
+                    'components',
+                    compoUID
+                ], {});
+                const isTemporary = compoSchema.isTemporary || false;
+                // If the nested component has not been saved we don't need to add them as they are already in the state
+                if (!isTemporary) {
+                    if (!state.modifiedData.components) {
+                        state.modifiedData.components = {};
+                    }
+                    state.modifiedData.components[compoUID] = compoSchema;
+                }
+            });
+        },
+        createComponentSchema: (state, action)=>{
+            const { uid, data, componentCategory, shouldAddComponentToData } = action.payload;
+            const newSchema = {
+                uid: uid,
+                isTemporary: true,
+                category: componentCategory,
+                schema: {
+                    ...data,
+                    attributes: []
+                }
+            };
+            state.components[uid] = newSchema;
+            if (shouldAddComponentToData) {
+                state.modifiedData.components[uid] = newSchema;
+            }
+        },
+        createSchema: (state, action)=>{
+            const { uid, data } = action.payload;
+            const newSchema = {
+                uid: uid,
+                isTemporary: true,
+                schema: {
+                    ...data,
+                    attributes: []
+                }
+            };
+            state.contentTypes[uid] = newSchema;
+        },
+        editAttribute: (state, action)=>{
+            const { attributeToSet, forTarget, targetUid, initialAttribute } = action.payload;
+            const { name, ...rest } = attributeToSet;
+            const initialAttributeName = initialAttribute.name;
+            const pathToDataToEdit = [
+                'component',
+                'contentType'
+            ].includes(forTarget) ? [
+                forTarget
+            ] : [
+                forTarget,
+                targetUid
+            ];
+            const initialAttributeIndex = findAttributeIndex(get(state, [
+                'modifiedData',
+                ...pathToDataToEdit
+            ]), initialAttributeName);
+            const isEditingRelation = rest.type === 'relation';
+            if (!isEditingRelation) {
+                set(state, [
+                    'modifiedData',
+                    ...pathToDataToEdit,
+                    'schema',
+                    'attributes',
+                    initialAttributeIndex
+                ], attributeToSet);
+                return;
+            }
+            const updatedAttributes = get(state, [
+                'modifiedData',
+                ...pathToDataToEdit,
+                'schema',
+                'attributes'
+            ]).slice();
+            // First create the current relation attribute updated
+            const toSet = {
+                name,
+                relation: rest.relation,
+                target: rest.target,
+                targetAttribute: rest.targetAttribute,
+                type: 'relation'
+            };
+            if (rest.private) {
+                toSet.private = rest.private;
+            }
+            if (rest.pluginOptions) {
+                toSet.pluginOptions = rest.pluginOptions;
+            }
+            const currentAttributeIndex = updatedAttributes.findIndex((value)=>{
+                return value.name !== undefined && value.name === initialAttribute.name;
+            });
+            // First set it in the updatedAttributes
+            if (currentAttributeIndex !== -1) {
+                updatedAttributes.splice(currentAttributeIndex, 1, toSet);
+            }
+            let oppositeAttributeNameToRemove = null;
+            let oppositeAttributeNameToUpdate = null;
+            let oppositeAttributeToCreate = null;
+            let initialOppositeAttribute = null;
+            const currentUid = get(state, [
+                'modifiedData',
+                ...pathToDataToEdit,
+                'uid'
+            ]);
+            const didChangeTargetRelation = initialAttribute.target !== rest.target;
+            const didCreateInternalRelation = rest.target === currentUid;
+            const relationType = getRelationType(rest.relation, rest.targetAttribute);
+            const initialRelationType = getRelationType(initialAttribute.relation, initialAttribute.targetAttribute);
+            const hadInternalRelation = initialAttribute.target === currentUid;
+            const didChangeRelationType = initialRelationType !== relationType;
+            const shouldRemoveOppositeAttributeBecauseOfTargetChange = didChangeTargetRelation && !didCreateInternalRelation && hadInternalRelation && isEditingRelation;
+            const shouldRemoveOppositeAttributeBecauseOfRelationTypeChange = didChangeRelationType && hadInternalRelation && [
+                'oneWay',
+                'manyWay'
+            ].includes(relationType) && isEditingRelation;
+            const shouldUpdateOppositeAttributeBecauseOfRelationTypeChange = !ONE_SIDE_RELATIONS.includes(initialRelationType) && !ONE_SIDE_RELATIONS.includes(relationType) && hadInternalRelation && didCreateInternalRelation && isEditingRelation;
+            const shouldCreateOppositeAttributeBecauseOfRelationTypeChange = ONE_SIDE_RELATIONS.includes(initialRelationType) && !ONE_SIDE_RELATIONS.includes(relationType) && hadInternalRelation && didCreateInternalRelation && isEditingRelation;
+            const shouldCreateOppositeAttributeBecauseOfTargetChange = didChangeTargetRelation && didCreateInternalRelation && !ONE_SIDE_RELATIONS.includes(relationType);
+            // Store opposite attribute name to remove at the end of the loop
+            if (shouldRemoveOppositeAttributeBecauseOfTargetChange || shouldRemoveOppositeAttributeBecauseOfRelationTypeChange) {
+                oppositeAttributeNameToRemove = initialAttribute.targetAttribute;
+            }
+            // In case of oneWay or manyWay relation there isn't an opposite attribute
+            if (oppositeAttributeNameToRemove) {
+                const indexToRemove = updatedAttributes.findIndex((value)=>value.name === oppositeAttributeNameToRemove);
+                updatedAttributes.splice(indexToRemove, 1);
+            }
+            // In order to preserve plugin options need to get the initial opposite attribute settings
+            if (!shouldRemoveOppositeAttributeBecauseOfTargetChange) {
+                const initialTargetContentType = get(state, [
+                    'initialContentTypes',
+                    initialAttribute.target
+                ]);
+                if (initialTargetContentType) {
+                    const oppositeAttributeIndex = findAttributeIndex(initialTargetContentType, initialAttribute.targetAttribute);
+                    initialOppositeAttribute = get(state, [
+                        'initialContentTypes',
+                        initialAttribute.target,
+                        'schema',
+                        'attributes',
+                        oppositeAttributeIndex
+                    ]);
+                }
+            }
+            // Create the opposite attribute
+            if (shouldCreateOppositeAttributeBecauseOfRelationTypeChange || shouldCreateOppositeAttributeBecauseOfTargetChange) {
+                oppositeAttributeToCreate = {
+                    name: rest.targetAttribute,
+                    relation: getOppositeRelation(relationType),
+                    target: rest.target,
+                    targetAttribute: name,
+                    type: 'relation'
+                };
+                if (rest.private) {
+                    oppositeAttributeToCreate.private = rest.private;
+                }
+                if (initialOppositeAttribute && initialOppositeAttribute.pluginOptions) {
+                    oppositeAttributeToCreate.pluginOptions = initialOppositeAttribute.pluginOptions;
+                }
+                const indexOfInitialAttribute = updatedAttributes.findIndex(({ name })=>name === initialAttribute.name);
+                const indexOfUpdatedAttribute = updatedAttributes.findIndex(({ name: attrName })=>name === attrName);
+                const indexToInsert = (indexOfInitialAttribute === -1 ? indexOfUpdatedAttribute : indexOfInitialAttribute) + 1;
+                updatedAttributes.splice(indexToInsert, 0, oppositeAttributeToCreate);
+            }
+            if (shouldUpdateOppositeAttributeBecauseOfRelationTypeChange) {
+                oppositeAttributeNameToUpdate = initialAttribute.targetAttribute;
+                oppositeAttributeToCreate = {
+                    name: rest.targetAttribute,
+                    relation: getOppositeRelation(relationType),
+                    target: rest.target,
+                    targetAttribute: name,
+                    type: 'relation'
+                };
+                if (rest.private) {
+                    oppositeAttributeToCreate.private = rest.private;
+                }
+                if (initialOppositeAttribute && initialOppositeAttribute.pluginOptions) {
+                    oppositeAttributeToCreate.pluginOptions = initialOppositeAttribute.pluginOptions;
+                }
+                if (oppositeAttributeNameToUpdate) {
+                    const indexToUpdate = updatedAttributes.findIndex(({ name })=>name === oppositeAttributeNameToUpdate);
+                    updatedAttributes.splice(indexToUpdate, 1, oppositeAttributeToCreate);
+                }
+            }
+            set(state, [
+                'modifiedData',
+                ...pathToDataToEdit,
+                'schema',
+                'attributes'
+            ], updatedAttributes);
+        },
+        editCustomFieldAttribute: (state, action)=>{
+            const { forTarget, targetUid, initialAttribute, attributeToSet } = action.payload;
+            const initialAttributeName = initialAttribute.name;
+            const pathToDataToEdit = [
+                'component',
+                'contentType'
+            ].includes(forTarget) ? [
+                forTarget
+            ] : [
+                forTarget,
+                targetUid
+            ];
+            const initialAttributeIndex = findAttributeIndex(get(state, [
+                'modifiedData',
+                ...pathToDataToEdit
+            ]), initialAttributeName);
+            set(state, [
+                'modifiedData',
+                ...pathToDataToEdit,
+                'schema',
+                'attributes',
+                initialAttributeIndex
+            ], attributeToSet);
+        },
+        updateInitialState: (state)=>{
+            state.initialData = state.modifiedData;
+        },
+        deleteNotSavedType: (state)=>{
+            // Doing so will also reset the modified and the initial data
+            state.contentTypes = state.initialContentTypes;
+            state.components = state.initialComponents;
+        },
+        reloadPlugin: ()=>{
+            return initialState$1;
+        },
+        removeComponentFromDynamicZone: (state, action)=>{
+            const { dzName, componentToRemoveIndex } = action.payload;
+            const dzAttributeIndex = findAttributeIndex(state.modifiedData.contentType, dzName);
+            if (state.modifiedData.contentType) {
+                state.modifiedData.contentType.schema.attributes[dzAttributeIndex].components.splice(componentToRemoveIndex, 1);
+            }
+        },
+        removeField: (state, action)=>{
+            const { mainDataKey, attributeToRemoveName } = action.payload;
+            const pathToAttributes = [
+                'modifiedData',
+                mainDataKey,
+                'schema',
+                'attributes'
+            ];
+            const attributeToRemoveIndex = findAttributeIndex(state.modifiedData[mainDataKey], attributeToRemoveName);
+            const pathToAttributeToRemove = [
+                ...pathToAttributes,
+                attributeToRemoveIndex
+            ];
+            const attributeToRemoveData = get(state, pathToAttributeToRemove);
+            const isRemovingRelationAttribute = attributeToRemoveData.type === 'relation';
+            // Only content types can have relations with themselves since
+            // components can only have oneWay or manyWay relations
+            const canTheAttributeToRemoveHaveARelationWithItself = mainDataKey === 'contentType';
+            if (isRemovingRelationAttribute && canTheAttributeToRemoveHaveARelationWithItself) {
+                const { target, relation, targetAttribute } = attributeToRemoveData;
+                const relationType = getRelationType(relation, targetAttribute);
+                const uid = state.modifiedData.contentType?.uid;
+                const shouldRemoveOppositeAttribute = target === uid && !ONE_SIDE_RELATIONS.includes(relationType);
+                if (shouldRemoveOppositeAttribute) {
+                    const attributes = state.modifiedData[mainDataKey]?.schema.attributes.slice();
+                    const nextAttributes = attributes.filter((attribute)=>{
+                        if (attribute.name === attributeToRemoveName) {
+                            return false;
+                        }
+                        if (attribute.target === uid && attribute.targetAttribute === attributeToRemoveName) {
+                            return false;
+                        }
+                        return true;
+                    });
+                    const schema = state.modifiedData[mainDataKey];
+                    if (schema) {
+                        schema.schema.attributes = nextAttributes;
+                    }
+                    return;
+                }
+            }
+            // Find all uid fields that have the targetField set to the field we are removing
+            const uidFieldsToUpdate = state.modifiedData[mainDataKey].schema.attributes.slice().reduce((acc, current)=>{
+                if (current.type !== 'uid') {
+                    return acc;
+                }
+                if (current.targetField !== attributeToRemoveName) {
+                    return acc;
+                }
+                acc.push(current.name);
+                return acc;
+            }, []);
+            uidFieldsToUpdate.forEach((fieldName)=>{
+                const fieldIndex = findAttributeIndex(state.modifiedData[mainDataKey], fieldName);
+                delete state.modifiedData[mainDataKey]?.schema.attributes[fieldIndex].targetField;
+            });
+            state.modifiedData[mainDataKey]?.schema.attributes.splice(attributeToRemoveIndex, 1);
+        },
+        removeFieldFromDisplayedComponent: (state, action)=>{
+            const { attributeToRemoveName, componentUid } = action.payload;
+            const attributeToRemoveIndex = findAttributeIndex(state.modifiedData.components?.[componentUid], attributeToRemoveName);
+            state.modifiedData.components?.[componentUid]?.schema?.attributes?.splice(attributeToRemoveIndex, 1);
+        },
+        setModifiedData: (state, action)=>{
+            const { schemaToSet, hasJustCreatedSchema } = action.payload;
+            const schema = {
+                ...DEFAULT_MODIFIED_DATA,
+                ...schemaToSet
+            };
+            state.initialData = schema;
+            state.modifiedData = schema;
+            // Reset the state with the initial data
+            // All created components and content types will be lost
+            if (!hasJustCreatedSchema) {
+                state.components = state.initialComponents;
+                state.contentTypes = state.initialContentTypes;
+            }
+        },
+        updateSchema: (state, action)=>{
+            const { data, schemaType } = action.payload;
+            const schema = state.modifiedData[schemaType];
+            if (!schema) {
+                return;
+            }
+            schema.schema.displayName = data.displayName;
+            if (schemaType === 'component') {
+                const { uid } = action.payload;
+                schema.category = data.category;
+                schema.schema.icon = data.icon;
+                const addedComponent = current(schema);
+                state.components[uid] = addedComponent;
+            } else {
+                schema.schema.kind = data.kind;
+            }
+        }
+    }
+});
+const { reducer: reducer$1, actions: actions$1 } = slice$1;
+
+const nameToSlug = (name)=>slugify(name, {
+        separator: '-'
+    });
+
+const createUid = (name)=>{
+    const modelName = nameToSlug(name);
+    return `api::${modelName}.${modelName}`;
+};
+// From `content-type-builder/services/Components/createComponentUid`
+const createComponentUid = (name, category)=>{
+    return `${nameToSlug(category)}.${nameToSlug(name)}`;
+};
+
+const customFieldDefaultOptionsReducer = (acc, option)=>{
+    if (option.items) {
+        return option.items.reduce(customFieldDefaultOptionsReducer, acc);
+    }
+    if ('defaultValue' in option) {
+        const { name, defaultValue } = option;
+        acc.push({
+            name,
+            defaultValue
+        });
+    }
+    return acc;
+};
+
+/* eslint-disable no-confusing-arrow */ const shouldPluralizeName = (nature)=>[
+        'manyToMany',
+        'oneToMany',
+        'manyWay'
+    ].includes(nature) ? 2 : 1;
+const shouldPluralizeTargetAttribute = (nature)=>[
+        'manyToMany',
+        'manyToOne'
+    ].includes(nature) ? 2 : 1;
+
+const initialState = {
+    formErrors: {},
+    modifiedData: {},
+    initialData: {},
+    componentToCreate: {},
+    isCreatingComponentWhileAddingAField: false
+};
+const slice = createSlice({
+    name: 'formModal',
+    initialState,
+    reducers: {
+        onChange: (state, action)=>{
+            const { keys, value } = action.payload;
+            const obj = state.modifiedData;
+            const hasDefaultValue = Boolean(obj.default);
+            // There is no need to remove the default key if the default value isn't defined
+            if (hasDefaultValue && keys.length === 1 && keys.includes('type')) {
+                const previousType = obj.type;
+                if (previousType && [
+                    'date',
+                    'datetime',
+                    'time'
+                ].includes(previousType)) {
+                    // return obj.updateIn(keys, () => value).remove('default');
+                    delete state.modifiedData.default;
+                }
+            }
+            set(state, [
+                'modifiedData',
+                ...keys
+            ], value);
+        },
+        onChangeRelationTarget: (state, action)=>{
+            const { target: { oneThatIsCreatingARelationWithAnother, selectedContentTypeFriendlyName, targetContentTypeAllowedRelations, value } } = action.payload;
+            // Special case for the admin user...
+            let didChangeRelationTypeBecauseOfRestrictedRelation = false;
+            let changedRelationType = null;
+            set(state, [
+                'modifiedData',
+                'target'
+            ], value);
+            const modifiedData = state.modifiedData;
+            // Don't change the relation type if the allowed relations are not restricted
+            // TODO: replace with an obj { relation: 'x', bidirctional: true|false } when BE ready
+            if (Array.isArray(targetContentTypeAllowedRelations)) {
+                const currentRelationType = getRelationType(modifiedData.relation, modifiedData.targetAttribute);
+                if (currentRelationType && !targetContentTypeAllowedRelations.includes(currentRelationType)) {
+                    const relationToSet = targetContentTypeAllowedRelations[0];
+                    didChangeRelationTypeBecauseOfRestrictedRelation = true;
+                    changedRelationType = relationToSet;
+                    if (relationToSet === 'oneWay') {
+                        set(state, [
+                            'modifiedData',
+                            'relation'
+                        ], 'oneToOne');
+                    } else if (relationToSet === 'manyWay') {
+                        set(state, [
+                            'modifiedData',
+                            'relation'
+                        ], 'oneToMany');
+                    } else {
+                        set(state, [
+                            'modifiedData',
+                            'relation'
+                        ], relationToSet);
+                    }
+                }
+            }
+            let nameToSet;
+            if (didChangeRelationTypeBecauseOfRestrictedRelation && changedRelationType) {
+                nameToSet = pluralize(snakeCase(nameToSlug(selectedContentTypeFriendlyName)), shouldPluralizeName(changedRelationType));
+            } else {
+                nameToSet = pluralize(snakeCase(nameToSlug(selectedContentTypeFriendlyName)), shouldPluralizeName(modifiedData.relation));
+            }
+            set(state, [
+                'modifiedData',
+                'name'
+            ], nameToSet);
+            const currentTargetAttribute = state.modifiedData.targetAttribute;
+            if (currentTargetAttribute === null) {
+                return;
+            }
+            // Changing the target and the relation is either oneWay or manyWay
+            // Case when we need to change the relation to oneWay (ex: admin user)
+            if (didChangeRelationTypeBecauseOfRestrictedRelation && changedRelationType && [
+                'oneWay',
+                'manyWay'
+            ].includes(changedRelationType)) {
+                set(state, [
+                    'modifiedData',
+                    'targetAttribute'
+                ], null);
+                return;
+            }
+            const targetAttributeToSet = pluralize(snakeCase(nameToSlug(oneThatIsCreatingARelationWithAnother)), shouldPluralizeTargetAttribute(modifiedData.relation));
+            set(state, [
+                'modifiedData',
+                'targetAttribute'
+            ], targetAttributeToSet);
+        },
+        onChangeRelationType: (state, action)=>{
+            const { target: { oneThatIsCreatingARelationWithAnother, value } } = action.payload;
+            const currentName = state.modifiedData.name;
+            // Switching from oneWay
+            if (![
+                'oneWay',
+                'manyWay'
+            ].includes(value)) {
+                set(state, [
+                    'modifiedData',
+                    'relation'
+                ], value);
+                const currentTargetAttribute = state.modifiedData.targetAttribute;
+                set(state, [
+                    'modifiedData',
+                    'name'
+                ], pluralize(snakeCase(nameToSlug(currentName)), shouldPluralizeName(value)));
+                set(state, [
+                    'modifiedData',
+                    'targetAttribute'
+                ], pluralize(currentTargetAttribute || snakeCase(nameToSlug(oneThatIsCreatingARelationWithAnother)), shouldPluralizeTargetAttribute(value)));
+                return;
+            }
+            if (value === 'oneWay') {
+                set(state, [
+                    'modifiedData',
+                    'relation'
+                ], 'oneToOne');
+                set(state, [
+                    'modifiedData',
+                    'targetAttribute'
+                ], null);
+                set(state, [
+                    'modifiedData',
+                    'name'
+                ], pluralize(snakeCase(currentName), 1));
+                return;
+            }
+            // manyWay
+            set(state, [
+                'modifiedData',
+                'relation'
+            ], 'oneToMany');
+            set(state, [
+                'modifiedData',
+                'targetAttribute'
+            ], null);
+            set(state, [
+                'modifiedData',
+                'name'
+            ], pluralize(snakeCase(currentName), 2));
+        },
+        resetProps: ()=>{
+            return initialState;
+        },
+        resetPropsAndSetFormForAddingAnExistingCompo: (state, action)=>{
+            const { options = {} } = action.payload;
+            return {
+                ...initialState,
+                modifiedData: {
+                    type: 'component',
+                    repeatable: true,
+                    ...options
+                }
+            };
+        },
+        resetPropsAndSaveCurrentData: (state, action)=>{
+            const { options = {} } = action.payload;
+            // This is run when the user has created a new component
+            const componentToCreate = state.modifiedData.componentToCreate;
+            const modifiedData = {
+                displayName: componentToCreate.displayName,
+                type: 'component',
+                repeatable: false,
+                ...options,
+                component: createComponentUid(componentToCreate.displayName, componentToCreate.category)
+            };
+            return {
+                ...initialState,
+                componentToCreate,
+                modifiedData,
+                isCreatingComponentWhileAddingAField: state.modifiedData.createComponent
+            };
+        },
+        resetPropsAndSetTheFormForAddingACompoToADz: (state)=>{
+            const createdDZ = state.modifiedData;
+            const dataToSet = {
+                ...createdDZ,
+                createComponent: true,
+                componentToCreate: {
+                    type: 'component'
+                }
+            };
+            return {
+                ...initialState,
+                modifiedData: dataToSet
+            };
+        },
+        setDataToEdit: (state, action)=>{
+            const { data } = action.payload;
+            state.modifiedData = data;
+            state.initialData = data;
+        },
+        setAttributeDataSchema: (state, action)=>{
+            const { isEditing } = action.payload;
+            if (isEditing) {
+                const { modifiedDataToSetForEditing } = action.payload;
+                state.modifiedData = modifiedDataToSetForEditing;
+                state.initialData = modifiedDataToSetForEditing;
+                return;
+            }
+            const { attributeType, nameToSetForRelation, targetUid, step, options = {} } = action.payload;
+            let dataToSet;
+            if (attributeType === 'component') {
+                if (step === '1') {
+                    dataToSet = {
+                        type: 'component',
+                        createComponent: true,
+                        componentToCreate: {
+                            type: 'component'
+                        }
+                    };
+                } else {
+                    dataToSet = {
+                        ...options,
+                        type: 'component',
+                        repeatable: true
+                    };
+                }
+            } else if (attributeType === 'dynamiczone') {
+                dataToSet = {
+                    ...options,
+                    type: 'dynamiczone',
+                    components: []
+                };
+            } else if (attributeType === 'text') {
+                dataToSet = {
+                    ...options,
+                    type: 'string'
+                };
+            } else if (attributeType === 'number' || attributeType === 'date') {
+                dataToSet = options;
+            } else if (attributeType === 'media') {
+                dataToSet = {
+                    allowedTypes: [
+                        'images',
+                        'files',
+                        'videos',
+                        'audios'
+                    ],
+                    type: 'media',
+                    multiple: true,
+                    ...options
+                };
+            } else if (attributeType === 'enumeration') {
+                dataToSet = {
+                    ...options,
+                    type: 'enumeration',
+                    enum: []
+                };
+            } else if (attributeType === 'relation') {
+                dataToSet = {
+                    name: snakeCase(nameToSetForRelation),
+                    relation: 'oneToOne',
+                    targetAttribute: null,
+                    target: targetUid,
+                    type: 'relation'
+                };
+            } else {
+                dataToSet = {
+                    ...options,
+                    type: attributeType,
+                    default: null
+                };
+            }
+            state.modifiedData = dataToSet;
+        },
+        setCustomFieldDataSchema: (state, action)=>{
+            const { isEditing } = action.payload;
+            if (isEditing) {
+                const { modifiedDataToSetForEditing } = action.payload;
+                state.modifiedData = modifiedDataToSetForEditing;
+                state.initialData = modifiedDataToSetForEditing;
+                return;
+            }
+            const { customField, options = {} } = action.payload;
+            state.modifiedData = {
+                ...options,
+                type: customField.type
+            };
+            const allOptions = [
+                ...customField?.options?.base || [],
+                ...customField?.options?.advanced || []
+            ];
+            const optionDefaults = allOptions.reduce(customFieldDefaultOptionsReducer, []);
+            if (optionDefaults.length) {
+                optionDefaults.forEach(({ name, defaultValue })=>set(state.modifiedData, name, defaultValue));
+            }
+        },
+        setDynamicZoneDataSchema: (state, action)=>{
+            const { attributeToEdit } = action.payload;
+            state.modifiedData = attributeToEdit;
+            state.initialData = attributeToEdit;
+        },
+        setErrors: (state, action)=>{
+            state.formErrors = action.payload.errors;
+        }
+    }
+});
+const { actions, reducer } = slice;
+
+const reducers = {
+    [`${pluginId}_formModal`]: reducer,
+    [`${pluginId}_dataManagerProvider`]: reducer$1
+};
+
+// TODO V5 Convert any into real types
+const formsAPI = {
+    components: {
+        inputs: {},
+        add ({ id, component }) {
+            if (!this.inputs[id]) {
+                this.inputs[id] = component;
+            }
+        }
+    },
+    types: {
+        attribute: {
+        },
+        contentType: {
+            validators: [],
+            form: {
+                advanced: [],
+                base: []
+            }
+        },
+        component: {
+            validators: [],
+            form: {
+                advanced: [],
+                base: []
+            }
+        }
+    },
+    contentTypeSchemaMutations: [],
+    addContentTypeSchemaMutation (cb) {
+        this.contentTypeSchemaMutations.push(cb);
+    },
+    extendContentType ({ validator, form: { advanced, base } }) {
+        const { contentType } = this.types;
+        if (validator) {
+            contentType.validators.push(validator);
+        }
+        contentType.form.advanced.push(advanced);
+        contentType.form.base.push(base);
+    },
+    extendFields (fields, { validator, form: { advanced, base } }) {
+        const formType = this.types.attribute;
+        fields.forEach((field)=>{
+            if (!formType[field]) {
+                formType[field] = {
+                    validators: [],
+                    form: {
+                        advanced: [],
+                        base: []
+                    }
+                };
+            }
+            if (validator) {
+                formType[field].validators.push(validator);
+            }
+            formType[field].form.advanced.push(advanced);
+            formType[field].form.base.push(base);
+        });
+    },
+    getAdvancedForm (target, props = null) {
+        const sectionsToAdd = get(this.types, [
+            ...target,
+            'form',
+            'advanced'
+        ], []).reduce((acc, current)=>{
+            const sections = current(props);
+            return [
+                ...acc,
+                ...sections
+            ];
+        }, []);
+        return sectionsToAdd;
+    },
+    makeCustomFieldValidator (attributeShape, validator, ...validatorArgs) {
+        // When no validator, return the attribute shape
+        if (!validator) return attributeShape;
+        // Otherwise extend the shape with the provided validator
+        return attributeShape.shape({
+            options: yup.object().shape(validator(validatorArgs))
+        });
+    },
+    makeValidator (target, initShape, ...args) {
+        const validators = get(this.types, [
+            ...target,
+            'validators'
+        ], []);
+        const pluginOptionsShape = validators.reduce((acc, current)=>{
+            const pluginOptionShape = current(args);
+            return {
+                ...acc,
+                ...pluginOptionShape
+            };
+        }, {});
+        return initShape.shape({
+            pluginOptions: yup.object().shape(pluginOptionsShape)
+        });
+    },
+    mutateContentTypeSchema (data, initialData) {
+        let enhancedData = cloneDeep(data);
+        const refData = cloneDeep(initialData);
+        this.contentTypeSchemaMutations.forEach((cb)=>{
+            enhancedData = cb(enhancedData, refData);
+        });
+        return enhancedData;
+    }
+};
+
+const prefixPluginTranslations = (trad, pluginId)=>{
+    return Object.keys(trad).reduce((acc, current)=>{
+        acc[`${pluginId}.${current}`] = trad[current];
+        return acc;
+    }, {});
+};
+
+const AutoReloadOverlayBlockerContext = /*#__PURE__*/ React.createContext({});
+const MAX_ELAPSED_TIME = 30 * 1000;
+const AutoReloadOverlayBlockerProvider = ({ children })=>{
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [config, setConfig] = React.useState({});
+    const [failed, setFailed] = React.useState(false);
+    const lockAppWithAutoreload = React.useCallback((config = {})=>{
+        setIsOpen(true);
+        setConfig(config);
+    }, []);
+    const unlockAppWithAutoreload = React.useCallback(()=>{
+        setIsOpen(false);
+        setConfig({});
+    }, []);
+    // eslint-disable-next-line consistent-return
+    React.useEffect(()=>{
+        if (isOpen) {
+            const timeout = setTimeout(()=>{
+                setFailed(true);
+            }, MAX_ELAPSED_TIME);
+            return ()=>{
+                clearTimeout(timeout);
+            };
+        }
+    }, [
+        isOpen
+    ]);
+    let displayedIcon = config?.icon || 'reload';
+    let description = {
+        id: config?.description || 'components.OverlayBlocker.description',
+        defaultMessage: "You're using a feature that needs the server to restart. The page will reload automatically."
+    };
+    let title = {
+        id: config?.title || 'components.OverlayBlocker.title',
+        defaultMessage: 'Waiting for restart'
+    };
+    if (failed) {
+        displayedIcon = 'time';
+        description = {
+            id: 'components.OverlayBlocker.description.serverError',
+            defaultMessage: 'The server should have restarted, please check your logs in the terminal.'
+        };
+        title = {
+            id: 'components.OverlayBlocker.title.serverError',
+            defaultMessage: 'The restart is taking longer than expected'
+        };
+    }
+    const autoReloadValue = React.useMemo(()=>({
+            lockAppWithAutoreload,
+            unlockAppWithAutoreload
+        }), [
+        lockAppWithAutoreload,
+        unlockAppWithAutoreload
+    ]);
+    return /*#__PURE__*/ jsxs(AutoReloadOverlayBlockerContext.Provider, {
+        value: autoReloadValue,
+        children: [
+            /*#__PURE__*/ jsx(Blocker, {
+                displayedIcon: displayedIcon,
+                isOpen: isOpen,
+                description: description,
+                title: title
+            }),
+            children
+        ]
+    });
+};
+const Blocker = ({ displayedIcon, description, title, isOpen })=>{
+    const { formatMessage } = useIntl();
+    // eslint-disable-next-line no-undef
+    return isOpen && globalThis?.document?.body ? /*#__PURE__*/ createPortal(/*#__PURE__*/ jsxs(Overlay, {
+        id: "autoReloadOverlayBlocker",
+        direction: "column",
+        alignItems: "center",
+        gap: 6,
+        children: [
+            /*#__PURE__*/ jsxs(Flex, {
+                direction: "column",
+                alignItems: "center",
+                gap: 2,
+                children: [
+                    /*#__PURE__*/ jsx(Typography, {
+                        tag: "h1",
+                        variant: "alpha",
+                        children: formatMessage(title)
+                    }),
+                    /*#__PURE__*/ jsx(Typography, {
+                        tag: "h2",
+                        textColor: "neutral600",
+                        fontSize: 4,
+                        fontWeight: "regular",
+                        children: formatMessage(description)
+                    })
+                ]
+            }),
+            displayedIcon === 'reload' && /*#__PURE__*/ jsx(IconBox, {
+                padding: 6,
+                background: "primary100",
+                borderColor: "primary200",
+                children: /*#__PURE__*/ jsx(LoaderReload, {
+                    width: "4rem",
+                    height: "4rem"
+                })
+            }),
+            displayedIcon === 'time' && /*#__PURE__*/ jsx(IconBox, {
+                padding: 6,
+                background: "primary100",
+                borderColor: "primary200",
+                children: /*#__PURE__*/ jsx(Clock, {
+                    width: "4rem",
+                    height: "4rem"
+                })
+            }),
+            /*#__PURE__*/ jsx(Box, {
+                marginTop: 2,
+                children: /*#__PURE__*/ jsx(Link, {
+                    href: "https://docs.strapi.io",
+                    isExternal: true,
+                    children: formatMessage({
+                        id: 'global.documentation',
+                        defaultMessage: 'Read the documentation'
+                    })
+                })
+            })
+        ]
+    }), // eslint-disable-next-line no-undef
+    globalThis.document.body) : null;
+};
+const rotation = keyframes`
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(359deg);
+    }
+  `;
+const LoaderReload = styled(ArrowClockwise)`
+  animation: ${rotation} 1s infinite linear;
+`;
+const Overlay = styled(Flex)`
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  /* TODO: set this up in the theme for consistence z-index values */
+  z-index: 1140;
+  padding-top: 16rem;
+
+  & > * {
+    position: relative;
+    z-index: 1;
+  }
+
+  &:before {
+    content: '';
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: ${({ theme })=>theme.colors.neutral0};
+    opacity: 0.9;
+  }
+`;
+const IconBox = styled(Box)`
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    > path {
+      fill: ${({ theme })=>theme.colors.primary600} !important;
+    }
+  }
+`;
+/* -------------------------------------------------------------------------------------------------
+ * Hook
+ * -----------------------------------------------------------------------------------------------*/ const useAutoReloadOverlayBlocker = ()=>React.useContext(AutoReloadOverlayBlockerContext);
+
+function __variableDynamicImportRuntime1__(path) {
+  switch (path) {
+    case './translations/ar.json': return import('./ar-sRW9VFC-.mjs');
+    case './translations/cs.json': return import('./cs-BpQ26jiq.mjs');
+    case './translations/de.json': return import('./de-DSxx5_x-.mjs');
+    case './translations/dk.json': return import('./dk-BnjVZ7A_.mjs');
+    case './translations/en.json': return import('./en-Bhut8Yay.mjs');
+    case './translations/es.json': return import('./es-DG8g9igJ.mjs');
+    case './translations/fr.json': return import('./fr-UpV34MHY.mjs');
+    case './translations/id.json': return import('./id-BWM18ljw.mjs');
+    case './translations/it.json': return import('./it-1_vd9gV4.mjs');
+    case './translations/ja.json': return import('./ja-Cx23a2Ui.mjs');
+    case './translations/ko.json': return import('./ko-DC7paEx5.mjs');
+    case './translations/ms.json': return import('./ms-C3s4kxq6.mjs');
+    case './translations/nl.json': return import('./nl-TzvfktV_.mjs');
+    case './translations/pl.json': return import('./pl-BdvupIN_.mjs');
+    case './translations/pt-BR.json': return import('./pt-BR-DPrVmKeZ.mjs');
+    case './translations/pt.json': return import('./pt-BTLIwmCv.mjs');
+    case './translations/ru.json': return import('./ru-D46no502.mjs');
+    case './translations/sk.json': return import('./sk-Byr_l4Jc.mjs');
+    case './translations/sv.json': return import('./sv-Bbam7IDm.mjs');
+    case './translations/th.json': return import('./th-hfS0Wmk_.mjs');
+    case './translations/tr.json': return import('./tr-DS7DBOhC.mjs');
+    case './translations/uk.json': return import('./uk-Cj8-BKeu.mjs');
+    case './translations/zh-Hans.json': return import('./zh-Hans-BElOnuRb.mjs');
+    case './translations/zh.json': return import('./zh-BUVXH75-.mjs');
+    default: return new Promise(function(resolve, reject) {
+      (typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
+        reject.bind(null, new Error("Unknown variable dynamic import: " + path))
+      );
+    })
+   }
+ }
+// eslint-disable-next-line import/no-default-export
+var index = {
+    register (app) {
+        app.addReducers(reducers);
+        app.addMenuLink({
+            to: `plugins/${pluginId}`,
+            icon: Layout,
+            intlLabel: {
+                id: `${pluginId}.plugin.name`,
+                defaultMessage: 'Content-Type Builder'
+            },
+            permissions: PERMISSIONS.main,
+            Component: ()=>import('./index-Cr5tfW7U.mjs').then(function (n) { return n.i; }),
+            position: 5
+        });
+        app.registerPlugin({
+            id: pluginId,
+            name: pluginId,
+            // Internal APIs exposed by the CTB for the other plugins to use
+            apis: {
+                forms: formsAPI
+            }
+        });
+    },
+    bootstrap () {},
+    async registerTrads ({ locales }) {
+        const importedTrads = await Promise.all(locales.map((locale)=>{
+            return __variableDynamicImportRuntime1__(`./translations/${locale}.json`).then(({ default: data })=>{
+                return {
+                    data: prefixPluginTranslations(data, pluginId),
+                    locale
+                };
+            }).catch(()=>{
+                return {
+                    data: {},
+                    locale
+                };
+            });
+        }));
+        return Promise.resolve(importedTrads);
+    }
+};
+
+export { AutoReloadOverlayBlockerProvider as A, MAX_COMPONENT_DEPTH as M, PERMISSIONS as P, actions as a, createUid as b, createComponentUid as c, initialState$1 as d, actions$1 as e, index as f, getRelationType as g, initialState as i, makeUnique as m, nameToSlug as n, pluginId as p, retrieveComponentsFromSchema as r, useAutoReloadOverlayBlocker as u };
+//# sourceMappingURL=index-BhX2euW0.mjs.map