@elementor/editor-controls 3.35.0-326 → 3.35.0-328

package/dist/index.mjs

@@ -5914,17 +5914,18 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 });
 
 // src/controls/inline-editing-control.tsx
-import * as React101 from "react";
+import * as React102 from "react";
 import { htmlPropTypeUtil } from "@elementor/editor-props";
 
 // src/components/inline-editor.tsx
-import * as React100 from "react";
-import { useEffect as useEffect9, useRef as useRef24 } from "react";
+import * as React101 from "react";
+import { useEffect as useEffect10, useRef as useRef26 } from "react";
 import { Box as Box22 } from "@elementor/ui";
 import Bold from "@tiptap/extension-bold";
 import Document from "@tiptap/extension-document";
 import HardBreak from "@tiptap/extension-hard-break";
 import Italic from "@tiptap/extension-italic";
+import Link3 from "@tiptap/extension-link";
 import Strike from "@tiptap/extension-strike";
 import Subscript from "@tiptap/extension-subscript";
 import Superscript from "@tiptap/extension-superscript";
@@ -5933,89 +5934,189 @@ import Underline from "@tiptap/extension-underline";
 import { EditorContent, useEditor } from "@tiptap/react";
 
 // src/components/inline-editor-toolbar.tsx
-import * as React99 from "react";
-import { useMemo as useMemo12 } from "react";
+import * as React100 from "react";
+import { useMemo as useMemo12, useRef as useRef25, useState as useState16 } from "react";
 import {
   BoldIcon,
   ItalicIcon,
+  LinkIcon as LinkIcon3,
   MinusIcon as MinusIcon2,
   StrikethroughIcon,
   SubscriptIcon,
   SuperscriptIcon,
   UnderlineIcon
 } from "@elementor/icons";
-import { Box as Box21, IconButton as IconButton8, ToggleButton as ToggleButton4, ToggleButtonGroup as ToggleButtonGroup2, Tooltip as Tooltip9 } from "@elementor/ui";
+import { Box as Box21, IconButton as IconButton8, ToggleButton as ToggleButton5, ToggleButtonGroup as ToggleButtonGroup2, Tooltip as Tooltip9, usePopupState as usePopupState8 } from "@elementor/ui";
 import { useEditorState } from "@tiptap/react";
+import { __ as __51 } from "@wordpress/i18n";
+
+// src/components/url-popover.tsx
+import * as React99 from "react";
+import { useEffect as useEffect9, useRef as useRef24 } from "react";
+import { ExternalLinkIcon } from "@elementor/icons";
+import { bindPopover as bindPopover7, Popover as Popover7, Stack as Stack16, TextField as TextField8, ToggleButton as ToggleButton4 } from "@elementor/ui";
 import { __ as __50 } from "@wordpress/i18n";
