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

package/dist/index.js

@@ -2761,7 +2761,7 @@ var import_ui42 = require("@elementor/ui");
 var import_i18n18 = require("@wordpress/i18n");
 var LinkedDimensionsControl = ({ label, isSiteRtl = false, extendedOptions, min }) => {
   const gridRowRefs = [(0, import_react29.useRef)(null), (0, import_react29.useRef)(null)];
-  const { disabled: sizeDisabled, placeholder: sizePlaceholder } = useBoundProp(import_editor_props19.sizePropTypeUtil);
+  const { disabled: sizeDisabled } = useBoundProp(import_editor_props19.sizePropTypeUtil);
   const {
     value: dimensionsValue,
     setValue: setDimensionsValue,
@@ -2770,12 +2770,11 @@ var LinkedDimensionsControl = ({ label, isSiteRtl = false, extendedOptions, min
     disabled: dimensionsDisabled
   } = useBoundProp(import_editor_props19.dimensionsPropTypeUtil);
   const { value: masterValue, placeholder: masterPlaceholder, setValue: setMasterValue } = useBoundProp();
-  const hasPlaceholders = !!(sizePlaceholder || dimensionsPlaceholder);
   const inferIsLinked = () => {
     if (import_editor_props19.dimensionsPropTypeUtil.isValid(masterValue)) {
       return false;
     }
-    if (import_editor_props19.dimensionsPropTypeUtil.isValid(masterPlaceholder)) {
+    if (!masterValue && import_editor_props19.dimensionsPropTypeUtil.isValid(masterPlaceholder)) {
       return false;
     }
     return true;
@@ -2822,6 +2821,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(import_ui42.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(ControlFormLabel, null, label), /* @__PURE__ */ React57.createElement(import_ui42.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React57.createElement(
     StyledToggleButton,
     {
@@ -3678,37 +3678,68 @@ var HtmlTagControl = createControl(({ options, onChange, fallbackLabels = {} })
 var React68 = __toESM(require("react"));
 var import_react34 = require("react");
 var import_editor_props26 = require("@elementor/editor-props");
+var import_editor_responsive3 = require("@elementor/editor-responsive");
 var import_icons16 = require("@elementor/icons");
 var import_ui53 = require("@elementor/ui");
 var import_i18n25 = require("@wordpress/i18n");
 var GapControl = ({ label }) => {
+  const stackRef = (0, import_react34.useRef)(null);
+  const { disabled: sizeDisabled } = useBoundProp(import_editor_props26.sizePropTypeUtil);
   const {
     value: directionValue,
     setValue: setDirectionValue,
     propType,
+    placeholder: directionPlaceholder,
     disabled: directionDisabled
   } = useBoundProp(import_editor_props26.layoutDirectionPropTypeUtil);
-  const stackRef = (0, import_react34.useRef)(null);
-  const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(import_editor_props26.sizePropTypeUtil);
-  const isLinked = !directionValue && !sizeValue ? true : !!sizeValue;
+  const { value: masterValue, setValue: setMasterValue, placeholder: masterPlaceholder } = useBoundProp();
+  const inferIsLinked = () => {
+    if (import_editor_props26.layoutDirectionPropTypeUtil.isValid(masterValue)) {
+      return false;
+    }
+    if (!masterValue && import_editor_props26.layoutDirectionPropTypeUtil.isValid(masterPlaceholder)) {
+      return false;
+    }
+    return true;
+  };
+  const [isLinked, setIsLinked] = (0, import_react34.useState)(() => inferIsLinked());
+  const activeBreakpoint = (0, import_editor_responsive3.useActiveBreakpoint)();
+  (0, import_react34.useLayoutEffect)(() => {
+    setIsLinked(inferIsLinked());
+  }, [activeBreakpoint]);
   const onLinkToggle = () => {
-    if (!isLinked) {
-      setSizeValue(directionValue?.column?.value ?? null);
+    setIsLinked((prev) => !prev);
+    if (!import_editor_props26.layoutDirectionPropTypeUtil.isValid(masterValue)) {
+      const currentValue2 = masterValue ? masterValue : null;
+      if (!currentValue2) {
+        setMasterValue(null);
+        return;
+      }
+      setMasterValue(
+        import_editor_props26.layoutDirectionPropTypeUtil.create({
+          row: currentValue2,
+          column: currentValue2
+        })
+      );
       return;
     }
-    const value = sizeValue ? import_editor_props26.sizePropTypeUtil.create(sizeValue) : null;
-    setDirectionValue({
-      row: value,
-      column: value
-    });
+    const currentValue = directionValue?.column ?? directionValue?.row ?? null;
+    setMasterValue(currentValue);
   };
   const tooltipLabel = label.toLowerCase();
   const LinkedIcon = isLinked ? import_icons16.LinkIcon : import_icons16.DetachIcon;
   const linkedLabel = (0, import_i18n25.__)("Link %s", "elementor").replace("%s", tooltipLabel);
   const unlinkedLabel = (0, import_i18n25.__)("Unlink %s", "elementor").replace("%s", tooltipLabel);
   const disabled = sizeDisabled || directionDisabled;
-  return /* @__PURE__ */ React68.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React68.createElement(import_ui53.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React68.createElement(ControlLabel, null, label), /* @__PURE__ */ React68.createElement(import_ui53.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React68.createElement(
-    import_ui53.ToggleButton,
+  const propProviderProps = {
+    propType,
+    value: directionValue,
+    setValue: setDirectionValue,
+    placeholder: directionPlaceholder
+  };
+  const hasPlaceholders = !masterValue && (directionPlaceholder || masterPlaceholder);
+  return /* @__PURE__ */ React68.createElement(PropProvider, { ...propProviderProps }, /* @__PURE__ */ React68.createElement(import_ui53.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React68.createElement(ControlLabel, null, label), /* @__PURE__ */ React68.createElement(import_ui53.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React68.createElement(
+    StyledToggleButton,
     {
       "aria-label": isLinked ? unlinkedLabel : linkedLabel,
       size: "tiny",
@@ -3716,7 +3747,8 @@ var GapControl = ({ label }) => {
       selected: isLinked,
       sx: { marginLeft: "auto" },
       onChange: onLinkToggle,
-      disabled
+      disabled,
+      isPlaceholder: hasPlaceholders
     },
     /* @__PURE__ */ React68.createElement(LinkedIcon, { fontSize: "tiny" })
   ))), /* @__PURE__ */ React68.createElement(import_ui53.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React68.createElement(import_ui53.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React68.createElement(import_ui53.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(ControlFormLabel, null, (0, import_i18n25.__)("Column", "elementor"))), /* @__PURE__ */ React68.createElement(import_ui53.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(Control4, { bind: "column", isLinked, anchorRef: stackRef }))), /* @__PURE__ */ React68.createElement(import_ui53.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React68.createElement(import_ui53.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(ControlFormLabel, null, (0, import_i18n25.__)("Row", "elementor"))), /* @__PURE__ */ React68.createElement(import_ui53.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(Control4, { bind: "row", isLinked, anchorRef: stackRef })))));