@elementor/editor-controls 3.32.0-44 → 3.32.0-45

package/dist/index.mjs

@@ -1841,7 +1841,7 @@ var StyledToggleButton = styled4(ToggleButton, {
 	${({ theme, isPlaceholder }) => isPlaceholder && `
 		color: ${theme.palette.text.tertiary};
 		background-color: ${theme.palette.mode === "dark" ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.02)"};
-		
+
 		&:hover {
 			background-color: ${theme.palette.mode === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.04)"};
 		}
@@ -2251,7 +2251,7 @@ import * as React37 from "react";
 import { useRef as useRef9 } from "react";
 import { dimensionsPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil4 } from "@elementor/editor-props";
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
-import { Grid as Grid8, Stack as Stack8, ToggleButton as ToggleButton3, Tooltip as Tooltip4 } from "@elementor/ui";
+import { Grid as Grid8, Stack as Stack8, Tooltip as Tooltip4 } from "@elementor/ui";
 import { __ as __10 } from "@wordpress/i18n";
 var LinkedDimensionsControl = createControl(
   ({
@@ -2259,15 +2259,23 @@ var LinkedDimensionsControl = createControl(
     isSiteRtl = false,
     extendedOptions
   }) => {
-    const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil4);
+    const {
+      value: sizeValue,
+      setValue: setSizeValue,
+      disabled: sizeDisabled,
+      placeholder: sizePlaceholder
+    } = useBoundProp(sizePropTypeUtil4);
     const gridRowRefs = [useRef9(null), useRef9(null)];
     const {
       value: dimensionsValue,
       setValue: setDimensionsValue,
       propType,
+      placeholder: dimensionsPlaceholder,
       disabled: dimensionsDisabled
     } = useBoundProp(dimensionsPropTypeUtil);
-    const isLinked = !dimensionsValue && !sizeValue ? true : !!sizeValue;
+    const hasUserValues = !!(dimensionsValue || sizeValue);
+    const hasPlaceholders = !!(sizePlaceholder || dimensionsPlaceholder);
+    const isLinked = !hasUserValues && !hasPlaceholders || (hasPlaceholders ? !!sizePlaceholder : !!sizeValue);
     const onLinkToggle = () => {
       if (!isLinked) {
         setSizeValue(dimensionsValue["block-start"]?.value ?? null);
@@ -2292,10 +2300,11 @@ var LinkedDimensionsControl = createControl(
         propType,
         value: dimensionsValue,
         setValue: setDimensionsValue,
+        placeholder: dimensionsPlaceholder,
         isDisabled: () => disabled
       },
       /* @__PURE__ */ React37.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(ControlFormLabel, null, label), /* @__PURE__ */ React37.createElement(Tooltip4, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React37.createElement(
-        ToggleButton3,
+        StyledToggleButton,
         {
           "aria-label": isLinked ? unlinkedLabel : linkedLabel,
           size: "tiny",
@@ -2303,7 +2312,8 @@ var LinkedDimensionsControl = createControl(
           selected: isLinked,
           sx: { marginLeft: "auto" },
           onChange: onLinkToggle,
-          disabled
+          disabled,
+          isPlaceholder: hasPlaceholders
         },
         /* @__PURE__ */ React37.createElement(LinkedIcon, { fontSize: "tiny" })
       ))),
@@ -2960,7 +2970,7 @@ import * as React45 from "react";
 import { useRef as useRef10 } from "react";
 import { layoutDirectionPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil5 } from "@elementor/editor-props";
 import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
-import { Grid as Grid10, Stack as Stack11, ToggleButton as ToggleButton4, Tooltip as Tooltip5 } from "@elementor/ui";
+import { Grid as Grid10, Stack as Stack11, ToggleButton as ToggleButton3, Tooltip as Tooltip5 } from "@elementor/ui";
 import { __ as __15 } from "@wordpress/i18n";
 var GapControl = createControl(({ label }) => {
   const {
@@ -2989,7 +2999,7 @@ var GapControl = createControl(({ label }) => {
   const unlinkedLabel = __15("Unlink %s", "elementor").replace("%s", tooltipLabel);
   const disabled = sizeDisabled || directionDisabled;
   return /* @__PURE__ */ React45.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React45.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React45.createElement(ControlLabel, null, label), /* @__PURE__ */ React45.createElement(Tooltip5, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React45.createElement(
-    ToggleButton4,
+    ToggleButton3,
     {
       "aria-label": isLinked ? unlinkedLabel : linkedLabel,
       size: "tiny",