@mattisvensson/strapi-plugin-webatlas 0.3.0 → 0.4.0

package/dist/_chunks/{index-C7B8QHDT.mjs → index-DJ-Du5aY.mjs}

@@ -1,13 +1,13 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { Trash, Pencil, Check, Drag, More, Link, OneToMany, ExternalLink, Plus } from "@strapi/icons";
 import { Dialog, Typography, Button, Modal, Flex, SingleSelect, SingleSelectOption, Grid, Box, Field, Toggle, Divider, Status, SimpleMenu, IconButton, MenuItem } from "@strapi/design-system";
-import { useFetchClient, Layouts } from "@strapi/strapi/admin";
 import { useState, useEffect, createContext, useRef, useContext, useReducer, useCallback, useMemo, forwardRef } from "react";
 import { createPortal } from "react-dom";
-import { u as useApi, g as getTranslation, d as debounce, a as duplicateCheck, t as transformToUrl, U as URLInfo } from "./index-CCiDvLAC.mjs";
 import { useIntl } from "react-intl";
-import { C as Center, E as EmptyBox } from "./EmptyBox-7D4LrvdH.mjs";
-import { c as commonjsGlobal, _ as _baseConvert } from "./_baseConvert-C2SW1VHq.mjs";
+import { u as useApi, g as getTranslation, d as debounce, a as duplicateCheck, t as transformToUrl, U as URLInfo } from "./index-DUxYbDKG.mjs";
+import { useFetchClient, Page, Layouts, useNotification } from "@strapi/strapi/admin";
+import { C as Center, F as FullLoader } from "./FullLoader-CrPED_dY.mjs";
+import { E as EmptyBox } from "./EmptyBox-BM4IscSk.mjs";
 import { MeasuringStrategy, DndContext, closestCenter, DragOverlay } from "@dnd-kit/core";
 import { arrayMove, useSortable, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
@@ -31,36 +31,74 @@ const useAllEntities = () => {
   }, []);
   return { entities, loading, error };
 };
