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

package/dist/index.js

@@ -4720,10 +4720,11 @@ var GapControl = ({ label }) => {
     return true;
   };
   const [isLinked, setIsLinked] = (0, import_react43.useState)(() => inferIsLinked());
+  const isCurrentlyDirection = import_editor_props29.layoutDirectionPropTypeUtil.isValid(masterValue ?? masterPlaceholder);
   const activeBreakpoint = (0, import_editor_responsive4.useActiveBreakpoint)();
   (0, import_react43.useLayoutEffect)(() => {
     setIsLinked(inferIsLinked());
-  }, [activeBreakpoint]);
+  }, [activeBreakpoint, isCurrentlyDirection]);
   const onLinkToggle = () => {
     setIsLinked((prev) => !prev);
     if (!import_editor_props29.layoutDirectionPropTypeUtil.isValid(masterValue)) {
@@ -4751,10 +4752,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 import_editor_props29.sizePropTypeUtil.extract(linkedPlaceholder);
+    }
+    return import_editor_props29.sizePropTypeUtil.extract(directionPlaceholder?.[bind]);
+  };
   return /* @__PURE__ */ React75.createElement(PropProvider, { ...propProviderProps }, /* @__PURE__ */ React75.createElement(import_ui58.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React75.createElement(ControlLabel, null, label), /* @__PURE__ */ React75.createElement(import_ui58.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React75.createElement(
     StyledToggleButton,
     {
@@ -4774,7 +4786,8 @@ var GapControl = ({ label }) => {
       bind: "column",
       ariaLabel: (0, import_i18n26.__)("Column gap", "elementor"),
       isLinked,
-      anchorRef: stackRef
+      anchorRef: stackRef,
+      placeholder: getEffectivePlaceholder("column") ?? void 0
     }
   ))), /* @__PURE__ */ React75.createElement(import_ui58.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React75.createElement(import_ui58.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React75.createElement(ControlFormLabel, null, (0, import_i18n26.__)("Row", "elementor"))), /* @__PURE__ */ React75.createElement(import_ui58.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React75.createElement(
     Control4,
@@ -4782,7 +4795,8 @@ var GapControl = ({ label }) => {
       bind: "row",
       ariaLabel: (0, import_i18n26.__)("Row gap", "elementor"),
       isLinked,
-      anchorRef: stackRef
+      anchorRef: stackRef,
+      placeholder: getEffectivePlaceholder("row") ?? void 0
     }
   )))));
 };
@@ -4790,12 +4804,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