@elementor/editor-controls 0.21.0 → 0.24.0

package/dist/index.mjs

@@ -456,11 +456,11 @@ var SelectionEndAdornment = ({
     Button2,
     {
       size: "small",
-      color: "inherit",
-      sx: { font: "inherit", minWidth: "initial" },
+      color: "secondary",
+      sx: { font: "inherit", minWidth: "initial", textTransform: "uppercase" },
       ...bindTrigger(popupState)
     },
-    value.toUpperCase()
+    value
   ), /* @__PURE__ */ React13.createElement(Menu, { MenuListProps: { dense: true }, ...bindMenu(popupState) }, options.map((option, index) => /* @__PURE__ */ React13.createElement(MenuListItem2, { key: option, onClick: () => handleMenuItemClick(index) }, option.toUpperCase()))));
 };
 
@@ -705,21 +705,10 @@ var SortableItem = ({ id, children }) => {
         triggerProps,
         itemStyle,
         triggerStyle,
-        isDragOverlay,
         showDropIndication,
         dropIndicationStyle
       }) => {
-        return /* @__PURE__ */ React22.createElement(
-          StyledListItem,
-          {
-            ...itemProps,
-            style: itemStyle,
-            sx: { backgroundColor: isDragOverlay ? "background.paper" : void 0 }
-          },
-          /* @__PURE__ */ React22.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }),
-          children,
-          showDropIndication && /* @__PURE__ */ React22.createElement(StyledDivider, { style: dropIndicationStyle })
-        );
+        return /* @__PURE__ */ React22.createElement(StyledListItem, { ...itemProps, style: itemStyle }, /* @__PURE__ */ React22.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children, showDropIndication && /* @__PURE__ */ React22.createElement(StyledDivider, { style: dropIndicationStyle }));
       }
     }
   );
@@ -742,6 +731,11 @@ var StyledListItem = styled2(ListItem)`
 		transform: translate( -75%, -50% );
 	}
 
+	&[aria-describedby=''] > .MuiTag-root {
+		background-color: ${({ theme }) => theme.palette.background.paper};
+		box-shadow: ${({ theme }) => theme.shadows[3]};
+	}
+
 	&:hover {
 		& .class-item-sortable-trigger {
 			visibility: visible;
@@ -768,6 +762,7 @@ var StyledDivider = styled2(Divider)`
 
 // src/components/repeater.tsx
 var SIZE = "tiny";
