@strapi/content-type-builder 5.0.0-rc.9 → 5.0.0

package/dist/_chunks/{index-Hl6JWkwo.js → index-BVbHj3Bu.js}

@@ -4,12 +4,11 @@ const React = require("react");
 const strapiAdmin = require("@strapi/admin/strapi-admin");
 const reactIntl = require("react-intl");
 const reactRouterDom = require("react-router-dom");
+const index$1 = require("./index-Be2fSfxp.js");
 const designSystem = require("@strapi/design-system");
 const Icons = require("@strapi/icons");
-const reactDom = require("react-dom");
-const styledComponents = require("styled-components");
 const upperFirst = require("lodash/upperFirst");
-const index$1 = require("./index-nJaZni0J.js");
+const styledComponents = require("styled-components");
 const isEqual = require("lodash/isEqual");
 const get = require("lodash/get");
 const groupBy = require("lodash/groupBy");
@@ -73,137 +72,6 @@ const toNumber__default = /* @__PURE__ */ _interopDefault(toNumber);
 const camelCase__default = /* @__PURE__ */ _interopDefault(camelCase);
 const omit__default = /* @__PURE__ */ _interopDefault(omit);
 const sortBy__default = /* @__PURE__ */ _interopDefault(sortBy);
-const AutoReloadOverlayBlockerContext = React__namespace.createContext(
-  {}
-);
-const MAX_ELAPSED_TIME = 30 * 1e3;
-const AutoReloadOverlayBlockerProvider = ({ children }) => {
-  const [isOpen, setIsOpen] = React__namespace.useState(false);
-  const [config, setConfig] = React__namespace.useState({});
-  const [failed, setFailed] = React__namespace.useState(false);
-  const lockAppWithAutoreload = React__namespace.useCallback((config2 = {}) => {
-    setIsOpen(true);
-    setConfig(config2);
-  }, []);
-  const unlockAppWithAutoreload = React__namespace.useCallback(() => {
-    setIsOpen(false);
-    setConfig({});
-  }, []);
-  React__namespace.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__namespace.useMemo(
-    () => ({
-      lockAppWithAutoreload,
-      unlockAppWithAutoreload
-    }),
-    [lockAppWithAutoreload, unlockAppWithAutoreload]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(AutoReloadOverlayBlockerContext.Provider, { value: autoReloadValue, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Blocker,
-      {
-        displayedIcon,
-        isOpen,
-        description,
-        title
-      }
-    ),
-    children
-  ] });
-};
-const Blocker = ({ displayedIcon, description, title, isOpen }) => {
-  const { formatMessage } = reactIntl.useIntl();
-  return isOpen && globalThis?.document?.body ? reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsxs(Overlay, { id: "autoReloadOverlayBlocker", direction: "column", alignItems: "center", gap: 6, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 2, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "h1", variant: "alpha", children: formatMessage(title) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "h2", textColor: "neutral600", fontSize: 4, fontWeight: "regular", children: formatMessage(description) })
-      ] }),
-      displayedIcon === "reload" && /* @__PURE__ */ jsxRuntime.jsx(IconBox$1, { padding: 6, background: "primary100", borderColor: "primary200", children: /* @__PURE__ */ jsxRuntime.jsx(LoaderReload, { width: "3.6rem", height: "3.6rem" }) }),
-      displayedIcon === "time" && /* @__PURE__ */ jsxRuntime.jsx(IconBox$1, { padding: 6, background: "primary100", borderColor: "primary200", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Clock, { width: "4rem", height: "4rem" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.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 = styledComponents.keyframes`
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(359deg);
-    }
-  `;
-const LoaderReload = styledComponents.styled(Icons.ArrowClockwise)`
-  animation: ${rotation} 1s infinite linear;
-`;
-const Overlay = styledComponents.styled(designSystem.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 = styledComponents.styled(designSystem.Box)`
-  border-radius: 50%;
-  svg {
-    > path {
-      fill: ${({ theme }) => theme.colors.primary600} !important;
-    }
-  }
-`;
-const useAutoReloadOverlayBlocker = () => React__namespace.useContext(AutoReloadOverlayBlockerContext);
 const getTrad = (id) => `${index$1.pluginId}.${id}`;
 const DataManagerContext = React.createContext();
 const useDataManager = () => React.useContext(DataManagerContext);
@@ -778,6 +646,9 @@ const Wrapper$1 = styledComponents.styled(designSystem.Flex)`
     cursor: pointer;
     user-select: none;
     flex: 1;
+    border-radius: 4px;
+    border: 1px solid ${({ theme }) => theme.colors.neutral200};
+
     ${designSystem.inputFocusStyle()}
   }
 
@@ -789,7 +660,6 @@ const Wrapper$1 = styledComponents.styled(designSystem.Flex)`
   .option {
     height: 100%;
     border-radius: 4px;
-    border: 1px solid ${({ theme }) => theme.colors.neutral200};
     will-change: transform, opacity;
     background: ${({ theme }) => theme.colors.neutral0};
 
@@ -826,7 +696,6 @@ const Wrapper$1 = styledComponents.styled(designSystem.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 {
@@ -1870,6 +1739,49 @@ const PluralName = ({
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.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,
@@ -2021,6 +1933,7 @@ const GenericInput = ({
         );
       }
       case "datetime": {
+        const dateValue = parseDateValue(value);
         return /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.DateTimePicker,
           {
@@ -2032,11 +1945,12 @@ const GenericInput = ({
             },
             onClear: () => onChange({ target: { name, value: null, type } }),
             placeholder: formattedPlaceholder,
-            value
+            value: dateValue
           }
         );
       }
       case "date": {
+        const dateValue = parseDateValue(value);
         return /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.DatePicker,
           {
@@ -2053,7 +1967,7 @@ const GenericInput = ({
             },
             onClear: () => onChange({ target: { name, value: null, type } }),
             placeholder: formattedPlaceholder,
-            value
+            value: dateValue
           }
         );
       }
@@ -2165,23 +2079,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__ */ jsxRuntime.jsx(
           designSystem.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
           }
         );
       }
@@ -2327,10 +2233,6 @@ const MenuTrigger = styledComponents.styled(designSystem.Menu.Trigger)`
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  svg {
-    width: 0.6rem;
-    height: 0.4rem;
-  }
 `;
 const RelationFormBox = ({
   disabled = false,
@@ -5100,9 +5002,10 @@ const FormModal = () => {
     kind,
     step,
     targetUid,
-    showBackLink
+    showBackLink,
+    activeTab,
+    setActiveTab
   } = useFormModalNavigation();
-  const [activeTab, setActiveTab] = React__namespace.useState("basic");
   const getPlugin = strapiAdmin.useStrapiApp("FormModal", (state) => state.getPlugin);
   const getCustomField = strapiAdmin.useStrapiApp("FormModal", (state) => state.customFields.get);
   const customField = getCustomField(customFieldUid);
@@ -6162,8 +6065,8 @@ const DataManagerProvider = ({ children }) => {
     reservedNames
   } = reactRedux.useSelector(makeSelectDataManagerProvider());
   const { toggleNotification } = strapiAdmin.useNotification();
-  const { lockAppWithAutoreload, unlockAppWithAutoreload } = useAutoReloadOverlayBlocker();
-  const setCurrentStep = strapiAdmin.useGuidedTour("DataManagerProvider", (state) => state.setCurrentStep);
+  const { lockAppWithAutoreload, unlockAppWithAutoreload } = index$1.useAutoReloadOverlayBlocker();
+  const { setCurrentStep, setStepState } = strapiAdmin.useGuidedTour("DataManagerProvider", (state) => state);
   const getPlugin = strapiAdmin.useStrapiApp("DataManagerProvider", (state) => state.getPlugin);
   const plugin = getPlugin(index$1.pluginId);
   const autoReload = strapiAdmin.useAppInfo("DataManagerProvider", (state) => state.autoReload);
@@ -6492,10 +6395,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");
@@ -6507,6 +6410,8 @@ const DataManagerProvider = ({ children }) => {
       } else {
         trackUsage("didSaveComponent");
       }
+      await serverRestartWatcher(true);
+      unlockAppWithAutoreload?.();
       await getDataRef.current();
       dispatch({ type: index$1.UPDATE_INITIAL_STATE });
       await updatePermissions();
@@ -6586,7 +6491,8 @@ const INITIAL_STATE_DATA = {
   kind: null,
   step: null,
   targetUid: null,
-  customFieldUid: null
+  customFieldUid: null,
+  activeTab: "basic"
 };
 const FormModalNavigationProvider = ({ children }) => {
   const [state, setFormModalNavigationState] = React__namespace.useState(INITIAL_STATE_DATA);
@@ -6598,7 +6504,8 @@ const FormModalNavigationProvider = ({ children }) => {
         actionType: "create",
         modalType: "customField",
         attributeType,
-        customFieldUid
+        customFieldUid,
+        activeTab: "basic"
       };
     });
   };
@@ -6613,7 +6520,8 @@ const FormModalNavigationProvider = ({ children }) => {
         modalType: "attribute",
         step,
         attributeType,
-        showBackLink: true
+        showBackLink: true,
+        activeTab: "basic"
       };
     });
   };
@@ -6640,13 +6548,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) => {
@@ -6656,7 +6565,8 @@ const FormModalNavigationProvider = ({ children }) => {
         categoryName,
         actionType: "edit",
         modalType: "editCategory",
-        isOpen: true
+        isOpen: true,
+        activeTab: "basic"
       };
     });
   };
@@ -6677,7 +6587,8 @@ const FormModalNavigationProvider = ({ children }) => {
         targetUid,
         attributeName,
         attributeType,
-        isOpen: true
+        isOpen: true,
+        activeTab: "basic"
       };
     });
   };
