@elementor/editor-controls 3.35.0-364 → 3.35.0-366

package/dist/index.mjs

@@ -2699,7 +2699,7 @@ import { Grid as Grid9, Stack as Stack8, Tooltip as Tooltip6 } from "@elementor/
 import { __ as __18 } from "@wordpress/i18n";
 var LinkedDimensionsControl = ({ label, isSiteRtl = false, extendedOptions, min }) => {
   const gridRowRefs = [useRef9(null), useRef9(null)];
-  const { disabled: sizeDisabled, placeholder: sizePlaceholder } = useBoundProp(sizePropTypeUtil4);
+  const { disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil4);
   const {
     value: dimensionsValue,
     setValue: setDimensionsValue,
@@ -2708,12 +2708,11 @@ var LinkedDimensionsControl = ({ label, isSiteRtl = false, extendedOptions, min
     disabled: dimensionsDisabled
   } = useBoundProp(dimensionsPropTypeUtil);
   const { value: masterValue, placeholder: masterPlaceholder, setValue: setMasterValue } = useBoundProp();
-  const hasPlaceholders = !!(sizePlaceholder || dimensionsPlaceholder);
   const inferIsLinked = () => {
     if (dimensionsPropTypeUtil.isValid(masterValue)) {
       return false;
     }
-    if (dimensionsPropTypeUtil.isValid(masterPlaceholder)) {
+    if (!masterValue && dimensionsPropTypeUtil.isValid(masterPlaceholder)) {
       return false;
     }
     return true;
@@ -2760,6 +2759,7 @@ var LinkedDimensionsControl = ({ label, isSiteRtl = false, extendedOptions, min
     setValue: setDimensionsValue,
     isDisabled: () => dimensionsDisabled
   };
+  const hasPlaceholders = !masterValue && (dimensionsPlaceholder || masterPlaceholder);
   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,
     {
@@ -3620,39 +3620,70 @@ var HtmlTagControl = createControl(({ options, onChange, fallbackLabels = {} })
 
 // src/controls/gap-control.tsx
 import * as React68 from "react";
-import { useRef as useRef10 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef10, useState as useState12 } from "react";
 import { layoutDirectionPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil5 } from "@elementor/editor-props";
+import { useActiveBreakpoint as useActiveBreakpoint3 } from "@elementor/editor-responsive";
 import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
-import { Grid as Grid11, Stack as Stack11, ToggleButton as ToggleButton3, Tooltip as Tooltip7 } from "@elementor/ui";
+import { Grid as Grid11, Stack as Stack11, Tooltip as Tooltip7 } from "@elementor/ui";
 import { __ as __25 } from "@wordpress/i18n";
 var GapControl = ({ label }) => {
+  const stackRef = useRef10(null);
+  const { disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil5);
   const {
     value: directionValue,
     setValue: setDirectionValue,
     propType,
+    placeholder: directionPlaceholder,
     disabled: directionDisabled
   } = useBoundProp(layoutDirectionPropTypeUtil);
-  const stackRef = useRef10(null);
-  const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil5);
-  const isLinked = !directionValue && !sizeValue ? true : !!sizeValue;
+  const { value: masterValue, setValue: setMasterValue, placeholder: masterPlaceholder } = useBoundProp();
+  const inferIsLinked = () => {
+    if (layoutDirectionPropTypeUtil.isValid(masterValue)) {
+      return false;
+    }
+    if (!masterValue && layoutDirectionPropTypeUtil.isValid(masterPlaceholder)) {
+      return false;
+    }
+    return true;
+  };
+  const [isLinked, setIsLinked] = useState12(() => inferIsLinked());
+  const activeBreakpoint = useActiveBreakpoint3();
+  useLayoutEffect2(() => {
+    setIsLinked(inferIsLinked());
+  }, [activeBreakpoint]);
   const onLinkToggle = () => {
-    if (!isLinked) {
-      setSizeValue(directionValue?.column?.value ?? null);
+    setIsLinked((prev) => !prev);
+    if (!layoutDirectionPropTypeUtil.isValid(masterValue)) {
+      const currentValue2 = masterValue ? masterValue : null;
+      if (!currentValue2) {
+        setMasterValue(null);
+        return;
+      }
+      setMasterValue(
+        layoutDirectionPropTypeUtil.create({
+          row: currentValue2,
+          column: currentValue2
+        })
+      );
       return;
     }
-    const value = sizeValue ? sizePropTypeUtil5.create(sizeValue) : null;
-    setDirectionValue({
-      row: value,
-      column: value
-    });
+    const currentValue = directionValue?.column ?? directionValue?.row ?? null;
+    setMasterValue(currentValue);
   };
   const tooltipLabel = label.toLowerCase();
   const LinkedIcon = isLinked ? LinkIcon2 : DetachIcon2;
   const linkedLabel = __25("Link %s", "elementor").replace("%s", tooltipLabel);
   const unlinkedLabel = __25("Unlink %s", "elementor").replace("%s", tooltipLabel);
   const disabled = sizeDisabled || directionDisabled;
-  return /* @__PURE__ */ React68.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React68.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React68.createElement(ControlLabel, null, label), /* @__PURE__ */ React68.createElement(Tooltip7, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React68.createElement(
-    ToggleButton3,
+  const propProviderProps = {
+    propType,
+    value: directionValue,
+    setValue: setDirectionValue,
+    placeholder: directionPlaceholder
+  };
+  const hasPlaceholders = !masterValue && (directionPlaceholder || masterPlaceholder);
+  return /* @__PURE__ */ React68.createElement(PropProvider, { ...propProviderProps }, /* @__PURE__ */ React68.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React68.createElement(ControlLabel, null, label), /* @__PURE__ */ React68.createElement(Tooltip7, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React68.createElement(
+    StyledToggleButton,
     {
       "aria-label": isLinked ? unlinkedLabel : linkedLabel,
       size: "tiny",
@@ -3660,7 +3691,8 @@ var GapControl = ({ label }) => {
       selected: isLinked,
       sx: { marginLeft: "auto" },
       onChange: onLinkToggle,
-      disabled
+      disabled,
+      isPlaceholder: hasPlaceholders
     },
     /* @__PURE__ */ React68.createElement(LinkedIcon, { fontSize: "tiny" })
   ))), /* @__PURE__ */ React68.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React68.createElement(Grid11, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React68.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(ControlFormLabel, null, __25("Column", "elementor"))), /* @__PURE__ */ React68.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(Control4, { bind: "column", isLinked, anchorRef: stackRef }))), /* @__PURE__ */ React68.createElement(Grid11, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React68.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(ControlFormLabel, null, __25("Row", "elementor"))), /* @__PURE__ */ React68.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(Control4, { bind: "row", isLinked, anchorRef: stackRef })))));
@@ -3678,7 +3710,7 @@ var Control4 = ({
 
 // src/controls/aspect-ratio-control.tsx
 import * as React69 from "react";
-import { useEffect as useEffect7, useState as useState12 } from "react";
+import { useEffect as useEffect7, useState as useState13 } from "react";
 import { stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem4 } from "@elementor/editor-ui";
 import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
@@ -3699,10 +3731,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] = useState12(isCustomSelected);
-  const [customWidth, setCustomWidth] = useState12(initialWidth);
-  const [customHeight, setCustomHeight] = useState12(initialHeight);
-  const [selectedValue, setSelectedValue] = useState12(
+  const [isCustom, setIsCustom] = useState13(isCustomSelected);
+  const [customWidth, setCustomWidth] = useState13(initialWidth);
+  const [customHeight, setCustomHeight] = useState13(initialHeight);
+  const [selectedValue, setSelectedValue] = useState13(
     isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
   );
   useEffect7(() => {
@@ -3789,7 +3821,7 @@ var AspectRatioControl = createControl(({ label }) => {
 
 // src/controls/svg-media-control.tsx
 import * as React71 from "react";
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import { imageSrcPropTypeUtil as imageSrcPropTypeUtil2 } from "@elementor/editor-props";
 import { UploadIcon as UploadIcon2 } from "@elementor/icons";
@@ -3799,7 +3831,7 @@ import { __ as __28 } from "@wordpress/i18n";
 
 // src/components/enable-unfiltered-modal.tsx
 import * as React70 from "react";
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 import {
   Button as Button3,
   CircularProgress as CircularProgress2,
@@ -3825,7 +3857,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] = useState13(false);
+  const [isError, setIsError] = useState14(false);
   const onClose = (enabled) => {
     props.onClose(enabled);
     setTimeout(() => setIsError(false), WAIT_FOR_CLOSE_TIMEOUT_MS);
@@ -3888,7 +3920,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] = useState14(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState15(false);
   const { canUser } = useCurrentUserCapabilities();
   const canManageOptions = canUser("manage_options");
   const { open } = useWpMediaFrame2({
@@ -4680,7 +4712,7 @@ var getAllProperties = (pattern) => {
 
 // src/controls/key-value-control.tsx
 import * as React80 from "react";
-import { useMemo as useMemo9, useState as useState15 } from "react";
+import { useMemo as useMemo9, useState as useState16 } from "react";
 import {
   isTransformable,
   keyValuePropTypeUtil,
@@ -4711,9 +4743,9 @@ var getInitialFieldValue = (fieldValue) => {
 };
 var KeyValueControl = createControl((props = {}) => {
   const { value, setValue, ...propContext } = useBoundProp(keyValuePropTypeUtil);
-  const [keyError, setKeyError] = useState15("");
-  const [valueError, setValueError] = useState15("");
-  const [sessionState, setSessionState] = useState15({
+  const [keyError, setKeyError] = useState16("");
+  const [valueError, setValueError] = useState16("");
+  const [sessionState, setSessionState] = useState16({
     key: getInitialFieldValue(value?.key),
     value: getInitialFieldValue(value?.value)
   });
@@ -5445,7 +5477,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 useState16 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo11, useState as useState17 } from "react";
 import {
   createArrayPropUtils as createArrayPropUtils2,
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2
@@ -5771,7 +5803,7 @@ var TransitionRepeaterControl = createControl(
     currentStyleState
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
-    const [recentlyUsedList, setRecentlyUsedList] = useState16([]);
+    const [recentlyUsedList, setRecentlyUsedList] = useState17([]);
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
     const disabledItems = useMemo11(() => getDisabledItemLabels(value), [value]);
     const allowedTransitionSet = useMemo11(() => {
@@ -5931,7 +5963,7 @@ function isEmpty(value = "") {
 
 // src/components/inline-editor-toolbar.tsx
 import * as React100 from "react";
-import { useMemo as useMemo12, useRef as useRef25, useState as useState17 } from "react";
+import { useMemo as useMemo12, useRef as useRef25, useState as useState18 } from "react";
 import {
   BoldIcon,
   ItalicIcon,
@@ -5945,7 +5977,7 @@ import {
 import {
   Box as Box21,
   IconButton as IconButton8,
-  ToggleButton as ToggleButton5,
+  ToggleButton as ToggleButton4,
   ToggleButtonGroup as ToggleButtonGroup2,
   toggleButtonGroupClasses,
   Tooltip as Tooltip9,
@@ -5958,7 +5990,7 @@ import { __ as __51 } from "@wordpress/i18n";
 import * as React99 from "react";
 import { useEffect as useEffect9, useRef as useRef24 } from "react";
 import { ExternalLinkIcon } from "@elementor/icons";
-import { bindPopover as bindPopover7, Popover as Popover7, Stack as Stack16, TextField as TextField8, ToggleButton as ToggleButton4 } from "@elementor/ui";
+import { bindPopover as bindPopover7, Popover as Popover7, Stack as Stack16, TextField as TextField8, ToggleButton as ToggleButton3 } from "@elementor/ui";
 import { __ as __50 } from "@wordpress/i18n";
 var UrlPopover = ({
   popupState,
@@ -6003,7 +6035,7 @@ var UrlPopover = ({
         InputProps: { sx: { borderRadius: "8px" } }
       }
     ), /* @__PURE__ */ React99.createElement(
-      ToggleButton4,
+      ToggleButton3,
       {
         size: "tiny",
         value: "newTab",
@@ -6085,8 +6117,8 @@ var toolbarButtons = {
 var { clear: clearButton, ...formatButtons } = toolbarButtons;
 var possibleFormats = Object.keys(formatButtons);
 var InlineEditorToolbar = ({ editor }) => {
-  const [urlValue, setUrlValue] = useState17("");
-  const [openInNewTab, setOpenInNewTab] = useState17(false);
+  const [urlValue, setUrlValue] = useState18("");
+  const [openInNewTab, setOpenInNewTab] = useState18(false);
   const toolbarRef = useRef25(null);
   const linkPopupState = usePopupState8({ variant: "popover" });
   const editorState = useEditorState({
@@ -6160,7 +6192,7 @@ var InlineEditorToolbar = ({ editor }) => {
         }
       },
       formatButtonsList.map((button) => /* @__PURE__ */ React100.createElement(Tooltip9, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React100.createElement(
-        ToggleButton5,
+        ToggleButton4,
         {
           value: button.action,
           "aria-label": button.label,
@@ -6403,7 +6435,7 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 import * as React104 from "react";
-import { useEffect as useEffect12, useState as useState19 } from "react";
+import { useEffect as useEffect12, useState as useState20 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon3, XIcon as XIcon4 } from "@elementor/icons";
 import {
   bindPopover as bindPopover9,
@@ -6432,7 +6464,7 @@ var Repeater3 = ({
   openItem: initialOpenItem = EMPTY_OPEN_ITEM2,
   isSortable = true
 }) => {
-  const [openItem, setOpenItem] = useState19(initialOpenItem);
+  const [openItem, setOpenItem] = useState20(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -6588,7 +6620,7 @@ var RepeaterItem = ({
   ), /* @__PURE__ */ React104.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React104.createElement(Box24, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = useState19(null);
+  const [ref, setRef] = useState20(null);
   const popoverState = usePopupState10({ variant: "popover" });
   const popoverProps = bindPopover9(popoverState);
   useEffect12(() => {