@elementor/editor-controls 0.6.0 → 0.6.1

package/dist/index.mjs

@@ -257,7 +257,7 @@ var ImageMediaControl = createControl(() => {
   const { data: attachment, isFetching } = useWpMediaAttachment(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { open } = useWpMediaFrame({
-    types: ["image"],
+    types: ["image", "image/svg+xml"],
     multiple: false,
     selected: id?.value || null,
     onSelect: (selectedAttachment) => {
@@ -1027,7 +1027,7 @@ function EqualUnequalSizesControl({
     }
     return splitEqualValue() ?? null;
   };
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Grid4, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React23.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, label)), /* @__PURE__ */ React23.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(Stack6, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(SizeControl, { placeholder: __6("MIXED", "elementor") }), /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Grid4, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React23.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, label)), /* @__PURE__ */ React23.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(Stack6, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(SizeControl, { placeholder: __6("Mixed", "elementor") }), /* @__PURE__ */ React23.createElement(
     ToggleButton2,
     {
       size: "tiny",
@@ -1062,38 +1062,39 @@ var MultiSizeValueControl = ({ item }) => /* @__PURE__ */ React23.createElement(
 
 // src/controls/linked-dimensions-control.tsx
 import * as React24 from "react";
-import { linkedDimensionsPropTypeUtil } from "@elementor/editor-props";
+import {
+  dimensionsPropTypeUtil,
+  sizePropTypeUtil as sizePropTypeUtil3
+} from "@elementor/editor-props";
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
 import { Grid as Grid5, Stack as Stack7, ToggleButton as ToggleButton3 } from "@elementor/ui";
 import { __ as __7 } from "@wordpress/i18n";
 var LinkedDimensionsControl = createControl(({ label }) => {
-  const { value, setValue, propType } = useBoundProp(linkedDimensionsPropTypeUtil);
-  const { top, right, bottom, left, isLinked = true } = value || {};
-  const setLinkedValue = (newValue, _, meta) => {
+  const { value: dimensionsValue, setValue: setDimensionsValue, propType } = useBoundProp(dimensionsPropTypeUtil);
+  const { value: sizeValue, setValue: setSizeValue } = useBoundProp(sizePropTypeUtil3);
+  const isLinked = !dimensionsValue && !sizeValue ? true : !!sizeValue;
+  const setValue = (newValue) => {
     if (!isLinked) {
-      return setValue(newValue);
+      setDimensionsValue(newValue);
+      return;
     }
-    const newDimension = newValue[meta?.bind];
-    setValue({
-      isLinked,
-      top: newDimension,
-      right: newDimension,
-      bottom: newDimension,
-      left: newDimension
-    });
+    setSizeValue(newValue.top);
   };
-  const toggleLinked = () => {
-    const updatedValue = {
-      isLinked: !isLinked,
-      top,
-      right: !isLinked ? top : right,
-      bottom: !isLinked ? top : bottom,
-      left: !isLinked ? top : left
-    };
-    setValue(updatedValue);
+  const onLinkToggle = () => {
+    if (!isLinked) {
+      setSizeValue(dimensionsValue?.top.value);
+      return;
+    }
+    const value = sizeValue ? sizePropTypeUtil3.create(sizeValue) : null;
+    setDimensionsValue({
+      top: value,
+      right: value,
+      bottom: value,
+      left: value
+    });
   };
   const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
-  return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value, setValue: setLinkedValue }, /* @__PURE__ */ React24.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React24.createElement(ControlLabel, null, label), /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value: dimensionsValue, setValue }, /* @__PURE__ */ React24.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React24.createElement(ControlLabel, null, label), /* @__PURE__ */ React24.createElement(
     ToggleButton3,
     {
       "aria-label": __7("Link Inputs", "elementor"),
@@ -1101,12 +1102,45 @@ var LinkedDimensionsControl = createControl(({ label }) => {
       value: "check",
       selected: isLinked,
       sx: { marginLeft: "auto" },
-      onChange: toggleLinked
+      onChange: onLinkToggle
     },
     /* @__PURE__ */ React24.createElement(LinkedIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React24.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React24.createElement(Grid5, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React24.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, __7("Top", "elementor"))), /* @__PURE__ */ React24.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(Control3, { bind: "top", startIcon: /* @__PURE__ */ React24.createElement(SideTopIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React24.createElement(Grid5, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React24.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, __7("Right", "elementor"))), /* @__PURE__ */ React24.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(Control3, { bind: "right", startIcon: /* @__PURE__ */ React24.createElement(SideRightIcon, { fontSize: "tiny" }) })))), /* @__PURE__ */ React24.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React24.createElement(Grid5, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React24.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, __7("Bottom", "elementor"))), /* @__PURE__ */ React24.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(Control3, { bind: "bottom", startIcon: /* @__PURE__ */ React24.createElement(SideBottomIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React24.createElement(Grid5, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React24.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, __7("Left", "elementor"))), /* @__PURE__ */ React24.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(Control3, { bind: "left", startIcon: /* @__PURE__ */ React24.createElement(SideLeftIcon, { fontSize: "tiny" }) })))));
+  )), /* @__PURE__ */ React24.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React24.createElement(Grid5, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React24.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, __7("Top", "elementor"))), /* @__PURE__ */ React24.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(
+    Control3,
+    {
+      bind: "top",
+      startIcon: /* @__PURE__ */ React24.createElement(SideTopIcon, { fontSize: "tiny" }),
+      isLinked
+    }
+  ))), /* @__PURE__ */ React24.createElement(Grid5, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React24.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, __7("Right", "elementor"))), /* @__PURE__ */ React24.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(
+    Control3,
+    {
+      bind: "right",
+      startIcon: /* @__PURE__ */ React24.createElement(SideRightIcon, { fontSize: "tiny" }),
+      isLinked
+    }
+  )))), /* @__PURE__ */ React24.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React24.createElement(Grid5, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React24.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, __7("Bottom", "elementor"))), /* @__PURE__ */ React24.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(
+    Control3,
+    {
+      bind: "bottom",
+      startIcon: /* @__PURE__ */ React24.createElement(SideBottomIcon, { fontSize: "tiny" }),
+      isLinked
+    }
+  ))), /* @__PURE__ */ React24.createElement(Grid5, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React24.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, __7("Left", "elementor"))), /* @__PURE__ */ React24.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(
+    Control3,
+    {
+      bind: "left",
+      startIcon: /* @__PURE__ */ React24.createElement(SideLeftIcon, { fontSize: "tiny" }),
+      isLinked
+    }
+  )))));
 });