-function useNavigations() {
-  const { get } = useFetchClient();
-  const [navigations, setNavigations] = useState([]);
-  const fetchNavigations = async () => {
-    const { data } = await get("/webatlas/navigation");
-    setNavigations(data || []);
+function createTempNavItemObject({
+  parentId,
+  entityRoute,
+  selectedNavigation,
+  navItemState,
+  selectedEntity,
+  selectedContentType,
+  path,
+  wrapper = false,
+  internal = true
+}) {
+  const tempNavItem = {
+    id: Math.floor(Math.random() * -1e6),
+    // Temporary negative ID
+    documentId: `temp-${Date.now()}`,
+    createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+    updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    depth: 0,
+    status: null,
+    order: 0,
+    parent: parentId ? { documentId: parentId } : null,
+    items: [],
+    isNew: {
+      route: entityRoute?.documentId ?? null,
+      parent: parentId ?? null,
+      navigation: selectedNavigation?.documentId ?? null
+    },
+    route: {
+      active: navItemState.active || false,
+      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+      documentId: "",
+      documentIdPath: selectedEntity ? selectedEntity.documentId : "",
+      fullPath: path?.value || "",
+      id: 0,
+      internal,
+      isOverride: navItemState.isOverride || false,
+      relatedContentType: selectedContentType ? JSON.stringify(selectedContentType.contentType) : "",
+      relatedDocumentId: selectedEntity ? selectedEntity.documentId : "",
+      relatedId: selectedEntity ? selectedEntity.id : 0,
+      slug: path?.value || "",
+      title: navItemState.title || "",
+      uidPath: path?.uidPath || "",
+      updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      wrapper,
+      navitem: null
+    }
   };
-  useEffect(() => {
-    fetchNavigations();
-  }, []);
-  return { navigations, fetchNavigations };
+  return tempNavItem;
 }
 const ModalContext = createContext({ modalType: "", setModalType: () => {
 } });
 const SelectedNavigationContext = createContext({ selectedNavigation: void 0, setSelectedNavigation: () => {
 } });
-function Delete({ variant, item, fetchNavigations }) {
-  const { deleteNavigation, deleteNavItem } = useApi();
+function Delete({ variant, item, onDelete }) {
   const itemName = useRef(variant === "NavDelete" ? item.name : item.route.title);
   const closeModalState = useRef(variant === "NavDelete" ? "NavOverview" : "");
   const { setModalType } = useContext(ModalContext);
   const { formatMessage } = useIntl();
   const handleDelete = async () => {
     try {
-      if (variant === "NavDelete") await deleteNavigation(item.documentId);
-      else await deleteNavItem(item.documentId);
+      if (variant === "NavDelete") {
+      } else if (variant === "ItemDelete") {
+        const editedItem = { ...item, deleted: true };
+        onDelete(editedItem);
+      }
     } catch (err) {
       console.log(err);
     }
-    fetchNavigations();
     setModalType(closeModalState.current);
   };
   return /* @__PURE__ */ jsx(Dialog.Root, { defaultOpen: true, onClose: () => setModalType(closeModalState.current), children: /* @__PURE__ */ jsxs(Dialog.Content, { children: [
@@ -216,7 +254,7 @@ function NavCreate() {
     }
   );
 }
-function NavEdit({ item, fetchNavigations }) {
+function NavEdit({ item, onEdit }) {
   const { setModalType } = useContext(ModalContext);
   const [name, setName] = useState(item.name);
   const [visible, setVisible] = useState(item.visible);
@@ -227,8 +265,8 @@ function NavEdit({ item, fetchNavigations }) {
     setLoading(true);
     try {
       await updateNavigation(item.documentId, { name, visible });
-      fetchNavigations();
       setModalType("NavOverview");
+      onEdit();
     } catch (err) {
       console.log(err);
     } finally {
@@ -373,6 +411,7 @@ function NavOverview({ navigations, setActionItem }) {
     }
   );
 }
+var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var lodash_min = { exports: {} };
 /**
  * @license
@@ -3488,6 +3527,829 @@ lodash_min.exports;
   }).call(commonjsGlobal);
 })(lodash_min, lodash_min.exports);
 var lodash_minExports = lodash_min.exports;
+var _mapping = {};
+(function(exports) {
+  exports.aliasToReal = {
+    // Lodash aliases.
+    "each": "forEach",
+    "eachRight": "forEachRight",
+    "entries": "toPairs",
+    "entriesIn": "toPairsIn",
+    "extend": "assignIn",
+    "extendAll": "assignInAll",
+    "extendAllWith": "assignInAllWith",
+    "extendWith": "assignInWith",
+    "first": "head",
+    // Methods that are curried variants of others.
+    "conforms": "conformsTo",
+    "matches": "isMatch",
+    "property": "get",
+    // Ramda aliases.
+    "__": "placeholder",
+    "F": "stubFalse",
+    "T": "stubTrue",
+    "all": "every",
+    "allPass": "overEvery",
+    "always": "constant",
+    "any": "some",
+    "anyPass": "overSome",
+    "apply": "spread",
+    "assoc": "set",
+    "assocPath": "set",
+    "complement": "negate",
+    "compose": "flowRight",
+    "contains": "includes",
+    "dissoc": "unset",
+    "dissocPath": "unset",
+    "dropLast": "dropRight",
+    "dropLastWhile": "dropRightWhile",
+    "equals": "isEqual",
+    "identical": "eq",
+    "indexBy": "keyBy",
+    "init": "initial",
+    "invertObj": "invert",
+    "juxt": "over",
+    "omitAll": "omit",
+    "nAry": "ary",
+    "path": "get",
+    "pathEq": "matchesProperty",
+    "pathOr": "getOr",
+    "paths": "at",
+    "pickAll": "pick",
+    "pipe": "flow",
+    "pluck": "map",
+    "prop": "get",
+    "propEq": "matchesProperty",
+    "propOr": "getOr",
+    "props": "at",
+    "symmetricDifference": "xor",
+    "symmetricDifferenceBy": "xorBy",
+    "symmetricDifferenceWith": "xorWith",
+    "takeLast": "takeRight",
+    "takeLastWhile": "takeRightWhile",
+    "unapply": "rest",
+    "unnest": "flatten",
+    "useWith": "overArgs",
+    "where": "conformsTo",
+    "whereEq": "isMatch",
+    "zipObj": "zipObject"
+  };
+  exports.aryMethod = {
+    "1": [
+      "assignAll",
+      "assignInAll",
+      "attempt",
+      "castArray",
+      "ceil",
+      "create",
+      "curry",
+      "curryRight",
+      "defaultsAll",
+      "defaultsDeepAll",
+      "floor",
+      "flow",
+      "flowRight",
+      "fromPairs",
+      "invert",
+      "iteratee",
+      "memoize",
+      "method",
+      "mergeAll",
+      "methodOf",
+      "mixin",
+      "nthArg",
+      "over",
+      "overEvery",
+      "overSome",
+      "rest",
+      "reverse",
+      "round",
+      "runInContext",
+      "spread",
+      "template",
+      "trim",
+      "trimEnd",
+      "trimStart",
+      "uniqueId",
+      "words",
+      "zipAll"
+    ],
+    "2": [
+      "add",
+      "after",
+      "ary",
+      "assign",
+      "assignAllWith",
+      "assignIn",
+      "assignInAllWith",
+      "at",
+      "before",
+      "bind",
+      "bindAll",
+      "bindKey",
+      "chunk",
+      "cloneDeepWith",
+      "cloneWith",
+      "concat",
+      "conformsTo",
+      "countBy",
+      "curryN",
+      "curryRightN",
+      "debounce",
+      "defaults",
+      "defaultsDeep",
+      "defaultTo",
+      "delay",
+      "difference",
+      "divide",
+      "drop",
+      "dropRight",
+      "dropRightWhile",
+      "dropWhile",
+      "endsWith",
+      "eq",
+      "every",
+      "filter",
+      "find",
+      "findIndex",
+      "findKey",
+      "findLast",
+      "findLastIndex",
+      "findLastKey",
+      "flatMap",
+      "flatMapDeep",
+      "flattenDepth",
+      "forEach",
+      "forEachRight",
+      "forIn",
+      "forInRight",
+      "forOwn",
+      "forOwnRight",
+      "get",
+      "groupBy",
+      "gt",
+      "gte",
+      "has",
+      "hasIn",
+      "includes",
+      "indexOf",
+      "intersection",
+      "invertBy",
+      "invoke",
+      "invokeMap",
+      "isEqual",
+      "isMatch",
+      "join",
+      "keyBy",
+      "lastIndexOf",
+      "lt",
+      "lte",
+      "map",
+      "mapKeys",
+      "mapValues",
+      "matchesProperty",
+      "maxBy",
+      "meanBy",
+      "merge",
+      "mergeAllWith",
+      "minBy",
+      "multiply",
+      "nth",
+      "omit",
+      "omitBy",
+      "overArgs",
+      "pad",
+      "padEnd",
+      "padStart",
+      "parseInt",
+      "partial",
+      "partialRight",
+      "partition",
+      "pick",
+      "pickBy",
+      "propertyOf",
+      "pull",
+      "pullAll",
+      "pullAt",
+      "random",
+      "range",
+      "rangeRight",
+      "rearg",
+      "reject",
+      "remove",
+      "repeat",
+      "restFrom",
+      "result",
+      "sampleSize",
+      "some",
+      "sortBy",
+      "sortedIndex",
+      "sortedIndexOf",
+      "sortedLastIndex",
+      "sortedLastIndexOf",
+      "sortedUniqBy",
+      "split",
+      "spreadFrom",
+      "startsWith",
+      "subtract",
+      "sumBy",
+      "take",
+      "takeRight",
+      "takeRightWhile",
+      "takeWhile",
+      "tap",
+      "throttle",
+      "thru",
+      "times",
+      "trimChars",
+      "trimCharsEnd",
+      "trimCharsStart",
+      "truncate",
+      "union",
+      "uniqBy",
+      "uniqWith",
+      "unset",
+      "unzipWith",
+      "without",
+      "wrap",
+      "xor",
+      "zip",
+      "zipObject",
+      "zipObjectDeep"
+    ],
+    "3": [
+      "assignInWith",
+      "assignWith",
+      "clamp",
+      "differenceBy",
+      "differenceWith",
+      "findFrom",
+      "findIndexFrom",
+      "findLastFrom",
+      "findLastIndexFrom",
+      "getOr",
+      "includesFrom",
+      "indexOfFrom",
+      "inRange",
+      "intersectionBy",
+      "intersectionWith",
+      "invokeArgs",
+      "invokeArgsMap",
+      "isEqualWith",
+      "isMatchWith",
+      "flatMapDepth",
+      "lastIndexOfFrom",
+      "mergeWith",
+      "orderBy",
+      "padChars",
+      "padCharsEnd",
+      "padCharsStart",
+      "pullAllBy",
+      "pullAllWith",
+      "rangeStep",
+      "rangeStepRight",
+      "reduce",
+      "reduceRight",
+      "replace",
+      "set",
+      "slice",
+      "sortedIndexBy",
+      "sortedLastIndexBy",
+      "transform",
+      "unionBy",
+      "unionWith",
+      "update",
+      "xorBy",
+      "xorWith",
+      "zipWith"
+    ],
+    "4": [
+      "fill",
+      "setWith",
+      "updateWith"
+    ]
+  };
+  exports.aryRearg = {
+    "2": [1, 0],
+    "3": [2, 0, 1],
+    "4": [3, 2, 0, 1]
+  };
+  exports.iterateeAry = {
+    "dropRightWhile": 1,
+    "dropWhile": 1,
+    "every": 1,
+    "filter": 1,
+    "find": 1,
+    "findFrom": 1,
+    "findIndex": 1,
+    "findIndexFrom": 1,
+    "findKey": 1,
+    "findLast": 1,
+    "findLastFrom": 1,
+    "findLastIndex": 1,
+    "findLastIndexFrom": 1,
+    "findLastKey": 1,
+    "flatMap": 1,
+    "flatMapDeep": 1,
+    "flatMapDepth": 1,
+    "forEach": 1,
+    "forEachRight": 1,
+    "forIn": 1,
+    "forInRight": 1,
+    "forOwn": 1,
+    "forOwnRight": 1,
+    "map": 1,
+    "mapKeys": 1,
+    "mapValues": 1,
+    "partition": 1,
+    "reduce": 2,
+    "reduceRight": 2,
+    "reject": 1,
+    "remove": 1,
+    "some": 1,
+    "takeRightWhile": 1,
+    "takeWhile": 1,
+    "times": 1,
+    "transform": 2
+  };
+  exports.iterateeRearg = {
+    "mapKeys": [1],
+    "reduceRight": [1, 0]
+  };
+  exports.methodRearg = {
+    "assignInAllWith": [1, 0],
+    "assignInWith": [1, 2, 0],
+    "assignAllWith": [1, 0],
+    "assignWith": [1, 2, 0],
+    "differenceBy": [1, 2, 0],
+    "differenceWith": [1, 2, 0],
+    "getOr": [2, 1, 0],
+    "intersectionBy": [1, 2, 0],
+    "intersectionWith": [1, 2, 0],
+    "isEqualWith": [1, 2, 0],
+    "isMatchWith": [2, 1, 0],
+    "mergeAllWith": [1, 0],
+    "mergeWith": [1, 2, 0],
+    "padChars": [2, 1, 0],
+    "padCharsEnd": [2, 1, 0],
+    "padCharsStart": [2, 1, 0],
+    "pullAllBy": [2, 1, 0],
+    "pullAllWith": [2, 1, 0],
+    "rangeStep": [1, 2, 0],
+    "rangeStepRight": [1, 2, 0],
+    "setWith": [3, 1, 2, 0],
+    "sortedIndexBy": [2, 1, 0],
+    "sortedLastIndexBy": [2, 1, 0],
+    "unionBy": [1, 2, 0],
+    "unionWith": [1, 2, 0],
+    "updateWith": [3, 1, 2, 0],
+    "xorBy": [1, 2, 0],
+    "xorWith": [1, 2, 0],
+    "zipWith": [1, 2, 0]
+  };
+  exports.methodSpread = {
+    "assignAll": { "start": 0 },
+    "assignAllWith": { "start": 0 },
+    "assignInAll": { "start": 0 },
+    "assignInAllWith": { "start": 0 },
+    "defaultsAll": { "start": 0 },
+    "defaultsDeepAll": { "start": 0 },
+    "invokeArgs": { "start": 2 },
+    "invokeArgsMap": { "start": 2 },
+    "mergeAll": { "start": 0 },
+    "mergeAllWith": { "start": 0 },
+    "partial": { "start": 1 },
+    "partialRight": { "start": 1 },
+    "without": { "start": 1 },
+    "zipAll": { "start": 0 }
+  };
+  exports.mutate = {
+    "array": {
+      "fill": true,
+      "pull": true,
+      "pullAll": true,
+      "pullAllBy": true,
+      "pullAllWith": true,
+      "pullAt": true,
+      "remove": true,
+      "reverse": true
+    },
+    "object": {
+      "assign": true,
+      "assignAll": true,
+      "assignAllWith": true,
+      "assignIn": true,
+      "assignInAll": true,
+      "assignInAllWith": true,
+      "assignInWith": true,
+      "assignWith": true,
+      "defaults": true,
+      "defaultsAll": true,
+      "defaultsDeep": true,
+      "defaultsDeepAll": true,
+      "merge": true,
+      "mergeAll": true,
+      "mergeAllWith": true,
+      "mergeWith": true
+    },
+    "set": {
+      "set": true,
+      "setWith": true,
+      "unset": true,
+      "update": true,
+      "updateWith": true
+    }
+  };
+  exports.realToAlias = function() {
+    var hasOwnProperty = Object.prototype.hasOwnProperty, object = exports.aliasToReal, result = {};
+    for (var key in object) {
+      var value = object[key];
+      if (hasOwnProperty.call(result, value)) {
+        result[value].push(key);
+      } else {
+        result[value] = [key];
+      }
+    }
+    return result;
+  }();
+  exports.remap = {
+    "assignAll": "assign",
+    "assignAllWith": "assignWith",
+    "assignInAll": "assignIn",
+    "assignInAllWith": "assignInWith",
+    "curryN": "curry",
+    "curryRightN": "curryRight",
+    "defaultsAll": "defaults",
+    "defaultsDeepAll": "defaultsDeep",
+    "findFrom": "find",
+    "findIndexFrom": "findIndex",
+    "findLastFrom": "findLast",
+    "findLastIndexFrom": "findLastIndex",
+    "getOr": "get",
+    "includesFrom": "includes",
+    "indexOfFrom": "indexOf",
+    "invokeArgs": "invoke",
+    "invokeArgsMap": "invokeMap",
+    "lastIndexOfFrom": "lastIndexOf",
+    "mergeAll": "merge",
+    "mergeAllWith": "mergeWith",
+    "padChars": "pad",
+    "padCharsEnd": "padEnd",
+    "padCharsStart": "padStart",
+    "propertyOf": "get",
+    "rangeStep": "range",
+    "rangeStepRight": "rangeRight",
+    "restFrom": "rest",
+    "spreadFrom": "spread",
+    "trimChars": "trim",
+    "trimCharsEnd": "trimEnd",
+    "trimCharsStart": "trimStart",
+    "zipAll": "zip"
+  };
+  exports.skipFixed = {
+    "castArray": true,
+    "flow": true,
+    "flowRight": true,
+    "iteratee": true,
+    "mixin": true,
+    "rearg": true,
+    "runInContext": true
+  };
+  exports.skipRearg = {
+    "add": true,
+    "assign": true,
+    "assignIn": true,
+    "bind": true,
+    "bindKey": true,
+    "concat": true,
+    "difference": true,
+    "divide": true,
+    "eq": true,
+    "gt": true,
+    "gte": true,
+    "isEqual": true,
+    "lt": true,
+    "lte": true,
+    "matchesProperty": true,
+    "merge": true,
+    "multiply": true,
+    "overArgs": true,
+    "partial": true,
+    "partialRight": true,
+    "propertyOf": true,
+    "random": true,
+    "range": true,
+    "rangeRight": true,
+    "subtract": true,
+    "zip": true,
+    "zipObject": true,
+    "zipObjectDeep": true
+  };
+})(_mapping);
+var placeholder = {};
+var mapping = _mapping, fallbackHolder = placeholder;
+var push = Array.prototype.push;
+function baseArity(func, n) {
+  return n == 2 ? function(a, b) {
+    return func.apply(void 0, arguments);
+  } : function(a) {
+    return func.apply(void 0, arguments);
+  };
+}
+function baseAry(func, n) {
+  return n == 2 ? function(a, b) {
+    return func(a, b);
+  } : function(a) {
+    return func(a);
+  };
+}
+function cloneArray(array) {
+  var length = array ? array.length : 0, result = Array(length);
+  while (length--) {
+    result[length] = array[length];
+  }
+  return result;
+}
+function createCloner(func) {
+  return function(object) {
+    return func({}, object);
+  };
+}
+function flatSpread(func, start) {
+  return function() {
+    var length = arguments.length, lastIndex = length - 1, args = Array(length);
+    while (length--) {
+      args[length] = arguments[length];
+    }
+    var array = args[start], otherArgs = args.slice(0, start);
+    if (array) {
+      push.apply(otherArgs, array);
+    }
+    if (start != lastIndex) {
+      push.apply(otherArgs, args.slice(start + 1));
+    }
+    return func.apply(this, otherArgs);
+  };
+}
+function wrapImmutable(func, cloner) {
+  return function() {
+    var length = arguments.length;
+    if (!length) {
+      return;
+    }
+    var args = Array(length);
+    while (length--) {
+      args[length] = arguments[length];
+    }
+    var result = args[0] = cloner.apply(void 0, args);
+    func.apply(void 0, args);
+    return result;
+  };
+}
+function baseConvert(util, name, func, options) {
+  var isLib = typeof name == "function", isObj = name === Object(name);
+  if (isObj) {
+    options = func;
+    func = name;
+    name = void 0;
+  }
+  if (func == null) {
+    throw new TypeError();
+  }
+  options || (options = {});
+  var config = {
+    "cap": "cap" in options ? options.cap : true,
+    "curry": "curry" in options ? options.curry : true,
+    "fixed": "fixed" in options ? options.fixed : true,
+    "immutable": "immutable" in options ? options.immutable : true,
+    "rearg": "rearg" in options ? options.rearg : true
+  };
+  var defaultHolder = isLib ? func : fallbackHolder, forceCurry = "curry" in options && options.curry, forceFixed = "fixed" in options && options.fixed, forceRearg = "rearg" in options && options.rearg, pristine = isLib ? func.runInContext() : void 0;
+  var helpers = isLib ? func : {
+    "ary": util.ary,
+    "assign": util.assign,
+    "clone": util.clone,
+    "curry": util.curry,
+    "forEach": util.forEach,
+    "isArray": util.isArray,
+    "isError": util.isError,
+    "isFunction": util.isFunction,
+    "isWeakMap": util.isWeakMap,
+    "iteratee": util.iteratee,
+    "keys": util.keys,
+    "rearg": util.rearg,
+    "toInteger": util.toInteger,
+    "toPath": util.toPath
+  };
+  var ary = helpers.ary, assign = helpers.assign, clone = helpers.clone, curry = helpers.curry, each = helpers.forEach, isArray = helpers.isArray, isError = helpers.isError, isFunction = helpers.isFunction, isWeakMap = helpers.isWeakMap, keys = helpers.keys, rearg = helpers.rearg, toInteger = helpers.toInteger, toPath = helpers.toPath;
+  var aryMethodKeys = keys(mapping.aryMethod);
+  var wrappers = {
+    "castArray": function(castArray) {
+      return function() {
+        var value = arguments[0];
+        return isArray(value) ? castArray(cloneArray(value)) : castArray.apply(void 0, arguments);
+      };
+    },
+    "iteratee": function(iteratee) {
+      return function() {
+        var func2 = arguments[0], arity = arguments[1], result = iteratee(func2, arity), length = result.length;
+        if (config.cap && typeof arity == "number") {
+          arity = arity > 2 ? arity - 2 : 1;
+          return length && length <= arity ? result : baseAry(result, arity);
+        }
+        return result;
+      };
+    },
+    "mixin": function(mixin) {
+      return function(source) {
+        var func2 = this;
+        if (!isFunction(func2)) {
+          return mixin(func2, Object(source));
+        }
+        var pairs2 = [];
+        each(keys(source), function(key) {
+          if (isFunction(source[key])) {
+            pairs2.push([key, func2.prototype[key]]);
+          }
+        });
+        mixin(func2, Object(source));
+        each(pairs2, function(pair) {
+          var value = pair[1];
+          if (isFunction(value)) {
+            func2.prototype[pair[0]] = value;
+          } else {
+            delete func2.prototype[pair[0]];
+          }
+        });
+        return func2;
+      };
+    },
+    "nthArg": function(nthArg) {
+      return function(n) {
+        var arity = n < 0 ? 1 : toInteger(n) + 1;
+        return curry(nthArg(n), arity);
+      };
+    },
+    "rearg": function(rearg2) {
+      return function(func2, indexes) {
+        var arity = indexes ? indexes.length : 0;
+        return curry(rearg2(func2, indexes), arity);
+      };
+    },
+    "runInContext": function(runInContext) {
+      return function(context) {
+        return baseConvert(util, runInContext(context), options);
+      };
+    }
+  };
+  function castCap(name2, func2) {
+    if (config.cap) {
+      var indexes = mapping.iterateeRearg[name2];
+      if (indexes) {
+        return iterateeRearg(func2, indexes);
+      }
+      var n = !isLib && mapping.iterateeAry[name2];
+      if (n) {
+        return iterateeAry(func2, n);
+      }
+    }
+    return func2;
+  }
+  function castCurry(name2, func2, n) {
+    return forceCurry || config.curry && n > 1 ? curry(func2, n) : func2;
+  }
+  function castFixed(name2, func2, n) {
+    if (config.fixed && (forceFixed || !mapping.skipFixed[name2])) {
+      var data = mapping.methodSpread[name2], start = data && data.start;
+      return start === void 0 ? ary(func2, n) : flatSpread(func2, start);
+    }
+    return func2;
+  }
+  function castRearg(name2, func2, n) {
+    return config.rearg && n > 1 && (forceRearg || !mapping.skipRearg[name2]) ? rearg(func2, mapping.methodRearg[name2] || mapping.aryRearg[n]) : func2;
+  }
+  function cloneByPath(object, path) {
+    path = toPath(path);
+    var index = -1, length = path.length, lastIndex = length - 1, result = clone(Object(object)), nested = result;
+    while (nested != null && ++index < length) {
+      var key = path[index], value = nested[key];
+      if (value != null && !(isFunction(value) || isError(value) || isWeakMap(value))) {
+        nested[key] = clone(index == lastIndex ? value : Object(value));
+      }
+      nested = nested[key];
+    }
+    return result;
+  }
+  function convertLib(options2) {
+    return _2.runInContext.convert(options2)(void 0);
+  }
+  function createConverter(name2, func2) {
+    var realName = mapping.aliasToReal[name2] || name2, methodName = mapping.remap[realName] || realName, oldOptions = options;
+    return function(options2) {
+      var newUtil = isLib ? pristine : helpers, newFunc = isLib ? pristine[methodName] : func2, newOptions = assign(assign({}, oldOptions), options2);
+      return baseConvert(newUtil, realName, newFunc, newOptions);
+    };
+  }
+  function iterateeAry(func2, n) {
+    return overArg(func2, function(func3) {
+      return typeof func3 == "function" ? baseAry(func3, n) : func3;
+    });
+  }
+  function iterateeRearg(func2, indexes) {
+    return overArg(func2, function(func3) {
+      var n = indexes.length;
+      return baseArity(rearg(baseAry(func3, n), indexes), n);
+    });
+  }
+  function overArg(func2, transform) {
+    return function() {
+      var length = arguments.length;
+      if (!length) {
+        return func2();
+      }
+      var args = Array(length);
+      while (length--) {
+        args[length] = arguments[length];
+      }
+      var index = config.rearg ? 0 : length - 1;
+      args[index] = transform(args[index]);
+      return func2.apply(void 0, args);
+    };
+  }
+  function wrap(name2, func2, placeholder2) {
+    var result, realName = mapping.aliasToReal[name2] || name2, wrapped = func2, wrapper = wrappers[realName];
+    if (wrapper) {
+      wrapped = wrapper(func2);
+    } else if (config.immutable) {
+      if (mapping.mutate.array[realName]) {
+        wrapped = wrapImmutable(func2, cloneArray);
+      } else if (mapping.mutate.object[realName]) {
+        wrapped = wrapImmutable(func2, createCloner(func2));
+      } else if (mapping.mutate.set[realName]) {
+        wrapped = wrapImmutable(func2, cloneByPath);
+      }
+    }
+    each(aryMethodKeys, function(aryKey) {
+      each(mapping.aryMethod[aryKey], function(otherName) {
+        if (realName == otherName) {
+          var data = mapping.methodSpread[realName], afterRearg = data && data.afterRearg;
+          result = afterRearg ? castFixed(realName, castRearg(realName, wrapped, aryKey), aryKey) : castRearg(realName, castFixed(realName, wrapped, aryKey), aryKey);
+          result = castCap(realName, result);
+          result = castCurry(realName, result, aryKey);
+          return false;
+        }
+      });
+      return !result;
+    });
+    result || (result = wrapped);
+    if (result == func2) {
+      result = forceCurry ? curry(result, 1) : function() {
+        return func2.apply(this, arguments);
+      };
+    }
+    result.convert = createConverter(realName, func2);
+    result.placeholder = func2.placeholder = placeholder2;
+    return result;
+  }
+  if (!isObj) {
+    return wrap(name, func, defaultHolder);
+  }
+  var _2 = func;
+  var pairs = [];
+  each(aryMethodKeys, function(aryKey) {
+    each(mapping.aryMethod[aryKey], function(key) {
+      var func2 = _2[mapping.remap[key] || key];
+      if (func2) {
+        pairs.push([key, wrap(key, func2, _2)]);
+      }
+    });
+  });
+  each(keys(_2), function(key) {
+    var func2 = _2[key];
+    if (typeof func2 == "function") {
+      var length = pairs.length;
+      while (length--) {
+        if (pairs[length][0] == key) {
+          return;
+        }
+      }
+      func2.convert = createConverter(key, func2);
+      pairs.push([key, func2]);
+    }
+  });
+  each(pairs, function(pair) {
+    _2[pair[0]] = pair[1];
+  });
+  _2.convert = convertLib;
+  _2.placeholder = _2;
+  each(keys(_2), function(key) {
+    each(mapping.realToAlias[key] || [], function(alias) {
+      _2[alias] = _2[key];
+    });
+  });
+  return _2;
+}
+var _baseConvert = baseConvert;
 var _ = lodash_minExports.runInContext();
 _baseConvert(_, _);
 function itemStateReducer(navItemState, action) {
@@ -3547,7 +4409,7 @@ function useModalSharedLogic() {
   const [replacement, setReplacement] = useState("");
   const [validationState, setValidationState] = useState("initial");
   const { entities } = useAllEntities();
-  const { createNavItem, updateRoute, getRelatedRoute, createExternalRoute } = useApi();
+  const { updateRoute, getRelatedRoute } = useApi();
   const initialState = useRef({
     title: "",
     slug: "",
@@ -3585,8 +4447,6 @@ function useModalSharedLogic() {
     entityRoute,
     setEntityRoute,
     entities,
-    createNavItem,
-    createExternalRoute,
     updateRoute,
     getRelatedRoute,
     replacement,
@@ -3611,47 +4471,58 @@ function withModalSharedLogic(Component) {
     return /* @__PURE__ */ jsx(Component, { ...props, ...sharedLogic });
   };
 }
-function ExternalItemComponent({
-  variant,
-  item,
-  createNavItem,
-  navItemState,
-  dispatchItemState,
-  createExternalRoute,
-  updateRoute,
-  path,
-  dispatchPath,
-  setModalType,
-  selectedNavigation,
-  parentDocumentId
-}) {
+function isExternalEditProps(props) {
+  return props.variant === "ExternalEdit";
+}
+function isExternalCreateProps(props) {
+  return props.variant === "ExternalCreate";
+}
+function ExternalItemComponent(props) {
+  const {
+    variant,
+    navItemState,
+    dispatchItemState,
+    path,
+    dispatchPath,
+    setModalType,
+    selectedNavigation
+  } = props;
+  const parentId = isExternalCreateProps(props) ? props.parentId : void 0;
+  const onCreate = isExternalCreateProps(props) ? props.onCreate : void 0;
+  const onSave = isExternalEditProps(props) ? props.onSave : void 0;
+  const item = isExternalEditProps(props) ? props.item : void 0;
   const { formatMessage } = useIntl();
   useEffect(() => {
     if (variant !== "ExternalEdit" || !item) return;
     dispatchItemState({ type: "SET_TITLE", payload: item.route.title });
     dispatchItemState({ type: "SET_ACTIVE", payload: item.route.active });
     dispatchPath({ type: "NO_TRANSFORM_AND_CHECK", payload: item.route.fullPath });
-  }, []);
-  const addItem = async () => {
+  }, [variant, item, dispatchItemState, dispatchPath]);
+  const handleConfirm = async () => {
     try {
       if (!path || !navItemState.title || !selectedNavigation) return;
-      const data = {
-        title: navItemState.title,
-        fullPath: path.value,
-        active: navItemState.active,
-        internal: false
-      };
-      if (variant === "ExternalEdit" && item) {
-        await updateRoute(data, item.route.documentId);
-      } else {
-        const route = await createExternalRoute(data);
-        if (!route) return;
-        const settings = {
-          route: route.documentId,
-          parent: parentDocumentId ?? null,
-          navigation: selectedNavigation.documentId
-        };
-        await createNavItem(settings);
+      if (variant === "ExternalEdit" && item && onSave) {
+        onSave({
+          ...item,
+          update: {
+            title: navItemState.title,
+            fullPath: path.value
+            // internal: false,
+            // active: navItemState.active,
+          }
+        });
+      } else if (onCreate) {
+        const newItem = createTempNavItemObject({
+          parentId,
+          entityRoute: null,
+          selectedNavigation,
+          navItemState,
+          selectedEntity: null,
+          selectedContentType: null,
+          path,
+          internal: false
+        });
+        onCreate(newItem);
       }
       setModalType("");
     } catch (err) {
@@ -3665,7 +4536,7 @@ function ExternalItemComponent({
       closeText: formatMessage({ id: getTranslation("cancel"), defaultMessage: "Cancel" }),
       titleText: variant === "ExternalCreate" ? formatMessage({ id: getTranslation("modal.externalItem.titleText.create"), defaultMessage: "Create new external item" }) : formatMessage({ id: getTranslation("modal.externalItem.titleText.edit"), defaultMessage: `Edit external route "${navItemState.title}"` }),
       loadingText: variant === "ExternalCreate" ? formatMessage({ id: getTranslation("modal.externalItem.loadingText.create"), defaultMessage: "Adding" }) : formatMessage({ id: getTranslation("modal.externalItem.loadingText.edit"), defaultMessage: "Saving" }),
-      onConfirm: addItem,
+      onConfirm: handleConfirm,
       modalToOpen: "",
       currentModalType: "ExternalCreate",
       currentModalMode: variant === "ExternalCreate" ? "create" : "edit",
@@ -3723,8 +4594,6 @@ function ItemCreateComponent({
   entityRoute,
   setEntityRoute,
   entities,
-  createNavItem,
-  updateRoute,
   getRelatedRoute,
   replacement,
   validationState,
@@ -3736,7 +4605,8 @@ function ItemCreateComponent({
   debouncedCheckUrl,
   setModalType,
   selectedNavigation,
-  parentId
+  parentId,
+  onCreate
 }) {
   const [loading, setLoading] = useState(false);
   const { formatMessage } = useIntl();
@@ -3783,16 +4653,16 @@ function ItemCreateComponent({
     try {
       setLoading(true);
       if (!entityRoute || !selectedNavigation) return;
-      const settings = {
-        route: entityRoute.documentId ?? null,
-        parent: parentId ?? null,
-        navigation: selectedNavigation.documentId ?? null
-      };
-      if (path.value !== path.initialPath) {
-        if (navItemState.slug !== entityRoute.fullPath) navItemState.isOverride = true;
-        await updateRoute({ fullPath: path.value }, entityRoute.documentId);
-      }
-      await createNavItem(settings);
+      const newItem = createTempNavItemObject({
+        parentId,
+        entityRoute,
+        selectedNavigation,
+        navItemState,
+        selectedEntity,
+        selectedContentType,
+        path
+      });
+      onCreate(newItem);
       setModalType("");
     } catch (err) {
       console.log(err);
@@ -4509,10 +5379,10 @@ lodash.exports;
       }
       return index;
     }
-    function countHolders(array, placeholder) {
+    function countHolders(array, placeholder2) {
       var length = array.length, result = 0;
       while (length--) {
-        if (array[length] === placeholder) {
+        if (array[length] === placeholder2) {
           ++result;
         }
       }
@@ -4551,11 +5421,11 @@ lodash.exports;
         return func(transform(arg));
       };
     }
-    function replaceHolders(array, placeholder) {
+    function replaceHolders(array, placeholder2) {
       var index = -1, length = array.length, resIndex = 0, result = [];
       while (++index < length) {
         var value = array[index];
-        if (value === placeholder || value === PLACEHOLDER) {
+        if (value === placeholder2 || value === PLACEHOLDER) {
           array[index] = PLACEHOLDER;
           result[resIndex++] = index;
         }
@@ -4622,7 +5492,7 @@ lodash.exports;
     }
     var runInContext = function runInContext2(context) {
       context = context == null ? root : _2.defaults(root.Object(), context, _2.pick(root, contextProps));
-      var Array2 = context.Array, Date = context.Date, Error2 = context.Error, Function2 = context.Function, Math2 = context.Math, Object2 = context.Object, RegExp2 = context.RegExp, String = context.String, TypeError = context.TypeError;
+      var Array2 = context.Array, Date2 = context.Date, Error2 = context.Error, Function2 = context.Function, Math2 = context.Math, Object2 = context.Object, RegExp2 = context.RegExp, String = context.String, TypeError2 = context.TypeError;
       var arrayProto = Array2.prototype, funcProto = Function2.prototype, objectProto = Object2.prototype;
       var coreJsData = context["__core-js_shared__"];
       var funcToString = funcProto.toString;
@@ -4647,8 +5517,8 @@ lodash.exports;
         } catch (e) {
         }
       }();
-      var ctxClearTimeout = context.clearTimeout !== root.clearTimeout && context.clearTimeout, ctxNow = Date && Date.now !== root.Date.now && Date.now, ctxSetTimeout = context.setTimeout !== root.setTimeout && context.setTimeout;
-      var nativeCeil = Math2.ceil, nativeFloor = Math2.floor, nativeGetSymbols = Object2.getOwnPropertySymbols, nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined$1, nativeIsFinite = context.isFinite, nativeJoin = arrayProto.join, nativeKeys = overArg(Object2.keys, Object2), nativeMax = Math2.max, nativeMin = Math2.min, nativeNow = Date.now, nativeParseInt = context.parseInt, nativeRandom = Math2.random, nativeReverse = arrayProto.reverse;
+      var ctxClearTimeout = context.clearTimeout !== root.clearTimeout && context.clearTimeout, ctxNow = Date2 && Date2.now !== root.Date.now && Date2.now, ctxSetTimeout = context.setTimeout !== root.setTimeout && context.setTimeout;
+      var nativeCeil = Math2.ceil, nativeFloor = Math2.floor, nativeGetSymbols = Object2.getOwnPropertySymbols, nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined$1, nativeIsFinite = context.isFinite, nativeJoin = arrayProto.join, nativeKeys = overArg(Object2.keys, Object2), nativeMax = Math2.max, nativeMin = Math2.min, nativeNow = Date2.now, nativeParseInt = context.parseInt, nativeRandom = Math2.random, nativeReverse = arrayProto.reverse;
       var DataView = getNative(context, "DataView"), Map = getNative(context, "Map"), Promise2 = getNative(context, "Promise"), Set = getNative(context, "Set"), WeakMap = getNative(context, "WeakMap"), nativeCreate = getNative(Object2, "create");
       var metaMap = WeakMap && new WeakMap();
       var realNames = {};
@@ -5145,7 +6015,7 @@ lodash.exports;
       }
       function baseDelay(func, wait, args) {
         if (typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         return setTimeout(function() {
           func.apply(undefined$1, args);
@@ -6152,11 +7022,11 @@ lodash.exports;
       function createCurry(func, bitmask, arity) {
         var Ctor = createCtor(func);
         function wrapper() {
-          var length = arguments.length, args = Array2(length), index = length, placeholder = getHolder(wrapper);
+          var length = arguments.length, args = Array2(length), index = length, placeholder2 = getHolder(wrapper);
           while (index--) {
             args[index] = arguments[index];
           }
-          var holders = length < 3 && args[0] !== placeholder && args[length - 1] !== placeholder ? [] : replaceHolders(args, placeholder);
+          var holders = length < 3 && args[0] !== placeholder2 && args[length - 1] !== placeholder2 ? [] : replaceHolders(args, placeholder2);
           length -= holders.length;
           if (length < arity) {
             return createRecurry(
@@ -6200,7 +7070,7 @@ lodash.exports;
           while (index--) {
             var func = funcs[index];
             if (typeof func != "function") {
-              throw new TypeError(FUNC_ERROR_TEXT);
+              throw new TypeError2(FUNC_ERROR_TEXT);
             }
             if (prereq && !wrapper && getFuncName(func) == "wrapper") {
               var wrapper = new LodashWrapper([], true);
@@ -6237,7 +7107,7 @@ lodash.exports;
             args[index] = arguments[index];
           }
           if (isCurried) {
-            var placeholder = getHolder(wrapper), holdersCount = countHolders(args, placeholder);
+            var placeholder2 = getHolder(wrapper), holdersCount = countHolders(args, placeholder2);
           }
           if (partials) {
             args = composeArgs(args, partials, holders, isCurried);
@@ -6247,7 +7117,7 @@ lodash.exports;
           }
           length -= holdersCount;
           if (isCurried && length < arity) {
-            var newHolders = replaceHolders(args, placeholder);
+            var newHolders = replaceHolders(args, placeholder2);
             return createRecurry(
               func,
               bitmask,
@@ -6367,7 +7237,7 @@ lodash.exports;
           return operator(value, other);
         };
       }
-      function createRecurry(func, bitmask, wrapFunc, placeholder, thisArg, partials, holders, argPos, ary2, arity) {
+      function createRecurry(func, bitmask, wrapFunc, placeholder2, thisArg, partials, holders, argPos, ary2, arity) {
         var isCurry = bitmask & WRAP_CURRY_FLAG, newHolders = isCurry ? holders : undefined$1, newHoldersRight = isCurry ? undefined$1 : holders, newPartials = isCurry ? partials : undefined$1, newPartialsRight = isCurry ? undefined$1 : partials;
         bitmask |= isCurry ? WRAP_PARTIAL_FLAG : WRAP_PARTIAL_RIGHT_FLAG;
         bitmask &= ~(isCurry ? WRAP_PARTIAL_RIGHT_FLAG : WRAP_PARTIAL_FLAG);
@@ -6390,7 +7260,7 @@ lodash.exports;
         if (isLaziable(func)) {
           setData(result2, newData);
         }
-        result2.placeholder = placeholder;
+        result2.placeholder = placeholder2;
         return setWrapToString(result2, func, bitmask);
       }
       function createRound(methodName) {
@@ -6424,7 +7294,7 @@ lodash.exports;
       function createWrap(func, bitmask, thisArg, partials, holders, argPos, ary2, arity) {
         var isBindKey = bitmask & WRAP_BIND_KEY_FLAG;
         if (!isBindKey && typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         var length = partials ? partials.length : 0;
         if (!length) {
@@ -7691,7 +8561,7 @@ lodash.exports;
       };
       function after(n, func) {
         if (typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         n = toInteger(n);
         return function() {
@@ -7708,7 +8578,7 @@ lodash.exports;
       function before(n, func) {
         var result2;
         if (typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         n = toInteger(n);
         return function() {
@@ -7752,7 +8622,7 @@ lodash.exports;
       function debounce2(func, wait, options) {
         var lastArgs, lastThis, maxWait, result2, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
         if (typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         wait = toNumber(wait) || 0;
         if (isObject(options)) {
@@ -7841,7 +8711,7 @@ lodash.exports;
       }
       function memoize(func, resolver) {
         if (typeof func != "function" || resolver != null && typeof resolver != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         var memoized = function() {
           var args = arguments, key = resolver ? resolver.apply(this, args) : args[0], cache = memoized.cache;
@@ -7858,7 +8728,7 @@ lodash.exports;
       memoize.Cache = MapCache;
       function negate(predicate) {
         if (typeof predicate != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         return function() {
           var args = arguments;
@@ -7902,14 +8772,14 @@ lodash.exports;
       });
       function rest(func, start) {
         if (typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         start = start === undefined$1 ? start : toInteger(start);
         return baseRest(func, start);
       }
       function spread(func, start) {
         if (typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         start = start == null ? 0 : nativeMax(toInteger(start), 0);
         return baseRest(function(args) {
@@ -7923,7 +8793,7 @@ lodash.exports;
       function throttle(func, wait, options) {
         var leading = true, trailing = true;
         if (typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         if (isObject(options)) {
           leading = "leading" in options ? !!options.leading : leading;
@@ -8739,7 +9609,7 @@ lodash.exports;
         var length = pairs == null ? 0 : pairs.length, toIteratee = getIteratee();
         pairs = !length ? [] : arrayMap(pairs, function(pair) {
           if (typeof pair[1] != "function") {
-            throw new TypeError(FUNC_ERROR_TEXT);
+            throw new TypeError2(FUNC_ERROR_TEXT);
           }
           return [toIteratee(pair[0]), pair[1]];
         });
@@ -9410,7 +10280,6 @@ function ItemEditComponent({
   selectedContentType,
   setSelectedContentType,
   entities,
-  updateRoute,
   replacement,
   validationState,
   initialState,
@@ -9419,7 +10288,8 @@ function ItemEditComponent({
   path,
   dispatchPath,
   debouncedCheckUrl,
-  setModalType
+  setModalType,
+  onEdit
 }) {
   const { formatMessage } = useIntl();
   useEffect(() => {
@@ -9465,12 +10335,15 @@ function ItemEditComponent({
     try {
       if (lodashExports.isEqual(navItemState, initialState.current) && path.value === path.initialPath) return;
       const isOverride = path.value !== item.route.fullPath ? true : navItemState.isOverride;
-      await updateRoute({
-        ...navItemState,
-        slug: path.value,
-        fullPath: path.value,
-        isOverride
-      }, item.route.documentId);
+      onEdit({
+        ...item,
+        update: {
+          title: navItemState.title,
+          slug: navItemState.slug,
+          fullPath: path.value,
+          isOverride
+        }
+      });
       setModalType("");
     } catch (err) {
       console.log(err);
@@ -9569,19 +10442,25 @@ function ItemEditComponent({
   );
 }
 const ItemEdit = withModalSharedLogic(ItemEditComponent);
-function WrapperItemComponent({
-  variant,
-  item,
-  createNavItem,
-  navItemState,
-  dispatchItemState,
-  createExternalRoute,
-  updateRoute,
-  dispatchPath,
-  setModalType,
-  selectedNavigation,
-  parentDocumentId
-}) {
+function isWrapperEditProps(props) {
+  return props.variant === "WrapperEdit";
+}
+function isWrapperCreateProps(props) {
+  return props.variant === "WrapperCreate";
+}
+function WrapperItemComponent(props) {
+  const {
+    variant,
+    navItemState,
+    dispatchItemState,
+    dispatchPath,
+    setModalType,
+    selectedNavigation
+  } = props;
+  const parentId = isWrapperCreateProps(props) ? props.parentId : void 0;
+  const onCreate = isWrapperCreateProps(props) ? props.onCreate : void 0;
+  const onSave = isWrapperEditProps(props) ? props.onSave : void 0;
+  const item = isWrapperEditProps(props) ? props.item : void 0;
   const { formatMessage } = useIntl();
   useEffect(() => {
     if (variant !== "WrapperEdit" || !item) return;
@@ -9589,7 +10468,7 @@ function WrapperItemComponent({
     dispatchItemState({ type: "SET_ACTIVE", payload: item.route.active });
     dispatchPath({ type: "NO_TRANSFORM_AND_CHECK", payload: item.route.fullPath });
   }, []);
-  const addItem = async () => {
+  const onConfirm = async () => {
     try {
       if (!navItemState.title || !selectedNavigation) return;
       const data = {
@@ -9598,17 +10477,24 @@ function WrapperItemComponent({
         internal: false,
         wrapper: true
       };
-      if (variant === "WrapperEdit" && item) {
-        await updateRoute(data, item.route.documentId);
-      } else {
-        const route = await createExternalRoute(data);
-        if (!route) return;
-        const settings = {
-          route: route.documentId,
-          parent: parentDocumentId ?? null,
-          navigation: selectedNavigation.documentId
-        };
-        await createNavItem(settings);
+      if (variant === "WrapperEdit" && item && onSave) {
+        onSave({
+          ...item,
+          update: {
+            ...data
+          }
+        });
+      } else if (onCreate) {
+        const newItem = createTempNavItemObject({
+          parentId,
+          entityRoute: null,
+          selectedNavigation,
+          navItemState,
+          selectedEntity: null,
+          selectedContentType: null,
+          wrapper: true
+        });
+        onCreate(newItem);
       }
       setModalType("");
     } catch (err) {
@@ -9622,7 +10508,7 @@ function WrapperItemComponent({
       closeText: formatMessage({ id: getTranslation("cancel"), defaultMessage: "Cancel" }),
       titleText: variant === "WrapperCreate" ? formatMessage({ id: getTranslation("modal.wrapperItem.titleText.create"), defaultMessage: "Create new wrapper item" }) : formatMessage({ id: getTranslation("modal.wrapperItem.titleText.edit"), defaultMessage: "Edit wrapper item:" }) + ` "${navItemState.title}"`,
       loadingText: variant === "WrapperCreate" ? formatMessage({ id: getTranslation("modal.wrapperItem.loadingText.create"), defaultMessage: "Adding" }) : formatMessage({ id: getTranslation("modal.wrapperItem.loadingText.edit"), defaultMessage: "Saving" }),
-      onConfirm: addItem,
+      onConfirm,
       modalToOpen: "",
       currentModalType: "WrapperCreate",
       currentModalMode: variant === "WrapperCreate" ? "create" : "edit",
@@ -9649,35 +10535,6 @@ function WrapperItemComponent({
   );
 }
 const WrapperItem = withModalSharedLogic(WrapperItemComponent);
-function Header({ navigations }) {
-  const { setModalType } = useContext(ModalContext);
-  const { selectedNavigation, setSelectedNavigation } = useContext(SelectedNavigationContext);
-  const { formatMessage } = useIntl();
-  return /* @__PURE__ */ jsxs(Flex, { gap: 4, children: [
-    /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setModalType("NavOverview"), children: formatMessage({
-      id: getTranslation("manage"),
-      defaultMessage: "Manage"
-    }) }),
-    /* @__PURE__ */ jsx(
-      SingleSelect,
-      {
-        value: selectedNavigation ? selectedNavigation.slug : "",
-        placeholder: formatMessage({
-          id: getTranslation("navigation.page.selectNavigation"),
-          defaultMessage: "Select Navigation"
-        }),
-        onChange: (value) => {
-          const navItem = navigations.find((nav) => nav.slug === value);
-          if (navItem) {
-            setSelectedNavigation(navItem);
-          }
-        },
-        disabled: navigations.length === 0,
-        children: navigations.map((nav) => /* @__PURE__ */ jsx(SingleSelectOption, { value: nav.slug, children: nav.name }, nav.id))
-      }
-    )
-  ] });
-}
 const measuring = {
   droppable: {
     strategy: MeasuringStrategy.Always
@@ -9734,13 +10591,30 @@ function RouteIcon({ type, color = "neutral800" }) {
 const RouteItem = forwardRef(({ item, setParentId, setActionItem, ghost, depth, style, wrapperRef, handleProps }, ref) => {
   if (!item || !item.route) return null;
   const { setModalType } = useContext(ModalContext);
-  const { get } = useFetchClient();
   const { formatMessage } = useIntl();
-  const [itemStatus, setItemStatus] = useState({
-    status: "published",
-    variant: "primary",
-    textColor: "primary700"
-  });
+  const itemStatusOptions = {
+    published: {
+      status: formatMessage({
+        id: getTranslation("published"),
+        defaultMessage: "Published"
+      }),
+      variant: "primary"
+    },
+    draft: {
+      status: formatMessage({
+        id: getTranslation("draft"),
+        defaultMessage: "Draft"
+      }),
+      variant: "secondary"
+    },
+    modified: {
+      status: formatMessage({
+        id: getTranslation("modified"),
+        defaultMessage: "Modified"
+      }),
+      variant: "alternative"
+    }
+  };
   const [type, setType] = useState();
   useEffect(() => {
     if (!item.route.internal && !item.route.wrapper) {
@@ -9751,41 +10625,6 @@ const RouteItem = forwardRef(({ item, setParentId, setActionItem, ghost, depth,
       setType("internal");
     }
   }, [item]);
-  useEffect(() => {
-    const ct = item.route.relatedContentType;
-    const id = item.route.relatedDocumentId;
-    if (!ct || !id) return;
-    async function fetchRelated() {
-      try {
-        const { data } = await get(`/content-manager/collection-types/${ct}/${id}`);
-        switch (data.data.status) {
-          case "modified":
-            setItemStatus({
-              status: "Modified",
-              variant: "alternative",
-              textColor: "alternative700"
-            });
-            break;
-          case "draft":
-            setItemStatus({
-              status: "Draft",
-              variant: "secondary",
-              textColor: "secondary700"
-            });
-            break;
-          default:
-            setItemStatus({
-              status: "Published",
-              variant: "primary",
-              textColor: "primary700"
-            });
-        }
-      } catch (err) {
-        console.log(err);
-      }
-    }
-    fetchRelated();
-  }, []);
   const handleAddChildren = () => {
     setParentId(item.documentId);
     setModalType("ItemCreate");
@@ -9803,7 +10642,7 @@ const RouteItem = forwardRef(({ item, setParentId, setActionItem, ghost, depth,
   };
   const elStyle = {
     marginLeft: depth !== void 0 ? depth * 48 : 0,
-    opacity: ghost ? 0.5 : 1,
+    opacity: ghost || item.deleted ? 0.5 : 1,
     ...style
   };
   return /* @__PURE__ */ jsx(
@@ -9824,29 +10663,39 @@ const RouteItem = forwardRef(({ item, setParentId, setActionItem, ghost, depth,
           shadow: "tableShadow",
           ref,
           children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", gap: 4, children: [
-            /* @__PURE__ */ jsxs(Flex, { children: [
+            /* @__PURE__ */ jsxs(Flex, { gap: 4, children: [
               /* @__PURE__ */ jsx(Drag, { color: "neutral800", ...handleProps }),
               /* @__PURE__ */ jsx(
                 Box,
                 {
-                  marginLeft: 4,
-                  marginRight: 4,
                   width: "1px",
                   height: "32px",
                   background: "neutral150"
                 }
               ),
               /* @__PURE__ */ jsx(RouteIcon, { type }),
-              /* @__PURE__ */ jsxs(Flex, { gap: 2, marginLeft: 4, children: [
-                /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: item.route.title }),
+              /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+                /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: item.update?.title ? item.update.title : item.route.title }),
                 /* @__PURE__ */ jsxs(Typography, { textColor: "neutral400", children: [
                   type === "internal" && "/",
-                  item.route.fullPath
+                  item.update?.fullPath ? item.update.fullPath : item.route.fullPath
                 ] })
-              ] })
+              ] }),
+              item.isNew && !item.deleted && /* @__PURE__ */ jsx(Status, { variant: "alternative", size: "S", children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: formatMessage({
+                id: getTranslation("new"),
+                defaultMessage: "New"
+              }) }) }),
+              item.update && !item.deleted && /* @__PURE__ */ jsx(Status, { variant: "alternative", size: "S", children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: formatMessage({
+                id: getTranslation("updated"),
+                defaultMessage: "Updated"
+              }) }) }),
+              item.deleted && /* @__PURE__ */ jsx(Status, { size: "S", children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", textColor: "danger500", children: formatMessage({
+                id: getTranslation("deleted"),
+                defaultMessage: "Deleted"
+              }) }) })
             ] }),
             /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: 4, children: [
-              type === "internal" && /* @__PURE__ */ jsx(Status, { variant: itemStatus.variant, size: "S", children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", textColor: itemStatus.textColor, children: itemStatus.status }) }),
+              type === "internal" && item.status && /* @__PURE__ */ jsx(Status, { variant: itemStatusOptions[item.status].variant, size: "S", children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: itemStatusOptions[item.status].status }) }),
               /* @__PURE__ */ jsxs(SimpleMenu, { label: "Notifications", tag: IconButton, icon: /* @__PURE__ */ jsx(More, {}), children: [
                 /* @__PURE__ */ jsx(MenuItem, { onClick: () => handleEdit(), children: formatMessage({
                   id: getTranslation("edit"),
@@ -9900,50 +10749,176 @@ function SortableRouteItem({ item, depth, ...props }) {
     }
   );
 }
+function PageWrapper({ navigations, loading = false, children }) {
+  const { formatMessage } = useIntl();
+  const { selectedNavigation, setSelectedNavigation } = useContext(SelectedNavigationContext);
+  const { setModalType } = useContext(ModalContext);
+  return /* @__PURE__ */ jsxs(Page.Main, { children: [
+    /* @__PURE__ */ jsx(
+      Layouts.Header,
+      {
+        title: formatMessage({
+          id: getTranslation("navigation.page.title"),
+          defaultMessage: "Navigation"
+        }) + (selectedNavigation ? `: ${selectedNavigation.name}` : ""),
+        subtitle: /* @__PURE__ */ jsx(Typography, { textColor: "neutral500", children: selectedNavigation ? `ID: ${selectedNavigation.id} | DocumentID : ${selectedNavigation.documentId}` : formatMessage({
+          id: getTranslation("navigation.page.subtitle.noNavigationSelected"),
+          defaultMessage: "No navigation selected"
+        }) }),
+        primaryAction: !loading && /* @__PURE__ */ jsxs(Flex, { gap: 4, children: [
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setModalType("NavOverview"), children: formatMessage({
+            id: getTranslation("manage"),
+            defaultMessage: "Manage"
+          }) }),
+          /* @__PURE__ */ jsx(
+            SingleSelect,
+            {
+              value: selectedNavigation ? selectedNavigation.slug : "",
+              placeholder: formatMessage({
+                id: getTranslation("navigation.page.selectNavigation"),
+                defaultMessage: "Select Navigation"
+              }),
+              onChange: (value) => {
+                const navItem = navigations.find((nav) => nav.slug === value);
+                console.log("switched navigation to: ", navItem);
+                if (navItem) {
+                  setSelectedNavigation(navItem);
+                }
+              },
+              disabled: navigations.length === 0,
+              children: navigations.map((nav) => /* @__PURE__ */ jsx(SingleSelectOption, { value: nav.slug, children: nav.name }, nav.id))
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Layouts.Content, { children: /* @__PURE__ */ jsx(Box, { children }) })
+  ] });
+}
 const Navigation = () => {
-  const { navigations, fetchNavigations } = useNavigations();
+  const [navigations, setNavigations] = useState([]);
   const [modalType, setModalType] = useState("");
   const [selectedNavigation, setSelectedNavigation] = useState();
   const [navigationItems, setNavigationItems] = useState();
   const [initialNavigationItems, setInitialNavigationItems] = useState();
   const [actionItem, setActionItem] = useState();
   const [parentId, setParentId] = useState();
-  const { getStructuredNavigation, updateNavItem } = useApi();
+  const { getNavigation, updateNavigationItemStructure } = useApi();
+  const [isSavingNavigation, setIsSavingNavigation] = useState(false);
+  const [loading, setLoading] = useState(false);
   const [projected, setProjected] = useState(null);
   const [activeItem, setActiveItem] = useState();
   const [activeId, setActiveId] = useState(null);
   const [overId, setOverId] = useState(null);
   const [offsetLeft, setOffsetLeft] = useState(0);
   const { formatMessage } = useIntl();
-  if (!navigations) return null;
+  const { toggleNotification } = useNotification();
+  const { get } = useFetchClient();
+  async function loadNavigations() {
+    try {
+      const data = await getNavigation({ variant: "flat" });
+      const updatedNavigations = await Promise.all(
+        data.map(async (nav) => {
+          const updatedItems = await Promise.all(
+            nav.items.map(async (item) => {
+              const ct = item.route.relatedContentType;
+              const id = item.route.relatedDocumentId;
+              if (!ct || !id) return item;
+              try {
+                const { data: data2 } = await get(`/content-manager/collection-types/${ct}/${id}`);
+                return { ...item, status: data2.data.status };
+              } catch (err) {
+                console.error(err);
+                return item;
+              }
+            })
+          );
+          return { ...nav, items: updatedItems };
+        })
+      );
+      setNavigations(updatedNavigations);
+      setSelectedNavigation(updatedNavigations[0]);
+    } catch (error) {
+      console.error("Error fetching navigations: ", error);
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({
+          id: getTranslation("notification.navigation.fetchFailed"),
+          defaultMessage: "Failed to fetch navigations"
+        })
+      });
+    }
+  }
+  useEffect(() => {
+    async function fetchNavigations() {
+      setLoading(true);
+      await loadNavigations();
+      setLoading(false);
+    }
+    fetchNavigations();
+  }, []);
   useEffect(() => {
     if (modalType === "NavOverview" || modalType === "") {
       setActionItem(void 0);
       setParentId(void 0);
-      fetchNavigations();
     }
   }, [modalType]);
   useEffect(() => {
-    async function fetchNestedNavigation() {
-      if (!selectedNavigation && (!navigations || navigations.length === 0)) return;
-      const documentId = selectedNavigation?.documentId ?? navigations?.[0]?.documentId;
-      if (!documentId) return;
-      const { items } = await getStructuredNavigation(documentId, "flat");
-      setNavigationItems(items);
-    }
-    if (Array.isArray(navigations) && navigations?.length > 0)
-      fetchNestedNavigation();
-  }, [navigations, selectedNavigation]);
-  useEffect(() => {
-    if (navigations.length > 0 && (!selectedNavigation || !navigations.find((nav) => nav.id === selectedNavigation.id))) {
-      setSelectedNavigation(navigations[0]);
-    }
-  }, [navigations]);
+    setNavigationItems(selectedNavigation?.items || []);
+  }, [selectedNavigation]);
   useEffect(() => {
-    if (navigationItems && !initialNavigationItems) {
+    if (selectedNavigation?.items && !initialNavigationItems) {
       setInitialNavigationItems(navigationItems);
     }
   }, [navigationItems]);
+  useEffect(() => {
+    if (!activeId || !navigationItems) return;
+    const item = navigationItems.find(({ id }) => id === activeId);
+    setActiveItem(item);
+  }, [navigationItems, activeId]);
+  function handleSoftAddedItem(newItem) {
+    if (newItem.isNew?.parent) {
+      const parentIndex = navigationItems?.findIndex((item) => item.documentId === newItem.isNew?.parent);
+      if (parentIndex !== void 0 && parentIndex >= 0) {
+        const parentDepth = navigationItems ? navigationItems[parentIndex].depth || 0 : 0;
+        newItem.depth = parentDepth + 1;
+        const updatedItems = navigationItems ? [
+          ...navigationItems.slice(0, parentIndex + 1),
+          newItem,
+          ...navigationItems.slice(parentIndex + 1)
+        ] : [newItem];
+        setNavigationItems(updatedItems);
+        return;
+      }
+    }
+    setNavigationItems((items) => items ? [...items, newItem] : [newItem]);
+  }
+  async function saveNavigation() {
+    if (!navigationItems || !selectedNavigation) return;
+    setIsSavingNavigation(true);
+    try {
+      await updateNavigationItemStructure(selectedNavigation.documentId, navigationItems);
+      toggleNotification({
+        type: "success",
+        message: formatMessage({
+          id: getTranslation("notification.navigation.navigationSaved"),
+          defaultMessage: "Navigation updated successfully"
+        })
+      });
+    } catch (e) {
+      console.error(e);
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({
+          id: getTranslation("notification.navigation.saveNavigationFailed"),
+          defaultMessage: "Error updating navigation item"
+        })
+      });
+    } finally {
+      loadNavigations();
+      setIsSavingNavigation(false);
+    }
+  }
   function handleDragStart({ active: { id: activeId2 } }) {
     if (!navigationItems) return;
     setActiveId(activeId2);
@@ -9978,41 +10953,6 @@ const Navigation = () => {
     setOffsetLeft(0);
     document.body.style.setProperty("cursor", "");
   }
-  function saveOrder() {
-    if (!navigationItems || !selectedNavigation) return;
-    let groupIndices = [0];
-    let parentIds = [];
-    navigationItems.forEach((item, index) => {
-      const previousItem = navigationItems[index - 1];
-      if (typeof item.depth !== "number") return;
-      if (item.depth === 0) {
-        groupIndices[0] = (groupIndices[0] || 0) + 1;
-        parentIds = [];
-      } else if (typeof previousItem.depth === "number" && item.depth === previousItem.depth + 1) {
-        parentIds.push(previousItem.documentId);
-        groupIndices[item.depth] = 0;
-      } else if (typeof previousItem.depth === "number" && item.depth <= previousItem.depth) {
-        const diff = previousItem.depth - item.depth;
-        for (let i = 0; i < diff; i++) {
-          parentIds.pop();
-          groupIndices.pop();
-        }
-        groupIndices[item.depth] = (groupIndices[item.depth] || 0) + 1;
-      }
-      updateNavItem(item.documentId, {
-        order: groupIndices[item.depth],
-        parent: parentIds.at(-1) || "",
-        route: item?.route?.documentId || "",
-        navigation: selectedNavigation?.documentId || ""
-      });
-    });
-    setInitialNavigationItems(navigationItems);
-  }
-  useEffect(() => {
-    if (!activeId || !navigationItems) return;
-    const item = navigationItems.find(({ id }) => id === activeId);
-    setActiveItem(item);
-  }, [navigationItems, activeId]);
   useEffect(() => {
     const projection = activeId && overId ? getProjection(
       navigationItems,
@@ -10022,107 +10962,185 @@ const Navigation = () => {
     ) : null;
     setProjected(projection);
   }, [activeId, overId, offsetLeft, navigationItems]);
+  if (loading) {
+    return /* @__PURE__ */ jsx(PageWrapper, { navigations, loading, children: /* @__PURE__ */ jsx(FullLoader, {}) });
+  }
   return /* @__PURE__ */ jsx(ModalContext.Provider, { value: { modalType, setModalType }, children: /* @__PURE__ */ jsxs(SelectedNavigationContext.Provider, { value: { selectedNavigation, setSelectedNavigation }, children: [
-    /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        Layouts.Header,
-        {
-          title: formatMessage({
-            id: getTranslation("navigation.page.title"),
-            defaultMessage: "Navigation"
-          }) + (selectedNavigation ? `: ${selectedNavigation.name}` : ""),
-          subtitle: /* @__PURE__ */ jsx(Typography, { textColor: "neutral500", children: selectedNavigation ? `ID: ${selectedNavigation.id} | DocumentID : ${selectedNavigation.documentId}` : formatMessage({
-            id: getTranslation("navigation.page.subtitle.noNavigationSelected"),
-            defaultMessage: "No navigation selected"
-          }) }),
-          primaryAction: /* @__PURE__ */ jsx(Header, { navigations })
-        }
-      ),
-      /* @__PURE__ */ jsxs(Layouts.Content, { children: [
-        selectedNavigation && /* @__PURE__ */ jsxs(Flex, { gap: 4, paddingBottom: 6, justifyContent: "flex-end", children: [
-          /* @__PURE__ */ jsx(Button, { variant: "secondary", startIcon: /* @__PURE__ */ jsx(Plus, {}), onClick: () => setModalType("ItemCreate"), children: formatMessage({
-            id: getTranslation("navigation.page.newItemButton"),
-            defaultMessage: "New Item"
-          }) }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              startIcon: /* @__PURE__ */ jsx(Check, {}),
-              onClick: () => saveOrder(),
-              disabled: JSON.stringify(navigationItems) === JSON.stringify(initialNavigationItems),
-              children: formatMessage({
-                id: getTranslation("save"),
-                defaultMessage: "Save"
-              })
-            }
-          )
-        ] }),
-        navigationItems && navigationItems.length > 0 && /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 4, children: /* @__PURE__ */ jsx(
-          DndContext,
+    /* @__PURE__ */ jsxs(PageWrapper, { navigations, children: [
+      selectedNavigation && /* @__PURE__ */ jsxs(Flex, { gap: 4, paddingBottom: 6, justifyContent: "flex-end", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", startIcon: /* @__PURE__ */ jsx(Plus, {}), onClick: () => setModalType("ItemCreate"), children: formatMessage({
+          id: getTranslation("navigation.page.newItemButton"),
+          defaultMessage: "New Item"
+        }) }),
+        /* @__PURE__ */ jsx(
+          Button,
           {
-            collisionDetection: (e) => closestCenter(e),
-            onDragStart: (e) => handleDragStart(e),
-            onDragMove: (e) => handleDragMove(e),
-            onDragOver: (e) => handleDragOver(e),
-            onDragEnd: (e) => handleDragEnd(e),
-            onDragCancel: () => handleDragCancel(),
-            measuring,
-            children: /* @__PURE__ */ jsxs(SortableContext, { items: navigationItems, strategy: verticalListSortingStrategy, children: [
-              navigationItems.map((item, index) => /* @__PURE__ */ jsx(
+            onClick: () => saveNavigation(),
+            loading: isSavingNavigation,
+            variant: "primary",
+            children: formatMessage({
+              id: getTranslation("save"),
+              defaultMessage: "Save"
+            })
+          }
+        )
+      ] }),
+      selectedNavigation && navigationItems && navigationItems.length > 0 && /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 4, children: /* @__PURE__ */ jsx(
+        DndContext,
+        {
+          collisionDetection: (e) => closestCenter(e),
+          onDragStart: (e) => handleDragStart(e),
+          onDragMove: (e) => handleDragMove(e),
+          onDragOver: (e) => handleDragOver(e),
+          onDragEnd: (e) => handleDragEnd(e),
+          onDragCancel: () => handleDragCancel(),
+          measuring,
+          children: /* @__PURE__ */ jsxs(SortableContext, { items: navigationItems, strategy: verticalListSortingStrategy, children: [
+            navigationItems.map((item, index) => /* @__PURE__ */ jsx(
+              SortableRouteItem,
+              {
+                item,
+                setParentId,
+                setActionItem,
+                indentationWidth,
+                depth: item.id === activeId && projected ? projected.depth : item.depth
+              },
+              item.documentId || index
+            )),
+            createPortal(
+              /* @__PURE__ */ jsx(DragOverlay, { children: activeId && activeItem ? /* @__PURE__ */ jsx(
                 SortableRouteItem,
                 {
-                  item,
+                  item: activeItem,
                   setParentId,
-                  setActionItem,
-                  indentationWidth,
-                  depth: item.id === activeId && projected ? projected.depth : item.depth
-                },
-                index
-              )),
-              createPortal(
-                /* @__PURE__ */ jsx(DragOverlay, { children: activeId && activeItem ? /* @__PURE__ */ jsx(
-                  SortableRouteItem,
-                  {
-                    item: activeItem,
-                    setParentId,
-                    setActionItem
-                  }
-                ) : null }),
-                document.body
-              )
-            ] })
-          }
-        ) }),
-        navigations?.length === 0 && /* @__PURE__ */ jsxs(Center, { height: 400, children: [
-          /* @__PURE__ */ jsx(EmptyBox, { msg: formatMessage({
-            id: getTranslation("navigation.page.emptyNavigation"),
-            defaultMessage: "You have no navigations yet..."
-          }) }),
-          /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: () => setModalType("NavCreate"), children: formatMessage({
-            id: getTranslation("navigation.page.createNewNavigation"),
-            defaultMessage: "Create new navigation"
-          }) })
-        ] }),
-        navigationItems?.length === 0 && /* @__PURE__ */ jsxs(Center, { height: 400, children: [
-          /* @__PURE__ */ jsx(EmptyBox, { msg: "Your navigation is empty..." }),
-          /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: () => setModalType("ItemCreate"), children: formatMessage({
-            id: getTranslation("navigation.page.createNewItem"),
-            defaultMessage: "Create new item"
-          }) })
-        ] })
+                  setActionItem
+                }
+              ) : null }),
+              document.body
+            )
+          ] })
+        }
+      ) }),
+      navigations?.length === 0 && /* @__PURE__ */ jsxs(Center, { height: 400, children: [
+        /* @__PURE__ */ jsx(EmptyBox, { msg: formatMessage({
+          id: getTranslation("navigation.page.emptyNavigation"),
+          defaultMessage: "You have no navigations yet..."
+        }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: () => setModalType("NavCreate"), children: formatMessage({
+          id: getTranslation("navigation.page.createNewNavigation"),
+          defaultMessage: "Create new navigation"
+        }) })
+      ] }),
+      navigationItems?.length === 0 && /* @__PURE__ */ jsxs(Center, { height: 400, children: [
+        /* @__PURE__ */ jsx(EmptyBox, { msg: "Your navigation is empty..." }),
+        /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: () => setModalType("ItemCreate"), children: formatMessage({
+          id: getTranslation("navigation.page.createNewItem"),
+          defaultMessage: "Create new item"
+        }) })
       ] })
     ] }),
-    modalType === "NavOverview" && /* @__PURE__ */ jsx(NavOverview, { navigations, setActionItem }),
+    modalType === "NavOverview" && /* @__PURE__ */ jsx(
+      NavOverview,
+      {
+        navigations,
+        setActionItem
+      }
+    ),
     modalType === "NavCreate" && /* @__PURE__ */ jsx(NavCreate, {}),
-    modalType === "NavDelete" && /* @__PURE__ */ jsx(Delete, { variant: "NavDelete", item: actionItem, fetchNavigations }),
-    modalType === "NavEdit" && /* @__PURE__ */ jsx(NavEdit, { item: actionItem, fetchNavigations }),
-    modalType === "ItemCreate" && /* @__PURE__ */ jsx(ItemCreate, { parentId }),
-    modalType === "ItemDelete" && /* @__PURE__ */ jsx(Delete, { variant: "ItemDelete", item: actionItem, fetchNavigations }),
-    modalType === "ItemEdit" && /* @__PURE__ */ jsx(ItemEdit, { item: actionItem }),
-    modalType === "ExternalCreate" && /* @__PURE__ */ jsx(ExternalItem, { variant: modalType, parentDocumentId: parentId }),
-    modalType === "ExternalEdit" && /* @__PURE__ */ jsx(ExternalItem, { variant: modalType, item: actionItem }),
-    modalType === "WrapperCreate" && /* @__PURE__ */ jsx(WrapperItem, { variant: modalType, parentDocumentId: parentId }),
-    modalType === "WrapperEdit" && /* @__PURE__ */ jsx(WrapperItem, { variant: modalType, item: actionItem })
+    modalType === "NavDelete" && /* @__PURE__ */ jsx(
+      Delete,
+      {
+        variant: "NavDelete",
+        item: actionItem,
+        onDelete: () => {
+        }
+      }
+    ),
+    modalType === "NavEdit" && /* @__PURE__ */ jsx(
+      NavEdit,
+      {
+        item: actionItem,
+        onEdit: () => {
+        }
+      }
+    ),
+    modalType === "ItemCreate" && /* @__PURE__ */ jsx(
+      ItemCreate,
+      {
+        parentId,
+        onCreate: (newItem) => {
+          handleSoftAddedItem(newItem);
+        }
+      }
+    ),
+    modalType === "ItemDelete" && /* @__PURE__ */ jsx(
+      Delete,
+      {
+        variant: "ItemDelete",
+        item: actionItem,
+        onDelete: (editedItem) => {
+          setNavigationItems(
+            (items) => items?.map((item) => item.id === editedItem.id ? editedItem : item)
+          );
+        }
+      }
+    ),
+    modalType === "ItemEdit" && /* @__PURE__ */ jsx(
+      ItemEdit,
+      {
+        item: actionItem,
+        onEdit: (editedItem) => {
+          console.log(editedItem);
+          setNavigationItems(
+            (items) => items?.map((item) => item.id === editedItem.id ? editedItem : item)
+          );
+        }
+      }
+    ),
+    modalType === "ExternalCreate" && /* @__PURE__ */ jsx(
+      ExternalItem,
+      {
+        variant: modalType,
+        parentId,
+        onCreate: (newItem) => {
+          handleSoftAddedItem(newItem);
+        }
+      }
+    ),
+    modalType === "ExternalEdit" && /* @__PURE__ */ jsx(
+      ExternalItem,
+      {
+        variant: modalType,
+        item: actionItem,
+        onSave: (editedItem) => {
+          setNavigationItems(
+            (items) => items?.map((item) => item.id === editedItem.id ? editedItem : item)
+          );
+        }
+      }
+    ),
+    modalType === "WrapperCreate" && /* @__PURE__ */ jsx(
+      WrapperItem,
+      {
+        variant: modalType,
+        parentId,
+        onCreate: (newItem) => {
+          handleSoftAddedItem(newItem);
+        }
+      }
+    ),
+    modalType === "WrapperEdit" && /* @__PURE__ */ jsx(
+      WrapperItem,
+      {
+        variant: modalType,
+        item: actionItem,
+        onSave: (editedItem) => {
+          setNavigationItems(
+            (items) => items?.map((item) => item.id === editedItem.id ? editedItem : item)
+          );
+        }
+      }
+    )
   ] }) });
 };
 export {