@strapi/content-type-builder 5.0.0-rc.3 → 5.0.0-rc.30

package/dist/_chunks/{index-C2yjWkJh.mjs → index-BXPQ175h.mjs}

@@ -3,14 +3,13 @@ import * as React from "react";
 import { createContext, useContext, useState, Fragment, useRef, useEffect, memo, useMemo, lazy, Suspense } from "react";
 import { useNotification, useTracking, useStrapiApp, ConfirmDialog, translatedErrors, useGuidedTour, useAppInfo, useAuth, useFetchClient, Page, Layouts } from "@strapi/admin/strapi-admin";
 import { useIntl } from "react-intl";
-import { NavLink, Link as Link$1, useNavigate, useLocation, useMatch, Navigate, Routes, Route } from "react-router-dom";
-import { Flex, Box, Typography, Link, useFilter, useCollator, SubNav, SubNavHeader, SubNavSections, SubNavSection, SubNavLinkSection, SubNavLink, TextButton, Field, MultiSelectNested, KeyboardNavigable, Grid, LinkButton, Modal, Tabs, Divider, SingleSelect, SingleSelectOption, inputFocusStyle, Checkbox, TextInput, NumberInput, Dialog, Button, Breadcrumbs, Crumb, Searchbar, IconButton, Tooltip, VisuallyHidden, TimePicker, Textarea, DatePicker, DateTimePicker, Toggle, JSONInput, Menu, Combobox, ComboboxOption } from "@strapi/design-system";
+import { NavLink, Link, useNavigate, useLocation, useMatch, Navigate, Routes, Route } from "react-router-dom";
+import { p as pluginId, n as nameToSlug, O as ON_CHANGE_RELATION_TARGET, a as ON_CHANGE_RELATION_TYPE, g as getRelationType, M as MAX_COMPONENT_DEPTH, c as createComponentUid, b as createUid, i as initialState, S as SET_DATA_TO_EDIT, d as SET_DYNAMIC_ZONE_DATA_SCHEMA, e as SET_CUSTOM_FIELD_DATA_SCHEMA, f as SET_ATTRIBUTE_DATA_SCHEMA, R as RESET_PROPS, h as SET_ERRORS, j as ON_CHANGE, k as RESET_PROPS_AND_SET_THE_FORM_FOR_ADDING_A_COMPO_TO_A_DZ, l as RESET_PROPS_AND_SET_FORM_FOR_ADDING_AN_EXISTING_COMPO, m as RESET_PROPS_AND_SAVE_CURRENT_DATA, o as initialState$1, q as makeUnique, u as useAutoReloadOverlayBlocker, G as GET_DATA_SUCCEEDED, r as RELOAD_PLUGIN, s as retrieveComponentsFromSchema, t as SET_MODIFIED_DATA, A as ADD_CUSTOM_FIELD_ATTRIBUTE, E as EDIT_CUSTOM_FIELD_ATTRIBUTE, v as ADD_CREATED_COMPONENT_TO_DYNAMIC_ZONE, C as CHANGE_DYNAMIC_ZONE_COMPONENTS, D as DELETE_NOT_SAVED_TYPE, w as REMOVE_COMPONENT_FROM_DYNAMIC_ZONE, U as UPDATE_INITIAL_STATE, x as UPDATE_SCHEMA, y as EDIT_ATTRIBUTE, z as ADD_ATTRIBUTE, B as CREATE_SCHEMA, F as CREATE_COMPONENT_SCHEMA, H as REMOVE_FIELD_FROM_DISPLAYED_COMPONENT, I as REMOVE_FIELD, P as PERMISSIONS, J as AutoReloadOverlayBlockerProvider } from "./index-DFvzA6Sy.mjs";
+import { useFilter, useCollator, SubNavLink, SubNav, SubNavHeader, SubNavSections, SubNavSection, SubNavLinkSection, Box, TextButton, Field, MultiSelectNested, Flex, Typography, KeyboardNavigable, Grid, LinkButton, Link as Link$1, Modal, Tabs, Divider, SingleSelect, SingleSelectOption, inputFocusStyle, Checkbox, TextInput, NumberInput, Dialog, Button, Breadcrumbs, Crumb, Searchbar, IconButton, Tooltip, VisuallyHidden, TimePicker, Textarea, DatePicker, DateTimePicker, Toggle, JSONInput, Menu, Combobox, ComboboxOption } from "@strapi/design-system";
 import * as Icons from "@strapi/icons";
