@strapi/content-manager 0.0.0-experimental.25e22c6cc9bc6b35392bb55d09f641a0a65e7403 → 0.0.0-experimental.3c73a4c6f6073abdf1608121a200c3d4d87b1aa8

package/dist/_chunks/{Field-BDMSCcy5.mjs → Field-QtUSh5mU.mjs}

@@ -2,12 +2,12 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { useState, useEffect, useCallback, memo } from "react";
 import { useStrapiApp, createContext, useField, useNotification, useForm, useAPIErrorHandler, useQueryParams, useFocusInputField, InputRenderer as InputRenderer$1 } from "@strapi/admin/strapi-admin";
-import { Typography, Flex, Box, BaseLink, Button, Popover, Field, Tooltip, SingleSelect, SingleSelectOption, IconButton, useComposedRefs, Portal, FocusTrap, Divider, VisuallyHidden, Grid as Grid$1, Accordion, TextButton, BaseButton, TextInput, IconButtonGroup, Menu, MenuItem } from "@strapi/design-system";
+import { Typography, Flex, Box, BaseLink, Button, useComposedRefs, Popover, Field, Tooltip, SingleSelect, SingleSelectOption, IconButton, Portal, FocusTrap, Divider, VisuallyHidden, Grid as Grid$1, GridItem, Accordion, TextButton, BaseButton, TextInput, IconButtonGroup, Menu, MenuItem } from "@strapi/design-system";
 import pipe$1 from "lodash/fp/pipe";
 import { useIntl } from "react-intl";
-import { m as DOCUMENT_META_FIELDS, g as getTranslation, c as useDoc, e as contentManagerApi, d as buildValidParams, f as useDocumentRBAC, n as useDocLayout } from "./index-JNNNKUHs.mjs";
+import { m as DOCUMENT_META_FIELDS, g as getTranslation, c as useDoc, e as contentManagerApi, d as buildValidParams, f as useDocumentRBAC, n as useDocLayout } from "./index-Dahjdw4h.mjs";
 import { generateNKeysBetween } from "fractional-indexing";
-import { u as useComponent, C as ComponentProvider, M as MemoizedRelationsField } from "./Relations-Dnag3fhV.mjs";
+import { u as useComponent, C as ComponentProvider, M as MemoizedRelationsField } from "./Relations-CJ4qdkRo.mjs";
 import { Code, HeadingOne, HeadingTwo, HeadingThree, HeadingFour, HeadingFive, HeadingSix, Image as Image$1, NumberList, BulletList, Paragraph, Quotes, Link as Link$1, Drag, Collapse, Bold, Italic, Underline, StrikeThrough, Expand, PlusCircle, Plus, Trash, EyeStriked, CheckCircle, WarningCircle, Loader, ArrowClockwise, More } from "@strapi/icons";
 import { styled, css, keyframes } from "styled-components";
 import { C as ComponentIcon, a as COMPONENT_ICONS } from "./ComponentIcon-u4bIXTFY.mjs";
