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

package/dist/index.js

@@ -5920,100 +5920,200 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 });
 
 // src/controls/inline-editing-control.tsx
-var React101 = __toESM(require("react"));
+var React102 = __toESM(require("react"));
 var import_editor_props52 = require("@elementor/editor-props");
 
 // src/components/inline-editor.tsx
-var React100 = __toESM(require("react"));
-var import_react54 = require("react");
-var import_ui86 = require("@elementor/ui");
+var React101 = __toESM(require("react"));
+var import_react55 = require("react");
+var import_ui87 = require("@elementor/ui");
 var import_extension_bold = __toESM(require("@tiptap/extension-bold"));
 var import_extension_document = __toESM(require("@tiptap/extension-document"));
 var import_extension_hard_break = __toESM(require("@tiptap/extension-hard-break"));
 var import_extension_italic = __toESM(require("@tiptap/extension-italic"));
+var import_extension_link = __toESM(require("@tiptap/extension-link"));
 var import_extension_strike = __toESM(require("@tiptap/extension-strike"));
 var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"));
 var import_extension_superscript = __toESM(require("@tiptap/extension-superscript"));
 var import_extension_text = __toESM(require("@tiptap/extension-text"));
 var import_extension_underline = __toESM(require("@tiptap/extension-underline"));
-var import_react55 = require("@tiptap/react");
+var import_react56 = require("@tiptap/react");
 
 // src/components/inline-editor-toolbar.tsx
+var React100 = __toESM(require("react"));
+var import_react53 = require("react");
+var import_icons34 = require("@elementor/icons");
+var import_ui86 = require("@elementor/ui");
+var import_react54 = require("@tiptap/react");
+var import_i18n51 = require("@wordpress/i18n");
+
+// src/components/url-popover.tsx
 var React99 = __toESM(require("react"));
 var import_react52 = require("react");
 var import_icons33 = require("@elementor/icons");
 var import_ui85 = require("@elementor/ui");
-var import_react53 = require("@tiptap/react");
 var import_i18n50 = require("@wordpress/i18n");