+var UrlPopover = ({
+  popupState,
+  restoreValue,
+  anchorRef,
+  value,
+  onChange,
+  openInNewTab,
+  onToggleNewTab
+}) => {
+  const inputRef = useRef24(null);
+  useEffect9(() => {
+    if (popupState.isOpen) {
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  }, [popupState.isOpen]);
+  const handleClose = () => {
+    restoreValue();
+    popupState.close();
+  };
+  return /* @__PURE__ */ React99.createElement(
+    Popover7,
+    {
+      slotProps: {
+        paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
+      },
+      ...bindPopover7(popupState),
+      anchorOrigin: { vertical: "top", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      onClose: handleClose
+    },
+    /* @__PURE__ */ React99.createElement(Stack16, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React99.createElement(
+      TextField8,
+      {
+        value,
+        onChange,
+        size: "tiny",
+        fullWidth: true,
+        placeholder: __50("Type a URL", "elementor"),
+        inputProps: { ref: inputRef },
+        color: "secondary",
+        InputProps: { sx: { borderRadius: "8px" } }
+      }
+    ), /* @__PURE__ */ React99.createElement(
+      ToggleButton4,
+      {
+        size: "tiny",
+        value: "newTab",
+        selected: openInNewTab,
+        onClick: onToggleNewTab,
+        "aria-label": __50("Open in a new tab", "elementor"),
+        sx: { borderRadius: "8px" }
+      },
+      /* @__PURE__ */ React99.createElement(ExternalLinkIcon, { fontSize: "tiny" })
+    ))
+  );
+};
+
+// src/components/inline-editor-toolbar.tsx
 var toolbarButtons = {
   clear: {
-    label: __50("Clear", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(MinusIcon2, { fontSize: "tiny" }),
+    label: __51("Clear", "elementor"),
+    icon: /* @__PURE__ */ React100.createElement(MinusIcon2, { fontSize: "tiny" }),
     action: "clear",
     method: (editor) => {
       editor.chain().focus().clearNodes().unsetAllMarks().run();
     }
   },
   bold: {
-    label: __50("Bold", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(BoldIcon, { fontSize: "tiny" }),
+    label: __51("Bold", "elementor"),
+    icon: /* @__PURE__ */ React100.createElement(BoldIcon, { fontSize: "tiny" }),
     action: "bold",
     method: (editor) => {
       editor.chain().focus().toggleBold().run();
     }
   },
   italic: {
-    label: __50("Italic", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(ItalicIcon, { fontSize: "tiny" }),
+    label: __51("Italic", "elementor"),
+    icon: /* @__PURE__ */ React100.createElement(ItalicIcon, { fontSize: "tiny" }),
     action: "italic",
     method: (editor) => {
       editor.chain().focus().toggleItalic().run();
     }
   },
   underline: {
-    label: __50("Underline", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(UnderlineIcon, { fontSize: "tiny" }),
+    label: __51("Underline", "elementor"),
+    icon: /* @__PURE__ */ React100.createElement(UnderlineIcon, { fontSize: "tiny" }),
     action: "underline",
     method: (editor) => {
       editor.chain().focus().toggleUnderline().run();
     }
   },
   strike: {
-    label: __50("Strikethrough", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(StrikethroughIcon, { fontSize: "tiny" }),
+    label: __51("Strikethrough", "elementor"),
+    icon: /* @__PURE__ */ React100.createElement(StrikethroughIcon, { fontSize: "tiny" }),
     action: "strike",
     method: (editor) => {
       editor.chain().focus().toggleStrike().run();
     }
   },
   superscript: {
-    label: __50("Superscript", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(SuperscriptIcon, { fontSize: "tiny" }),
+    label: __51("Superscript", "elementor"),
+    icon: /* @__PURE__ */ React100.createElement(SuperscriptIcon, { fontSize: "tiny" }),
     action: "superscript",
     method: (editor) => {
       editor.chain().focus().toggleSuperscript().run();
     }
   },
   subscript: {
-    label: __50("Subscript", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(SubscriptIcon, { fontSize: "tiny" }),
+    label: __51("Subscript", "elementor"),
+    icon: /* @__PURE__ */ React100.createElement(SubscriptIcon, { fontSize: "tiny" }),
     action: "subscript",
     method: (editor) => {
       editor.chain().focus().toggleSubscript().run();
     }
+  },
+  link: {
+    label: __51("Link", "elementor"),
+    icon: /* @__PURE__ */ React100.createElement(LinkIcon3, { fontSize: "tiny" }),
+    action: "link",
+    method: null
   }
 };
 var { clear: clearButton, ...formatButtons } = toolbarButtons;
 var possibleFormats = Object.keys(formatButtons);
 var InlineEditorToolbar = ({ editor }) => {
+  const [urlValue, setUrlValue] = useState16("");
+  const [openInNewTab, setOpenInNewTab] = useState16(false);
+  const toolbarRef = useRef25(null);
+  const popupState = usePopupState8({ variant: "popover" });
   const editorState = useEditorState({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
   const formatButtonsList = useMemo12(() => Object.values(formatButtons), []);
-  return /* @__PURE__ */ React99.createElement(
+  const handleLinkClick = () => {
+    const linkAttrs = editor.getAttributes("link");
+    setUrlValue(linkAttrs.href || "");
+    setOpenInNewTab(linkAttrs.target === "_blank");
+    popupState.open(toolbarRef.current);
+  };
+  const handleUrlChange = (event) => {
+    setUrlValue(event.target.value);
+  };
+  const handleToggleNewTab = () => {
+    setOpenInNewTab(!openInNewTab);
+  };
+  const handleUrlSubmit = () => {
+    if (urlValue) {
+      editor.chain().focus().setLink({
+        href: urlValue,
+        target: openInNewTab ? "_blank" : "_self"
+      }).run();
+    } else {
+      editor.chain().focus().unsetLink().run();
+    }
+    popupState.close();
+  };
+  return /* @__PURE__ */ React100.createElement(
     Box21,
     {
+      ref: toolbarRef,
       sx: {
         position: "absolute",
         top: -40,
@@ -6025,11 +6126,12 @@ var InlineEditorToolbar = ({ editor }) => {
         borderRadius: 1,
         backgroundColor: "background.paper",
         boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
-        alignItems: "center"
+        alignItems: "center",
+        visibility: popupState.isOpen ? "hidden" : "visible"
       }
     },
-    /* @__PURE__ */ React99.createElement(Tooltip9, { title: clearButton.label, placement: "top" }, /* @__PURE__ */ React99.createElement(IconButton8, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
-    /* @__PURE__ */ React99.createElement(
+    /* @__PURE__ */ React100.createElement(Tooltip9, { title: clearButton.label, placement: "top" }, /* @__PURE__ */ React100.createElement(IconButton8, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
+    /* @__PURE__ */ React100.createElement(
       ToggleButtonGroup2,
       {
         value: editorState,
@@ -6039,24 +6141,36 @@ var InlineEditorToolbar = ({ editor }) => {
           gap: 0.5
         }
       },
-      formatButtonsList.map((button) => /* @__PURE__ */ React99.createElement(Tooltip9, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React99.createElement(
-        ToggleButton4,
+      formatButtonsList.map((button) => /* @__PURE__ */ React100.createElement(Tooltip9, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React100.createElement(
+        ToggleButton5,
         {
           value: button.action,
           "aria-label": button.label,
           size: "tiny",
-          onClick: () => button.method(editor)
+          onClick: () => button.action === "link" ? handleLinkClick() : button.method?.(editor)
         },
         button.icon
       )))
+    ),
+    /* @__PURE__ */ React100.createElement(
+      UrlPopover,
+      {
+        popupState,
+        anchorRef: toolbarRef,
+        restoreValue: handleUrlSubmit,
+        value: urlValue,
+        onChange: handleUrlChange,
+        openInNewTab,
+        onToggleNewTab: handleToggleNewTab
+      }
     )
   );
 };
 
 // src/components/inline-editor.tsx
 var useOnUpdate = (callback, dependencies) => {
-  const hasMounted = useRef24(false);
-  useEffect9(() => {
+  const hasMounted = useRef26(false);
+  useEffect10(() => {
     if (hasMounted.current) {
       callback();
     } else {
@@ -6064,7 +6178,7 @@ var useOnUpdate = (callback, dependencies) => {
     }
   }, dependencies);
 };
-var InlineEditor = React100.forwardRef(
+var InlineEditor = React101.forwardRef(
   ({ value, setValue, attributes = {}, showToolbar = false, sx }, ref) => {
     const editor = useEditor({
       extensions: [
@@ -6078,6 +6192,9 @@ var InlineEditor = React100.forwardRef(
         Underline,
         Superscript,
         Subscript,
+        Link3.configure({
+          openOnClick: false
+        }),
         HardBreak.extend({
           addKeyboardShortcuts() {
             return {
@@ -6098,7 +6215,7 @@ var InlineEditor = React100.forwardRef(
         editor.commands.setContent(value, { emitUpdate: false });
       }
     }, [editor, value]);
-    return /* @__PURE__ */ React100.createElement(
+    return /* @__PURE__ */ React101.createElement(
       Box22,
       {
         ref,
@@ -6120,14 +6237,17 @@ var InlineEditor = React100.forwardRef(
           },
           "& .ProseMirror": {
             minHeight: "70px",
-            fontSize: "12px"
+            fontSize: "12px",
+            "& a": {
+              color: "inherit"
+            }
           },
           ...sx
         },
         ...attributes
       },
-      showToolbar && /* @__PURE__ */ React100.createElement(InlineEditorToolbar, { editor }),
-      /* @__PURE__ */ React100.createElement(EditorContent, { editor })
+      showToolbar && /* @__PURE__ */ React101.createElement(InlineEditorToolbar, { editor }),
+      /* @__PURE__ */ React101.createElement(EditorContent, { editor })
     );
   }
 );
@@ -6136,33 +6256,33 @@ var InlineEditor = React100.forwardRef(
 var InlineEditingControl = createControl(() => {
   const { value, setValue } = useBoundProp(htmlPropTypeUtil);
   const handleChange = (newValue) => setValue(newValue);
-  return /* @__PURE__ */ React101.createElement(ControlActions, null, /* @__PURE__ */ React101.createElement(InlineEditor, { value: value || "", setValue: handleChange }));
+  return /* @__PURE__ */ React102.createElement(ControlActions, null, /* @__PURE__ */ React102.createElement(InlineEditor, { value: value || "", setValue: handleChange }));
 });
 
 // src/components/icon-buttons/clear-icon-button.tsx
-import * as React102 from "react";
+import * as React103 from "react";
 import { BrushBigIcon } from "@elementor/icons";
 import { IconButton as IconButton9, styled as styled10, Tooltip as Tooltip10 } from "@elementor/ui";
 var CustomIconButton = styled10(IconButton9)(({ theme }) => ({
   width: theme.spacing(2.5),
   height: theme.spacing(2.5)
 }));
-var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React102.createElement(Tooltip10, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React102.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React102.createElement(BrushBigIcon, { fontSize: size })));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React103.createElement(Tooltip10, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React103.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React103.createElement(BrushBigIcon, { fontSize: size })));
 
 // src/components/repeater/repeater.tsx
-import * as React103 from "react";
-import { useEffect as useEffect10, useState as useState16 } from "react";
+import * as React104 from "react";
+import { useEffect as useEffect11, useState as useState17 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon3, XIcon as XIcon4 } from "@elementor/icons";
 import {
-  bindPopover as bindPopover7,
+  bindPopover as bindPopover8,
   bindTrigger as bindTrigger6,
   Box as Box23,
   IconButton as IconButton10,
   Infotip as Infotip4,
   Tooltip as Tooltip11,
-  usePopupState as usePopupState8
+  usePopupState as usePopupState9
 } from "@elementor/ui";
-import { __ as __51 } from "@wordpress/i18n";
+import { __ as __52 } from "@wordpress/i18n";
 var SIZE9 = "tiny";
 var EMPTY_OPEN_ITEM2 = -1;
 var Repeater3 = ({
@@ -6180,7 +6300,7 @@ var Repeater3 = ({
   openItem: initialOpenItem = EMPTY_OPEN_ITEM2,
   isSortable = true
 }) => {
-  const [openItem, setOpenItem] = useState16(initialOpenItem);
+  const [openItem, setOpenItem] = useState17(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -6243,7 +6363,7 @@ var Repeater3 = ({
   };
   const isButtonDisabled = disabled || disableAddItemButton;
   const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
-  const addButton = /* @__PURE__ */ React103.createElement(
+  const addButton = /* @__PURE__ */ React104.createElement(
     IconButton10,
     {
       size: SIZE9,
@@ -6252,11 +6372,11 @@ var Repeater3 = ({
       },
       disabled: isButtonDisabled,
       onClick: addRepeaterItem,
-      "aria-label": __51("Add item", "elementor")
+      "aria-label": __52("Add item", "elementor")
     },
-    /* @__PURE__ */ React103.createElement(PlusIcon3, { fontSize: SIZE9 })
+    /* @__PURE__ */ React104.createElement(PlusIcon3, { fontSize: SIZE9 })
   );
-  return /* @__PURE__ */ React103.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React103.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React103.createElement(
+  return /* @__PURE__ */ React104.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React104.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React104.createElement(
     Infotip4,
     {
       placement: "right",
@@ -6264,20 +6384,20 @@ var Repeater3 = ({
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React103.createElement(Box23, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
-  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React103.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
+    /* @__PURE__ */ React104.createElement(Box23, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
+  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React104.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
     const index = uniqueKeys.indexOf(key);
     const value = items2[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React103.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React103.createElement(
+    return /* @__PURE__ */ React104.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React104.createElement(
       RepeaterItem,
       {
         disabled,
         propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React103.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React103.createElement(itemSettings.Label, { value, index })),
-        startIcon: /* @__PURE__ */ React103.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React103.createElement(itemSettings.Icon, { value })),
+        label: /* @__PURE__ */ React104.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React104.createElement(itemSettings.Label, { value, index })),
+        startIcon: /* @__PURE__ */ React104.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React104.createElement(itemSettings.Icon, { value })),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -6289,7 +6409,7 @@ var Repeater3 = ({
         actions: itemSettings.actions,
         value
       },
-      (props) => /* @__PURE__ */ React103.createElement(
+      (props) => /* @__PURE__ */ React104.createElement(
         itemSettings.Content,
         {
           ...props,
@@ -6319,27 +6439,27 @@ var RepeaterItem = ({
   value
 }) => {
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
-  const duplicateLabel = __51("Duplicate", "elementor");
-  const toggleLabel = propDisabled ? __51("Show", "elementor") : __51("Hide", "elementor");
-  const removeLabel = __51("Remove", "elementor");
-  return /* @__PURE__ */ React103.createElement(React103.Fragment, null, /* @__PURE__ */ React103.createElement(
+  const duplicateLabel = __52("Duplicate", "elementor");
+  const toggleLabel = propDisabled ? __52("Show", "elementor") : __52("Hide", "elementor");
+  const removeLabel = __52("Remove", "elementor");
+  return /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(
     RepeaterTag,
     {
       disabled,
       label,
       ref: setRef,
-      "aria-label": __51("Open item", "elementor"),
+      "aria-label": __52("Open item", "elementor"),
       ...bindTrigger6(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React103.createElement(React103.Fragment, null, showDuplicate && /* @__PURE__ */ React103.createElement(Tooltip11, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React103.createElement(IconButton10, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React103.createElement(CopyIcon2, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React103.createElement(Tooltip11, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React103.createElement(IconButton10, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React103.createElement(EyeOffIcon2, { fontSize: SIZE9 }) : /* @__PURE__ */ React103.createElement(EyeIcon2, { fontSize: SIZE9 }))), actions?.(value), showRemove && /* @__PURE__ */ React103.createElement(Tooltip11, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React103.createElement(IconButton10, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React103.createElement(XIcon4, { fontSize: SIZE9 }))))
+      actions: /* @__PURE__ */ React104.createElement(React104.Fragment, null, showDuplicate && /* @__PURE__ */ React104.createElement(Tooltip11, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(IconButton10, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React104.createElement(CopyIcon2, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React104.createElement(Tooltip11, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(IconButton10, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React104.createElement(EyeOffIcon2, { fontSize: SIZE9 }) : /* @__PURE__ */ React104.createElement(EyeIcon2, { fontSize: SIZE9 }))), actions?.(value), showRemove && /* @__PURE__ */ React104.createElement(Tooltip11, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(IconButton10, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React104.createElement(XIcon4, { fontSize: SIZE9 }))))
     }
-  ), /* @__PURE__ */ React103.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React103.createElement(Box23, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React104.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React104.createElement(Box23, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = useState16(null);
-  const popoverState = usePopupState8({ variant: "popover" });
-  const popoverProps = bindPopover7(popoverState);
-  useEffect10(() => {
+  const [ref, setRef] = useState17(null);
+  const popoverState = usePopupState9({ variant: "popover" });
+  const popoverProps = bindPopover8(popoverState);
+  useEffect11(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();