-import { ArrowClockwise, Clock, Plus, Sparkle, ArrowLeft, Search, Trash, Eye, EyeStriked, OneWay, OneToOne, OneToMany, ManyToOne, ManyToMany, ManyWays } from "@strapi/icons";
-import { createPortal } from "react-dom";
-import { keyframes, styled } from "styled-components";
+import { Plus, Sparkle, ArrowLeft, Search, Trash, Eye, EyeStriked, OneWay, OneToOne, OneToMany, ManyToOne, ManyToMany, ManyWays } from "@strapi/icons";
 import upperFirst from "lodash/upperFirst";
-import { p as pluginId, n as nameToSlug, O as ON_CHANGE_RELATION_TARGET, a as ON_CHANGE_RELATION_TYPE, g as getRelationType, M as MAX_COMPONENT_DEPTH, c as createComponentUid, b as createUid, i as initialState, S as SET_DATA_TO_EDIT, d as SET_DYNAMIC_ZONE_DATA_SCHEMA, e as SET_CUSTOM_FIELD_DATA_SCHEMA, f as SET_ATTRIBUTE_DATA_SCHEMA, R as RESET_PROPS, h as SET_ERRORS, j as ON_CHANGE, k as RESET_PROPS_AND_SET_THE_FORM_FOR_ADDING_A_COMPO_TO_A_DZ, l as RESET_PROPS_AND_SET_FORM_FOR_ADDING_AN_EXISTING_COMPO, m as RESET_PROPS_AND_SAVE_CURRENT_DATA, o as initialState$1, q as makeUnique, G as GET_DATA_SUCCEEDED, r as RELOAD_PLUGIN, s as retrieveComponentsFromSchema, t as SET_MODIFIED_DATA, A as ADD_CUSTOM_FIELD_ATTRIBUTE, E as EDIT_CUSTOM_FIELD_ATTRIBUTE, u as ADD_CREATED_COMPONENT_TO_DYNAMIC_ZONE, C as CHANGE_DYNAMIC_ZONE_COMPONENTS, D as DELETE_NOT_SAVED_TYPE, v as REMOVE_COMPONENT_FROM_DYNAMIC_ZONE, U as UPDATE_INITIAL_STATE, w as UPDATE_SCHEMA, x as EDIT_ATTRIBUTE, y as ADD_ATTRIBUTE, z as CREATE_SCHEMA, B as CREATE_COMPONENT_SCHEMA, F as REMOVE_FIELD_FROM_DISPLAYED_COMPONENT, H as REMOVE_FIELD, P as PERMISSIONS } from "./index-1dZSgaqS.mjs";
+import { styled } from "styled-components";
 import isEqual from "lodash/isEqual";
 import get from "lodash/get";
 import groupBy from "lodash/groupBy";
@@ -34,137 +33,6 @@ import { createSelector } from "@reduxjs/toolkit";
 import camelCase from "lodash/camelCase";
 import omit from "lodash/omit";
 import sortBy from "lodash/sortBy";
