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

package/dist/_chunks/{index-b5GKS0j7.mjs → index-DoESWWlo.mjs}

@@ -4,13 +4,13 @@ import { createContext, useContext, useState, Fragment, useRef, useEffect, memo,
 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 { Flex, Box, Typography, Link, useFilter, useCollator, SubNavLink, SubNav, SubNavHeader, SubNavSections, SubNavSection, SubNavLinkSection, 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 * 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 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-BUl4iZYG.mjs";
+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-CclXDFWL.mjs";
 import isEqual from "lodash/isEqual";
 import get from "lodash/get";
 import groupBy from "lodash/groupBy";
@@ -338,6 +338,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 +397,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 +586,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 }) => {
@@ -646,7 +667,7 @@ 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,
       {
@@ -718,6 +739,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 +753,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 +789,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 +954,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 = ({
@@ -1700,7 +1731,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 +1751,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 +1832,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 +2026,7 @@ const GenericInput = ({
         );
       }
       case "datetime": {
+        const dateValue = parseDateValue(value);
         return /* @__PURE__ */ jsx(
           DateTimePicker,
           {
@@ -1963,11 +2038,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 +2060,7 @@ const GenericInput = ({
             },
             onClear: () => onChange({ target: { name, value: null, type } }),
             placeholder: formattedPlaceholder,
-            value
+            value: dateValue
           }
         );
       }
@@ -2096,23 +2172,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 +2320,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 +2875,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 +5095,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 +6159,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 +6488,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 +6503,8 @@ const DataManagerProvider = ({ children }) => {
       } else {
         trackUsage("didSaveComponent");
       }
+      await serverRestartWatcher(true);
+      unlockAppWithAutoreload?.();
       await getDataRef.current();
       dispatch({ type: UPDATE_INITIAL_STATE });
       await updatePermissions();
@@ -6493,7 +6584,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 +6597,8 @@ const FormModalNavigationProvider = ({ children }) => {
         actionType: "create",
         modalType: "customField",
         attributeType,
-        customFieldUid
+        customFieldUid,
+        activeTab: "basic"
       };
     });
   };
@@ -6520,7 +6613,8 @@ const FormModalNavigationProvider = ({ children }) => {
         modalType: "attribute",
         step,
         attributeType,
-        showBackLink: true
+        showBackLink: true,
+        activeTab: "basic"
       };
     });
   };
@@ -6547,13 +6641,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 +6658,8 @@ const FormModalNavigationProvider = ({ children }) => {
         categoryName,
         actionType: "edit",
         modalType: "editCategory",
-        isOpen: true
+        isOpen: true,
+        activeTab: "basic"
       };
     });
   };
@@ -6584,7 +6680,8 @@ const FormModalNavigationProvider = ({ children }) => {
         targetUid,
         attributeName,
         attributeType,
-        isOpen: true
+        isOpen: true,
+        activeTab: "basic"
       };
     });
   };
@@ -6618,7 +6715,8 @@ const FormModalNavigationProvider = ({ children }) => {
         forTarget,
         targetUid,
         kind,
-        isOpen: true
+        isOpen: true,
+        activeTab: "basic"
       };
     });
   };
@@ -6631,7 +6729,8 @@ const FormModalNavigationProvider = ({ children }) => {
         ...prev,
         forTarget,
         targetUid,
-        modalType: "chooseAttribute"
+        modalType: "chooseAttribute",
+        activeTab: "basic"
       };
     });
   };
@@ -6641,7 +6740,8 @@ const FormModalNavigationProvider = ({ children }) => {
         ...prev,
         attributeType: "component",
         modalType: "attribute",
-        step: "2"
+        step: "2",
+        activeTab: "basic"
       };
     });
   };
@@ -6654,7 +6754,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 +6785,18 @@ const FormModalNavigationProvider = ({ children }) => {
         onOpenModalEditField,
         onOpenModalEditCustomField,
         onOpenModalEditSchema,
-        setFormModalNavigationState
+        setFormModalNavigationState,
+        setActiveTab
       },
       children
     }
   );
 };
-const ListView$1 = lazy(() => import("./ListView-yYLey9cN.mjs"));
+const ListView$1 = lazy(() => import("./ListView-ChHlVW9E.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-yYLey9cN.mjs"));
+const ListView = lazy(() => import("./ListView-ChHlVW9E.mjs"));
 const App = () => {
   const { formatMessage } = useIntl();
   const title = formatMessage({
@@ -6720,4 +6830,4 @@ export {
   index as i,
   useDataManager as u
 };
-//# sourceMappingURL=index-b5GKS0j7.mjs.map
+//# sourceMappingURL=index-DoESWWlo.mjs.map