strapi-plugin-navigation 3.0.0-beta.3 → 3.0.0-beta.4

package/dist/admin/index.js

@@ -8568,7 +8568,8 @@ const SvgCog = ({
   const stroke = strokeProp && strokeProp in colors ? colors[strokeProp] : strokeProp;
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", width: 16, height: 16, fill, stroke, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M29.743 13.401a1 1 0 0 0-.487-.675l-3.729-2.125-.015-4.202a1 1 0 0 0-.353-.76 14 14 0 0 0-4.59-2.584 1 1 0 0 0-.808.074L16 5.23l-3.765-2.106a1 1 0 0 0-.809-.075 14 14 0 0 0-4.585 2.594 1 1 0 0 0-.354.758L6.47 10.61 2.74 12.734a1 1 0 0 0-.486.675 13.3 13.3 0 0 0 0 5.195 1 1 0 0 0 .486.675l3.729 2.125.015 4.204a1 1 0 0 0 .353.76 14 14 0 0 0 4.59 2.583 1 1 0 0 0 .808-.073L16 26.768l3.765 2.107a1.013 1.013 0 0 0 .809.073 14 14 0 0 0 4.585-2.592 1 1 0 0 0 .354-.759l.018-4.206 3.729-2.125a1 1 0 0 0 .486-.675c.34-1.713.338-3.477-.003-5.19M16 21a5 5 0 1 1 0-10 5 5 0 0 1 0 10" }) });
 };
