@elementor/editor-controls 4.1.0-776 → 4.1.0-777

package/dist/index.mjs

@@ -4627,7 +4627,10 @@ var HtmlTagControl = createControl((props) => {
 // src/controls/gap-control.tsx
 import * as React75 from "react";
 import { useLayoutEffect as useLayoutEffect2, useRef as useRef12, useState as useState13 } from "react";
-import { layoutDirectionPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil6 } from "@elementor/editor-props";
+import {
+  layoutDirectionPropTypeUtil,
+  sizePropTypeUtil as sizePropTypeUtil6
+} from "@elementor/editor-props";
 import { useActiveBreakpoint as useActiveBreakpoint4 } from "@elementor/editor-responsive";
 import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
 import { Grid as Grid11, Stack as Stack11, Tooltip as Tooltip7 } from "@elementor/ui";
@@ -4653,10 +4656,11 @@ var GapControl = ({ label }) => {
     return true;
   };
   const [isLinked, setIsLinked] = useState13(() => inferIsLinked());
+  const isCurrentlyDirection = layoutDirectionPropTypeUtil.isValid(masterValue ?? masterPlaceholder);
   const activeBreakpoint = useActiveBreakpoint4();
   useLayoutEffect2(() => {
     setIsLinked(inferIsLinked());
-  }, [activeBreakpoint]);
+  }, [activeBreakpoint, isCurrentlyDirection]);
   const onLinkToggle = () => {
     setIsLinked((prev) => !prev);
     if (!layoutDirectionPropTypeUtil.isValid(masterValue)) {
@@ -4684,10 +4688,21 @@ var GapControl = ({ label }) => {
   const propProviderProps = {
     propType,
     value: directionValue,
-    setValue: setDirectionValue,
+    setValue: (directions) => {
+      const entries = Object.entries(directions);
+      const filtered = entries.filter(([, value]) => Boolean(value));
+      setDirectionValue(filtered.length === 0 ? null : Object.fromEntries(filtered));
+    },
     placeholder: directionPlaceholder
   };
   const hasPlaceholders = !masterValue && (directionPlaceholder || masterPlaceholder);
+  const getEffectivePlaceholder = (bind) => {
+    if (isLinked) {
+      const linkedPlaceholder = directionPlaceholder?.column ?? directionPlaceholder?.row;
+      return sizePropTypeUtil6.extract(linkedPlaceholder);
+    }
+    return sizePropTypeUtil6.extract(directionPlaceholder?.[bind]);
+  };
   return /* @__PURE__ */ React75.createElement(PropProvider, { ...propProviderProps }, /* @__PURE__ */ React75.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React75.createElement(ControlLabel, null, label), /* @__PURE__ */ React75.createElement(Tooltip7, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React75.createElement(
     StyledToggleButton,
     {
@@ -4707,7 +4722,8 @@ var GapControl = ({ label }) => {
       bind: "column",
       ariaLabel: __26("Column gap", "elementor"),
       isLinked,
-      anchorRef: stackRef
+      anchorRef: stackRef,
+      placeholder: getEffectivePlaceholder("column") ?? void 0
     }
   ))), /* @__PURE__ */ React75.createElement(Grid11, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React75.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React75.createElement(ControlFormLabel, null, __26("Row", "elementor"))), /* @__PURE__ */ React75.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React75.createElement(
     Control4,
@@ -4715,7 +4731,8 @@ var GapControl = ({ label }) => {
       bind: "row",
       ariaLabel: __26("Row gap", "elementor"),
       isLinked,
-      anchorRef: stackRef
+      anchorRef: stackRef,
+      placeholder: getEffectivePlaceholder("row") ?? void 0
     }
   )))));
 };
@@ -4723,12 +4740,13 @@ var Control4 = ({
   bind,
   ariaLabel,
   isLinked,
-  anchorRef
+  anchorRef,
+  placeholder
 }) => {
   if (isLinked) {
-    return /* @__PURE__ */ React75.createElement(SizeControl, { anchorRef, ariaLabel });
+    return /* @__PURE__ */ React75.createElement(UnstableSizeControl, { anchorRef, placeholder, ariaLabel });
   }
-  return /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React75.createElement(SizeControl, { anchorRef, ariaLabel }));
+  return /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React75.createElement(UnstableSizeControl, { anchorRef, placeholder, ariaLabel }));
 };
 
 // src/controls/aspect-ratio-control.tsx