-var Control3 = ({ bind, startIcon }) => /* @__PURE__ */ React24.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React24.createElement(SizeControl, { startIcon }));
+var Control3 = ({ bind, startIcon, isLinked }) => {
+  if (isLinked) {
+    return /* @__PURE__ */ React24.createElement(SizeControl, { startIcon });
+  }
+  return /* @__PURE__ */ React24.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React24.createElement(SizeControl, { startIcon }));
+};
 
 // src/controls/font-family-control.tsx
 import { Fragment as Fragment3, useId as useId3, useState as useState4 } from "react";
@@ -1262,7 +1296,7 @@ var UrlControl = createControl(({ placeholder }) => {
 
 // src/controls/link-control.tsx
 import * as React27 from "react";
-import { booleanPropTypeUtil, linkPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil7 } from "@elementor/editor-props";
+import { booleanPropTypeUtil, linkPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil2 } from "@elementor/editor-props";
 import { MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
 import { useSessionStorage } from "@elementor/session";
 import { Collapse, Divider as Divider2, Grid as Grid6, IconButton as IconButton4, Stack as Stack9, Switch } from "@elementor/ui";
@@ -1305,7 +1339,7 @@ var LinkControl = createControl((props) => {
     {
       allowCustomValues: Object.keys(options).length ? allowCustomValues : true,
       options,
-      propType: stringPropTypeUtil7,
+      propType: urlPropTypeUtil2,
       placeholder
     }
   )), /* @__PURE__ */ React27.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React27.createElement(SwitchControl, null))))));