@@ -6711,7 +6622,8 @@ const FormModalNavigationProvider = ({ children }) => {
         forTarget,
         targetUid,
         kind,
-        isOpen: true
+        isOpen: true,
+        activeTab: "basic"
       };
     });
   };
@@ -6724,7 +6636,8 @@ const FormModalNavigationProvider = ({ children }) => {
         ...prev,
         forTarget,
         targetUid,
-        modalType: "chooseAttribute"
+        modalType: "chooseAttribute",
+        activeTab: "basic"
       };
     });
   };
@@ -6734,7 +6647,8 @@ const FormModalNavigationProvider = ({ children }) => {
         ...prev,
         attributeType: "component",
         modalType: "attribute",
-        step: "2"
+        step: "2",
+        activeTab: "basic"
       };
     });
   };
@@ -6747,7 +6661,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
       };
     });
   };
@@ -6769,17 +6692,18 @@ const FormModalNavigationProvider = ({ children }) => {
         onOpenModalEditField,
         onOpenModalEditCustomField,
         onOpenModalEditSchema,
-        setFormModalNavigationState
+        setFormModalNavigationState,
+        setActiveTab
       },
       children
     }
   );
 };
-const ListView$1 = React.lazy(() => Promise.resolve().then(() => require("./ListView-BUKiiZrv.js")));
+const ListView$1 = React.lazy(() => Promise.resolve().then(() => require("./ListView-CxvINB8V.js")));
 const RecursivePath = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.Page.Loading, {}), children: /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Routes, { children: /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: `/:componentUid`, element: /* @__PURE__ */ jsxRuntime.jsx(ListView$1, {}) }) }) });
 };