@@ -589,23 +589,17 @@ const LinkContent = React.forwardRef(
     const [popoverOpen, setPopoverOpen] = React.useState(
       editor.lastInsertedLinkPath ? Path.equals(path, editor.lastInsertedLinkPath) : false
     );
+    const linkRef = React.useRef(null);
     const elementText = link.children.map((child) => child.text).join("");
     const [linkText, setLinkText] = React.useState(elementText);
     const [linkUrl, setLinkUrl] = React.useState(link.url);
     const linkInputRef = React.useRef(null);
     const [showRemoveButton, setShowRemoveButton] = React.useState(false);
     const [isSaveDisabled, setIsSaveDisabled] = React.useState(false);
-    const handleOpenChange = (isOpen) => {
-      if (isOpen) {
-        setPopoverOpen(isOpen);
-        setShowRemoveButton(isOpen);
-      } else {
-        setPopoverOpen(isOpen);
-        if (link.url === "") {
-          removeLink(editor);
-        }
-        ReactEditor.focus(editor);
-      }
+    const handleOpenEditPopover = (e) => {
+      e.preventDefault();
+      setPopoverOpen(true);
+      setShowRemoveButton(true);
     };
     const onLinkChange = (e) => {
       setIsSaveDisabled(false);
@@ -628,14 +622,32 @@ const LinkContent = React.forwardRef(
       setPopoverOpen(false);
       editor.lastInsertedLinkPath = null;
     };
+    const handleDismiss = () => {
+      setPopoverOpen(false);
+      if (link.url === "") {
+        removeLink(editor);
+      }
+      ReactEditor.focus(editor);
+    };
+    const inputNotDirty = !linkText || !linkUrl || link.url && link.url === linkUrl && elementText && elementText === linkText;
+    const composedRefs = useComposedRefs(linkRef, forwardedRef);
     React.useEffect(() => {
       if (popoverOpen)
         linkInputRef.current?.focus();
     }, [popoverOpen]);
-    const inputNotDirty = !linkText || !linkUrl || link.url && link.url === linkUrl && elementText && elementText === linkText;
-    return /* @__PURE__ */ jsxs(Popover.Root, { onOpenChange: handleOpenChange, open: popoverOpen, children: [
-      /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(StyledBaseLink, { ...attributes, ref: forwardedRef, href: link.url, color: "primary600", children }) }),
-      /* @__PURE__ */ jsx(Popover.Content, { children: /* @__PURE__ */ jsxs(Flex, { padding: 4, tag: "form", onSubmit: handleSave, direction: "column", gap: 4, children: [
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        StyledBaseLink,
+        {
+          ...attributes,
+          ref: composedRefs,
+          href: link.url,
+          onClick: handleOpenEditPopover,
+          color: "primary600",
+          children
+        }
+      ),
+      popoverOpen && /* @__PURE__ */ jsx(Popover, { source: linkRef, onDismiss: handleDismiss, padding: 4, contentEditable: false, children: /* @__PURE__ */ jsxs(Flex, { tag: "form", onSubmit: handleSave, direction: "column", gap: 4, children: [
         /* @__PURE__ */ jsx(Field.Root, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
           /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
             id: "components.Blocks.popover.text",
@@ -689,7 +701,7 @@ const LinkContent = React.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-            /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: () => handleOpenChange(false), children: formatMessage({
+            /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: handleDismiss, children: formatMessage({
               id: "components.Blocks.popover.cancel",
               defaultMessage: "Cancel"
             }) }),
@@ -2380,9 +2392,9 @@ const NonRepeatableComponent = ({
       hasRadius: isNested,
       borderColor: isNested ? "neutral200" : void 0,
       children: /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: layout.map((row, index) => {
-        return /* @__PURE__ */ jsx(Grid$1.Root, { gap: 4, children: row.map(({ size, ...field }) => {
+        return /* @__PURE__ */ jsx(Grid$1, { gap: 4, children: row.map(({ size, ...field }) => {
           const completeFieldName = `${name2}.${field.name}`;
-          return /* @__PURE__ */ jsx(Grid$1.Item, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
+          return /* @__PURE__ */ jsx(GridItem, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
         }) }, index);
       }) })
     }
@@ -2558,9 +2570,9 @@ const RepeatableComponent = ({
                     onGrabItem: handleGrabItem,
                     __temp_key__: key,
                     children: layout.map((row, index2) => {
-                      return /* @__PURE__ */ jsx(Grid$1.Root, { gap: 4, children: row.map(({ size, ...field }) => {
+                      return /* @__PURE__ */ jsx(Grid$1, { gap: 4, children: row.map(({ size, ...field }) => {
                         const completeFieldName = `${nameWithIndex}.${field.name}`;
-                        return /* @__PURE__ */ jsx(Grid$1.Item, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
+                        return /* @__PURE__ */ jsx(GridItem, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
                       }) }, index2);
                     })
                   }
@@ -2605,7 +2617,7 @@ const TextButtonCustom = styled(TextButton)`
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    transition: background-color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
+    transition: background-color 120ms ${(props) => props.theme.easings.easeOutQuad};
   }
 `;
 const Component = ({
@@ -2873,7 +2885,7 @@ const ComponentBox = styled(Flex)`
   cursor: pointer;
 
   @media (prefers-reduced-motion: no-preference) {
-    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
+    transition: color 120ms ${(props) => props.theme.easings.easeOutQuad};
   }
 
   &:focus,
@@ -4260,6 +4272,8 @@ const quoteAndCodeHandler = (editor, markdownType) => {
 };
 const CustomIconButton = styled(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;
@@ -4326,7 +4340,7 @@ const WysiwygNav = ({
     id: "components.Wysiwyg.selectOptions.title",
     defaultMessage: "Add a title"
   });
-  React.useRef(null);
+  const buttonMoreRef = React.useRef(null);
   const handleTogglePopover = () => {
     setVisiblePopover((prev) => !prev);
   };
@@ -4417,81 +4431,79 @@ const WysiwygNav = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs(Popover.Root, { children: [
-            /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(MoreButton, { label: "More", children: /* @__PURE__ */ jsx(More, {}) }) }),
-            /* @__PURE__ */ jsx(Popover.Content, { sideOffset: 12, children: /* @__PURE__ */ jsxs(Flex, { padding: 2, children: [
-              /* @__PURE__ */ jsxs(IconButtonGroupMargin, { children: [
-                /* @__PURE__ */ jsx(
-                  CustomIconButton,
-                  {
-                    onClick: () => onActionClick("Strikethrough", editorRef, handleTogglePopover),
-                    label: "Strikethrough",
-                    name: "Strikethrough",
-                    children: /* @__PURE__ */ jsx(StrikeThrough, {})
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  CustomIconButton,
-                  {
-                    onClick: () => onActionClick("BulletList", editorRef, handleTogglePopover),
-                    label: "BulletList",
-                    name: "BulletList",
-                    children: /* @__PURE__ */ jsx(BulletList, {})
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  CustomIconButton,
-                  {
-                    onClick: () => onActionClick("NumberList", editorRef, handleTogglePopover),
-                    label: "NumberList",
-                    name: "NumberList",
-                    children: /* @__PURE__ */ jsx(NumberList, {})
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs(IconButtonGroup, { children: [
-                /* @__PURE__ */ jsx(
-                  CustomIconButton,
-                  {
-                    onClick: () => onActionClick("Code", editorRef, handleTogglePopover),
-                    label: "Code",
-                    name: "Code",
-                    children: /* @__PURE__ */ jsx(Code, {})
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  CustomIconButton,
-                  {
-                    onClick: () => {
-                      handleTogglePopover();
-                      onToggleMediaLib();
-                    },
-                    label: "Image",
-                    name: "Image",
-                    children: /* @__PURE__ */ jsx(Image$1, {})
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  CustomLinkIconButton,
-                  {
-                    onClick: () => onActionClick("Link", editorRef, handleTogglePopover),
-                    label: "Link",
-                    name: "Link",
-                    children: /* @__PURE__ */ jsx(Link$1, {})
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  CustomIconButton,
-                  {
-                    onClick: () => onActionClick("Quote", editorRef, handleTogglePopover),
-                    label: "Quote",
-                    name: "Quote",
-                    children: /* @__PURE__ */ jsx(Quotes, {})
-                  }
-                )
-              ] })
-            ] }) })
-          ] })
+          /* @__PURE__ */ jsx(MoreButton, { ref: buttonMoreRef, onClick: handleTogglePopover, label: "More", children: /* @__PURE__ */ jsx(More, {}) }),
+          visiblePopover && /* @__PURE__ */ jsx(Popover, { onDismiss: handleTogglePopover, centered: true, source: buttonMoreRef, spacing: 4, children: /* @__PURE__ */ jsxs(Flex, { children: [
+            /* @__PURE__ */ jsxs(IconButtonGroupMargin, { children: [
+              /* @__PURE__ */ jsx(
+                CustomIconButton,
+                {
+                  onClick: () => onActionClick("Strikethrough", editorRef, handleTogglePopover),
+                  label: "Strikethrough",
+                  name: "Strikethrough",
+                  children: /* @__PURE__ */ jsx(StrikeThrough, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                CustomIconButton,
+                {
+                  onClick: () => onActionClick("BulletList", editorRef, handleTogglePopover),
+                  label: "BulletList",
+                  name: "BulletList",
+                  children: /* @__PURE__ */ jsx(BulletList, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                CustomIconButton,
+                {
+                  onClick: () => onActionClick("NumberList", editorRef, handleTogglePopover),
+                  label: "NumberList",
+                  name: "NumberList",
+                  children: /* @__PURE__ */ jsx(NumberList, {})
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(IconButtonGroup, { children: [
+              /* @__PURE__ */ jsx(
+                CustomIconButton,
+                {
+                  onClick: () => onActionClick("Code", editorRef, handleTogglePopover),
+                  label: "Code",
+                  name: "Code",
+                  children: /* @__PURE__ */ jsx(Code, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                CustomIconButton,
+                {
+                  onClick: () => {
+                    handleTogglePopover();
+                    onToggleMediaLib();
+                  },
+                  label: "Image",
+                  name: "Image",
+                  children: /* @__PURE__ */ jsx(Image$1, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                CustomLinkIconButton,
+                {
+                  onClick: () => onActionClick("Link", editorRef, handleTogglePopover),
+                  label: "Link",
+                  name: "Link",
+                  children: /* @__PURE__ */ jsx(Link$1, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                CustomIconButton,
+                {
+                  onClick: () => onActionClick("Quote", editorRef, handleTogglePopover),
+                  label: "Quote",
+                  name: "Quote",
+                  children: /* @__PURE__ */ jsx(Quotes, {})
+                }
+              )
+            ] })
+          ] }) })
         ] }),
         onTogglePreviewMode && /* @__PURE__ */ jsx(Button, { onClick: onTogglePreviewMode, variant: "tertiary", children: formatMessage({
           id: "components.Wysiwyg.ToggleMode.preview-mode",
@@ -4885,9 +4897,9 @@ const DynamicComponent = ({
         ),
         /* @__PURE__ */ jsx(Accordion.Actions, { children: accordionActions })
       ] }),
-      /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsx(Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsx(Grid$1.Root, { gap: 4, children: row.map(({ size, ...field }) => {
+      /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsx(Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsx(Grid$1, { gap: 4, children: row.map(({ size, ...field }) => {
         const fieldName = `${name2}.${index}.${field.name}`;
-        return /* @__PURE__ */ jsx(Grid$1.Item, { col: size, s: 12, xs: 12, children: /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...field, name: fieldName }) }, fieldName);
+        return /* @__PURE__ */ jsx(GridItem, { col: size, s: 12, xs: 12, children: /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...field, name: fieldName }) }, fieldName);
       }) }, rowInd)) }) }) })
     ] }) }) })
   ] });
@@ -5196,4 +5208,4 @@ export {
   transformDocument as t,
   useLazyComponents as u
 };
-//# sourceMappingURL=Field-BDMSCcy5.mjs.map
+//# sourceMappingURL=Field-QtUSh5mU.mjs.map