+var UrlPopover = ({
+  popupState,
+  restoreValue,
+  anchorRef,
+  value,
+  onChange,
+  openInNewTab,
+  onToggleNewTab
+}) => {
+  const inputRef = (0, import_react52.useRef)(null);
+  (0, import_react52.useEffect)(() => {
+    if (popupState.isOpen) {
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  }, [popupState.isOpen]);
+  const handleClose = () => {
+    restoreValue();
+    popupState.close();
+  };
+  return /* @__PURE__ */ React99.createElement(
+    import_ui85.Popover,
+    {
+      slotProps: {
+        paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
+      },
+      ...(0, import_ui85.bindPopover)(popupState),
+      anchorOrigin: { vertical: "top", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      onClose: handleClose
+    },
+    /* @__PURE__ */ React99.createElement(import_ui85.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React99.createElement(
+      import_ui85.TextField,
+      {
+        value,
+        onChange,
+        size: "tiny",
+        fullWidth: true,
+        placeholder: (0, import_i18n50.__)("Type a URL", "elementor"),
+        inputProps: { ref: inputRef },
+        color: "secondary",
+        InputProps: { sx: { borderRadius: "8px" } }
+      }
+    ), /* @__PURE__ */ React99.createElement(
+      import_ui85.ToggleButton,
+      {
+        size: "tiny",
+        value: "newTab",
+        selected: openInNewTab,
+        onClick: onToggleNewTab,
+        "aria-label": (0, import_i18n50.__)("Open in a new tab", "elementor"),
+        sx: { borderRadius: "8px" }
+      },
+      /* @__PURE__ */ React99.createElement(import_icons33.ExternalLinkIcon, { fontSize: "tiny" })
+    ))
+  );
+};
+
+// src/components/inline-editor-toolbar.tsx
 var toolbarButtons = {
   clear: {
-    label: (0, import_i18n50.__)("Clear", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(import_icons33.MinusIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n51.__)("Clear", "elementor"),
+    icon: /* @__PURE__ */ React100.createElement(import_icons34.MinusIcon, { fontSize: "tiny" }),
     action: "clear",
     method: (editor) => {
       editor.chain().focus().clearNodes().unsetAllMarks().run();
     }
   },
   bold: {
-    label: (0, import_i18n50.__)("Bold", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(import_icons33.BoldIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n51.__)("Bold", "elementor"),
+    icon: /* @__PURE__ */ React100.createElement(import_icons34.BoldIcon, { fontSize: "tiny" }),
     action: "bold",
     method: (editor) => {
       editor.chain().focus().toggleBold().run();
     }
   },
   italic: {
-    label: (0, import_i18n50.__)("Italic", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(import_icons33.ItalicIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n51.__)("Italic", "elementor"),
+    icon: /* @__PURE__ */ React100.createElement(import_icons34.ItalicIcon, { fontSize: "tiny" }),
     action: "italic",
     method: (editor) => {
       editor.chain().focus().toggleItalic().run();
     }
   },
   underline: {
-    label: (0, import_i18n50.__)("Underline", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(import_icons33.UnderlineIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n51.__)("Underline", "elementor"),
+    icon: /* @__PURE__ */ React100.createElement(import_icons34.UnderlineIcon, { fontSize: "tiny" }),
     action: "underline",
     method: (editor) => {
       editor.chain().focus().toggleUnderline().run();
     }
   },
   strike: {
-    label: (0, import_i18n50.__)("Strikethrough", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(import_icons33.StrikethroughIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n51.__)("Strikethrough", "elementor"),
+    icon: /* @__PURE__ */ React100.createElement(import_icons34.StrikethroughIcon, { fontSize: "tiny" }),
     action: "strike",
     method: (editor) => {
       editor.chain().focus().toggleStrike().run();
     }
   },
   superscript: {
-    label: (0, import_i18n50.__)("Superscript", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(import_icons33.SuperscriptIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n51.__)("Superscript", "elementor"),
+    icon: /* @__PURE__ */ React100.createElement(import_icons34.SuperscriptIcon, { fontSize: "tiny" }),
     action: "superscript",
     method: (editor) => {
       editor.chain().focus().toggleSuperscript().run();
     }
   },
   subscript: {
-    label: (0, import_i18n50.__)("Subscript", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(import_icons33.SubscriptIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n51.__)("Subscript", "elementor"),
+    icon: /* @__PURE__ */ React100.createElement(import_icons34.SubscriptIcon, { fontSize: "tiny" }),
     action: "subscript",
     method: (editor) => {
       editor.chain().focus().toggleSubscript().run();
     }
+  },
+  link: {
+    label: (0, import_i18n51.__)("Link", "elementor"),
+    icon: /* @__PURE__ */ React100.createElement(import_icons34.LinkIcon, { fontSize: "tiny" }),
+    action: "link",
+    method: null
   }
 };
 var { clear: clearButton, ...formatButtons } = toolbarButtons;
 var possibleFormats = Object.keys(formatButtons);
 var InlineEditorToolbar = ({ editor }) => {
-  const editorState = (0, import_react53.useEditorState)({
+  const [urlValue, setUrlValue] = (0, import_react53.useState)("");
+  const [openInNewTab, setOpenInNewTab] = (0, import_react53.useState)(false);
+  const toolbarRef = (0, import_react53.useRef)(null);
+  const popupState = (0, import_ui86.usePopupState)({ variant: "popover" });
+  const editorState = (0, import_react54.useEditorState)({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = (0, import_react52.useMemo)(() => Object.values(formatButtons), []);
-  return /* @__PURE__ */ React99.createElement(
-    import_ui85.Box,
+  const formatButtonsList = (0, import_react53.useMemo)(() => Object.values(formatButtons), []);
+  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(
+    import_ui86.Box,
     {
+      ref: toolbarRef,
       sx: {
         position: "absolute",
         top: -40,
@@ -6023,12 +6123,13 @@ 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(import_ui85.Tooltip, { title: clearButton.label, placement: "top" }, /* @__PURE__ */ React99.createElement(import_ui85.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
-    /* @__PURE__ */ React99.createElement(
-      import_ui85.ToggleButtonGroup,
+    /* @__PURE__ */ React100.createElement(import_ui86.Tooltip, { title: clearButton.label, placement: "top" }, /* @__PURE__ */ React100.createElement(import_ui86.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
+    /* @__PURE__ */ React100.createElement(
+      import_ui86.ToggleButtonGroup,
       {
         value: editorState,
         size: "tiny",
@@ -6037,24 +6138,36 @@ var InlineEditorToolbar = ({ editor }) => {
           gap: 0.5
         }
       },
-      formatButtonsList.map((button) => /* @__PURE__ */ React99.createElement(import_ui85.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React99.createElement(
-        import_ui85.ToggleButton,
+      formatButtonsList.map((button) => /* @__PURE__ */ React100.createElement(import_ui86.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React100.createElement(
+        import_ui86.ToggleButton,
         {
           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 = (0, import_react54.useRef)(false);
-  (0, import_react54.useEffect)(() => {
+  const hasMounted = (0, import_react55.useRef)(false);
+  (0, import_react55.useEffect)(() => {
     if (hasMounted.current) {
       callback();
     } else {
@@ -6062,9 +6175,9 @@ var useOnUpdate = (callback, dependencies) => {
     }
   }, dependencies);
 };
-var InlineEditor = React100.forwardRef(
+var InlineEditor = React101.forwardRef(
   ({ value, setValue, attributes = {}, showToolbar = false, sx }, ref) => {
-    const editor = (0, import_react55.useEditor)({
+    const editor = (0, import_react56.useEditor)({
       extensions: [
         import_extension_document.default.extend({
           content: "inline*"
@@ -6076,6 +6189,9 @@ var InlineEditor = React100.forwardRef(
         import_extension_underline.default,
         import_extension_superscript.default,
         import_extension_subscript.default,
+        import_extension_link.default.configure({
+          openOnClick: false
+        }),
         import_extension_hard_break.default.extend({
           addKeyboardShortcuts() {
             return {
@@ -6096,8 +6212,8 @@ var InlineEditor = React100.forwardRef(
         editor.commands.setContent(value, { emitUpdate: false });
       }
     }, [editor, value]);
-    return /* @__PURE__ */ React100.createElement(
-      import_ui86.Box,
+    return /* @__PURE__ */ React101.createElement(
+      import_ui87.Box,
       {
         ref,
         sx: {
@@ -6118,14 +6234,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(import_react55.EditorContent, { editor })
+      showToolbar && /* @__PURE__ */ React101.createElement(InlineEditorToolbar, { editor }),
+      /* @__PURE__ */ React101.createElement(import_react56.EditorContent, { editor })
     );
   }
 );
@@ -6134,25 +6253,25 @@ var InlineEditor = React100.forwardRef(
 var InlineEditingControl = createControl(() => {
   const { value, setValue } = useBoundProp(import_editor_props52.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
-var React102 = __toESM(require("react"));
-var import_icons34 = require("@elementor/icons");
-var import_ui87 = require("@elementor/ui");
-var CustomIconButton = (0, import_ui87.styled)(import_ui87.IconButton)(({ theme }) => ({
+var React103 = __toESM(require("react"));
+var import_icons35 = require("@elementor/icons");
+var import_ui88 = require("@elementor/ui");
+var CustomIconButton = (0, import_ui88.styled)(import_ui88.IconButton)(({ theme }) => ({
   width: theme.spacing(2.5),
   height: theme.spacing(2.5)
 }));
-var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React102.createElement(import_ui87.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React102.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React102.createElement(import_icons34.BrushBigIcon, { fontSize: size })));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React103.createElement(import_ui88.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React103.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React103.createElement(import_icons35.BrushBigIcon, { fontSize: size })));
 
 // src/components/repeater/repeater.tsx
-var React103 = __toESM(require("react"));
-var import_react56 = require("react");
-var import_icons35 = require("@elementor/icons");
-var import_ui88 = require("@elementor/ui");
-var import_i18n51 = require("@wordpress/i18n");
+var React104 = __toESM(require("react"));
+var import_react57 = require("react");
+var import_icons36 = require("@elementor/icons");
+var import_ui89 = require("@elementor/ui");
+var import_i18n52 = require("@wordpress/i18n");
 var SIZE9 = "tiny";
 var EMPTY_OPEN_ITEM2 = -1;
 var Repeater3 = ({
@@ -6170,7 +6289,7 @@ var Repeater3 = ({
   openItem: initialOpenItem = EMPTY_OPEN_ITEM2,
   isSortable = true
 }) => {
-  const [openItem, setOpenItem] = (0, import_react56.useState)(initialOpenItem);
+  const [openItem, setOpenItem] = (0, import_react57.useState)(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -6233,8 +6352,8 @@ var Repeater3 = ({
   };
   const isButtonDisabled = disabled || disableAddItemButton;
   const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
-  const addButton = /* @__PURE__ */ React103.createElement(
-    import_ui88.IconButton,
+  const addButton = /* @__PURE__ */ React104.createElement(
+    import_ui89.IconButton,
     {
       size: SIZE9,
       sx: {
@@ -6242,32 +6361,32 @@ var Repeater3 = ({
       },
       disabled: isButtonDisabled,
       onClick: addRepeaterItem,
-      "aria-label": (0, import_i18n51.__)("Add item", "elementor")
+      "aria-label": (0, import_i18n52.__)("Add item", "elementor")
     },
-    /* @__PURE__ */ React103.createElement(import_icons35.PlusIcon, { fontSize: SIZE9 })
+    /* @__PURE__ */ React104.createElement(import_icons36.PlusIcon, { fontSize: SIZE9 })
   );
-  return /* @__PURE__ */ React103.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React103.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React103.createElement(
-    import_ui88.Infotip,
+  return /* @__PURE__ */ React104.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React104.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React104.createElement(
+    import_ui89.Infotip,
     {
       placement: "right",
       content: addButtonInfotipContent,
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React103.createElement(import_ui88.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
-  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React103.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
+    /* @__PURE__ */ React104.createElement(import_ui89.Box, { 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),
@@ -6279,7 +6398,7 @@ var Repeater3 = ({
         actions: itemSettings.actions,
         value
       },
-      (props) => /* @__PURE__ */ React103.createElement(
+      (props) => /* @__PURE__ */ React104.createElement(
         itemSettings.Content,
         {
           ...props,
@@ -6309,27 +6428,27 @@ var RepeaterItem = ({
   value
 }) => {
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
-  const duplicateLabel = (0, import_i18n51.__)("Duplicate", "elementor");
-  const toggleLabel = propDisabled ? (0, import_i18n51.__)("Show", "elementor") : (0, import_i18n51.__)("Hide", "elementor");
-  const removeLabel = (0, import_i18n51.__)("Remove", "elementor");
-  return /* @__PURE__ */ React103.createElement(React103.Fragment, null, /* @__PURE__ */ React103.createElement(
+  const duplicateLabel = (0, import_i18n52.__)("Duplicate", "elementor");
+  const toggleLabel = propDisabled ? (0, import_i18n52.__)("Show", "elementor") : (0, import_i18n52.__)("Hide", "elementor");
+  const removeLabel = (0, import_i18n52.__)("Remove", "elementor");
+  return /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(
     RepeaterTag,
     {
       disabled,
       label,
       ref: setRef,
-      "aria-label": (0, import_i18n51.__)("Open item", "elementor"),
-      ...(0, import_ui88.bindTrigger)(popoverState),
+      "aria-label": (0, import_i18n52.__)("Open item", "elementor"),
+      ...(0, import_ui89.bindTrigger)(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React103.createElement(React103.Fragment, null, showDuplicate && /* @__PURE__ */ React103.createElement(import_ui88.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React103.createElement(import_ui88.IconButton, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React103.createElement(import_icons35.CopyIcon, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React103.createElement(import_ui88.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React103.createElement(import_ui88.IconButton, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React103.createElement(import_icons35.EyeOffIcon, { fontSize: SIZE9 }) : /* @__PURE__ */ React103.createElement(import_icons35.EyeIcon, { fontSize: SIZE9 }))), actions?.(value), showRemove && /* @__PURE__ */ React103.createElement(import_ui88.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React103.createElement(import_ui88.IconButton, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React103.createElement(import_icons35.XIcon, { fontSize: SIZE9 }))))
+      actions: /* @__PURE__ */ React104.createElement(React104.Fragment, null, showDuplicate && /* @__PURE__ */ React104.createElement(import_ui89.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(import_ui89.IconButton, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React104.createElement(import_icons36.CopyIcon, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React104.createElement(import_ui89.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(import_ui89.IconButton, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React104.createElement(import_icons36.EyeOffIcon, { fontSize: SIZE9 }) : /* @__PURE__ */ React104.createElement(import_icons36.EyeIcon, { fontSize: SIZE9 }))), actions?.(value), showRemove && /* @__PURE__ */ React104.createElement(import_ui89.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(import_ui89.IconButton, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React104.createElement(import_icons36.XIcon, { fontSize: SIZE9 }))))
     }
-  ), /* @__PURE__ */ React103.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React103.createElement(import_ui88.Box, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React104.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React104.createElement(import_ui89.Box, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = (0, import_react56.useState)(null);
-  const popoverState = (0, import_ui88.usePopupState)({ variant: "popover" });
-  const popoverProps = (0, import_ui88.bindPopover)(popoverState);
-  (0, import_react56.useEffect)(() => {
+  const [ref, setRef] = (0, import_react57.useState)(null);
+  const popoverState = (0, import_ui89.usePopupState)({ variant: "popover" });
+  const popoverProps = (0, import_ui89.bindPopover)(popoverState);
+  (0, import_react57.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();