@elementor/editor-controls 3.35.0-349 → 3.35.0-350

package/dist/index.mjs

@@ -948,8 +948,7 @@ var SizeControl = createControl(
     min = 0,
     enablePropTypeUnits = false,
     id,
-    ariaLabel,
-    isRepeaterControl = false
+    ariaLabel
   }) => {
     const {
       value: sizeValue,
@@ -1007,38 +1006,13 @@ var SizeControl = createControl(
         popupState.open(anchorRef?.current);
       }
     };
-    const handleLinkedSizeControlChanges = () => {
-      const newState = createStateFromSizeProp(
-        sizeValue,
-        state.unit === "custom" ? state.unit : actualDefaultUnit,
-        "",
-        state.custom
-      );
-      const currentUnitType = isUnitExtendedOption(state.unit) ? "custom" : "numeric";
-      const mergedStates = {
-        ...state,
-        unit: newState.unit ?? state.unit,
-        [currentUnitType]: newState[currentUnitType]
-      };
-      if (mergedStates.unit !== "auto" && areStatesEqual(state, mergedStates)) {
-        return;
-      }
-      if (state.unit === newState.unit) {
-        setState(mergedStates);
-        return;
-      }
-      setState(newState);
-    };
-    useEffect3(() => {
-      if (!isRepeaterControl) {
-        handleLinkedSizeControlChanges();
+    const maybeClosePopup = React18.useCallback(() => {
+      if (popupState && popupState.isOpen) {
+        popupState.close();
       }
-    }, [sizeValue]);
+    }, [popupState]);
     useEffect3(() => {
-      const newState = createStateFromSizeProp(sizeValue, actualDefaultUnit, "", state.custom);
-      if (activeBreakpoint && !areStatesEqual(newState, state)) {
-        setState(newState);
-      }
+      maybeClosePopup();
     }, [activeBreakpoint]);
     return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
       SizeInput,
@@ -1115,15 +1089,6 @@ function extractValueFromState(state, allowEmpty = false) {
     unit
   };
 }
-function areStatesEqual(state1, state2) {
-  if (state1.unit !== state2.unit || state1.custom !== state2.custom) {
-    return false;
-  }
-  if (isUnitExtendedOption(state1.unit)) {
-    return state1.custom === state2.custom;
-  }
-  return state1.numeric === state2.numeric || isNaN(state1.numeric) && isNaN(state2.numeric);
-}
 
 // src/controls/stroke-control.tsx
 import * as React21 from "react";
@@ -2727,24 +2692,15 @@ var MultiSizeValueControl = ({ item, rowRef }) => {
 
 // src/controls/linked-dimensions-control.tsx
 import * as React57 from "react";
-import { useRef as useRef9 } from "react";
+import { useLayoutEffect, useRef as useRef9, useState as useState8 } from "react";
 import { dimensionsPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil4 } from "@elementor/editor-props";
+import { useActiveBreakpoint as useActiveBreakpoint2 } from "@elementor/editor-responsive";
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
 import { Grid as Grid9, Stack as Stack8, Tooltip as Tooltip6 } from "@elementor/ui";
 import { __ as __18 } from "@wordpress/i18n";
-var LinkedDimensionsControl = ({
-  label,
-  isSiteRtl = false,
-  extendedOptions,
-  min
-}) => {
-  const {
-    value: sizeValue,
-    setValue: setSizeValue,
-    disabled: sizeDisabled,
-    placeholder: sizePlaceholder
-  } = useBoundProp(sizePropTypeUtil4);
+var LinkedDimensionsControl = ({ label, isSiteRtl = false, extendedOptions, min }) => {
   const gridRowRefs = [useRef9(null), useRef9(null)];
+  const { disabled: sizeDisabled, placeholder: sizePlaceholder } = useBoundProp(sizePropTypeUtil4);
   const {
     value: dimensionsValue,
     setValue: setDimensionsValue,
@@ -2752,62 +2708,83 @@ var LinkedDimensionsControl = ({
     placeholder: dimensionsPlaceholder,
     disabled: dimensionsDisabled
   } = useBoundProp(dimensionsPropTypeUtil);
-  const hasUserValues = !!(dimensionsValue || sizeValue);
+  const { value: masterValue, placeholder: masterPlaceholder, setValue: setMasterValue } = useBoundProp();
   const hasPlaceholders = !!(sizePlaceholder || dimensionsPlaceholder);
-  const isLinked = !hasUserValues && !hasPlaceholders || (hasPlaceholders ? !!sizePlaceholder : !!sizeValue);
+  const inferIsLinked = () => {
+    if (dimensionsPropTypeUtil.isValid(masterValue)) {
+      return false;
+    }
+    if (dimensionsPropTypeUtil.isValid(masterPlaceholder)) {
+      return false;
+    }
+    return true;
+  };
+  const [isLinked, setIsLinked] = useState8(() => inferIsLinked());
+  const activeBreakpoint = useActiveBreakpoint2();
+  useLayoutEffect(() => {
+    setIsLinked(inferIsLinked);
+  }, [activeBreakpoint]);
   const onLinkToggle = () => {
-    if (!isLinked) {
-      setSizeValue(dimensionsValue["block-start"]?.value ?? null);
+    setIsLinked((prev) => !prev);
+    if (!dimensionsPropTypeUtil.isValid(masterValue)) {
+      const value = masterValue ? masterValue : null;
+      if (!value) {
+        setMasterValue(null);
+        return;
+      }
+      setMasterValue(
+        dimensionsPropTypeUtil.create({
+          "block-start": value,
+          "block-end": value,
+          "inline-start": value,
+          "inline-end": value
+        })
+      );
       return;
     }
-    const value = sizeValue ? sizePropTypeUtil4.create(sizeValue) : null;
-    setDimensionsValue({
-      "block-start": value,
-      "block-end": value,
-      "inline-start": value,
-      "inline-end": value
-    });
+    const sizeValue = dimensionsValue?.["block-start"] ?? dimensionsValue?.["inline-end"] ?? dimensionsValue?.["block-end"] ?? dimensionsValue?.["inline-start"] ?? null;
+    if (!sizeValue) {
+      setMasterValue(null);
+      return;
+    }
+    setMasterValue(sizeValue);
   };
   const tooltipLabel = label.toLowerCase();
   const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
   const linkedLabel = __18("Link %s", "elementor").replace("%s", tooltipLabel);
   const unlinkedLabel = __18("Unlink %s", "elementor").replace("%s", tooltipLabel);
   const disabled = sizeDisabled || dimensionsDisabled;
-  return /* @__PURE__ */ React57.createElement(
-    PropProvider,
+  const propProviderProps = {
+    propType,
+    value: dimensionsValue,
+    placeholder: dimensionsPlaceholder,
+    setValue: setDimensionsValue,
+    isDisabled: () => dimensionsDisabled
+  };
+  return /* @__PURE__ */ React57.createElement(PropProvider, { ...propProviderProps }, /* @__PURE__ */ React57.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(ControlFormLabel, null, label), /* @__PURE__ */ React57.createElement(Tooltip6, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React57.createElement(
+    StyledToggleButton,
     {
-      propType,
-      value: dimensionsValue,
-      setValue: setDimensionsValue,
-      placeholder: dimensionsPlaceholder,
-      isDisabled: () => disabled
+      "aria-label": isLinked ? unlinkedLabel : linkedLabel,
+      size: "tiny",
+      value: "check",
+      selected: isLinked,
+      sx: { marginLeft: "auto" },
+      onChange: onLinkToggle,
+      disabled,
+      isPlaceholder: hasPlaceholders
     },
-    /* @__PURE__ */ React57.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(ControlFormLabel, null, label), /* @__PURE__ */ React57.createElement(Tooltip6, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React57.createElement(
-      StyledToggleButton,
-      {
-        "aria-label": isLinked ? unlinkedLabel : linkedLabel,
-        size: "tiny",
-        value: "check",
-        selected: isLinked,
-        sx: { marginLeft: "auto" },
-        onChange: onLinkToggle,
-        disabled,
-        isPlaceholder: hasPlaceholders
-      },
-      /* @__PURE__ */ React57.createElement(LinkedIcon, { fontSize: "tiny" })
-    ))),
-    getCssDimensionProps(isSiteRtl).map((row, index) => /* @__PURE__ */ React57.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap", key: index, ref: gridRowRefs[index] }, row.map(({ icon, ...props }) => /* @__PURE__ */ React57.createElement(Grid9, { container: true, gap: 0.75, alignItems: "center", key: props.bind }, /* @__PURE__ */ React57.createElement(Grid9, { item: true, xs: 12 }, /* @__PURE__ */ React57.createElement(Label, { ...props })), /* @__PURE__ */ React57.createElement(Grid9, { item: true, xs: 12 }, /* @__PURE__ */ React57.createElement(
-      Control3,
-      {
-        bind: props.bind,
-        startIcon: icon,
-        isLinked,
-        extendedOptions,
-        anchorRef: gridRowRefs[index],
-        min
-      }
-    ))))))
-  );
+    /* @__PURE__ */ React57.createElement(LinkedIcon, { fontSize: "tiny" })
+  ))), getCssDimensionProps(isSiteRtl).map((row, index) => /* @__PURE__ */ React57.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap", key: index, ref: gridRowRefs[index] }, row.map(({ icon, ...props }) => /* @__PURE__ */ React57.createElement(Grid9, { container: true, gap: 0.75, alignItems: "center", key: props.bind }, /* @__PURE__ */ React57.createElement(Grid9, { item: true, xs: 12 }, /* @__PURE__ */ React57.createElement(Label, { ...props })), /* @__PURE__ */ React57.createElement(Grid9, { item: true, xs: 12 }, /* @__PURE__ */ React57.createElement(
+    Control3,
+    {
+      bind: props.bind,
+      startIcon: icon,
+      isLinked,
+      extendedOptions,
+      anchorRef: gridRowRefs[index],
+      min
+    }
+  )))))));
 };
 var Control3 = ({
   bind,
@@ -2879,7 +2856,7 @@ import { __ as __20 } from "@wordpress/i18n";
 
 // src/components/item-selector.tsx
 import * as React58 from "react";
-import { useCallback, useEffect as useEffect6, useState as useState8 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useState as useState9 } from "react";
 import { PopoverBody, PopoverHeader as PopoverHeader2, PopoverMenuList, SearchField } from "@elementor/editor-ui";
 import { Box as Box7, Divider as Divider2, Link, Stack as Stack9, Typography as Typography4 } from "@elementor/ui";
 import { debounce } from "@elementor/utils";
@@ -2916,7 +2893,7 @@ var ItemSelector = ({
   disabledItems,
   id = "item-selector"
 }) => {
-  const [searchValue, setSearchValue] = useState8("");
+  const [searchValue, setSearchValue] = useState9("");
   const filteredItemsList = useFilteredItemsList(itemsList, searchValue, disabledItems);
   const IconComponent = icon;
   const handleSearch = (value) => {
@@ -3013,7 +2990,7 @@ var ItemList = ({
       }
     });
   }, 100);
-  const memoizedItemStyle = useCallback((item) => itemStyle(item), [itemStyle]);
+  const memoizedItemStyle = useCallback2((item) => itemStyle(item), [itemStyle]);
   return /* @__PURE__ */ React58.createElement(
     PopoverMenuList,
     {
@@ -3028,7 +3005,7 @@ var ItemList = ({
   );
 };
 var useDebounce = (fn, delay) => {
-  const [debouncedFn] = useState8(() => debounce(fn, delay));
+  const [debouncedFn] = useState9(() => debounce(fn, delay));
   useEffect6(() => () => debouncedFn.cancel(), [debouncedFn]);
   return debouncedFn;
 };
@@ -3130,7 +3107,7 @@ var UrlControl = createControl(
 
 // src/controls/link-control.tsx
 import * as React65 from "react";
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 import { getLinkInLinkRestriction } from "@elementor/editor-elements";
 import { linkPropTypeUtil } from "@elementor/editor-props";
 import { MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
@@ -3199,7 +3176,7 @@ var RestrictedLinkInfotip = ({
 
 // src/controls/query-control.tsx
 import * as React63 from "react";
-import { useMemo as useMemo7, useState as useState9 } from "react";
+import { useMemo as useMemo7, useState as useState10 } from "react";
 import { numberPropTypeUtil as numberPropTypeUtil2, stringPropTypeUtil as stringPropTypeUtil6, urlPropTypeUtil as urlPropTypeUtil2 } from "@elementor/editor-props";
 import { httpService as httpService2 } from "@elementor/http-client";
 import { SearchIcon } from "@elementor/icons";
@@ -3348,7 +3325,7 @@ var QueryControl = createControl((props) => {
     ariaLabel
   } = props || {};
   const normalizedPlaceholder = placeholder || __22("Search", "elementor");
-  const [options, setOptions] = useState9(
+  const [options, setOptions] = useState10(
     generateFirstLoadedOption(value?.value)
   );
   const onOptionChange = (newValue) => {
@@ -3470,7 +3447,7 @@ var SIZE6 = "tiny";
 var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(linkPropTypeUtil);
   const [linkSessionValue, setLinkSessionValue] = useSessionStorage(path.join("/"));
-  const [isActive, setIsActive] = useState10(!!value);
+  const [isActive, setIsActive] = useState11(!!value);
   const {
     allowCustomValues = true,
     queryOptions,
@@ -3480,7 +3457,7 @@ var LinkControl = createControl((props) => {
     label = __23("Link", "elementor"),
     ariaLabel
   } = props || {};
-  const [linkInLinkRestriction, setLinkInLinkRestriction] = useState10(getLinkInLinkRestriction(elementId));
+  const [linkInLinkRestriction, setLinkInLinkRestriction] = useState11(getLinkInLinkRestriction(elementId));
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
   const onEnabledChange = () => {
     setLinkInLinkRestriction(getLinkInLinkRestriction(elementId));
@@ -3702,7 +3679,7 @@ var Control4 = ({
 
 // src/controls/aspect-ratio-control.tsx
 import * as React69 from "react";
-import { useEffect as useEffect7, useState as useState11 } from "react";
+import { useEffect as useEffect7, useState as useState12 } from "react";
 import { stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem4 } from "@elementor/editor-ui";
 import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
@@ -3723,10 +3700,10 @@ var AspectRatioControl = createControl(({ label }) => {
   const { value: aspectRatioValue, setValue: setAspectRatioValue, disabled } = useBoundProp(stringPropTypeUtil8);
   const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
   const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
-  const [isCustom, setIsCustom] = useState11(isCustomSelected);
-  const [customWidth, setCustomWidth] = useState11(initialWidth);
-  const [customHeight, setCustomHeight] = useState11(initialHeight);
-  const [selectedValue, setSelectedValue] = useState11(
+  const [isCustom, setIsCustom] = useState12(isCustomSelected);
+  const [customWidth, setCustomWidth] = useState12(initialWidth);
+  const [customHeight, setCustomHeight] = useState12(initialHeight);
+  const [selectedValue, setSelectedValue] = useState12(
     isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
   );
   useEffect7(() => {
@@ -3813,7 +3790,7 @@ var AspectRatioControl = createControl(({ label }) => {
 
 // src/controls/svg-media-control.tsx
 import * as React71 from "react";
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import { imageSrcPropTypeUtil as imageSrcPropTypeUtil2 } from "@elementor/editor-props";
 import { UploadIcon as UploadIcon2 } from "@elementor/icons";
@@ -3823,7 +3800,7 @@ import { __ as __28 } from "@wordpress/i18n";
 
 // src/components/enable-unfiltered-modal.tsx
 import * as React70 from "react";
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 import {
   Button as Button3,
   CircularProgress as CircularProgress2,
@@ -3849,7 +3826,7 @@ var ADMIN_FAILED_CONTENT_TEXT_PT2 = __27(
 var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
 var EnableUnfilteredModal = (props) => {
   const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
-  const [isError, setIsError] = useState12(false);
+  const [isError, setIsError] = useState13(false);
   const onClose = (enabled) => {
     props.onClose(enabled);
     setTimeout(() => setIsError(false), WAIT_FOR_CLOSE_TIMEOUT_MS);
@@ -3912,7 +3889,7 @@ var SvgMediaControl = createControl(() => {
   const { data: attachment, isFetching } = useWpMediaAttachment2(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
-  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState13(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState14(false);
   const { canUser } = useCurrentUserCapabilities();
   const canManageOptions = canUser("manage_options");
   const { open } = useWpMediaFrame2({
@@ -4704,7 +4681,7 @@ var getAllProperties = (pattern) => {
 
 // src/controls/key-value-control.tsx
 import * as React80 from "react";
-import { useMemo as useMemo9, useState as useState14 } from "react";
+import { useMemo as useMemo9, useState as useState15 } from "react";
 import {
   isTransformable,
   keyValuePropTypeUtil,
@@ -4735,9 +4712,9 @@ var getInitialFieldValue = (fieldValue) => {
 };
 var KeyValueControl = createControl((props = {}) => {
   const { value, setValue, ...propContext } = useBoundProp(keyValuePropTypeUtil);
-  const [keyError, setKeyError] = useState14("");
-  const [valueError, setValueError] = useState14("");
-  const [sessionState, setSessionState] = useState14({
+  const [keyError, setKeyError] = useState15("");
+  const [valueError, setValueError] = useState15("");
+  const [sessionState, setSessionState] = useState15({
     key: getInitialFieldValue(value?.key),
     value: getInitialFieldValue(value?.value)
   });
@@ -5470,7 +5447,7 @@ var TransformBasePopoverTrigger = ({
 
 // src/controls/transition-control/transition-repeater-control.tsx
 import * as React97 from "react";
-import { useEffect as useEffect8, useMemo as useMemo11, useState as useState15 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo11, useState as useState16 } from "react";
 import {
   createArrayPropUtils as createArrayPropUtils2,
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2
@@ -5804,7 +5781,7 @@ var TransitionRepeaterControl = createControl(
     currentStyleState
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
-    const [recentlyUsedList, setRecentlyUsedList] = useState15([]);
+    const [recentlyUsedList, setRecentlyUsedList] = useState16([]);
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
     const disabledItems = useMemo11(() => getDisabledItemLabels(value), [value]);
     const allowedTransitionSet = useMemo11(() => {
@@ -5951,7 +5928,7 @@ import { EditorContent, useEditor } from "@tiptap/react";
 
 // src/components/inline-editor-toolbar.tsx
 import * as React100 from "react";
-import { useMemo as useMemo12, useRef as useRef25, useState as useState16 } from "react";
+import { useMemo as useMemo12, useRef as useRef25, useState as useState17 } from "react";
 import {
   BoldIcon,
   ItalicIcon,
@@ -6105,8 +6082,8 @@ var toolbarButtons = {
 var { clear: clearButton, ...formatButtons } = toolbarButtons;
 var possibleFormats = Object.keys(formatButtons);
 var InlineEditorToolbar = ({ editor }) => {
-  const [urlValue, setUrlValue] = useState16("");
-  const [openInNewTab, setOpenInNewTab] = useState16(false);
+  const [urlValue, setUrlValue] = useState17("");
+  const [openInNewTab, setOpenInNewTab] = useState17(false);
   const toolbarRef = useRef25(null);
   const popupState = usePopupState8({ variant: "popover" });
   const editorState = useEditorState({
@@ -6309,7 +6286,7 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 import * as React104 from "react";
-import { useEffect as useEffect11, useState as useState17 } from "react";
+import { useEffect as useEffect11, useState as useState18 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon3, XIcon as XIcon4 } from "@elementor/icons";
 import {
   bindPopover as bindPopover8,
@@ -6338,7 +6315,7 @@ var Repeater3 = ({
   openItem: initialOpenItem = EMPTY_OPEN_ITEM2,
   isSortable = true
 }) => {
-  const [openItem, setOpenItem] = useState17(initialOpenItem);
+  const [openItem, setOpenItem] = useState18(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -6494,7 +6471,7 @@ var RepeaterItem = ({
   ), /* @__PURE__ */ React104.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React104.createElement(Box23, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = useState17(null);
+  const [ref, setRef] = useState18(null);
   const popoverState = usePopupState9({ variant: "popover" });
   const popoverProps = bindPopover8(popoverState);
   useEffect11(() => {