@elementor/editor-controls 4.2.0-886 → 4.2.0-887

package/dist/index.mjs

@@ -4187,18 +4187,23 @@ var UrlControl = createControl(
 
 // src/controls/link-control.tsx
 import * as React73 from "react";
-import { useEffect as useEffect13, useMemo as useMemo10, useState as useState12 } from "react";
+import { useEffect as useEffect13, useState as useState12 } from "react";
 import { getLinkInLinkRestriction } from "@elementor/editor-elements";
 import { linkPropTypeUtil } from "@elementor/editor-props";
+import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
 import { MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
 import { useSessionStorage } from "@elementor/session";
 import { Collapse, Grid as Grid10, IconButton as IconButton6, Stack as Stack10 } from "@elementor/ui";
-import { debounce as debounce3 } from "@elementor/utils";
+import { useDebouncedCallback } from "@elementor/utils";
 import { __ as __25 } from "@wordpress/i18n";
 
 // src/components/restricted-link-infotip.tsx
 import * as React69 from "react";
-import { selectElement } from "@elementor/editor-elements";
+import {
+  getContainer,
+  getCurrentDocumentId,
+  selectElement
+} from "@elementor/editor-elements";
 import { InfoCircleFilledIcon } from "@elementor/icons";
 import { Alert, AlertAction, AlertTitle, Box as Box10, Infotip as Infotip2, Link as Link2 } from "@elementor/ui";
 import { __ as __23 } from "@wordpress/i18n";
@@ -4216,12 +4221,25 @@ var INFOTIP_CONTENT = {
     "elementor"
   )
 };
+function isTargetInCurrentDocument(elementId) {
+  if (!elementId) {
+    return false;
+  }
+  const el = getContainer(elementId)?.view?.el;
+  if (!el) {
+    return false;
+  }
+  const targetDocId = el.closest("[data-elementor-id]")?.getAttribute("data-elementor-id");
+  const currentDocId = String(getCurrentDocumentId() ?? "");
+  return !!(targetDocId && currentDocId && targetDocId === currentDocId);
+}
 var RestrictedLinkInfotip = ({
   linkInLinkRestriction,
   isVisible,
   children
 }) => {
   const { shouldRestrict, reason, elementId } = linkInLinkRestriction;
+  const showTakeMeThereCta = !!(elementId && isTargetInCurrentDocument(elementId));
   const handleTakeMeClick = () => {
     if (elementId) {
       selectElement(elementId);
@@ -4233,7 +4251,7 @@ var RestrictedLinkInfotip = ({
       color: "secondary",
       icon: /* @__PURE__ */ React69.createElement(InfoCircleFilledIcon, null),
       size: "small",
-      action: /* @__PURE__ */ React69.createElement(
+      action: showTakeMeThereCta ? /* @__PURE__ */ React69.createElement(
         AlertAction,
         {
           sx: { width: "fit-content" },
@@ -4242,7 +4260,7 @@ var RestrictedLinkInfotip = ({
           onClick: handleTakeMeClick
         },
         __23("Take me there", "elementor")
-      )
+      ) : void 0
     },
     /* @__PURE__ */ React69.createElement(AlertTitle, null, __23("Nested links", "elementor")),
     /* @__PURE__ */ React69.createElement(Box10, { component: "span" }, INFOTIP_CONTENT[reason ?? "descendant"], " ", /* @__PURE__ */ React69.createElement(Link2, { href: learnMoreButton.href, target: "_blank", color: "info.main" }, learnMoreButton.label))
@@ -4574,28 +4592,31 @@ var LinkControl = createControl((props) => {
     getLinkInLinkRestriction(elementId, value ?? linkPlaceholder)
   );
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
-  const debouncedCheckRestriction = useMemo10(
-    () => debounce3(() => {
-      const newRestriction = getLinkInLinkRestriction(elementId, value ?? linkPlaceholder);
-      if (newRestriction.shouldRestrict && isActive && !linkPlaceholder) {
-        setIsActive(false);
+  const debouncedCheckRestriction = useDebouncedCallback(() => {
+    const newRestriction = getLinkInLinkRestriction(elementId, value ?? linkPlaceholder);
+    if (newRestriction.shouldRestrict && isActive && !linkPlaceholder) {
+      setIsActive(false);
+      if (value !== null) {
+        setValue(null);
       }
-      setLinkInLinkRestriction(newRestriction);
-    }, 300),
-    [elementId, isActive, value, linkPlaceholder]
+    }
+    setLinkInLinkRestriction((prev) => isSameRestriction(prev, newRestriction) ? prev : newRestriction);
+  }, 300);
+  useListenTo(
+    commandEndEvent("document/elements/set-settings"),
+    () => {
+      debouncedCheckRestriction();
+    },
+    [debouncedCheckRestriction]
   );
   useEffect13(() => {
     debouncedCheckRestriction();
-    const handleInlineLinkChanged = (event) => {
-      const customEvent = event;
-      if (customEvent.detail.elementId === elementId) {
-        debouncedCheckRestriction();
-      }
+    const handleInlineLinkChanged = () => {
+      debouncedCheckRestriction();
     };
     window.addEventListener("elementor:inline-link-changed", handleInlineLinkChanged);
     return () => {
       window.removeEventListener("elementor:inline-link-changed", handleInlineLinkChanged);
-      debouncedCheckRestriction.cancel();
     };
   }, [elementId, debouncedCheckRestriction]);
   const onEnabledChange = () => {
@@ -4656,6 +4677,9 @@ var LinkControl = createControl((props) => {
     }
   )), /* @__PURE__ */ React73.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React73.createElement(Grid10, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React73.createElement(Grid10, { item: true }, /* @__PURE__ */ React73.createElement(ControlFormLabel, null, __25("Open in a new tab", "elementor"))), /* @__PURE__ */ React73.createElement(Grid10, { item: true, sx: { marginInlineEnd: -1 } }, /* @__PURE__ */ React73.createElement(SwitchControl, null))))))));
 });
+function isSameRestriction(a, b) {
+  return a.shouldRestrict === b.shouldRestrict && a.reason === b.reason && a.elementId === b.elementId;
+}
 
 // src/controls/html-tag-control.tsx
 import * as React75 from "react";
@@ -4764,7 +4788,7 @@ var HtmlTagControl = createControl((props) => {
 
 // src/controls/query-chips-control.tsx
 import * as React76 from "react";
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo10 } from "react";
 import {
   createArrayPropUtils,
   numberPropTypeUtil as numberPropTypeUtil4,
@@ -4778,8 +4802,8 @@ var SIZE9 = "tiny";
 var QueryChipsControl = createControl((props) => {
   const { queryOptions, placeholder, minInputLength = 2 } = props;
   const { value, setValue, disabled } = useBoundProp(queryArrayPropTypeUtil);
-  const selectedChips = useMemo11(() => extractChips(value), [value]);
-  const excludeIds = useMemo11(
+  const selectedChips = useMemo10(() => extractChips(value), [value]);
+  const excludeIds = useMemo10(
     () => selectedChips.map((chip) => Number(chip.id)).filter((id) => Number.isFinite(id)),
     [selectedChips]
   );
@@ -4839,7 +4863,7 @@ function extractChips(value) {
 
 // src/controls/query-filter-repeater-control.tsx
 import * as React77 from "react";
-import { useMemo as useMemo12, useRef as useRef13 } from "react";
+import { useMemo as useMemo11, useRef as useRef13 } from "react";
 import { useSelectedElementSettings } from "@elementor/editor-elements";
 import {
   extractValue,
@@ -4860,16 +4884,16 @@ var QueryFilterRepeaterControl = createControl(
   }) => {
     const { propType, value, setValue } = useBoundProp(queryFilterArrayPropTypeUtil);
     const { settings } = useSelectedElementSettings();
-    const visibleKeys = useMemo12(
+    const visibleKeys = useMemo11(
       () => allowedKeys.filter((key) => isKeyVisible(keyConfig[key]?.visibleWhen, settings)),
       [allowedKeys, keyConfig, settings]
     );
-    const usedKeys = useMemo12(() => getUsedKeys(value ?? []), [value]);
-    const nextAvailableKey = useMemo12(
+    const usedKeys = useMemo11(() => getUsedKeys(value ?? []), [value]);
+    const nextAvailableKey = useMemo11(
       () => visibleKeys.find((key) => !usedKeys.has(key)) ?? null,
       [visibleKeys, usedKeys]
     );
-    const getKeySelectOptions = useMemo12(
+    const getKeySelectOptions = useMemo11(
       () => (currentKey) => visibleKeys.map((itemKey) => ({
         value: itemKey,
         label: keyConfig[itemKey]?.label ?? itemKey,
@@ -4877,7 +4901,7 @@ var QueryFilterRepeaterControl = createControl(
       })),
       [visibleKeys, keyConfig, usedKeys]
     );
-    const initialFallback = useMemo12(() => createItemForKey(visibleKeys[0] ?? ""), [visibleKeys]);
+    const initialFallback = useMemo11(() => createItemForKey(visibleKeys[0] ?? ""), [visibleKeys]);
     return /* @__PURE__ */ React77.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React77.createElement(ControlRepeater, { initial: initialFallback, propTypeUtil: queryFilterArrayPropTypeUtil }, /* @__PURE__ */ React77.createElement(RepeaterHeader, { label }, /* @__PURE__ */ React77.createElement(AddFilterItemAction, { nextAvailableKey, ariaLabel: label })), /* @__PURE__ */ React77.createElement(ItemsContainer, { isSortable: false }, /* @__PURE__ */ React77.createElement(
       Item,
       {
@@ -4969,7 +4993,7 @@ var ItemContent = ({
   const currentKey = stringPropTypeUtil13.extract(propContext.value?.key);
   const currentKeyConfig = currentKey ? keyConfig[currentKey] : void 0;
   const valueType = currentKeyConfig?.valueType ?? "chips";
-  const keySelectOptions = useMemo12(() => getKeySelectOptions(currentKey), [getKeySelectOptions, currentKey]);
+  const keySelectOptions = useMemo11(() => getKeySelectOptions(currentKey), [getKeySelectOptions, currentKey]);
   return /* @__PURE__ */ React77.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React77.createElement(PropProvider, { ...propContext, setValue: handleValueChange }, /* @__PURE__ */ React77.createElement(PopoverGridContainer, { flexWrap: "wrap" }, /* @__PURE__ */ React77.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(ControlFormLabel, null, __28("Type", "elementor"))), /* @__PURE__ */ React77.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React77.createElement(SelectControl, { options: keySelectOptions })))), valueType === "taxonomies" && currentKeyConfig?.staticOptions && /* @__PURE__ */ React77.createElement(PopoverGridContainer, { flexWrap: "wrap" }, /* @__PURE__ */ React77.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(ControlFormLabel, null, currentKeyConfig.label)), /* @__PURE__ */ React77.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "taxonomies" }, /* @__PURE__ */ React77.createElement(ChipsControl, { options: currentKeyConfig.staticOptions })))), valueType !== "taxonomies" && currentKeyConfig?.queryEndpoint && /* @__PURE__ */ React77.createElement(PopoverGridContainer, { flexWrap: "wrap" }, /* @__PURE__ */ React77.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(ControlFormLabel, null, currentKeyConfig.label)), /* @__PURE__ */ React77.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "values" }, /* @__PURE__ */ React77.createElement(
     QueryChipsControl,
     {
@@ -6083,7 +6107,7 @@ var BackgroundClipField = () => {
 
 // src/controls/repeatable-control.tsx
 import * as React90 from "react";
-import { useMemo as useMemo13 } from "react";
+import { useMemo as useMemo12 } from "react";
 import { createArrayPropUtils as createArrayPropUtils2 } from "@elementor/editor-props";
 import { Box as Box16 } from "@elementor/ui";
 var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
@@ -6104,11 +6128,11 @@ var RepeatableControl = createControl(
     if (!childPropTypeUtil) {
       return null;
     }
-    const childArrayPropTypeUtil2 = useMemo13(
+    const childArrayPropTypeUtil2 = useMemo12(
       () => createArrayPropUtils2(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
       [childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
     );
-    const contextValue = useMemo13(
+    const contextValue = useMemo12(
       () => ({
         ...childControlConfig,
         placeholder: placeholder || "",
@@ -6240,7 +6264,7 @@ var getAllProperties = (pattern) => {
 
 // src/controls/key-value-control.tsx
 import * as React91 from "react";
-import { useMemo as useMemo14, useState as useState17 } from "react";
+import { useMemo as useMemo13, useState as useState17 } from "react";
 import {
   isTransformable,
   keyValuePropTypeUtil,
@@ -6283,7 +6307,7 @@ var KeyValueControl = createControl((props = {}) => {
     keyHelper: void 0,
     valueHelper: void 0
   };
-  const [keyRegex, valueRegex, errMsg] = useMemo14(
+  const [keyRegex, valueRegex, errMsg] = useMemo13(
     () => [
       props.regexKey ? new RegExp(props.regexKey) : void 0,
       props.regexValue ? new RegExp(props.regexValue) : void 0,
@@ -7022,7 +7046,7 @@ var TransformBasePopoverTrigger = ({
 
 // src/controls/transition-control/transition-repeater-control.tsx
 import * as React108 from "react";
-import { useEffect as useEffect15, useMemo as useMemo17, useState as useState18 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo16, useState as useState18 } from "react";
 import {
   createArrayPropUtils as createArrayPropUtils3,
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2
@@ -7034,7 +7058,7 @@ import { __ as __54 } from "@wordpress/i18n";
 
 // src/controls/selection-size-control.tsx
 import * as React106 from "react";
-import { useMemo as useMemo15, useRef as useRef26 } from "react";
+import { useMemo as useMemo14, useRef as useRef26 } from "react";
 import { selectionSizePropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid29 } from "@elementor/ui";
 var SelectionSizeControl = createControl(
@@ -7042,7 +7066,7 @@ var SelectionSizeControl = createControl(
     const { value, setValue, propType } = useBoundProp(selectionSizePropTypeUtil);
     const rowRef = useRef26(null);
     const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
-    const currentSizeConfig = useMemo15(() => {
+    const currentSizeConfig = useMemo14(() => {
       switch (value.selection.$$type) {
         case "key-value":
           return sizeConfigMap[value?.selection?.value.value.value || ""];
@@ -7255,7 +7279,7 @@ function subscribeToTransitionEvent() {
 
 // src/controls/transition-control/transition-selector.tsx
 import * as React107 from "react";
-import { useMemo as useMemo16, useRef as useRef27 } from "react";
+import { useMemo as useMemo15, useRef as useRef27 } from "react";
 import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
 import { PromotionAlert, PromotionChip } from "@elementor/editor-ui";
 import { ChevronDownIcon as ChevronDownIcon3, VariationsIcon } from "@elementor/icons";
@@ -7344,7 +7368,7 @@ var TransitionSelector = ({
   } = value;
   const defaultRef = useRef27(null);
   const popoverState = usePopupState9({ variant: "popover" });
-  const disabledCategories = useMemo16(() => {
+  const disabledCategories = useMemo15(() => {
     return new Set(
       transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
     );
@@ -7573,11 +7597,11 @@ var TransitionRepeaterControl = createControl(
     const [recentlyUsedList, setRecentlyUsedList] = useState18([]);
     const proInstalled = hasProInstalled2();
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo17(
+    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo16(
       () => getDisabledItemLabels(value),
       [value]
     );
-    const allowedTransitionSet = useMemo17(() => {
+    const allowedTransitionSet = useMemo16(() => {
       const set = /* @__PURE__ */ new Set();
       transitionProperties.forEach((category) => {
         category.properties.forEach((prop) => {
@@ -7603,7 +7627,7 @@ var TransitionRepeaterControl = createControl(
     useEffect15(() => {
       recentlyUsedListGetter().then(setRecentlyUsedList);
     }, [recentlyUsedListGetter]);
-    const allPropertiesUsed = useMemo17(() => areAllPropertiesUsed(value), [value]);
+    const allPropertiesUsed = useMemo16(() => areAllPropertiesUsed(value), [value]);
     const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
     return /* @__PURE__ */ React108.createElement(
       RepeatableControl,
@@ -7886,10 +7910,10 @@ var BoundTimeStringControl = ({ bind, ariaLabel }) => {
 
 // src/controls/inline-editing-control.tsx
 import * as React115 from "react";
-import { useCallback as useCallback4, useEffect as useEffect17, useMemo as useMemo18 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect17, useMemo as useMemo17 } from "react";
 import { htmlV3PropTypeUtil, parseHtmlChildren, stringPropTypeUtil as stringPropTypeUtil21 } from "@elementor/editor-props";
 import { Box as Box25 } from "@elementor/ui";
-import { debounce as debounce4 } from "@elementor/utils";
+import { debounce as debounce3 } from "@elementor/utils";
 
 // src/components/inline-editor.tsx
 import * as React114 from "react";
@@ -8065,8 +8089,8 @@ var InlineEditingControl = createControl(
   }) => {
     const { value, setValue, placeholder } = useBoundProp(htmlV3PropTypeUtil);
     const content = stringPropTypeUtil21.extract(value?.content ?? null) ?? "";
-    const debouncedParse = useMemo18(
-      () => debounce4((html) => {
+    const debouncedParse = useMemo17(
+      () => debounce3((html) => {
         const parsed = parseHtmlChildren(html);
         setValue({
           content: parsed.content ? stringPropTypeUtil21.create(parsed.content) : null,
@@ -8158,9 +8182,9 @@ import { Grid as Grid34, Stack as Stack19 } from "@elementor/ui";
 import { __ as __57 } from "@wordpress/i18n";
 
 // src/hooks/use-form-field-suggestions.ts
-import { getContainer, getSelectedElements as getSelectedElements3 } from "@elementor/editor-elements";
+import { getContainer as getContainer2, getSelectedElements as getSelectedElements3 } from "@elementor/editor-elements";
 import { isTransformable as isTransformable3 } from "@elementor/editor-props";
-import { __privateUseListenTo as useListenTo, commandEndEvent, v1ReadyEvent } from "@elementor/editor-v1-adapters";
+import { __privateUseListenTo as useListenTo2, commandEndEvent as commandEndEvent2, v1ReadyEvent } from "@elementor/editor-v1-adapters";
 var FORM_FIELD_WIDGET_TYPES = [
   "e-form-input",
   "e-form-textarea",
@@ -8171,12 +8195,12 @@ var FORM_FIELD_WIDGET_TYPES = [
   "e-form-time-picker"
 ];
 function useFormFieldSuggestions(options) {
-  return useListenTo(
+  return useListenTo2(
     [
       v1ReadyEvent(),
-      commandEndEvent("document/elements/create"),
-      commandEndEvent("document/elements/delete"),
-      commandEndEvent("document/elements/set-settings")
+      commandEndEvent2("document/elements/create"),
+      commandEndEvent2("document/elements/delete"),
+      commandEndEvent2("document/elements/set-settings")
     ],
     () => {
       const selectedElements = getSelectedElements3();
@@ -8184,7 +8208,7 @@ function useFormFieldSuggestions(options) {
       if (!formElement) {
         return [];
       }
-      const container = getContainer(formElement.id);
+      const container = getContainer2(formElement.id);
       if (!container?.children) {
         return [];
       }
@@ -8801,8 +8825,8 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
 
 // src/components/inline-editor-toolbar.tsx
 import * as React128 from "react";
-import { useEffect as useEffect20, useMemo as useMemo19, useRef as useRef32, useState as useState22 } from "react";
-import { getContainer as getContainer2, getElementSetting } from "@elementor/editor-elements";
+import { useEffect as useEffect20, useMemo as useMemo18, useRef as useRef32, useState as useState22 } from "react";
+import { getContainer as getContainer3, getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
   ItalicIcon,
@@ -8900,7 +8924,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = useMemo19(() => {
+  const formatButtonsList = useMemo18(() => {
     const buttons = Object.values(formatButtons);
     if (isElementClickable) {
       return buttons.filter((button) => button.action !== "link");
@@ -9013,7 +9037,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
   );
 };
 var checkIfElementIsClickable = (elementId) => {
-  const container = getContainer2(elementId);
+  const container = getContainer3(elementId);
   const type = container?.model.get("widgetType");
   const isButton = type === "e-button";
   const hasLink = !!getElementSetting(elementId, "link")?.value?.destination;
@@ -9247,7 +9271,7 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-import { useMemo as useMemo20 } from "react";
+import { useMemo as useMemo19 } from "react";
 import { getElementorConfig } from "@elementor/editor-v1-adapters";
 var getFontControlConfig = () => {
   const { controls } = getElementorConfig();
@@ -9255,7 +9279,7 @@ var getFontControlConfig = () => {
 };
 var useFontFamilies = () => {
   const { groups, options } = getFontControlConfig();
-  return useMemo20(() => {
+  return useMemo19(() => {
     if (!groups || !options) {
       return [];
     }