-const AutoReloadOverlayBlockerContext = React.createContext(
-  {}
-);
-const MAX_ELAPSED_TIME = 30 * 1e3;
-const AutoReloadOverlayBlockerProvider = ({ children }) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [config, setConfig] = React.useState({});
-  const [failed, setFailed] = React.useState(false);
-  const lockAppWithAutoreload = React.useCallback((config2 = {}) => {
-    setIsOpen(true);
-    setConfig(config2);
-  }, []);
-  const unlockAppWithAutoreload = React.useCallback(() => {
-    setIsOpen(false);
-    setConfig({});
-  }, []);
-  React.useEffect(() => {
-    if (isOpen) {
-      const timeout = setTimeout(() => {
-        setFailed(true);
-      }, MAX_ELAPSED_TIME);
-      return () => {
-        clearTimeout(timeout);
-      };
-    }
-  }, [isOpen]);
-  let displayedIcon = config?.icon || "reload";
-  let description = {
-    id: config?.description || "components.OverlayBlocker.description",
-    defaultMessage: "You're using a feature that needs the server to restart. The page will reload automatically."
-  };
-  let title = {
-    id: config?.title || "components.OverlayBlocker.title",
-    defaultMessage: "Waiting for restart"
-  };
-  if (failed) {
-    displayedIcon = "time";
-    description = {
-      id: "components.OverlayBlocker.description.serverError",
-      defaultMessage: "The server should have restarted, please check your logs in the terminal."
-    };
-    title = {
-      id: "components.OverlayBlocker.title.serverError",
-      defaultMessage: "The restart is taking longer than expected"
-    };
-  }
-  const autoReloadValue = React.useMemo(
-    () => ({
-      lockAppWithAutoreload,
-      unlockAppWithAutoreload
-    }),
-    [lockAppWithAutoreload, unlockAppWithAutoreload]
-  );
-  return /* @__PURE__ */ jsxs(AutoReloadOverlayBlockerContext.Provider, { value: autoReloadValue, children: [
-    /* @__PURE__ */ jsx(
-      Blocker,
-      {
-        displayedIcon,
-        isOpen,
-        description,
-        title
-      }
-    ),
-    children
-  ] });
-};
-const Blocker = ({ displayedIcon, description, title, isOpen }) => {
-  const { formatMessage } = useIntl();
-  return isOpen && globalThis?.document?.body ? createPortal(
-    /* @__PURE__ */ jsxs(Overlay, { id: "autoReloadOverlayBlocker", direction: "column", alignItems: "center", gap: 6, children: [
-      /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "center", gap: 2, children: [
-        /* @__PURE__ */ jsx(Typography, { tag: "h1", variant: "alpha", children: formatMessage(title) }),
-        /* @__PURE__ */ jsx(Typography, { tag: "h2", textColor: "neutral600", fontSize: 4, fontWeight: "regular", children: formatMessage(description) })
-      ] }),
-      displayedIcon === "reload" && /* @__PURE__ */ jsx(IconBox$1, { padding: 6, background: "primary100", borderColor: "primary200", children: /* @__PURE__ */ jsx(LoaderReload, { width: "3.6rem", height: "3.6rem" }) }),
-      displayedIcon === "time" && /* @__PURE__ */ jsx(IconBox$1, { padding: 6, background: "primary100", borderColor: "primary200", children: /* @__PURE__ */ jsx(Clock, { width: "4rem", height: "4rem" }) }),
-      /* @__PURE__ */ jsx(Box, { marginTop: 2, children: /* @__PURE__ */ jsx(Link, { href: "https://docs.strapi.io", isExternal: true, children: formatMessage({
-        id: "global.documentation",
-        defaultMessage: "Read the documentation"
-      }) }) })
-    ] }),
-    // eslint-disable-next-line no-undef
-    globalThis.document.body
-  ) : null;
-};
-const rotation = keyframes`
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(359deg);
-    }
-  `;
-const LoaderReload = styled(ArrowClockwise)`
-  animation: ${rotation} 1s infinite linear;
-`;
-const Overlay = styled(Flex)`
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  /* TODO: set this up in the theme for consistence z-index values */
-  z-index: 1140;
-  padding-top: 16rem;
-
-  & > * {
-    position: relative;
-    z-index: 1;
-  }
-
-  &:before {
-    content: '';
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: ${({ theme }) => theme.colors.neutral0};
-    opacity: 0.9;
-  }
-`;
-const IconBox$1 = styled(Box)`
-  border-radius: 50%;
-  svg {
-    > path {
-      fill: ${({ theme }) => theme.colors.primary600} !important;
-    }
-  }
-`;
-const useAutoReloadOverlayBlocker = () => React.useContext(AutoReloadOverlayBlockerContext);
 const getTrad = (id) => `${pluginId}.${id}`;
 const DataManagerContext = createContext();
 const useDataManager = () => useContext(DataManagerContext);
