@strapi/content-type-builder 5.0.0-rc.2 → 5.0.0-rc.21

package/dist/_chunks/{index--5pQbGLD.js → index-DJuRylRg.js}

@@ -9,7 +9,7 @@ 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-CcKr65ti.js");
+const index$1 = require("./index-DrmFbRLA.js");
 const isEqual = require("lodash/isEqual");
 const get = require("lodash/get");
 const groupBy = require("lodash/groupBy");
@@ -377,6 +377,17 @@ const useContentTypeBuilderMenu = () => {
     onSearchChange: setSearch
   };
 };
+const SubNavLinkCustom = styledComponents.styled(designSystem.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 } = reactIntl.useIntl();
@@ -425,7 +436,17 @@ const ContentTypeBuilderNav = () => {
                 subLink.name
               )) }, link.name);
             }
-            return /* @__PURE__ */ jsxRuntime.jsx(designSystem.SubNavLink, { tag: reactRouterDom.NavLink, to: link.to, active: link.active, children: upperFirst__default.default(formatMessage({ id: link.name, defaultMessage: link.title })) }, link.name);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              SubNavLinkCustom,
+              {
+                tag: reactRouterDom.NavLink,
+                to: link.to,
+                active: link.active,
+                width: "100%",
+                children: upperFirst__default.default(formatMessage({ id: link.name, defaultMessage: link.title }))
+              },
+              link.name
+            );
           })
         }
       ),
@@ -604,7 +625,7 @@ const AttributeOption = ({ type = "text" }) => {
 const AttributeList = ({ attributes }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.KeyboardNavigable, { tagName: "button", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 8, children: attributes.map((attributeRow, index2) => {
   return (
     // eslint-disable-next-line react/no-array-index-key
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 3, children: attributeRow.map((attribute) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(AttributeOption, { type: attribute }) }, attribute)) }, index2)
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 3, children: attributeRow.map((attribute) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsx(AttributeOption, { type: attribute }) }, attribute)) }, index2)
   );
 }) }) });
 const CustomFieldOption = ({ customFieldUid, customField }) => {
@@ -685,7 +706,7 @@ const CustomFieldsList = () => {
     (a, b) => a[1].name > b[1].name ? 1 : -1
   );
   return /* @__PURE__ */ jsxRuntime.jsx(designSystem.KeyboardNavigable, { tagName: "button", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 3, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 3, children: sortedCustomFields.map(([uid, customField]) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(CustomFieldOption, { customFieldUid: uid, customField }, uid) }, uid)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 3, children: sortedCustomFields.map(([uid, customField]) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsx(CustomFieldOption, { customFieldUid: uid, customField }, uid) }, uid)) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.Link,
       {
@@ -757,6 +778,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()}
   }
 
@@ -768,7 +792,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};
 
@@ -805,7 +828,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 {
@@ -971,10 +993,19 @@ const DraftAndPublishToggle = ({
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Checkbox, { checked: value, disabled, onCheckedChange: handleChange, children: label }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Root, { open: showWarning, onOpenChange: (isOpen) => setShowWarning(isOpen), children: /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.ConfirmDialog, { onConfirm: handleConfirm, children: formatMessage({
-      id: getTrad("popUpWarning.draft-publish.message"),
-      defaultMessage: "If you disable the draft & publish, your drafts will be deleted."
-    }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Root, { open: showWarning, onOpenChange: (isOpen) => setShowWarning(isOpen), children: /* @__PURE__ */ jsxRuntime.jsx(
+      strapiAdmin.ConfirmDialog,
+      {
+        endAction: /* @__PURE__ */ jsxRuntime.jsx(designSystem.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 = ({
@@ -1739,7 +1770,7 @@ const IconPicker = ({ intlLabel, name, onChange, value = "" }) => {
               id: getTrad("IconPicker.search.button.label"),
               defaultMessage: "Search icon button"
             }),
-            borderWidth: 0,
+            variant: "ghost",
             children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Search, {})
           }
         ),
@@ -1759,7 +1790,7 @@ const IconPicker = ({ intlLabel, name, onChange, value = "" }) => {
                   id: getTrad("IconPicker.remove.button"),
                   defaultMessage: "Remove the selected icon"
                 }),
-                borderWidth: 0,
+                variant: "ghost",
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
               }
             )
@@ -1840,6 +1871,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,
@@ -1991,6 +2065,7 @@ const GenericInput = ({
         );
       }
       case "datetime": {
+        const dateValue = parseDateValue(value);
         return /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.DateTimePicker,
           {
@@ -2002,11 +2077,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,
           {
@@ -2023,7 +2099,7 @@ const GenericInput = ({
             },
             onClear: () => onChange({ target: { name, value: null, type } }),
             placeholder: formattedPlaceholder,
-            value
+            value: dateValue
           }
         );
       }
@@ -2135,23 +2211,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
           }
         );
       }
@@ -2291,9 +2359,11 @@ const RelationTargetPicker = ({
   ] });
 };
 const MenuTrigger = styledComponents.styled(designSystem.Menu.Trigger)`
-  svg {
-    width: 0.6rem;
-    height: 0.4rem;
+  max-width: 16.8rem;
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 `;
 const RelationFormBox = ({
@@ -2844,18 +2914,36 @@ const TabForm = ({
           null
         );
         if (input.type === "pushRight") {
-          return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: input.size || 6, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) }, input.name || key);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Grid.Item,
+            {
+              col: input.size || 6,
+              direction: "column",
+              alignItems: "stretch",
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", {})
+            },
+            input.name || key
+          );
         }
