@strapi/content-manager 0.0.0-experimental.baa6cf22298e591b4d52d8e59c60406d7a9f137f → 0.0.0-experimental.d954d57341a6623992a0d211daaec8e245c3517d

package/dist/_chunks/{Field-DnJMS8cB.js → Field-BG1xu38N.js}

@@ -5,9 +5,9 @@ const strapiAdmin = require("@strapi/admin/strapi-admin");
 const designSystem = require("@strapi/design-system");
 const pipe$1 = require("lodash/fp/pipe");
 const reactIntl = require("react-intl");
-const index = require("./index-BRHpg0az.js");
+const index = require("./index-CWpLBSt0.js");
 const fractionalIndexing = require("fractional-indexing");
-const Relations = require("./Relations-wHyjWWT5.js");
+const Relations = require("./Relations-CcgFTcWo.js");
 const Icons = require("@strapi/icons");
 const styledComponents = require("styled-components");
 const ComponentIcon = require("./ComponentIcon-BXdiCGQp.js");
@@ -623,17 +623,23 @@ const LinkContent = React__namespace.forwardRef(
     const [popoverOpen, setPopoverOpen] = React__namespace.useState(
       editor.lastInsertedLinkPath ? slate.Path.equals(path, editor.lastInsertedLinkPath) : false
     );
-    const linkRef = React__namespace.useRef(null);
     const elementText = link.children.map((child) => child.text).join("");
     const [linkText, setLinkText] = React__namespace.useState(elementText);
     const [linkUrl, setLinkUrl] = React__namespace.useState(link.url);
     const linkInputRef = React__namespace.useRef(null);
     const [showRemoveButton, setShowRemoveButton] = React__namespace.useState(false);
     const [isSaveDisabled, setIsSaveDisabled] = React__namespace.useState(false);
-    const handleOpenEditPopover = (e) => {
-      e.preventDefault();
-      setPopoverOpen(true);
-      setShowRemoveButton(true);
+    const handleOpenChange = (isOpen) => {
+      if (isOpen) {
+        setPopoverOpen(isOpen);
+        setShowRemoveButton(isOpen);
+      } else {
+        setPopoverOpen(isOpen);
+        if (link.url === "") {
+          removeLink(editor);
+        }
+        slateReact.ReactEditor.focus(editor);
+      }
     };
     const onLinkChange = (e) => {
       setIsSaveDisabled(false);
@@ -656,32 +662,14 @@ const LinkContent = React__namespace.forwardRef(
       setPopoverOpen(false);
       editor.lastInsertedLinkPath = null;
     };
-    const handleDismiss = () => {
-      setPopoverOpen(false);
-      if (link.url === "") {
-        removeLink(editor);
-      }
-      slateReact.ReactEditor.focus(editor);
-    };
-    const inputNotDirty = !linkText || !linkUrl || link.url && link.url === linkUrl && elementText && elementText === linkText;
-    const composedRefs = designSystem.useComposedRefs(linkRef, forwardedRef);
     React__namespace.useEffect(() => {
       if (popoverOpen)
         linkInputRef.current?.focus();
     }, [popoverOpen]);
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        StyledBaseLink,
-        {
-          ...attributes,
-          ref: composedRefs,
-          href: link.url,
-          onClick: handleOpenEditPopover,
-          color: "primary600",
-          children
-        }
-      ),
-      popoverOpen && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover, { source: linkRef, onDismiss: handleDismiss, padding: 4, contentEditable: false, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "form", onSubmit: handleSave, direction: "column", gap: 4, children: [
+    const inputNotDirty = !linkText || !linkUrl || link.url && link.url === linkUrl && elementText && elementText === linkText;
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Popover.Root, { onOpenChange: handleOpenChange, open: popoverOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledBaseLink, { ...attributes, ref: forwardedRef, href: link.url, color: "primary600", children }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { padding: 4, tag: "form", onSubmit: handleSave, direction: "column", gap: 4, children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { width: "368px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
             id: "components.Blocks.popover.text",
@@ -735,7 +723,7 @@ const LinkContent = React__namespace.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: handleDismiss, children: formatMessage({
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: () => handleOpenChange(false), children: formatMessage({
               id: "components.Blocks.popover.cancel",
               defaultMessage: "Cancel"
             }) }),
@@ -2426,9 +2414,9 @@ const NonRepeatableComponent = ({
       hasRadius: isNested,
       borderColor: isNested ? "neutral200" : void 0,
       children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: layout.map((row, index2) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: row.map(({ size, ...field }) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: row.map(({ size, ...field }) => {
           const completeFieldName = `${name2}.${field.name}`;
-          return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
+          return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
         }) }, index2);
       }) })
     }
@@ -2604,9 +2592,9 @@ const RepeatableComponent = ({
                     onGrabItem: handleGrabItem,
                     __temp_key__: key,
                     children: layout.map((row, index22) => {
-                      return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: row.map(({ size, ...field }) => {
+                      return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: row.map(({ size, ...field }) => {
                         const completeFieldName = `${nameWithIndex}.${field.name}`;
-                        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
+                        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
                       }) }, index22);
                     })
                   }
@@ -2651,7 +2639,7 @@ const TextButtonCustom = styledComponents.styled(designSystem.TextButton)`
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    transition: background-color 120ms ${(props) => props.theme.easings.easeOutQuad};
+    transition: background-color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
   }
 `;
 const Component = ({
@@ -2919,7 +2907,7 @@ const ComponentBox = styledComponents.styled(designSystem.Flex)`
   cursor: pointer;
 
   @media (prefers-reduced-motion: no-preference) {
-    transition: color 120ms ${(props) => props.theme.easings.easeOutQuad};
+    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
   }
 
   &:focus,
@@ -4306,8 +4294,6 @@ const quoteAndCodeHandler = (editor, markdownType) => {
 };
 const CustomIconButton = styledComponents.styled(designSystem.IconButton)`
   padding: ${({ theme }) => theme.spaces[2]};
-  /* Trick to prevent the outline from overflowing because of the general outline-offset */
-  outline-offset: -2px !important;
 
   svg {
     width: 1.8rem;
@@ -4374,7 +4360,7 @@ const WysiwygNav = ({
     id: "components.Wysiwyg.selectOptions.title",
     defaultMessage: "Add a title"
   });
-  const buttonMoreRef = React__namespace.useRef(null);
+  React__namespace.useRef(null);
   const handleTogglePopover = () => {
     setVisiblePopover((prev) => !prev);
   };
@@ -4465,79 +4451,81 @@ const WysiwygNav = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(MoreButton, { ref: buttonMoreRef, onClick: handleTogglePopover, label: "More", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, {}) }),
-          visiblePopover && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover, { onDismiss: handleTogglePopover, centered: true, source: buttonMoreRef, spacing: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(IconButtonGroupMargin, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                CustomIconButton,
-                {
-                  onClick: () => onActionClick("Strikethrough", editorRef, handleTogglePopover),
-                  label: "Strikethrough",
-                  name: "Strikethrough",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Icons.StrikeThrough, {})
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                CustomIconButton,
-                {
-                  onClick: () => onActionClick("BulletList", editorRef, handleTogglePopover),
-                  label: "BulletList",
-                  name: "BulletList",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Icons.BulletList, {})
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                CustomIconButton,
-                {
-                  onClick: () => onActionClick("NumberList", editorRef, handleTogglePopover),
-                  label: "NumberList",
-                  name: "NumberList",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Icons.NumberList, {})
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.IconButtonGroup, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                CustomIconButton,
-                {
-                  onClick: () => onActionClick("Code", editorRef, handleTogglePopover),
-                  label: "Code",
-                  name: "Code",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Code, {})
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                CustomIconButton,
-                {
-                  onClick: () => {
-                    handleTogglePopover();
-                    onToggleMediaLib();
-                  },
-                  label: "Image",
-                  name: "Image",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Image, {})
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                CustomLinkIconButton,
-                {
-                  onClick: () => onActionClick("Link", editorRef, handleTogglePopover),
-                  label: "Link",
-                  name: "Link",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Link, {})
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                CustomIconButton,
-                {
-                  onClick: () => onActionClick("Quote", editorRef, handleTogglePopover),
-                  label: "Quote",
-                  name: "Quote",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Quotes, {})
-                }
-              )
-            ] })
-          ] }) })
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Popover.Root, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(MoreButton, { label: "More", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, {}) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Content, { sideOffset: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { padding: 2, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(IconButtonGroupMargin, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  CustomIconButton,
+                  {
+                    onClick: () => onActionClick("Strikethrough", editorRef, handleTogglePopover),
+                    label: "Strikethrough",
+                    name: "Strikethrough",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Icons.StrikeThrough, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  CustomIconButton,
+                  {
+                    onClick: () => onActionClick("BulletList", editorRef, handleTogglePopover),
+                    label: "BulletList",
+                    name: "BulletList",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Icons.BulletList, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  CustomIconButton,
+                  {
+                    onClick: () => onActionClick("NumberList", editorRef, handleTogglePopover),
+                    label: "NumberList",
+                    name: "NumberList",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Icons.NumberList, {})
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.IconButtonGroup, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  CustomIconButton,
+                  {
+                    onClick: () => onActionClick("Code", editorRef, handleTogglePopover),
+                    label: "Code",
+                    name: "Code",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Code, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  CustomIconButton,
+                  {
+                    onClick: () => {
+                      handleTogglePopover();
+                      onToggleMediaLib();
+                    },
+                    label: "Image",
+                    name: "Image",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Image, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  CustomLinkIconButton,
+                  {
+                    onClick: () => onActionClick("Link", editorRef, handleTogglePopover),
+                    label: "Link",
+                    name: "Link",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Link, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  CustomIconButton,
+                  {
+                    onClick: () => onActionClick("Quote", editorRef, handleTogglePopover),
+                    label: "Quote",
+                    name: "Quote",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Quotes, {})
+                  }
+                )
+              ] })
+            ] }) })
+          ] })
         ] }),
         onTogglePreviewMode && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onTogglePreviewMode, variant: "tertiary", children: formatMessage({
           id: "components.Wysiwyg.ToggleMode.preview-mode",
@@ -4931,9 +4919,9 @@ const DynamicComponent = ({
         ),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Actions, { children: accordionActions })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: row.map(({ size, ...field }) => {
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: row.map(({ size, ...field }) => {
         const fieldName = `${name2}.${index$1}.${field.name}`;
-        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, s: 12, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...field, name: fieldName }) }, fieldName);
+        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: size, s: 12, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...field, name: fieldName }) }, fieldName);
       }) }, rowInd)) }) }) })
     ] }) }) })
   ] });
@@ -5240,4 +5228,4 @@ exports.transformDocument = transformDocument;
 exports.useDynamicZone = useDynamicZone;
 exports.useFieldHint = useFieldHint;
 exports.useLazyComponents = useLazyComponents;
-//# sourceMappingURL=Field-DnJMS8cB.js.map
+//# sourceMappingURL=Field-BG1xu38N.js.map