-const ListView = React.lazy(() => Promise.resolve().then(() => require("./ListView-BUKiiZrv.js")));
+const ListView = React.lazy(() => Promise.resolve().then(() => require("./ListView-CxvINB8V.js")));
 const App = () => {
   const { formatMessage } = reactIntl.useIntl();
   const title = formatMessage({
@@ -6795,7 +6719,7 @@ const App = () => {
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(strapiAdmin.Page.Protect, { permissions: index$1.PERMISSIONS.main, children: [
     /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.Page.Title, { children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx(AutoReloadOverlayBlockerProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(FormModalNavigationProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(DataManagerProvider$1, { children: /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.Layouts.Root, { sideNav: /* @__PURE__ */ jsxRuntime.jsx(ContentTypeBuilderNav, {}), children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.Page.Loading, {}), children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index$1.AutoReloadOverlayBlockerProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(FormModalNavigationProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(DataManagerProvider$1, { children: /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.Layouts.Root, { sideNav: /* @__PURE__ */ jsxRuntime.jsx(ContentTypeBuilderNav, {}), children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.Page.Loading, {}), children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "content-types/:uid", element: /* @__PURE__ */ jsxRuntime.jsx(ListView, {}) }),
       /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: `component-categories/:categoryUid/*`, element: /* @__PURE__ */ jsxRuntime.jsx(RecursivePath, {}) })
     ] }) }) }) }) }) })
@@ -6811,4 +6735,4 @@ exports.getTrad = getTrad;
 exports.index = index;
 exports.useDataManager = useDataManager;
 exports.useFormModalNavigation = useFormModalNavigation;
-//# sourceMappingURL=index-Hl6JWkwo.js.map
+//# sourceMappingURL=index-BVbHj3Bu.js.map