-        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: input.size || 6, children: /* @__PURE__ */ jsxRuntime.jsx(
-          MemoizedGenericInput,
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Grid.Item,
           {
-            ...input,
-            ...genericInputProps,
-            error: errorId,
-            onChange,
-            value
-          }
-        ) }, input.name || key);
+            col: input.size || 6,
+            direction: "column",
+            alignItems: "stretch",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              MemoizedGenericInput,
+              {
+                ...input,
+                ...genericInputProps,
+                error: errorId,
+                onChange,
+                value
+              }
+            )
+          },
+          input.name || key
+        );
       }) })
     ] }, sectionIndex);
   }) });
@@ -5046,9 +5134,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);
@@ -6109,7 +6198,7 @@ const DataManagerProvider = ({ children }) => {
   } = reactRedux.useSelector(makeSelectDataManagerProvider());
   const { toggleNotification } = strapiAdmin.useNotification();
   const { lockAppWithAutoreload, unlockAppWithAutoreload } = useAutoReloadOverlayBlocker();
-  const setCurrentStep = strapiAdmin.useGuidedTour("DataManagerProvider", (state) => state.setCurrentStep);
+  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);
@@ -6438,10 +6527,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");
@@ -6453,6 +6542,8 @@ const DataManagerProvider = ({ children }) => {
       } else {
         trackUsage("didSaveComponent");
       }
+      await serverRestartWatcher(true);
+      unlockAppWithAutoreload?.();
       await getDataRef.current();
       dispatch({ type: index$1.UPDATE_INITIAL_STATE });
       await updatePermissions();
@@ -6532,7 +6623,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);
@@ -6544,7 +6636,8 @@ const FormModalNavigationProvider = ({ children }) => {
         actionType: "create",
         modalType: "customField",
         attributeType,
-        customFieldUid
+        customFieldUid,
+        activeTab: "basic"
       };
     });
   };
@@ -6559,7 +6652,8 @@ const FormModalNavigationProvider = ({ children }) => {
         modalType: "attribute",
         step,
         attributeType,
-        showBackLink: true
+        showBackLink: true,
+        activeTab: "basic"
       };
     });
   };
@@ -6586,13 +6680,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) => {
@@ -6602,7 +6697,8 @@ const FormModalNavigationProvider = ({ children }) => {
         categoryName,
         actionType: "edit",
         modalType: "editCategory",
-        isOpen: true
+        isOpen: true,
+        activeTab: "basic"
       };
     });
   };
@@ -6623,7 +6719,8 @@ const FormModalNavigationProvider = ({ children }) => {
         targetUid,
         attributeName,
         attributeType,
-        isOpen: true
+        isOpen: true,
+        activeTab: "basic"
       };
     });
   };
@@ -6657,7 +6754,8 @@ const FormModalNavigationProvider = ({ children }) => {
         forTarget,
         targetUid,
         kind,
-        isOpen: true
+        isOpen: true,
+        activeTab: "basic"
       };
     });
   };
@@ -6670,7 +6768,8 @@ const FormModalNavigationProvider = ({ children }) => {
         ...prev,
         forTarget,
         targetUid,
-        modalType: "chooseAttribute"
+        modalType: "chooseAttribute",
+        activeTab: "basic"
       };
     });
   };
@@ -6680,7 +6779,8 @@ const FormModalNavigationProvider = ({ children }) => {
         ...prev,
         attributeType: "component",
         modalType: "attribute",
-        step: "2"
+        step: "2",
+        activeTab: "basic"
       };
     });
   };
@@ -6693,7 +6793,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
       };
     });
   };
@@ -6715,17 +6824,18 @@ const FormModalNavigationProvider = ({ children }) => {
         onOpenModalEditField,
         onOpenModalEditCustomField,
         onOpenModalEditSchema,
-        setFormModalNavigationState
+        setFormModalNavigationState,
+        setActiveTab
       },
       children
     }
   );
 };
-const ListView$1 = React.lazy(() => Promise.resolve().then(() => require("./ListView-XE65NvP8.js")));
+const ListView$1 = React.lazy(() => Promise.resolve().then(() => require("./ListView-BJkF062E.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-XE65NvP8.js")));
+const ListView = React.lazy(() => Promise.resolve().then(() => require("./ListView-BJkF062E.js")));
 const App = () => {
   const { formatMessage } = reactIntl.useIntl();
   const title = formatMessage({
@@ -6757,4 +6867,4 @@ exports.getTrad = getTrad;
 exports.index = index;
 exports.useDataManager = useDataManager;
 exports.useFormModalNavigation = useFormModalNavigation;
-//# sourceMappingURL=index--5pQbGLD.js.map
+//# sourceMappingURL=index-DJuRylRg.js.map