@elementor/editor-controls 0.21.0 → 0.25.0

package/dist/index.js

@@ -94,7 +94,8 @@ var PropProvider = ({
   children,
   value,
   setValue,
-  propType
+  propType,
+  placeholder
 }) => {
   return /* @__PURE__ */ React.createElement(
     PropContext.Provider,
@@ -102,7 +103,8 @@ var PropProvider = ({
       value: {
         value,
         propType,
-        setValue
+        setValue,
+        placeholder
       }
     },
     children
@@ -149,11 +151,12 @@ var ObjectPropKeyProvider = ({ children, bind }) => {
     return context?.setValue(newValue, options, { ...meta, bind });
   };
   const value = context.value?.[bind];
+  const placeholder = context.placeholder?.[bind];
   const propType = context.propType.shape[bind];
   return /* @__PURE__ */ React2.createElement(
     PropKeyContext.Provider,
     {
-      value: { ...context, value, setValue, bind, propType, path: [...path ?? [], bind] }
+      value: { ...context, value, setValue, placeholder, bind, propType, path: [...path ?? [], bind] }
     },
     children
   );
@@ -187,12 +190,17 @@ var usePropKeyContext = () => {
 };
 
 // src/bound-prop-context/use-bound-prop.ts
+var import_react3 = require("react");
 function useBoundProp(propTypeUtil) {
   const propKeyContext = usePropKeyContext();
+  const { isValid, validate, restoreValue } = useValidation(propKeyContext.propType);
   if (!propTypeUtil) {
     return propKeyContext;
   }
   function setValue(value2, options, meta) {
+    if (!validate(value2)) {
+      return;
+    }
     if (value2 === null) {
       return propKeyContext?.setValue(null, options, meta);
     }
@@ -200,13 +208,34 @@ function useBoundProp(propTypeUtil) {
   }
   const propType = resolveUnionPropType(propKeyContext.propType, propTypeUtil.key);
   const value = propTypeUtil.extract(propKeyContext.value ?? propType.default ?? null);
+  const placeholder = propTypeUtil.extract(propKeyContext.placeholder ?? null);
   return {
     ...propKeyContext,
+    propType,
     setValue,
-    value,
-    propType
+    value: isValid ? value : null,
+    restoreValue,
+    placeholder
   };
 }
+var useValidation = (propType) => {
+  const [isValid, setIsValid] = (0, import_react3.useState)(true);
+  const validate = (value) => {
+    let valid = true;
+    if (propType.settings.required && value === null) {
+      valid = false;
+    }
+    setIsValid(valid);
+    return valid;
+  };
+  const restoreValue = () => setIsValid(true);
+  return {
+    isValid,
+    setIsValid,
+    validate,
+    restoreValue
+  };
+};
 var resolveUnionPropType = (propType, key) => {
   let resolvedPropType = propType;
   if (propType.kind === "union") {
@@ -231,8 +260,8 @@ var import_ui2 = require("@elementor/ui");
 
 // src/create-control-replacement.tsx
 var React4 = __toESM(require("react"));
-var import_react3 = require("react");
-var ControlReplacementContext = (0, import_react3.createContext)(void 0);
+var import_react4 = require("react");
+var ControlReplacementContext = (0, import_react4.createContext)(void 0);
 var ControlReplacementProvider = ({
   component,
   condition,
@@ -242,7 +271,7 @@ var ControlReplacementProvider = ({
 };
 var useControlReplacement = () => {
   const { value } = useBoundProp();
-  const controlReplacement = (0, import_react3.useContext)(ControlReplacementContext);
+  const controlReplacement = (0, import_react4.useContext)(ControlReplacementContext);
   let shouldReplace = false;
   try {
     shouldReplace = !!controlReplacement?.condition({ value }) && !!controlReplacement.component;
@@ -326,11 +355,11 @@ var import_ui3 = require("@elementor/ui");
 
 // src/control-actions/control-actions-context.tsx
 var React6 = __toESM(require("react"));
-var import_react4 = require("react");
-var Context = (0, import_react4.createContext)(null);
+var import_react5 = require("react");
+var Context = (0, import_react5.createContext)(null);
 var ControlActionsProvider = ({ children, items }) => /* @__PURE__ */ React6.createElement(Context.Provider, { value: { items } }, children);
 var useControlActions = () => {
-  const context = (0, import_react4.useContext)(Context);
+  const context = (0, import_react5.useContext)(Context);
   if (!context) {
     throw new Error("useControlActions must be used within a ControlActionsProvider");
   }
@@ -481,25 +510,36 @@ var import_ui10 = require("@elementor/ui");
 
 // src/components/text-field-inner-selection.tsx
 var React13 = __toESM(require("react"));
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_ui9 = require("@elementor/ui");
-var TextFieldInnerSelection = (0, import_react5.forwardRef)(
-  ({ placeholder, type, value, onChange, endAdornment, startAdornment }, ref) => {
+var TextFieldInnerSelection = (0, import_react6.forwardRef)(
+  ({
+    placeholder,
+    type,
+    value,
+    onChange,
+    onBlur,
+    onKeyDown,
+    endAdornment,
+    startAdornment
+  }, ref) => {
     return /* @__PURE__ */ React13.createElement(
       import_ui9.TextField,
       {
+        ref,
         size: "tiny",
         fullWidth: true,
         type,
         value,
         onChange,
+        onKeyDown,
+        onBlur,
         placeholder,
         InputProps: {
           endAdornment,
           startAdornment
-        },
-        ref
+        }
       }
     );
   }
@@ -511,7 +551,7 @@ var SelectionEndAdornment = ({
 }) => {
   const popupState = (0, import_ui9.usePopupState)({
     variant: "popover",
-    popupId: (0, import_react5.useId)()
+    popupId: (0, import_react6.useId)()
   });
   const handleMenuItemClick = (index) => {
     onClick(options[index]);
@@ -521,16 +561,16 @@ var SelectionEndAdornment = ({
     import_ui9.Button,
     {
       size: "small",
-      color: "inherit",
-      sx: { font: "inherit", minWidth: "initial" },
+      color: "secondary",
+      sx: { font: "inherit", minWidth: "initial", textTransform: "uppercase" },
       ...(0, import_ui9.bindTrigger)(popupState)
     },
-    value.toUpperCase()
+    value
   ), /* @__PURE__ */ React13.createElement(import_ui9.Menu, { MenuListProps: { dense: true }, ...(0, import_ui9.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React13.createElement(import_editor_ui2.MenuListItem, { key: option, onClick: () => handleMenuItemClick(index) }, option.toUpperCase()))));
 };
 
 // src/hooks/use-sync-external-state.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var useSyncExternalState = ({
   external,
   setExternal,
@@ -549,8 +589,8 @@ var useSyncExternalState = ({
     }
     return externalValue;
   }
-  const [internal, setInternal] = (0, import_react6.useState)(toInternal(external, null));
-  (0, import_react6.useEffect)(() => {
+  const [internal, setInternal] = (0, import_react7.useState)(toInternal(external, null));
+  (0, import_react7.useEffect)(() => {
     setInternal((prevInternal) => toInternal(external, prevInternal));
   }, [external]);
   const setInternalValue = (setter) => {
@@ -568,7 +608,7 @@ var defaultUnit = "px";
 var defaultSize = NaN;
 var SizeControl = createControl(
   ({ units: units2 = defaultUnits, extendedValues = [], placeholder, startIcon }) => {
-    const { value: sizeValue, setValue: setSizeValue } = useBoundProp(import_editor_props6.sizePropTypeUtil);
+    const { value: sizeValue, setValue: setSizeValue, restoreValue } = useBoundProp(import_editor_props6.sizePropTypeUtil);
     const [state, setState] = useSyncExternalState({
       external: sizeValue,
       setExternal: setSizeValue,
@@ -588,20 +628,21 @@ var SizeControl = createControl(
         size: size || size === "0" ? parseFloat(size) : defaultSize
       }));
     };
-    const inputProps = {
-      size: state.size,
-      unit: state.unit,
-      placeholder,
-      startIcon,
-      units: units2,
-      extendedValues,
-      handleSizeChange,
-      handleUnitChange
-    };
-    if (extendedValues?.length) {
-      return /* @__PURE__ */ React14.createElement(ExtendedSizeInput, { ...inputProps });
-    }
-    return /* @__PURE__ */ React14.createElement(SizeInput, { ...inputProps });
+    const Input = extendedValues?.length ? ExtendedSizeInput : SizeInput;
+    return /* @__PURE__ */ React14.createElement(
+      Input,
+      {
+        size: state.size,
+        unit: state.unit,
+        placeholder,
+        startIcon,
+        units: units2,
+        extendedValues,
+        handleSizeChange,
+        handleUnitChange,
+        onBlur: restoreValue
+      }
+    );
   }
 );
 var ExtendedSizeInput = (props) => {
@@ -625,12 +666,14 @@ var ExtendedSizeInput = (props) => {
     }
   );
 };
+var RESTRICTED_INPUT_KEYS = ["e", "E", "+", "-"];
 var SizeInput = ({
   units: units2,
   handleUnitChange,
   handleSizeChange,
   placeholder,
   startIcon,
+  onBlur,
   size,
   unit
 }) => {
@@ -649,7 +692,13 @@ var SizeInput = ({
       startAdornment: startIcon ? /* @__PURE__ */ React14.createElement(import_ui10.InputAdornment, { position: "start" }, startIcon) : void 0,
       type: "number",
       value: Number.isNaN(size) ? "" : size,
-      onChange: handleSizeChange
+      onChange: handleSizeChange,
+      onBlur,
+      onKeyDown: (event) => {
+        if (RESTRICTED_INPUT_KEYS.includes(event.key)) {
+          event.preventDefault();
+        }
+      }
     }
   ));
 };
@@ -708,7 +757,7 @@ var PopoverGridContainer = ({
 
 // src/components/repeater.tsx
 var React23 = __toESM(require("react"));
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_icons3 = require("@elementor/icons");
 var import_ui17 = require("@elementor/ui");
 var import_i18n4 = require("@wordpress/i18n");
@@ -718,11 +767,11 @@ var React21 = __toESM(require("react"));
 
 // src/control-adornments/control-adornments-context.tsx
 var React20 = __toESM(require("react"));
-var import_react7 = require("react");
-var Context2 = (0, import_react7.createContext)(null);
+var import_react8 = require("react");
+var Context2 = (0, import_react8.createContext)(null);
 var ControlAdornmentsProvider = ({ children, items }) => /* @__PURE__ */ React20.createElement(Context2.Provider, { value: { items } }, children);
 var useControlAdornments = () => {
-  const context = (0, import_react7.useContext)(Context2);
+  const context = (0, import_react8.useContext)(Context2);
   return context?.items ?? [];
 };
 
@@ -752,21 +801,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 }));
       }
     }
   );
@@ -789,6 +827,11 @@ var StyledListItem = (0, import_ui16.styled)(import_ui16.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;
@@ -815,6 +858,7 @@ var StyledDivider = (0, import_ui16.styled)(import_ui16.Divider)`
 
 // src/components/repeater.tsx
 var SIZE = "tiny";
+var EMPTY_OPEN_ITEM = -1;
 var Repeater = ({
   label,
   itemSettings,
@@ -823,14 +867,14 @@ var Repeater = ({
   values: repeaterValues = [],
   setValues: setRepeaterValues
 }) => {
-  const [openItem, setOpenItem] = (0, import_react8.useState)(-1);
+  const [openItem, setOpenItem] = (0, import_react9.useState)(EMPTY_OPEN_ITEM);
   const [items, setItems] = useSyncExternalState({
     external: repeaterValues,
     // @ts-expect-error - as long as persistWhen => true, value will never be null
     setExternal: setRepeaterValues,
     persistWhen: () => true
   });
-  const [uniqueKeys, setUniqueKeys] = (0, import_react8.useState)(items.map((_, index) => index));
+  const [uniqueKeys, setUniqueKeys] = (0, import_react9.useState)(items.map((_, index) => index));
   const generateNextKey = (source) => {
     return 1 + Math.max(0, ...source);
   };
@@ -904,14 +948,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) })
     ));
@@ -925,10 +969,11 @@ var RepeaterItem = ({
   removeItem,
   duplicateItem,
   toggleDisableItem,
-  openOnMount
+  openOnMount,
+  onOpen
 }) => {
-  const [anchorEl, setAnchorEl] = (0, import_react8.useState)(null);
-  const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount);
+  const [anchorEl, setAnchorEl] = (0, import_react9.useState)(null);
+  const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
   const duplicateLabel = (0, import_i18n4.__)("Duplicate", "elementor");
   const toggleLabel = disabled ? (0, import_i18n4.__)("Show", "elementor") : (0, import_i18n4.__)("Hide", "elementor");
   const removeLabel = (0, import_i18n4.__)("Remove", "elementor");
@@ -943,8 +988,7 @@ var RepeaterItem = ({
       "aria-label": (0, import_i18n4.__)("Open item", "elementor"),
       ...(0, import_ui17.bindTrigger)(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(import_ui17.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(import_ui17.IconButton, { size: SIZE, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React23.createElement(import_icons3.CopyIcon, { fontSize: SIZE }))), /* @__PURE__ */ React23.createElement(import_ui17.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(import_ui17.IconButton, { size: SIZE, onClick: toggleDisableItem, "aria-label": toggleLabel }, disabled ? /* @__PURE__ */ React23.createElement(import_icons3.EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React23.createElement(import_icons3.EyeIcon, { fontSize: SIZE }))), /* @__PURE__ */ React23.createElement(import_ui17.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(import_ui17.IconButton, { size: SIZE, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React23.createElement(import_icons3.XIcon, { fontSize: SIZE })))),
-      sx: { backgroundColor: "background.paper" }
+      actions: /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(import_ui17.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(import_ui17.IconButton, { size: SIZE, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React23.createElement(import_icons3.CopyIcon, { fontSize: SIZE }))), /* @__PURE__ */ React23.createElement(import_ui17.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(import_ui17.IconButton, { size: SIZE, onClick: toggleDisableItem, "aria-label": toggleLabel }, disabled ? /* @__PURE__ */ React23.createElement(import_icons3.EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React23.createElement(import_icons3.EyeIcon, { fontSize: SIZE }))), /* @__PURE__ */ React23.createElement(import_ui17.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(import_ui17.IconButton, { size: SIZE, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React23.createElement(import_icons3.XIcon, { fontSize: SIZE }))))
     }
   ), /* @__PURE__ */ React23.createElement(
     import_ui17.Popover,
@@ -963,13 +1007,14 @@ var RepeaterItem = ({
     /* @__PURE__ */ React23.createElement(import_ui17.Box, null, children({ anchorEl }))
   ));
 };
-var usePopover = (openOnMount) => {
-  const [ref, setRef] = (0, import_react8.useState)(null);
+var usePopover = (openOnMount, onOpen) => {
+  const [ref, setRef] = (0, import_react9.useState)(null);
   const popoverState = (0, import_ui17.usePopupState)({ variant: "popover" });
   const popoverProps = (0, import_ui17.bindPopover)(popoverState);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
+      onOpen?.();
     }
   }, [ref]);
   return {
@@ -1141,7 +1186,7 @@ var ToggleControl = createControl(
     size = "tiny",
     exclusive = true
   }) => {
-    const { value, setValue } = useBoundProp(import_editor_props10.stringPropTypeUtil);
+    const { value, setValue, placeholder } = useBoundProp(import_editor_props10.stringPropTypeUtil);
     const exclusiveValues = options.filter((option) => option.exclusive).map((option) => option.value);
     const handleNonExclusiveToggle = (selectedValues) => {
       const newSelectedValue = selectedValues[selectedValues.length - 1];
@@ -1158,7 +1203,7 @@ var ToggleControl = createControl(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
-        value: value ?? null,
+        value: value ?? placeholder ?? null,
         onChange: setValue,
         exclusive: true
       }
@@ -1166,7 +1211,7 @@ var ToggleControl = createControl(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
-        value: value?.split(" ") ?? [],
+        value: (value ?? placeholder)?.split(" ") ?? [],
         onChange: handleNonExclusiveToggle,
         exclusive: false
       }
@@ -1179,6 +1224,7 @@ var React27 = __toESM(require("react"));
 var import_editor_props11 = require("@elementor/editor-props");
 var import_ui20 = require("@elementor/ui");
 var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
+var RESTRICTED_INPUT_KEYS2 = ["e", "E", "+", "-"];
 var NumberControl = createControl(
   ({
     placeholder,
@@ -1206,7 +1252,12 @@ var NumberControl = createControl(
         value: isEmptyOrNaN(value) ? "" : value,
         onChange: handleChange,
         placeholder,
-        inputProps: { step }
+        inputProps: { step },
+        onKeyDown: (event) => {
+          if (RESTRICTED_INPUT_KEYS2.includes(event.key)) {
+            event.preventDefault();
+          }
+        }
       }
     ));
   }
@@ -1214,7 +1265,7 @@ var NumberControl = createControl(
 
 // src/controls/equal-unequal-sizes-control.tsx
 var React29 = __toESM(require("react"));
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_editor_props12 = require("@elementor/editor-props");
 var import_ui22 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
@@ -1244,8 +1295,8 @@ function EqualUnequalSizesControl({
   items,
   multiSizePropTypeUtil
 }) {
-  const popupId = (0, import_react9.useId)();
-  const controlRef = (0, import_react9.useRef)(null);
+  const popupId = (0, import_react10.useId)();
+  const controlRef = (0, import_react10.useRef)(null);
   const popupState = (0, import_ui22.usePopupState)({ variant: "popover", popupId });
   const {
     propType: multiSizePropType,
@@ -1411,7 +1462,7 @@ var Control3 = ({
 
 // src/controls/font-family-control/font-family-control.tsx
 var React31 = __toESM(require("react"));
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_editor_props14 = require("@elementor/editor-props");
 var import_icons5 = require("@elementor/icons");
 var import_ui24 = require("@elementor/ui");
@@ -1444,7 +1495,7 @@ var enqueueFont = (fontFamily, context = "editor") => {
 // src/controls/font-family-control/font-family-control.tsx
 var SIZE2 = "tiny";
 var FontFamilyControl = createControl(({ fontFamilies }) => {
-  const [searchValue, setSearchValue] = (0, import_react10.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react11.useState)("");
   const { value: fontFamily, setValue: setFontFamily } = useBoundProp(import_editor_props14.stringPropTypeUtil);
   const popoverState = (0, import_ui24.usePopupState)({ variant: "popover" });
   const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
@@ -1476,6 +1527,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
     /* @__PURE__ */ React31.createElement(import_ui24.Stack, null, /* @__PURE__ */ React31.createElement(import_ui24.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React31.createElement(import_icons5.TextIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React31.createElement(import_ui24.Typography, { variant: "subtitle2" }, (0, import_i18n8.__)("Font Family", "elementor")), /* @__PURE__ */ React31.createElement(import_ui24.IconButton, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React31.createElement(import_icons5.XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React31.createElement(import_ui24.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React31.createElement(
       import_ui24.TextField,
       {
+        autoFocus: true,
         fullWidth: true,
         size: SIZE2,
         value: searchValue,
@@ -1528,7 +1580,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
 var LIST_ITEM_HEIGHT = 36;
 var LIST_ITEMS_BUFFER = 6;
 var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
-  const containerRef = (0, import_react10.useRef)(null);
+  const containerRef = (0, import_react11.useRef)(null);
   const selectedItem = fontListItems.find((item) => item.value === fontFamily);
   const debouncedVirtualizeChange = useDebounce(({ getVirtualIndexes }) => {
     getVirtualIndexes().forEach((index) => {
@@ -1545,7 +1597,7 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
     overscan: LIST_ITEMS_BUFFER,
     onChange: debouncedVirtualizeChange
   });
-  (0, import_react10.useEffect)(
+  (0, import_react11.useEffect)(
     () => {
       virtualizer.scrollToIndex(fontListItems.findIndex((item) => item.value === fontFamily));
     },
@@ -1632,7 +1684,9 @@ var StyledMenuList = (0, import_ui24.styled)(import_ui24.MenuList)(({ theme }) =
     position: "absolute",
     top: 0,
     left: 0,
-    width: "100%"
+    width: "100%",
+    display: "flex",
+    alignItems: "center"
   },
   '& > [role="option"]': {
     ...theme.typography.caption,
@@ -1651,8 +1705,8 @@ var StyledMenuList = (0, import_ui24.styled)(import_ui24.MenuList)(({ theme }) =
   position: "relative"
 }));
 var useDebounce = (fn, delay) => {
-  const [debouncedFn] = (0, import_react10.useState)(() => (0, import_utils2.debounce)(fn, delay));
-  (0, import_react10.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
+  const [debouncedFn] = (0, import_react11.useState)(() => (0, import_utils2.debounce)(fn, delay));
+  (0, import_react11.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
   return debouncedFn;
 };
 
@@ -1677,9 +1731,10 @@ var UrlControl = createControl(({ placeholder }) => {
 
 // src/controls/link-control.tsx
 var React34 = __toESM(require("react"));
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_editor_elements = require("@elementor/editor-elements");
 var import_editor_props16 = require("@elementor/editor-props");
+var import_editor_ui3 = require("@elementor/editor-ui");
 var import_http2 = require("@elementor/http");
 var import_icons7 = require("@elementor/icons");
 var import_session = require("@elementor/session");
@@ -1689,10 +1744,10 @@ var import_i18n9 = require("@wordpress/i18n");
 
 // src/components/autocomplete.tsx
 var React33 = __toESM(require("react"));
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_icons6 = require("@elementor/icons");
 var import_ui26 = require("@elementor/ui");
-var Autocomplete = (0, import_react11.forwardRef)((props, ref) => {
+var Autocomplete = (0, import_react12.forwardRef)((props, ref) => {
   const {
     options,
     onOptionChange,
@@ -1795,10 +1850,14 @@ function _factoryFilter(newValue, options, minInputLength) {
 
 // src/controls/link-control.tsx
 var SIZE3 = "tiny";
+var learnMoreButton = {
+  label: (0, import_i18n9.__)("Learn More", "elementor"),
+  href: "https://go.elementor.com/element-link-inside-link-infotip"
+};
 var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(import_editor_props16.linkPropTypeUtil);
   const [linkSessionValue, setLinkSessionValue] = (0, import_session.useSessionStorage)(path.join("/"));
-  const [isEnabled, setIsEnabled] = (0, import_react12.useState)(!!value);
+  const [isActive, setIsActive] = (0, import_react13.useState)(!!value);
   const {
     allowCustomValues,
     queryOptions: { endpoint = "", requestParams = {} },
@@ -1806,17 +1865,19 @@ var LinkControl = createControl((props) => {
     minInputLength = 2,
     context: { elementId }
   } = props || {};
-  const [options, setOptions] = (0, import_react12.useState)(
+  const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, import_react13.useState)((0, import_editor_elements.getLinkInLinkRestriction)(elementId));
+  const [options, setOptions] = (0, import_react13.useState)(
     generateFirstLoadedOption(value)
   );
+  const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
   const onEnabledChange = () => {
-    const shouldRestrict = (0, import_editor_elements.getAncestorWithAnchorTag)(elementId) || (0, import_editor_elements.getDescendantWithAnchorTag)(elementId);
-    if (shouldRestrict && !isEnabled) {
+    setLinkInLinkRestriction((0, import_editor_elements.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 ? {
@@ -1847,7 +1908,7 @@ var LinkControl = createControl((props) => {
     }
     debounceFetch({ ...requestParams, term: newValue });
   };
-  const debounceFetch = (0, import_react12.useMemo)(
+  const debounceFetch = (0, import_react13.useMemo)(
     () => (0, import_utils3.debounce)(
       (params) => fetchOptions(endpoint, params).then((newOptions) => {
         setOptions(formatOptions(newOptions));
@@ -1866,15 +1927,16 @@ var LinkControl = createControl((props) => {
       }
     },
     /* @__PURE__ */ React34.createElement(ControlFormLabel, null, (0, import_i18n9.__)("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: (0, import_i18n9.__)("Toggle link", "elementor")
       }
-    )
-  ), /* @__PURE__ */ React34.createElement(import_ui27.Collapse, { in: isEnabled, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React34.createElement(import_ui27.Stack, { gap: 1.5 }, /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React34.createElement(ControlActions, null, /* @__PURE__ */ React34.createElement(
+    ))
+  ), /* @__PURE__ */ React34.createElement(import_ui27.Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React34.createElement(import_ui27.Stack, { gap: 1.5 }, /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React34.createElement(ControlActions, null, /* @__PURE__ */ React34.createElement(
     Autocomplete,
     {
       options,
@@ -1885,17 +1947,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(import_ui27.IconButton, { size: SIZE3, onClick: onIconClick, "aria-label": label }, enabled ? /* @__PURE__ */ React34.createElement(import_icons7.MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React34.createElement(import_icons7.PlusIcon, { fontSize: SIZE3 }));
+var ToggleIconControl = ({ disabled, active, onIconClick, label }) => {
+  return /* @__PURE__ */ React34.createElement(import_ui27.IconButton, { size: SIZE3, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React34.createElement(import_icons7.MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React34.createElement(import_icons7.PlusIcon, { fontSize: SIZE3 }));
 };
-var SwitchControl = () => {
+var SwitchControl = ({ disabled }) => {
   const { value = false, setValue } = useBoundProp(import_editor_props16.booleanPropTypeUtil);
   const onClick = () => {
     setValue(!value);
   };
-  return /* @__PURE__ */ React34.createElement(import_ui27.Grid, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React34.createElement(import_ui27.Grid, { item: true }, /* @__PURE__ */ React34.createElement(ControlFormLabel, null, (0, import_i18n9.__)("Open in a new tab", "elementor"))), /* @__PURE__ */ React34.createElement(import_ui27.Grid, { item: true }, /* @__PURE__ */ React34.createElement(import_ui27.Switch, { checked: value, onClick })));
+  const inputProps = disabled ? {
+    style: {
+      opacity: 0
+    }
+  } : {};
+  return /* @__PURE__ */ React34.createElement(import_ui27.Grid, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React34.createElement(import_ui27.Grid, { item: true }, /* @__PURE__ */ React34.createElement(ControlFormLabel, null, (0, import_i18n9.__)("Open in a new tab", "elementor"))), /* @__PURE__ */ React34.createElement(import_ui27.Grid, { item: true }, /* @__PURE__ */ React34.createElement(import_ui27.Switch, { checked: value, onClick, disabled, inputProps })));
 };
 async function fetchOptions(ajaxUrl, params) {
   if (!params || !ajaxUrl) {
@@ -1925,6 +1992,37 @@ function generateFirstLoadedOption(unionValue) {
     }
   ] : [];
 }
+var ConditionalInfoTip = ({ linkInLinkRestriction, isVisible, children }) => {
+  const { shouldRestrict, reason, elementId } = linkInLinkRestriction;
+  const handleTakeMeClick = () => {
+    if (elementId) {
+      (0, import_editor_elements.selectElement)(elementId);
+    }
+  };
+  return shouldRestrict && isVisible ? /* @__PURE__ */ React34.createElement(
+    import_ui27.Infotip,
+    {
+      placement: "right",
+      content: /* @__PURE__ */ React34.createElement(
+        import_editor_ui3.InfoTipCard,
+        {
+          content: INFOTIP_CONTENT[reason],
+          svgIcon: /* @__PURE__ */ React34.createElement(import_icons7.AlertTriangleIcon, null),
+          learnMoreButton,
+          ctaButton: {
+            label: (0, import_i18n9.__)("Take me there", "elementor"),
+            onClick: handleTakeMeClick
+          }
+        }
+      )
+    },
+    /* @__PURE__ */ React34.createElement(import_ui27.Box, null, children)
+  ) : /* @__PURE__ */ React34.createElement(React34.Fragment, null, children);
+};
+var INFOTIP_CONTENT = {
+  descendant: /* @__PURE__ */ React34.createElement(React34.Fragment, null, (0, import_i18n9.__)("To add a link to this container,", "elementor"), /* @__PURE__ */ React34.createElement("br", null), (0, import_i18n9.__)("first remove the link from the elements inside of it.", "elementor")),
+  ancestor: /* @__PURE__ */ React34.createElement(React34.Fragment, null, (0, import_i18n9.__)("To add a link to this element,", "elementor"), /* @__PURE__ */ React34.createElement("br", null), (0, import_i18n9.__)("first remove the link from its parent container.", "elementor"))
+};
 
 // src/controls/gap-control.tsx
 var React35 = __toESM(require("react"));
@@ -1977,7 +2075,7 @@ var Control4 = ({ bind, isLinked }) => {
 
 // src/controls/svg-media-control.tsx
 var React37 = __toESM(require("react"));
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_editor_props18 = require("@elementor/editor-props");
 var import_icons9 = require("@elementor/icons");
 var import_ui30 = require("@elementor/ui");
@@ -1986,7 +2084,7 @@ var import_i18n12 = require("@wordpress/i18n");
 
 // src/components/enable-unfiltered-modal.tsx
 var React36 = __toESM(require("react"));
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_editor_current_user = require("@elementor/editor-current-user");
 var import_ui29 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
@@ -2009,7 +2107,7 @@ var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
 var EnableUnfilteredModal = (props) => {
   const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
   const { canUser } = (0, import_editor_current_user.useCurrentUserCapabilities)();
-  const [isError, setIsError] = (0, import_react13.useState)(false);
+  const [isError, setIsError] = (0, import_react14.useState)(false);
   const canManageOptions = canUser("manage_options");
   const onClose = (enabled) => {
     props.onClose(enabled);
@@ -2074,7 +2172,7 @@ var SvgMediaControl = createControl(() => {
   const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
-  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react14.useState)(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react15.useState)(false);
   const { open } = (0, import_wp_media2.useWpMediaFrame)({
     mediaTypes: ["svg"],
     multiple: false,
@@ -2250,7 +2348,7 @@ var BackgroundImageOverlayAttachment = () => {
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
 var React40 = __toESM(require("react"));
 var import_editor_props20 = require("@elementor/editor-props");
-var import_editor_ui3 = require("@elementor/editor-ui");
+var import_editor_ui4 = require("@elementor/editor-ui");
 var import_icons11 = require("@elementor/icons");
 var import_ui33 = require("@elementor/ui");
 var import_i18n14 = require("@wordpress/i18n");
@@ -2286,7 +2384,7 @@ var BackgroundImageOverlayPosition = () => {
       onChange: handlePositionChange,
       fullWidth: true
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React40.createElement(import_editor_ui3.MenuListItem, { key: value, value: value ?? "" }, label))
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React40.createElement(import_editor_ui4.MenuListItem, { key: value, value: value ?? "" }, label))
   )))), isCustom ? /* @__PURE__ */ React40.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React40.createElement(SizeControl, { startIcon: /* @__PURE__ */ React40.createElement(import_icons11.LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React40.createElement(SizeControl, { startIcon: /* @__PURE__ */ React40.createElement(import_icons11.LetterYIcon, { fontSize: "tiny" }) })))))) : null);
 };
 
@@ -2392,7 +2490,7 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_editor_props22 = require("@elementor/editor-props");
 var import_ui36 = require("@elementor/ui");
 var useBackgroundTabsHistory = ({
@@ -2413,7 +2511,7 @@ var useBackgroundTabsHistory = ({
     return "image";
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui36.useTabs)(getCurrentOverlayType());
-  const valuesHistory = (0, import_react15.useRef)({
+  const valuesHistory = (0, import_react16.useRef)({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -2615,7 +2713,7 @@ var useImage = (image) => {
   const imageSrc = image?.value.image.value?.src.value;
   const { data: attachment } = (0, import_wp_media3.useWpMediaAttachment)(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) {
@@ -2624,6 +2722,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(",");