+var EMPTY_OPEN_ITEM = -1;
 var Repeater = ({
   label,
   itemSettings,
@@ -776,7 +771,7 @@ var Repeater = ({
   values: repeaterValues = [],
   setValues: setRepeaterValues
 }) => {
-  const [openItem, setOpenItem] = useState2(-1);
+  const [openItem, setOpenItem] = useState2(EMPTY_OPEN_ITEM);
   const [items, setItems] = useSyncExternalState({
     external: repeaterValues,
     // @ts-expect-error - as long as persistWhen => true, value will never be null
@@ -857,14 +852,14 @@ var Repeater = ({
     return /* @__PURE__ */ React23.createElement(SortableItem, { id: key, key: `sortable-${key}` }, /* @__PURE__ */ React23.createElement(
       RepeaterItem,
       {
-        bind: String(index),
         disabled: value?.disabled,
         label: /* @__PURE__ */ React23.createElement(itemSettings.Label, { value }),
         startIcon: /* @__PURE__ */ React23.createElement(itemSettings.Icon, { value }),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
-        openOnMount: openOnAdd && openItem === key
+        openOnMount: openOnAdd && openItem === key,
+        onOpen: () => setOpenItem(EMPTY_OPEN_ITEM)
       },
       (props) => /* @__PURE__ */ React23.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
     ));
@@ -878,10 +873,11 @@ var RepeaterItem = ({
   removeItem,
   duplicateItem,
   toggleDisableItem,
-  openOnMount
+  openOnMount,
+  onOpen
 }) => {
   const [anchorEl, setAnchorEl] = useState2(null);
-  const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount);
+  const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
   const duplicateLabel = __4("Duplicate", "elementor");
   const toggleLabel = disabled ? __4("Show", "elementor") : __4("Hide", "elementor");
   const removeLabel = __4("Remove", "elementor");
@@ -896,8 +892,7 @@ var RepeaterItem = ({
       "aria-label": __4("Open item", "elementor"),
       ...bindTrigger2(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(IconButton, { size: SIZE, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React23.createElement(CopyIcon, { fontSize: SIZE }))), /* @__PURE__ */ React23.createElement(Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(IconButton, { size: SIZE, onClick: toggleDisableItem, "aria-label": toggleLabel }, disabled ? /* @__PURE__ */ React23.createElement(EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React23.createElement(EyeIcon, { fontSize: SIZE }))), /* @__PURE__ */ React23.createElement(Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(IconButton, { size: SIZE, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React23.createElement(XIcon, { fontSize: SIZE })))),
-      sx: { backgroundColor: "background.paper" }
+      actions: /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(IconButton, { size: SIZE, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React23.createElement(CopyIcon, { fontSize: SIZE }))), /* @__PURE__ */ React23.createElement(Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(IconButton, { size: SIZE, onClick: toggleDisableItem, "aria-label": toggleLabel }, disabled ? /* @__PURE__ */ React23.createElement(EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React23.createElement(EyeIcon, { fontSize: SIZE }))), /* @__PURE__ */ React23.createElement(Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(IconButton, { size: SIZE, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React23.createElement(XIcon, { fontSize: SIZE }))))
     }
   ), /* @__PURE__ */ React23.createElement(
     Popover,
@@ -916,13 +911,14 @@ var RepeaterItem = ({
     /* @__PURE__ */ React23.createElement(Box, null, children({ anchorEl }))
   ));
 };
-var usePopover = (openOnMount) => {
+var usePopover = (openOnMount, onOpen) => {
   const [ref, setRef] = useState2(null);
   const popoverState = usePopupState2({ variant: "popover" });
   const popoverProps = bindPopover(popoverState);
   useEffect2(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
+      onOpen?.();
     }
   }, [ref]);
   return {
@@ -1608,7 +1604,9 @@ var StyledMenuList = styled4(MenuList)(({ theme }) => ({
     position: "absolute",
     top: 0,
     left: 0,
-    width: "100%"
+    width: "100%",
+    display: "flex",
+    alignItems: "center"
   },
   '& > [role="option"]': {
     ...theme.typography.caption,
@@ -1654,7 +1652,7 @@ var UrlControl = createControl(({ placeholder }) => {
 // src/controls/link-control.tsx
 import * as React34 from "react";
 import { useMemo, useState as useState4 } from "react";
-import { getAncestorWithAnchorTag, getDescendantWithAnchorTag } from "@elementor/editor-elements";
+import { getLinkInLinkRestriction, selectElement } from "@elementor/editor-elements";
 import {
   booleanPropTypeUtil,
   linkPropTypeUtil,
@@ -1662,10 +1660,11 @@ import {
   stringPropTypeUtil as stringPropTypeUtil7,
   urlPropTypeUtil as urlPropTypeUtil2
 } from "@elementor/editor-props";
+import { InfoTipCard } from "@elementor/editor-ui";
 import { httpService as httpService2 } from "@elementor/http";
-import { MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
+import { AlertTriangleIcon, MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
 import { useSessionStorage } from "@elementor/session";
-import { Collapse, Divider as Divider3, Grid as Grid7, IconButton as IconButton4, Stack as Stack10, Switch } from "@elementor/ui";
+import { Box as Box4, Collapse, Divider as Divider3, Grid as Grid7, IconButton as IconButton4, Infotip, Stack as Stack10, Switch } from "@elementor/ui";
 import { debounce as debounce2 } from "@elementor/utils";
 import { __ as __9 } from "@wordpress/i18n";
 
@@ -1783,10 +1782,14 @@ function _factoryFilter(newValue, options, minInputLength) {
 
 // src/controls/link-control.tsx
 var SIZE3 = "tiny";
+var learnMoreButton = {
+  label: __9("Learn More", "elementor"),
+  href: "https://go.elementor.com/element-link-inside-link-infotip"
+};
 var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(linkPropTypeUtil);
   const [linkSessionValue, setLinkSessionValue] = useSessionStorage(path.join("/"));
-  const [isEnabled, setIsEnabled] = useState4(!!value);
+  const [isActive, setIsActive] = useState4(!!value);
   const {
     allowCustomValues,
     queryOptions: { endpoint = "", requestParams = {} },
@@ -1794,17 +1797,19 @@ var LinkControl = createControl((props) => {
     minInputLength = 2,
     context: { elementId }
   } = props || {};
+  const [linkInLinkRestriction, setLinkInLinkRestriction] = useState4(getLinkInLinkRestriction(elementId));
   const [options, setOptions] = useState4(
     generateFirstLoadedOption(value)
   );
+  const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
   const onEnabledChange = () => {
-    const shouldRestrict = getAncestorWithAnchorTag(elementId) || getDescendantWithAnchorTag(elementId);
-    if (shouldRestrict && !isEnabled) {
+    setLinkInLinkRestriction(getLinkInLinkRestriction(elementId));
+    if (linkInLinkRestriction.shouldRestrict && !isActive) {
       return;
     }
-    setIsEnabled((prevState) => !prevState);
-    setValue(isEnabled ? null : linkSessionValue?.value ?? null);
-    setLinkSessionValue({ value, meta: { isEnabled: !isEnabled } });
+    setIsActive((prevState) => !prevState);
+    setValue(isActive ? null : linkSessionValue?.value ?? null);
+    setLinkSessionValue({ value, meta: { isEnabled: !isActive } });
   };
   const onOptionChange = (newValue) => {
     const valueToSave = newValue ? {
@@ -1854,15 +1859,16 @@ var LinkControl = createControl((props) => {
       }
     },
     /* @__PURE__ */ React34.createElement(ControlFormLabel, null, __9("Link", "elementor")),
-    /* @__PURE__ */ React34.createElement(
+    /* @__PURE__ */ React34.createElement(ConditionalInfoTip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React34.createElement(
       ToggleIconControl,
       {
-        enabled: isEnabled,
+        disabled: shouldDisableAddingLink,
+        active: isActive,
         onIconClick: onEnabledChange,
         label: __9("Toggle link", "elementor")
       }
-    )
-  ), /* @__PURE__ */ React34.createElement(Collapse, { in: isEnabled, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React34.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React34.createElement(ControlActions, null, /* @__PURE__ */ React34.createElement(
+    ))
+  ), /* @__PURE__ */ React34.createElement(Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React34.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React34.createElement(ControlActions, null, /* @__PURE__ */ React34.createElement(
     Autocomplete,
     {
       options,
@@ -1873,17 +1879,22 @@ var LinkControl = createControl((props) => {
       onTextChange,
       minInputLength
     }
-  ))), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React34.createElement(SwitchControl, null))))));
+  ))), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React34.createElement(SwitchControl, { disabled: !value }))))));
 });
-var ToggleIconControl = ({ enabled, onIconClick, label }) => {
-  return /* @__PURE__ */ React34.createElement(IconButton4, { size: SIZE3, onClick: onIconClick, "aria-label": label }, enabled ? /* @__PURE__ */ React34.createElement(MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React34.createElement(PlusIcon2, { fontSize: SIZE3 }));
+var ToggleIconControl = ({ disabled, active, onIconClick, label }) => {
+  return /* @__PURE__ */ React34.createElement(IconButton4, { size: SIZE3, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React34.createElement(MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React34.createElement(PlusIcon2, { fontSize: SIZE3 }));
 };
-var SwitchControl = () => {
+var SwitchControl = ({ disabled }) => {
   const { value = false, setValue } = useBoundProp(booleanPropTypeUtil);
   const onClick = () => {
     setValue(!value);
   };
-  return /* @__PURE__ */ React34.createElement(Grid7, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React34.createElement(Grid7, { item: true }, /* @__PURE__ */ React34.createElement(ControlFormLabel, null, __9("Open in a new tab", "elementor"))), /* @__PURE__ */ React34.createElement(Grid7, { item: true }, /* @__PURE__ */ React34.createElement(Switch, { checked: value, onClick })));
+  const inputProps = disabled ? {
+    style: {
+      opacity: 0
+    }
+  } : {};
+  return /* @__PURE__ */ React34.createElement(Grid7, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React34.createElement(Grid7, { item: true }, /* @__PURE__ */ React34.createElement(ControlFormLabel, null, __9("Open in a new tab", "elementor"))), /* @__PURE__ */ React34.createElement(Grid7, { item: true }, /* @__PURE__ */ React34.createElement(Switch, { checked: value, onClick, disabled, inputProps })));
 };
 async function fetchOptions(ajaxUrl, params) {
   if (!params || !ajaxUrl) {
@@ -1913,6 +1924,37 @@ function generateFirstLoadedOption(unionValue) {
     }
   ] : [];
 }
+var ConditionalInfoTip = ({ linkInLinkRestriction, isVisible, children }) => {
+  const { shouldRestrict, reason, elementId } = linkInLinkRestriction;
+  const handleTakeMeClick = () => {
+    if (elementId) {
+      selectElement(elementId);
+    }
+  };
+  return shouldRestrict && isVisible ? /* @__PURE__ */ React34.createElement(
+    Infotip,
+    {
+      placement: "right",
+      content: /* @__PURE__ */ React34.createElement(
+        InfoTipCard,
+        {
+          content: INFOTIP_CONTENT[reason],
+          svgIcon: /* @__PURE__ */ React34.createElement(AlertTriangleIcon, null),
+          learnMoreButton,
+          ctaButton: {
+            label: __9("Take me there", "elementor"),
+            onClick: handleTakeMeClick
+          }
+        }
+      )
+    },
+    /* @__PURE__ */ React34.createElement(Box4, null, children)
+  ) : /* @__PURE__ */ React34.createElement(React34.Fragment, null, children);
+};
+var INFOTIP_CONTENT = {
+  descendant: /* @__PURE__ */ React34.createElement(React34.Fragment, null, __9("To add a link to this container,", "elementor"), /* @__PURE__ */ React34.createElement("br", null), __9("first remove the link from the elements inside of it.", "elementor")),
+  ancestor: /* @__PURE__ */ React34.createElement(React34.Fragment, null, __9("To add a link to this element,", "elementor"), /* @__PURE__ */ React34.createElement("br", null), __9("first remove the link from its parent container.", "elementor"))
+};
 
 // src/controls/gap-control.tsx
 import * as React35 from "react";
@@ -2154,7 +2196,7 @@ import {
   backgroundOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil3
 } from "@elementor/editor-props";
-import { Box as Box4, CardMedia as CardMedia3, Grid as Grid13, styled as styled6, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
+import { Box as Box5, CardMedia as CardMedia3, Grid as Grid13, styled as styled6, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment3 } from "@elementor/wp-media";
 import { __ as __17 } from "@wordpress/i18n";
 
@@ -2534,7 +2576,7 @@ var Content2 = () => {
     color: initialBackgroundColorOverlay.value,
     gradient: initialBackgroundGradientOverlay.value
   });
-  return /* @__PURE__ */ React43.createElement(Box4, { sx: { width: "100%" } }, /* @__PURE__ */ React43.createElement(Box4, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React43.createElement(Box5, { sx: { width: "100%" } }, /* @__PURE__ */ React43.createElement(Box5, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React43.createElement(
     Tabs,
     {
       size: "small",
@@ -2636,7 +2678,7 @@ var useImage = (image) => {
   const imageSrc = image?.value.image.value?.src.value;
   const { data: attachment } = useWpMediaAttachment3(imageSrc.id?.value || null);
   if (imageSrc.id) {
-    const imageFileTypeExtension = attachment?.subtype ? `.${attachment.subtype}` : "";
+    const imageFileTypeExtension = getFileExtensionFromFilename(attachment?.filename);
     imageTitle = `${attachment?.title}${imageFileTypeExtension}` || null;
     imageUrl = attachment?.url || null;
   } else if (imageSrc.url) {
@@ -2645,6 +2687,13 @@ var useImage = (image) => {
   }
   return { imageTitle, imageUrl };
 };
+var getFileExtensionFromFilename = (filename) => {
+  if (!filename) {
+    return "";
+  }
+  const extension = filename.substring(filename.lastIndexOf(".") + 1);
+  return `.${extension}`;
+};
 var getGradientValue = (value) => {
   const gradient = value.value;
   const stops = gradient.stops.value?.map(({ value: { color, offset } }) => `${color.value} ${offset.value ?? 0}%`)?.join(",");