-React.forwardRef(SvgCog);
+const ForwardRef$40 = React.forwardRef(SvgCog);
+const ForwardRef$41 = ForwardRef$40;
 const SvgCollapse = ({
   fill: fillProp = "currentColor",
   stroke: strokeProp,
@@ -31922,6 +31923,8 @@ function selectedLineRanges(state) {
   for (let r of state.selection.ranges) {
     let fromLine = state.doc.lineAt(r.from);
     let toLine = r.to <= fromLine.to ? fromLine : state.doc.lineAt(r.to);
+    if (toLine.from > fromLine.from && toLine.from == r.to)
+      toLine = r.to == fromLine.to + 1 ? fromLine : state.doc.lineAt(r.to - 1);
     let last = ranges.length - 1;
     if (last >= 0 && ranges[last].to > fromLine.from)
       ranges[last].to = toLine.to;
@@ -50372,9 +50375,13 @@ const prefixPluginTranslations = (trad, pluginId) => {
   }, {});
 };
 const usePluginTheme = () => {
+  const getSystemTheme = () => window.matchMedia("(prefers-color-scheme: dark)").matches;
   const [theme2, setTheme] = React.useState();
   React.useEffect(() => {
-    setTheme(window.localStorage?.STRAPI_THEME);
+    const isDarkSystemTheme = getSystemTheme();
+    const systemTheme = isDarkSystemTheme ? "dark" : "light";
+    const strapiTheme = window.localStorage?.STRAPI_THEME;
+    setTheme(strapiTheme === "system" ? systemTheme : strapiTheme);
   }, []);
   return {
     theme: theme2 === "dark" ? darkTheme : lightTheme,
@@ -50494,7 +50501,7 @@ const audienceDBSchema = z__namespace.object({
   name: z__namespace.string(),
   key: z__namespace.string()
 });
-const navigationItemTypeSchema = z__namespace.enum(["INTERNAL", "EXTERNAL"]);
+const navigationItemTypeSchema = z__namespace.enum(["INTERNAL", "EXTERNAL", "WRAPPER"]);
 const navigationItemBaseSchema = z__namespace.object({
   id: z__namespace.number(),
   documentId: z__namespace.string(),
@@ -51109,7 +51116,7 @@ const toNavigationItem = (payload, config2) => {
     structureId: payload.structureId,
     removed: payload.removed,
     updated: payload.updated
-  } : {
+  } : payload.type === "EXTERNAL" ? {
     type: "EXTERNAL",
     collapsed: !!payload.collapsed,
     id: payload.id,
@@ -51131,6 +51138,27 @@ const toNavigationItem = (payload, config2) => {
     audience: payload.audience?.map(
       (documentId) => config2.availableAudience.find((audience) => audience.documentId === documentId)
     ) ?? []
+  } : {
+    type: "WRAPPER",
+    collapsed: !!payload.collapsed,
+    id: payload.id,
+    documentId: payload.documentId,
+    menuAttached: !!payload.menuAttached,
+    order: payload.order ?? 0,
+    path: payload.path ?? "",
+    title: payload.title,
+    uiRouterKey: payload.uiRouterKey,
+    additionalFields: payload.additionalFields,
+    audience: payload.audience?.map(
+      (documentId) => config2.availableAudience.find((audience) => audience.documentId === documentId)
+    ) ?? [],
+    autoSync: payload.autoSync,
+    items: payload.items?.length ? transformItemToViewPayload(payload, payload.items, config2) : payload.items,
+    viewId: payload.viewId,
+    viewParentId: payload.viewParentId,
+    structureId: payload.structureId,
+    removed: payload.removed,
+    updated: payload.updated
   };
 };
 const transformItemToViewPayload = (payload, items = [], config2) => {
@@ -51192,8 +51220,15 @@ const extractRelatedItemLabel = (item, config2) => {
   if (contentType2?.isSingle) {
     return contentType2.labelSingular;
   }
-  const defaultFieldsWithCapitalizedOptions = [...defaultFields, ...defaultFields.map((_) => lodash$1.capitalize(_))];
-  const labelFields = lodash$1.get(fields, `${contentType2 ? contentType2.uid : __collectionUid}`, defaultFieldsWithCapitalizedOptions);
+  const defaultFieldsWithCapitalizedOptions = [
+    ...defaultFields,
+    ...defaultFields.map((_) => lodash$1.capitalize(_))
+  ];
+  const labelFields = lodash$1.get(
+    fields,
+    `${contentType2 ? contentType2.uid : __collectionUid}`,
+    defaultFieldsWithCapitalizedOptions
+  );
   const itemLabels = (lodash$1.isEmpty(labelFields) ? defaultFieldsWithCapitalizedOptions : labelFields).map((_) => item[_]).filter((_) => _);
   return lodash$1.first(itemLabels) || "";
 };
@@ -51237,7 +51272,7 @@ const mapServerNavigationItem = (item, stopAtFirstLevel = false) => {
     removed: item.removed,
     updated: item.updated,
     isSearchActive: item.isSearchActive
-  } : {
+  } : item.type === "EXTERNAL" ? {
     type: "EXTERNAL",
     id: item.id,
     documentId: item.documentId,
@@ -51255,6 +51290,24 @@ const mapServerNavigationItem = (item, stopAtFirstLevel = false) => {
     removed: item.removed,
     updated: item.updated,
     isSearchActive: item.isSearchActive
+  } : {
+    type: "WRAPPER",
+    id: item.id,
+    documentId: item.documentId,
+    additionalFields: item.additionalFields ?? {},
+    title: item.title,
+    uiRouterKey: item.uiRouterKey,
+    autoSync: item.autoSync ?? void 0,
+    collapsed: item.collapsed,
+    order: item.order ?? 0,
+    menuAttached: item.menuAttached,
+    viewId: item.viewId,
+    viewParentId: item.viewParentId,
+    items: stopAtFirstLevel ? item.items : item.items?.map((_) => mapServerNavigationItem(_)) ?? void 0,
+    removed: item.removed,
+    updated: item.updated,
+    isSearchActive: item.isSearchActive,
+    path: item.path ?? ""
   };
 };
 const getPendingAction = (actions) => actions.find(({ isPending }) => isPending);
@@ -52387,34 +52440,28 @@ const Item = ({
   viewParentId,
   locale
 }) => {
-  const {
-    viewId,
-    type,
-    path,
-    removed,
-    externalPath,
-    menuAttached,
-    collapsed,
-    items = [],
-    isSearchActive,
-    related,
-    relatedType
-  } = mapServerNavigationItem(item, true);
+  const mappedItem = mapServerNavigationItem(item, true);
   const { formatMessage } = reactIntl.useIntl();
   const configQuery = useConfig$1();
-  const isExternal = type === "EXTERNAL";
+  const isExternal = mappedItem.type === "EXTERNAL";
+  const isWrapper = mappedItem.type === "WRAPPER";
   const isNextMenuAllowedLevel = lodash$1.isNumber(configQuery.data?.allowedLevels) ? level < configQuery.data.allowedLevels - 1 : true;
   const isMenuAllowedLevel = lodash$1.isNumber(configQuery.data?.allowedLevels) ? level < configQuery.data.allowedLevels : true;
   const hasChildren = !lodash$1.isEmpty(item.items) && !isExternal && !displayChildren;
-  const absolutePath = isExternal ? void 0 : `${levelPath === "/" ? "" : levelPath}/${path === "/" ? "" : path}`.replace("//", "/");
+  const absolutePath = isExternal ? void 0 : `${levelPath === "/" ? "" : levelPath}/${mappedItem.path === "/" ? "" : mappedItem.path}`.replace(
+    "//",
+    "/"
+  );
   const contentTypeItemsQuery = useContentTypeItems({
-    uid: relatedType ?? "",
+    uid: mappedItem.type === "INTERNAL" ? mappedItem.relatedType ?? "" : "",
     locale
   });
   const contentTypesQuery = useContentTypes$1();
-  const contentType2 = contentTypesQuery.data?.find((_) => _.uid === relatedType);
+  const contentType2 = contentTypesQuery.data?.find(
+    (_) => mappedItem.type === "INTERNAL" ? _.uid === mappedItem.relatedType : false
+  );
   const relatedItem = contentTypeItemsQuery.data?.find(
-    (contentTypeItem) => contentTypeItem.documentId === related
+    (contentTypeItem) => mappedItem.type === "INTERNAL" ? contentTypeItem.documentId === mappedItem.related : false
   ) ?? { documentId: "", id: 0 };
   const isPublished = !!relatedItem?.publishedAt;
   const relatedItemLabel = !isExternal ? extractRelatedItemLabel(relatedItem, configQuery.data) : "";
@@ -52476,24 +52523,32 @@ const Item = ({
   const onNewItemClick = React.useCallback(
     (event) => canUpdate && onItemLevelAdd(
       event,
-      viewId,
+      mappedItem.viewId,
       isNextMenuAllowedLevel,
       absolutePath,
-      menuAttached,
-      `${structureId}.${items.length}`,
-      Math.max(...items.map(({ order }) => order))
+      mappedItem.menuAttached,
+      `${structureId}.${mappedItem.items?.length ?? 0}`,
+      Math.max(...mappedItem.items?.map(({ order }) => order) ?? [])
     ),
-    [viewId, isNextMenuAllowedLevel, absolutePath, menuAttached, structureId, items, canUpdate]
+    [
+      mappedItem.viewId,
+      isNextMenuAllowedLevel,
+      absolutePath,
+      mappedItem.menuAttached,
+      structureId,
+      mappedItem.items,
+      canUpdate
+    ]
   );
   React.useEffect(() => {
-    if (isSearchActive) {
+    if (mappedItem.isSearchActive) {
       refs.dropRef?.current?.scrollIntoView?.({
         behavior: "smooth",
         block: "center",
         inline: "center"
       });
     }
-  }, [isSearchActive, refs.dropRef.current]);
+  }, [mappedItem.isSearchActive, refs.dropRef.current]);
   const theme2 = styled.useTheme();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Wrapper$1,
@@ -52511,23 +52566,23 @@ const Item = ({
               zIndex: 1,
               position: "relative",
               overflow: "hidden",
-              backgroundColor: isSearchActive ? theme2.colors.secondary100 : void 0,
-              borderColor: isSearchActive ? theme2.colors.secondary200 : void 0,
+              backgroundColor: mappedItem.isSearchActive ? theme2.colors.secondary100 : void 0,
+              borderColor: mappedItem.isSearchActive ? theme2.colors.secondary200 : void 0,
               transition: "background-color 0.3s ease-in"
             },
             children: [
-              removed && /* @__PURE__ */ jsxRuntime.jsx(ItemCardRemovedOverlay, {}),
+              mappedItem.removed && /* @__PURE__ */ jsxRuntime.jsx(ItemCardRemovedOverlay, {}),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: refs.previewRef, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(CardBody, { children: /* @__PURE__ */ jsxRuntime.jsx(
                   ItemCardHeader,
                   {
                     title: item.title ?? "",
-                    path: isExternal ? externalPath : absolutePath,
-                    icon: isExternal ? /* @__PURE__ */ jsxRuntime.jsx(ForwardRef$3D, {}) : /* @__PURE__ */ jsxRuntime.jsx(ForwardRef$2l, {}),
+                    path: isExternal ? mappedItem.externalPath : absolutePath,
+                    icon: isExternal ? /* @__PURE__ */ jsxRuntime.jsx(ForwardRef$3D, {}) : isWrapper ? /* @__PURE__ */ jsxRuntime.jsx(ForwardRef$41, {}) : /* @__PURE__ */ jsxRuntime.jsx(ForwardRef$2l, {}),
                     onItemRemove: () => onItemRemove({ ...item, viewParentId }),
                     onItemEdit: () => {
-                      const [relatedType2, related2] = item.related?.split(RELATED_ITEM_SEPARATOR) ?? [];
-                      if (item.type !== "EXTERNAL" && item.type !== "INTERNAL") {
+                      const [relatedType, related] = item.related?.split(RELATED_ITEM_SEPARATOR) ?? [];
+                      if (item.type !== "EXTERNAL" && item.type !== "INTERNAL" && item.type !== "WRAPPER") {
                         return;
                       }
                       onItemEdit({
@@ -52537,15 +52592,15 @@ const Item = ({
                           isMenuAllowedLevel,
                           isParentAttachedToMenu,
                           isSearchActive: false,
-                          relatedType: relatedType2,
-                          related: related2,
+                          relatedType,
+                          related,
                           additionalFields: item.additionalFields ?? {},
                           items: item.items ?? [],
                           autoSync: item.autoSync ?? true,
                           externalPath: void 0,
                           viewParentId,
                           audience: item.audience?.map(({ documentId }) => documentId) ?? []
-                        } : {
+                        } : item.type === "EXTERNAL" ? {
                           ...item,
                           type: "EXTERNAL",
                           isMenuAllowedLevel,
@@ -52559,6 +52614,17 @@ const Item = ({
                           externalPath: item.externalPath ?? "",
                           viewParentId,
                           audience: item.audience?.map(({ documentId }) => documentId) ?? []
+                        } : {
+                          ...item,
+                          type: "WRAPPER",
+                          isMenuAllowedLevel,
+                          isParentAttachedToMenu,
+                          isSearchActive: false,
+                          additionalFields: item.additionalFields ?? {},
+                          items: item.items ?? [],
+                          autoSync: item.autoSync ?? true,
+                          viewParentId,
+                          audience: item.audience?.map(({ documentId }) => documentId) ?? []
                         },
                         levelPath,
                         isParentAttachedToMenu
@@ -52566,9 +52632,9 @@ const Item = ({
                     },
                     onItemRestore: () => onItemRestore({ ...item, viewParentId }),
                     dragRef: refs.dragRef,
-                    removed,
+                    removed: mappedItem.removed,
                     canUpdate,
-                    isSearchActive
+                    isSearchActive: mappedItem.isSearchActive
                   }
                 ) }),
                 /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
@@ -52585,21 +52651,29 @@ const Item = ({
                           CollapseButton,
                           {
                             toggle: () => onItemToggleCollapse({ ...item, viewParentId }),
-                            collapsed,
+                            collapsed: mappedItem.collapsed,
                             itemsCount: item.items?.length ?? 0
                           }
                         ),
-                        canUpdate && isNextMenuAllowedLevel && /* @__PURE__ */ jsxRuntime.jsx(TextButton, { disabled: removed, startIcon: /* @__PURE__ */ jsxRuntime.jsx(ForwardRef$1d, {}), onClick: onNewItemClick, children: /* @__PURE__ */ jsxRuntime.jsx(
-                          Typography,
+                        canUpdate && isNextMenuAllowedLevel && /* @__PURE__ */ jsxRuntime.jsx(
+                          TextButton,
                           {
-                            variant: "pi",
-                            fontWeight: "bold",
-                            textColor: removed ? "neutral600" : "primary600",
-                            children: formatMessage(getTrad("components.navigationItem.action.newItem"))
+                            disabled: mappedItem.removed,
+                            startIcon: /* @__PURE__ */ jsxRuntime.jsx(ForwardRef$1d, {}),
+                            onClick: onNewItemClick,
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              Typography,
+                              {
+                                variant: "pi",
+                                fontWeight: "bold",
+                                textColor: mappedItem.removed ? "neutral600" : "primary600",
+                                children: formatMessage(getTrad("components.navigationItem.action.newItem"))
+                              }
+                            )
                           }
-                        ) })
+                        )
                       ] }),
-                      related && !relatedItem.id ? /* @__PURE__ */ jsxRuntime.jsxs(Flex, { justifyContent: "center", alignItems: "center", children: [
+                      mappedItem.type === "INTERNAL" && mappedItem.related && !relatedItem.id ? /* @__PURE__ */ jsxRuntime.jsxs(Flex, { justifyContent: "center", alignItems: "center", children: [
                         /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "omega", textColor: "neutral600", children: [
                           relatedTypeLabel,
                           " / "
@@ -52643,7 +52717,7 @@ const Item = ({
             ]
           }
         ),
-        hasChildren && !removed && !collapsed && /* @__PURE__ */ jsxRuntime.jsx(
+        hasChildren && !mappedItem.removed && !mappedItem.collapsed && /* @__PURE__ */ jsxRuntime.jsx(
           List,
           {
             onItemLevelAdd,
@@ -52652,13 +52726,13 @@ const Item = ({
             onItemRestore,
             onItemReOrder,
             onItemToggleCollapse,
-            isParentAttachedToMenu: menuAttached,
+            isParentAttachedToMenu: mappedItem.menuAttached,
             items: item.items ?? [],
             level: level + 1,
             levelPath: absolutePath,
             permissions,
             structurePrefix: structureId,
-            viewParentId: viewId,
+            viewParentId: mappedItem.viewId,
             locale
           }
         )
@@ -52916,9 +52990,20 @@ const navigationExternalItemFormSchema = ({
   relatedType: z.z.string().optional(),
   related: z.z.string().optional()
 });
+const navigationWrapperItemFormSchema = ({
+  isSingleSelected,
+  additionalFields
+}) => navigationItemCommon({
+  additionalFields,
+  isSingleSelected
+}).extend({
+  type: z.z.literal("WRAPPER"),
+  path: z.z.string().or(z.z.null()).optional()
+});
 const navigationItemFormSchema = (input) => z.z.discriminatedUnion("type", [
   navigationExternalItemFormSchema(input),
-  navigationInternalItemFormSchema(input)
+  navigationInternalItemFormSchema(input),
+  navigationWrapperItemFormSchema(input)
 ]);
 const fallbackDefaultValues = {
   autoSync: true,
@@ -53029,7 +53114,9 @@ const NavigationItemForm = ({
   const { canUpdate } = permissions;
   const [isSingleSelected, setIsSingleSelected] = React.useState(false);
   const [itemLocaleCopyValue, setItemLocaleCopyValue] = React.useState();
-  const [formValue, setFormValue] = React.useState({});
+  const [formValue, setFormValue] = React.useState(
+    {}
+  );
   const [formError, setFormError] = React.useState();
   const configQuery = useConfig$1();
   const availableAudiences = configQuery.data?.availableAudience ?? [];
@@ -53053,13 +53140,19 @@ const NavigationItemForm = ({
     }
   };
   const setFormValueItem = (path, value) => {
-    setFormValue(lodash$1.set({
-      ...formValue,
-      additionalFields: {
-        ...formValue.additionalFields
-      },
-      updated: true
-    }, path, value));
+    setFormValue(
+      lodash$1.set(
+        {
+          ...formValue,
+          additionalFields: {
+            ...formValue.additionalFields
+          },
+          updated: true
+        },
+        path,
+        value
+      )
+    );
   };
   const encodePayload = (values) => {
     return {
@@ -53112,19 +53205,25 @@ const NavigationItemForm = ({
   const submit = async (e, values) => {
     e.preventDefault();
     const sanitizedValues = encodePayload(values);
-    const { success, data: payload, error } = navigationItemFormSchema({
+    const {
+      success,
+      data: payload,
+      error
+    } = navigationItemFormSchema({
       isSingleSelected,
       additionalFields: configQuery.data?.additionalFields ?? FALLBACK_ADDITIONAL_FIELDS
     }).safeParse(sanitizedValues);
     if (success) {
-      const title = !!payload.title.trim() ? payload.title : getDefaultTitle(payload?.related?.toString(), payload.relatedType, isSingleSelected);
+      const title = !!payload.title.trim() ? payload.title.trim() : payload.type === "INTERNAL" ? getDefaultTitle(payload?.related?.toString(), payload.relatedType, isSingleSelected) : "";
       setIsLoading(true);
-      const uiRouterKey = await generateUiRouterKey({
-        slugify: slugifyMutation.mutateAsync,
-        title,
-        related: payload.related,
-        relatedType: payload.relatedType
-      });
+      const uiRouterKey = await generateUiRouterKey(
+        payload.type === "INTERNAL" ? {
+          slugify: slugifyMutation.mutateAsync,
+          title,
+          related: payload.related,
+          relatedType: payload.relatedType
+        } : { slugify: slugifyMutation.mutateAsync, title }
+      );
       slugifyMutation.reset();
       setIsLoading(false);
       if (!uiRouterKey) {
@@ -53146,12 +53245,14 @@ const NavigationItemForm = ({
         }
       );
     } else if (error) {
-      setFormError(error.issues.reduce((acc, err) => {
-        return {
-          ...acc,
-          [err.path.join(".")]: err.message
-        };
-      }, {}));
+      setFormError(
+        error.issues.reduce((acc, err) => {
+          return {
+            ...acc,
+            [err.path.join(".")]: err.message
+          };
+        }, {})
+      );
     }
   };
   const renderError = (error) => {
@@ -53161,18 +53262,21 @@ const NavigationItemForm = ({
     }
     return void 0;
   };
-  const initialRelatedTypeSelected = current.relatedType;
+  const initialRelatedTypeSelected = current.type === "INTERNAL" ? current.relatedType : void 0;
   const {
-    relatedType: currentRelatedType,
-    related: currentRelated,
     path: currentPath,
     type: currentType,
     title: currentTitle,
     autoSync: autoSyncEnabled
   } = formValue;
+  const { relatedType: currentRelatedType, related: currentRelated } = formValue.type === "INTERNAL" ? formValue : {
+    related: void 0,
+    relatedType: void 0
+  };
   const isExternal = currentType === "EXTERNAL";
+  const isInternal = currentType === "INTERNAL";
   const pathSourceName = isExternal ? "externalPath" : "path";
-  const submitDisabled = !isExternal && !isSingleSelected && lodash$1.isNil(currentRelated) || isLoading;
+  const submitDisabled = isInternal && !isSingleSelected && lodash$1.isNil(currentRelated) || isLoading;
   const contentTypeItemsQuery = useContentTypeItems({
     uid: currentRelatedType ?? "",
     locale
@@ -53216,7 +53320,7 @@ const NavigationItemForm = ({
     },
     [contentTypeItemsQuery.data, configQuery.data, contentTypes]
   );
-  const navigationItemTypeOptions = ["INTERNAL", "EXTERNAL"].map((key) => {
+  const navigationItemTypeOptions = ["INTERNAL", "EXTERNAL", "WRAPPER"].map((key) => {
     return {
       key,
       value: key,
@@ -53267,9 +53371,7 @@ const NavigationItemForm = ({
     async (event) => {
       event.preventDefault();
       event.stopPropagation();
-      const source = navigationsQuery.data?.find(
-        ({ locale: locale2 }) => locale2 === itemLocaleCopyValue
-      );
+      const source = navigationsQuery.data?.find(({ locale: locale2 }) => locale2 === itemLocaleCopyValue);
       if (source) {
         setIsLoading(true);
         copyItemFromLocaleMutation.mutate(
@@ -53303,10 +53405,12 @@ const NavigationItemForm = ({
     [setIsLoading, copyItemFromLocaleMutation, navigationsQuery]
   );
   React.useEffect(() => {
-    setFormValue(decodePayload({
-      ...fallbackDefaultValues,
-      ...current
-    }));
+    setFormValue(
+      decodePayload({
+        ...fallbackDefaultValues,
+        ...current
+      })
+    );
   }, [current]);
   React.useEffect(() => {
     if (currentRelatedType) {
@@ -53365,51 +53469,60 @@ const NavigationItemForm = ({
     contentTypeItemsQuery.data
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      admin.Form,
-      {
-        method: "POST",
-        initialValues: formValue,
-        children: ({ values, onChange }) => {
-          const pathDefault = generatePreviewPath({
-            currentPath: values.path,
-            isExternal: values.type === "EXTERNAL",
-            current,
-            currentType: values.type,
-            config: configQuery.data,
-            contentTypeItems: contentTypeItemsQuery.data,
-            currentRelated: values.related,
-            currentRelatedType: values.relatedType,
-            isSingleSelected
-          });
-          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(Grid.Root, { gap: 5, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Grid.Item, { alignItems: "flex-start", col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-                Field,
+    /* @__PURE__ */ jsxRuntime.jsx(Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(admin.Form, { method: "POST", initialValues: formValue, children: ({ values, onChange }) => {
+      const internalValues = values.type === "INTERNAL" ? values : {
+        related: void 0,
+        relatedType: void 0
+      };
+      const pathDefault = generatePreviewPath({
+        currentPath: values.path,
+        isExternal: values.type === "EXTERNAL",
+        current,
+        currentType: values.type,
+        config: configQuery.data,
+        contentTypeItems: contentTypeItemsQuery.data,
+        currentRelated: internalValues.related,
+        currentRelatedType: internalValues.relatedType,
+        isSingleSelected
+      });
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Grid.Root, { gap: 5, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Grid.Item, { alignItems: "flex-start", col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+            Field,
+            {
+              name: "title",
+              label: formatMessage(getTrad("popup.item.form.title.label", "Title")),
+              error: renderError("title"),
+              hint: formatMessage(
+                getTrad("popup.item.form.title.placeholder", "e.g. Blog")
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                TextInput,
                 {
+                  type: "string",
+                  disabled: !canUpdate || values.autoSync && values.type === "INTERNAL",
                   name: "title",
-                  label: formatMessage(getTrad("popup.item.form.title.label", "Title")),
-                  error: renderError("title"),
-                  hint: formatMessage(getTrad("popup.item.form.title.placeholder", "e.g. Blog")),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    TextInput,
-                    {
-                      type: "string",
-                      disabled: !canUpdate || values.autoSync && values.type === "INTERNAL",
-                      name: "title",
-                      onChange: (eventOrPath, value) => handleChange(eventOrPath, value, onChange),
-                      value: values.title
-                    }
-                  )
+                  onChange: (eventOrPath, value) => handleChange(eventOrPath, value, onChange),
+                  value: values.title
                 }
-              ) }, "title"),
-              /* @__PURE__ */ jsxRuntime.jsx(Grid.Item, { alignItems: "flex-start", col: values.type === "INTERNAL" ? 4 : 7, lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+              )
+            }
+          ) }, "title"),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Grid.Item,
+            {
+              alignItems: "flex-start",
+              col: values.type === "INTERNAL" ? 4 : 7,
+              lg: 12,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
                 Field,
                 {
                   name: "type",
                   label: formatMessage(getTrad("popup.item.form.type.label", "Internal link")),
                   error: renderError("type"),
-                  hint: formatMessage(getTrad("popup.item.form.title.placeholder", "e.g. Blog")),
+                  hint: formatMessage(
+                    getTrad("popup.item.form.title.placeholder", "e.g. Blog")
+                  ),
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     SingleSelect,
                     {
@@ -53422,12 +53535,23 @@ const NavigationItemForm = ({
                     }
                   )
                 }
-              ) }, "type"),
-              /* @__PURE__ */ jsxRuntime.jsx(Grid.Item, { alignItems: "flex-start", col: values.type === "INTERNAL" ? 4 : 5, lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+              )
+            },
+            "type"
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Grid.Item,
+            {
+              alignItems: "flex-start",
+              col: values.type === "INTERNAL" ? 4 : 5,
+              lg: 12,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
                 Field,
                 {
                   name: "menuAttached",
-                  label: formatMessage(getTrad("popup.item.form.menuAttached.label", "MenuAttached")),
+                  label: formatMessage(
+                    getTrad("popup.item.form.menuAttached.label", "MenuAttached")
+                  ),
                   error: renderError("menuAttached"),
                   hint: formatMessage(
                     getTrad(
@@ -53449,134 +53573,149 @@ const NavigationItemForm = ({
                     }
                   )
                 }
-              ) }, "menuAttached"),
-              values.type === "INTERNAL" && /* @__PURE__ */ jsxRuntime.jsx(Grid.Item, { alignItems: "flex-start", col: 4, lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-                Field,
+              )
+            },
+            "menuAttached"
+          ),
+          values.type === "INTERNAL" && /* @__PURE__ */ jsxRuntime.jsx(Grid.Item, { alignItems: "flex-start", col: 4, lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+            Field,
+            {
+              name: "autoSync",
+              label: formatMessage(
+                getTrad("popup.item.form.autoSync.label", "Read fields from related")
+              ),
+              error: renderError("autoSync"),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                Toggle,
                 {
                   name: "autoSync",
-                  label: formatMessage(
-                    getTrad("popup.item.form.autoSync.label", "Read fields from related")
-                  ),
-                  error: renderError("autoSync"),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    Toggle,
-                    {
-                      name: "autoSync",
-                      checked: values.autoSync,
-                      onChange: (eventOrPath) => handleChange(eventOrPath, !values.autoSync, onChange),
-                      onLabel: "Enabled",
-                      offLabel: "Disabled"
-                    }
-                  )
+                  checked: values.autoSync,
+                  onChange: (eventOrPath) => handleChange(eventOrPath, !values.autoSync, onChange),
+                  onLabel: "Enabled",
+                  offLabel: "Disabled"
                 }
-              ) }, "autoSync"),
-              /* @__PURE__ */ jsxRuntime.jsx(Grid.Item, { alignItems: "flex-start", col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-                Field,
+              )
+            }
+          ) }, "autoSync"),
+          /* @__PURE__ */ jsxRuntime.jsx(Grid.Item, { alignItems: "flex-start", col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+            Field,
+            {
+              name: pathSourceName,
+              label: formatMessage(
+                getTrad(`popup.item.form.${pathSourceName}.label`, "Path")
+              ),
+              error: renderError(pathSourceName),
+              hint: [
+                formatMessage(
+                  getTrad(`popup.item.form.${pathSourceName}.placeholder`, "e.g. Blog")
+                ),
+                pathDefault ? formatMessage(getTrad("popup.item.form.type.external.description"), {
+                  value: pathDefault
+                }) : ""
+              ].join(" "),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                TextInput,
                 {
+                  disabled: !canUpdate,
                   name: pathSourceName,
-                  label: formatMessage(getTrad(`popup.item.form.${pathSourceName}.label`, "Path")),
-                  error: renderError(pathSourceName),
-                  hint: [
-                    formatMessage(
-                      getTrad(`popup.item.form.${pathSourceName}.placeholder`, "e.g. Blog")
-                    ),
-                    pathDefault ? formatMessage(getTrad("popup.item.form.type.external.description"), {
-                      value: pathDefault
-                    }) : ""
-                  ].join(" "),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    TextInput,
-                    {
-                      disabled: !canUpdate,
-                      name: pathSourceName,
-                      onChange: (eventOrPath, value) => handleChange(eventOrPath, value, onChange),
-                      value: values[pathSourceName],
-                      width: "100%"
-                    }
-                  )
+                  onChange: (eventOrPath, value) => handleChange(eventOrPath, value, onChange),
+                  value: values[pathSourceName],
+                  width: "100%"
                 }
-              ) }, pathSourceName),
-              values.type === "INTERNAL" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Grid.Item, { alignItems: "flex-start", col: 6, lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  Field,
+              )
+            }
+          ) }, pathSourceName),
+          values.type === "INTERNAL" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Grid.Item, { alignItems: "flex-start", col: 6, lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+              Field,
+              {
+                name: "relatedType",
+                label: formatMessage(
+                  getTrad("popup.item.form.relatedType.label", "Related Type")
+                ),
+                error: renderError("relatedType"),
+                hint: !isLoading && lodash$1.isEmpty(relatedTypeSelectOptions) ? formatMessage(
+                  getTrad(
+                    "popup.item.form.relatedType.empty",
+                    "There are no more content types"
+                  )
+                ) : void 0,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  SingleSelect,
                   {
                     name: "relatedType",
-                    label: formatMessage(getTrad("popup.item.form.relatedType.label", "Related Type")),
-                    error: renderError("relatedType"),
-                    hint: !isLoading && lodash$1.isEmpty(relatedTypeSelectOptions) ? formatMessage(
-                      getTrad(
-                        "popup.item.form.relatedType.empty",
-                        "There are no more content types"
-                      )
-                    ) : void 0,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      SingleSelect,
-                      {
-                        name: "relatedType",
-                        onChange: (eventOrPath) => handleChange("relatedType", eventOrPath, onChange),
-                        value: values.relatedType,
-                        disabled: !configQuery.data?.contentTypes.length || !canUpdate,
-                        width: "100%",
-                        children: configQuery.data?.contentTypes.map((contentType2) => /* @__PURE__ */ jsxRuntime.jsx(SingleSelectOption, { value: contentType2.uid, children: contentType2.contentTypeName }, contentType2.uid))
-                      }
-                    )
+                    onChange: (eventOrPath) => handleChange("relatedType", eventOrPath, onChange),
+                    value: values.relatedType,
+                    disabled: !configQuery.data?.contentTypes.length || !canUpdate,
+                    width: "100%",
+                    children: configQuery.data?.contentTypes.map((contentType2) => /* @__PURE__ */ jsxRuntime.jsx(SingleSelectOption, { value: contentType2.uid, children: contentType2.contentTypeName }, contentType2.uid))
                   }
-                ) }),
-                values.relatedType && !isSingleSelected && /* @__PURE__ */ jsxRuntime.jsx(Grid.Item, { alignItems: "flex-start", col: 6, lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  Field,
+                )
+              }
+            ) }),
+            values.relatedType && !isSingleSelected && /* @__PURE__ */ jsxRuntime.jsx(Grid.Item, { alignItems: "flex-start", col: 6, lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+              Field,
+              {
+                name: "related",
+                label: formatMessage(
+                  getTrad("popup.item.form.related.label", "Related")
+                ),
+                error: renderError("related"),
+                hint: !isLoading && thereAreNoMoreContentTypes ? formatMessage(
+                  getTrad(
+                    "popup.item.form.related.empty",
+                    "There are no more entities"
+                  ),
+                  { contentTypeName: values.relatedType }
+                ) : void 0,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  SingleSelect,
                   {
                     name: "related",
-                    label: formatMessage(getTrad("popup.item.form.related.label", "Related")),
-                    error: renderError("related"),
-                    hint: !isLoading && thereAreNoMoreContentTypes ? formatMessage(
-                      getTrad(
-                        "popup.item.form.related.empty",
-                        "There are no more entities"
-                      ),
-                      { contentTypeName: values.relatedType }
+                    onChange: (eventOrPath) => handleChange("related", eventOrPath, onChange),
+                    value: values.related,
+                    options: relatedSelectOptions,
+                    disabled: isLoading || thereAreNoMoreContentTypes || !canUpdate,
+                    width: "100%",
+                    children: relatedSelectOptions.map(({ key, label, value }) => /* @__PURE__ */ jsxRuntime.jsx(SingleSelectOption, { value, children: label }, key))
+                  }
+                )
+              }
+            ) })
+          ] }),
+          !lodash$1.isEmpty(configQuery.data?.additionalFields) && /* @__PURE__ */ jsxRuntime.jsx(Grid.Item, { col: 12, lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(Divider, { width: "100%" }) }),
+          configQuery.data?.additionalFields.map(
+            (additionalField, index2) => {
+              if (additionalField === "audience") {
+                return /* @__PURE__ */ jsxRuntime.jsx(Grid.Item, { alignItems: "flex-start", col: 6, lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Field,
+                  {
+                    name: "audience",
+                    label: formatMessage(getTrad("popup.item.form.audience.label")),
+                    error: renderError("audience"),
+                    hint: !isLoading && lodash$1.isEmpty(audienceOptions) ? formatMessage(
+                      getTrad("popup.item.form.title.placeholder", "e.g. Blog")
                     ) : void 0,
                     children: /* @__PURE__ */ jsxRuntime.jsx(
-                      SingleSelect,
+                      MultiSelect,
                       {
-                        name: "related",
-                        onChange: (eventOrPath) => handleChange("related", eventOrPath, onChange),
-                        value: values.related,
-                        options: relatedSelectOptions,
-                        disabled: isLoading || thereAreNoMoreContentTypes || !canUpdate,
+                        name: "audience",
+                        value: values.audience,
+                        onChange: (eventOrPath) => handleChange("audience", eventOrPath, onChange),
                         width: "100%",
-                        children: relatedSelectOptions.map(({ key, label, value }) => /* @__PURE__ */ jsxRuntime.jsx(SingleSelectOption, { value, children: label }, key))
+                        children: audienceOptions.map(({ value, label }) => /* @__PURE__ */ jsxRuntime.jsx(MultiSelectOption, { value, children: label }, value))
                       }
                     )
                   }
-                ) })
-              ] }),
-              !lodash$1.isEmpty(configQuery.data?.additionalFields) && /* @__PURE__ */ jsxRuntime.jsx(Grid.Item, { col: 12, lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(Divider, { width: "100%" }) }),
-              configQuery.data?.additionalFields.map(
-                (additionalField, index2) => {
-                  if (additionalField === "audience") {
-                    return /* @__PURE__ */ jsxRuntime.jsx(Grid.Item, { alignItems: "flex-start", col: 6, lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-                      Field,
-                      {
-                        name: "audience",
-                        label: formatMessage(getTrad("popup.item.form.audience.label")),
-                        error: renderError("audience"),
-                        hint: !isLoading && lodash$1.isEmpty(audienceOptions) ? formatMessage(
-                          getTrad("popup.item.form.title.placeholder", "e.g. Blog")
-                        ) : void 0,
-                        children: /* @__PURE__ */ jsxRuntime.jsx(
-                          MultiSelect,
-                          {
-                            name: "audience",
-                            value: values.audience,
-                            onChange: (eventOrPath) => handleChange("audience", eventOrPath, onChange),
-                            width: "100%",
-                            children: audienceOptions.map(({ value, label }) => /* @__PURE__ */ jsxRuntime.jsx(MultiSelectOption, { value, children: label }, value))
-                          }
-                        )
-                      }
-                    ) }, "audience");
-                  } else {
-                    return /* @__PURE__ */ jsxRuntime.jsx(Grid.Item, { alignItems: "flex-start", col: 6, lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+                ) }, "audience");
+              } else {
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  Grid.Item,
+                  {
+                    alignItems: "flex-start",
+                    col: 6,
+                    lg: 12,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
                       Field,
                       {
                         name: `additionalFields.${additionalField.name}`,
@@ -53595,49 +53734,52 @@ const NavigationItemForm = ({
                           }
                         )
                       }
-                    ) }, additionalField.name);
-                  }
-                }
-              )
-            ] }),
-            availableLocaleOptions && availableLocaleOptions.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Divider, { marginTop: 5, marginBottom: 5 }),
-              /* @__PURE__ */ jsxRuntime.jsxs(Grid.Root, { gap: 5, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Grid.Item, { alignItems: "flex-start", col: 6, lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  Field,
-                  {
-                    name: "i18n.locale",
-                    label: formatMessage(getTrad("popup.item.form.i18n.locale.label", "Copy details from")),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      SingleSelect,
-                      {
-                        name: "i18n.locale",
-                        onChange: setItemLocaleCopyValue,
-                        value: itemLocaleCopyValue,
-                        disabled: isLoading || !canUpdate,
-                        placeholder: formatMessage(
-                          getTrad("popup.item.form.i18n.locale.placeholder", "locale")
-                        ),
-                        children: availableLocaleOptions.map(({ key, label, value }) => /* @__PURE__ */ jsxRuntime.jsx(SingleSelectOption, { value, children: label }, key))
-                      }
                     )
-                  }
-                ) }),
-                canUpdate && /* @__PURE__ */ jsxRuntime.jsx(Grid.Item, { alignItems: "flex-start", col: 6, lg: 12, paddingTop: 6, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                  Button,
+                  },
+                  additionalField.name
+                );
+              }
+            }
+          )
+        ] }),
+        availableLocaleOptions && availableLocaleOptions.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Divider, { marginTop: 5, marginBottom: 5 }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Grid.Root, { gap: 5, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Grid.Item, { alignItems: "flex-start", col: 6, lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+              Field,
+              {
+                name: "i18n.locale",
+                label: formatMessage(
+                  getTrad("popup.item.form.i18n.locale.label", "Copy details from")
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  SingleSelect,
                   {
-                    variant: "tertiary",
-                    onClick: onCopyFromLocale,
-                    disabled: isLoading || !itemLocaleCopyValue,
-                    children: formatMessage(getTrad("popup.item.form.i18n.locale.button"))
+                    name: "i18n.locale",
+                    onChange: setItemLocaleCopyValue,
+                    value: itemLocaleCopyValue,
+                    disabled: isLoading || !canUpdate,
+                    placeholder: formatMessage(
+                      getTrad("popup.item.form.i18n.locale.placeholder", "locale")
+                    ),
+                    children: availableLocaleOptions.map(({ key, label, value }) => /* @__PURE__ */ jsxRuntime.jsx(SingleSelectOption, { value, children: label }, key))
                   }
-                ) }) })
-              ] })
-            ] })
-          ] });
-        }
-      }
-    ) }),
+                )
+              }
+            ) }),
+            canUpdate && /* @__PURE__ */ jsxRuntime.jsx(Grid.Item, { alignItems: "flex-start", col: 6, lg: 12, paddingTop: 6, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "tertiary",
+                onClick: onCopyFromLocale,
+                disabled: isLoading || !itemLocaleCopyValue,
+                children: formatMessage(getTrad("popup.item.form.i18n.locale.button"))
+              }
+            ) }) })
+          ] })
+        ] })
+      ] });
+    } }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       NavigationItemPopupFooter,
       {