@@ -338,6 +206,17 @@ const useContentTypeBuilderMenu = () => {
     onSearchChange: setSearch
   };
 };
+const SubNavLinkCustom = styled(SubNavLink)`
+  div {
+    width: inherit;
+    span:nth-child(2) {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: inherit;
+    }
+  }
+`;
 const ContentTypeBuilderNav = () => {
   const { menu, searchValue, onSearchChange } = useContentTypeBuilderMenu();
   const { formatMessage } = useIntl();
@@ -386,7 +265,17 @@ const ContentTypeBuilderNav = () => {
                 subLink.name
               )) }, link.name);
             }
-            return /* @__PURE__ */ jsx(SubNavLink, { tag: NavLink, to: link.to, active: link.active, children: upperFirst(formatMessage({ id: link.name, defaultMessage: link.title })) }, link.name);
+            return /* @__PURE__ */ jsx(
+              SubNavLinkCustom,
+              {
+                tag: NavLink,
+                to: link.to,
+                active: link.active,
+                width: "100%",
+                children: upperFirst(formatMessage({ id: link.name, defaultMessage: link.title }))
+              },
+              link.name
+            );
           })
         }
       ),
@@ -565,7 +454,7 @@ const AttributeOption = ({ type = "text" }) => {
 const AttributeList = ({ attributes }) => /* @__PURE__ */ jsx(KeyboardNavigable, { tagName: "button", children: /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 8, children: attributes.map((attributeRow, index2) => {
   return (
     // eslint-disable-next-line react/no-array-index-key
-    /* @__PURE__ */ jsx(Grid.Root, { gap: 3, children: attributeRow.map((attribute) => /* @__PURE__ */ jsx(Grid.Item, { col: 6, children: /* @__PURE__ */ jsx(AttributeOption, { type: attribute }) }, attribute)) }, index2)
+    /* @__PURE__ */ jsx(Grid.Root, { gap: 3, children: attributeRow.map((attribute) => /* @__PURE__ */ jsx(Grid.Item, { col: 6, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsx(AttributeOption, { type: attribute }) }, attribute)) }, index2)
   );
 }) }) });
 const CustomFieldOption = ({ customFieldUid, customField }) => {
@@ -622,7 +511,7 @@ const EmptyAttributes = () => {
       /* @__PURE__ */ jsx(
         LinkButton,
         {
-          tag: Link$1,
+          tag: Link,
           to: `/marketplace?${qs.stringify({ categories: ["Custom fields"] })}`,
           variant: "secondary",
           startIcon: /* @__PURE__ */ jsx(Plus, {}),
@@ -646,9 +535,9 @@ const CustomFieldsList = () => {
     (a, b) => a[1].name > b[1].name ? 1 : -1
   );
   return /* @__PURE__ */ jsx(KeyboardNavigable, { tagName: "button", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 3, children: [
-    /* @__PURE__ */ jsx(Grid.Root, { gap: 3, children: sortedCustomFields.map(([uid, customField]) => /* @__PURE__ */ jsx(Grid.Item, { col: 6, children: /* @__PURE__ */ jsx(CustomFieldOption, { customFieldUid: uid, customField }, uid) }, uid)) }),
+    /* @__PURE__ */ jsx(Grid.Root, { gap: 3, children: sortedCustomFields.map(([uid, customField]) => /* @__PURE__ */ jsx(Grid.Item, { col: 6, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsx(CustomFieldOption, { customFieldUid: uid, customField }, uid) }, uid)) }),
     /* @__PURE__ */ jsx(
-      Link,
+      Link$1,
       {
         href: "https://docs.strapi.io/developer-docs/latest/development/custom-fields.html",
         isExternal: true,
@@ -718,6 +607,9 @@ const Wrapper$1 = styled(Flex)`
     cursor: pointer;
     user-select: none;
     flex: 1;
+    border-radius: 4px;
+    border: 1px solid ${({ theme }) => theme.colors.neutral200};
+
     ${inputFocusStyle()}
   }
 
@@ -729,7 +621,6 @@ const Wrapper$1 = styled(Flex)`
   .option {
     height: 100%;
     border-radius: 4px;
-    border: 1px solid ${({ theme }) => theme.colors.neutral200};
     will-change: transform, opacity;
     background: ${({ theme }) => theme.colors.neutral0};
 
@@ -766,7 +657,6 @@ const Wrapper$1 = styled(Flex)`
   .container input:checked ~ div {
     background: ${({ theme }) => theme.colors.primary100};
     color: ${({ theme }) => theme.colors.primary600};
-    border: 1px solid ${({ theme }) => theme.colors.primary200};
     .checkmark {
       border: solid 1px ${({ theme }) => theme.colors.primary600};
       &::after {
@@ -932,10 +822,19 @@ const DraftAndPublishToggle = ({
       /* @__PURE__ */ jsx(Checkbox, { checked: value, disabled, onCheckedChange: handleChange, children: label }),
       /* @__PURE__ */ jsx(Field.Hint, {})
     ] }),
-    /* @__PURE__ */ jsx(Dialog.Root, { open: showWarning, onOpenChange: (isOpen) => setShowWarning(isOpen), children: /* @__PURE__ */ jsx(ConfirmDialog, { onConfirm: handleConfirm, children: formatMessage({
-      id: getTrad("popUpWarning.draft-publish.message"),
-      defaultMessage: "If you disable the draft & publish, your drafts will be deleted."
-    }) }) })
+    /* @__PURE__ */ jsx(Dialog.Root, { open: showWarning, onOpenChange: (isOpen) => setShowWarning(isOpen), children: /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        endAction: /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, variant: "danger", width: "100%", justifyContent: "center", children: formatMessage({
+          id: getTrad("popUpWarning.draft-publish.button.confirm"),
+          defaultMessage: "Yes, disable"
+        }) }),
+        children: formatMessage({
+          id: getTrad("popUpWarning.draft-publish.message"),
+          defaultMessage: "If you disable the draft & publish, your drafts will be deleted."
+        })
+      }
+    ) })
   ] });
 };
 const FormModalEndActions = ({
@@ -1382,7 +1281,7 @@ const FormModalHeader = ({
   return /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsxs(Flex, { gap: 3, children: [
     showBackLink && // This is a workaround and should use the LinkButton with a variant that currently doesn't exist
     /* @__PURE__ */ jsx(
-      Link,
+      Link$1,
       {
         "aria-label": formatMessage({
           id: getTrad("modalForm.header.back"),
@@ -1700,7 +1599,7 @@ const IconPicker = ({ intlLabel, name, onChange, value = "" }) => {
               id: getTrad("IconPicker.search.button.label"),
               defaultMessage: "Search icon button"
             }),
-            borderWidth: 0,
+            variant: "ghost",
             children: /* @__PURE__ */ jsx(Search, {})
           }
         ),
@@ -1720,7 +1619,7 @@ const IconPicker = ({ intlLabel, name, onChange, value = "" }) => {
                   id: getTrad("IconPicker.remove.button"),
                   defaultMessage: "Remove the selected icon"
                 }),
-                borderWidth: 0,
+                variant: "ghost",
                 children: /* @__PURE__ */ jsx(Trash, {})
               }
             )
@@ -1801,6 +1700,49 @@ const PluralName = ({
     /* @__PURE__ */ jsx(Field.Error, {})
   ] });
 };
+const parseDateValue = (value) => {
+  if (value instanceof Date && isValidDate(value)) {
+    return value;
+  }
+  if (typeof value === "string" || typeof value === "number") {
+    const date = new Date(value);
+    if (isValidDate(date)) {
+      return date;
+    }
+  }
+};
+const isValidDate = (date) => !isNaN(date.getTime());
+const removeSeconds = (time) => {
+  const [hours, minutes] = time.split(":");
+  return `${hours}:${minutes}`;
+};
+const addSecondsAndMilliseconds = (time) => {
+  return time.split(":").length === 2 ? `${time}:00.000` : time;
+};
+const formatTimeForInput = (value) => {
+  if (!value)
+    return;
+  return value.split(":").length > 2 ? removeSeconds(value) : value;
+};
+const formatTimeForOutput = (value) => {
+  if (!value)
+    return void 0;
+  return addSecondsAndMilliseconds(value);
+};
+const handleTimeChange = ({ value }) => {
+  const formattedInputTime = formatTimeForInput(value);
+  return formattedInputTime;
+};
+const handleTimeChangeEvent = (onChange, name, type, time) => {
+  const formattedOutputTime = formatTimeForOutput(time);
+  onChange({
+    target: {
+      name,
+      value: formattedOutputTime,
+      type
+    }
+  });
+};
 const GenericInput = ({
   autoComplete,
   customInputs,
@@ -1952,6 +1894,7 @@ const GenericInput = ({
         );
       }
       case "datetime": {
+        const dateValue = parseDateValue(value);
         return /* @__PURE__ */ jsx(
           DateTimePicker,
           {
@@ -1963,11 +1906,12 @@ const GenericInput = ({
             },
             onClear: () => onChange({ target: { name, value: null, type } }),
             placeholder: formattedPlaceholder,
-            value
+            value: dateValue
           }
         );
       }
       case "date": {
+        const dateValue = parseDateValue(value);
         return /* @__PURE__ */ jsx(
           DatePicker,
           {
@@ -1984,7 +1928,7 @@ const GenericInput = ({
             },
             onClear: () => onChange({ target: { name, value: null, type } }),
             placeholder: formattedPlaceholder,
-            value
+            value: dateValue
           }
         );
       }
@@ -2096,23 +2040,15 @@ const GenericInput = ({
         );
       }
       case "time": {
-        let time = value;
-        if (typeof value === "string" && value.split(":").length > 2) {
-          const [hour, minute] = value.split(":");
-          time = `${hour}:${minute}`;
-        }
+        const formattedValue = handleTimeChange({ value, onChange, name, type });
         return /* @__PURE__ */ jsx(
           TimePicker,
           {
             clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
             disabled,
-            onChange: (time2) => {
-              onChange({ target: { name, value: `${time2}`, type } });
-            },
-            onClear: () => {
-              onChange({ target: { name, value: null, type } });
-            },
-            value: time
+            onChange: (time) => handleTimeChangeEvent(onChange, name, type, time),
+            onClear: () => handleTimeChangeEvent(onChange, name, type, void 0),
+            value: formattedValue
           }
         );
       }
@@ -2252,9 +2188,11 @@ const RelationTargetPicker = ({
   ] });
 };
 const MenuTrigger = styled(Menu.Trigger)`
-  svg {
-    width: 0.6rem;
-    height: 0.4rem;
+  max-width: 16.8rem;
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 `;
 const RelationFormBox = ({
@@ -2805,18 +2743,36 @@ const TabForm = ({
           null
         );
         if (input.type === "pushRight") {
-          return /* @__PURE__ */ jsx(Grid.Item, { col: input.size || 6, children: /* @__PURE__ */ jsx("div", {}) }, input.name || key);
+          return /* @__PURE__ */ jsx(
+            Grid.Item,
+            {
+              col: input.size || 6,
+              direction: "column",
+              alignItems: "stretch",
+              children: /* @__PURE__ */ jsx("div", {})
+            },
+            input.name || key
+          );
         }
-        return /* @__PURE__ */ jsx(Grid.Item, { col: input.size || 6, children: /* @__PURE__ */ jsx(
-          MemoizedGenericInput,
+        return /* @__PURE__ */ jsx(
+          Grid.Item,
           {
-            ...input,
-            ...genericInputProps,
-            error: errorId,
-            onChange,
-            value
-          }
-        ) }, input.name || key);
+            col: input.size || 6,
+            direction: "column",
+            alignItems: "stretch",
+            children: /* @__PURE__ */ jsx(
+              MemoizedGenericInput,
+              {
+                ...input,
+                ...genericInputProps,
+                error: errorId,
+                onChange,
+                value
+              }
+            )
+          },
+          input.name || key
+        );
       }) })
     ] }, sectionIndex);
   }) });
@@ -5007,9 +4963,10 @@ const FormModal = () => {
     kind,
     step,
     targetUid,
-    showBackLink
+    showBackLink,
+    activeTab,
+    setActiveTab
   } = useFormModalNavigation();
-  const [activeTab, setActiveTab] = React.useState("basic");
   const getPlugin = useStrapiApp("FormModal", (state) => state.getPlugin);
   const getCustomField = useStrapiApp("FormModal", (state) => state.customFields.get);
   const customField = getCustomField(customFieldUid);
@@ -6070,7 +6027,7 @@ const DataManagerProvider = ({ children }) => {
   } = useSelector(makeSelectDataManagerProvider());
   const { toggleNotification } = useNotification();
   const { lockAppWithAutoreload, unlockAppWithAutoreload } = useAutoReloadOverlayBlocker();
-  const setCurrentStep = useGuidedTour("DataManagerProvider", (state) => state.setCurrentStep);
+  const { setCurrentStep, setStepState } = useGuidedTour("DataManagerProvider", (state) => state);
   const getPlugin = useStrapiApp("DataManagerProvider", (state) => state.getPlugin);
   const plugin = getPlugin(pluginId);
   const autoReload = useAppInfo("DataManagerProvider", (state) => state.autoReload);
@@ -6399,10 +6356,10 @@ const DataManagerProvider = ({ children }) => {
       } else {
         await put(requestURL, body);
       }
-      await serverRestartWatcher(true);
-      unlockAppWithAutoreload?.();
       if (isCreating && (initialData.contentType?.schema.kind === "collectionType" || initialData.contentType?.schema.kind === "singleType")) {
-        setCurrentStep("contentTypeBuilder.success");
+        setStepState("contentTypeBuilder.success", true);
+        trackUsage("didCreateGuidedTourCollectionType");
+        setCurrentStep(null);
       }
       if (isInContentTypeView) {
         trackUsage("didSaveContentType");
@@ -6414,6 +6371,8 @@ const DataManagerProvider = ({ children }) => {
       } else {
         trackUsage("didSaveComponent");
       }
+      await serverRestartWatcher(true);
+      unlockAppWithAutoreload?.();
       await getDataRef.current();
       dispatch({ type: UPDATE_INITIAL_STATE });
       await updatePermissions();
@@ -6493,7 +6452,8 @@ const INITIAL_STATE_DATA = {
   kind: null,
   step: null,
   targetUid: null,
-  customFieldUid: null
+  customFieldUid: null,
+  activeTab: "basic"
 };
 const FormModalNavigationProvider = ({ children }) => {
   const [state, setFormModalNavigationState] = React.useState(INITIAL_STATE_DATA);
@@ -6505,7 +6465,8 @@ const FormModalNavigationProvider = ({ children }) => {
         actionType: "create",
         modalType: "customField",
         attributeType,
-        customFieldUid
+        customFieldUid,
+        activeTab: "basic"
       };
     });
   };
@@ -6520,7 +6481,8 @@ const FormModalNavigationProvider = ({ children }) => {
         modalType: "attribute",
         step,
         attributeType,
-        showBackLink: true
+        showBackLink: true,
+        activeTab: "basic"
       };
     });
   };
@@ -6547,13 +6509,14 @@ const FormModalNavigationProvider = ({ children }) => {
         targetUid,
         modalType: "chooseAttribute",
         isOpen: true,
-        showBackLink: false
+        showBackLink: false,
+        activeTab: "basic"
       };
     });
   };
   const onOpenModalCreateSchema = (nextState) => {
     setFormModalNavigationState((prevState) => {
-      return { ...prevState, ...nextState, isOpen: true };
+      return { ...prevState, ...nextState, isOpen: true, activeTab: "basic" };
     });
   };
   const onOpenModalEditCategory = (categoryName) => {
@@ -6563,7 +6526,8 @@ const FormModalNavigationProvider = ({ children }) => {
         categoryName,
         actionType: "edit",
         modalType: "editCategory",
-        isOpen: true
+        isOpen: true,
+        activeTab: "basic"
       };
     });
   };
@@ -6584,7 +6548,8 @@ const FormModalNavigationProvider = ({ children }) => {
         targetUid,
         attributeName,
         attributeType,
-        isOpen: true
+        isOpen: true,
+        activeTab: "basic"
       };
     });
   };
@@ -6618,7 +6583,8 @@ const FormModalNavigationProvider = ({ children }) => {
         forTarget,
         targetUid,
         kind,
-        isOpen: true
+        isOpen: true,
+        activeTab: "basic"
       };
     });
   };
@@ -6631,7 +6597,8 @@ const FormModalNavigationProvider = ({ children }) => {
         ...prev,
         forTarget,
         targetUid,
-        modalType: "chooseAttribute"
+        modalType: "chooseAttribute",
+        activeTab: "basic"
       };
     });
   };
@@ -6641,7 +6608,8 @@ const FormModalNavigationProvider = ({ children }) => {
         ...prev,
         attributeType: "component",
         modalType: "attribute",
-        step: "2"
+        step: "2",
+        activeTab: "basic"
       };
     });
   };
@@ -6654,7 +6622,16 @@ const FormModalNavigationProvider = ({ children }) => {
         actionType: "create",
         step: "1",
         attributeType: null,
-        attributeName: null
+        attributeName: null,
+        activeTab: "basic"
+      };
+    });
+  };
+  const setActiveTab = (value) => {
+    setFormModalNavigationState((prev) => {
+      return {
+        ...prev,
+        activeTab: value
       };
     });
   };
@@ -6676,17 +6653,18 @@ const FormModalNavigationProvider = ({ children }) => {
         onOpenModalEditField,
         onOpenModalEditCustomField,
         onOpenModalEditSchema,
-        setFormModalNavigationState
+        setFormModalNavigationState,
+        setActiveTab
       },
       children
     }
   );
 };
-const ListView$1 = lazy(() => import("./ListView-CXba7ij5.mjs"));
+const ListView$1 = lazy(() => import("./ListView-CGLqkUBZ.mjs"));
 const RecursivePath = () => {
   return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Page.Loading, {}), children: /* @__PURE__ */ jsx(Routes, { children: /* @__PURE__ */ jsx(Route, { path: `/:componentUid`, element: /* @__PURE__ */ jsx(ListView$1, {}) }) }) });
 };
-const ListView = lazy(() => import("./ListView-CXba7ij5.mjs"));
+const ListView = lazy(() => import("./ListView-CGLqkUBZ.mjs"));
 const App = () => {
   const { formatMessage } = useIntl();
   const title = formatMessage({
@@ -6720,4 +6698,4 @@ export {
   index as i,
   useDataManager as u
 };
-//# sourceMappingURL=index-C2yjWkJh.mjs.map
+//# sourceMappingURL=index-BXPQ175h.mjs.map