@elementor/editor-controls 3.32.0-62 → 3.32.0-64

package/dist/index.mjs

@@ -4600,7 +4600,7 @@ var PositionControl = () => {
 
 // src/controls/transform-control/transform-repeater-control.tsx
 import * as React81 from "react";
-import { transformPropTypeUtil } from "@elementor/editor-props";
+import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from "@elementor/editor-props";
 import { InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
 import { Typography as Typography6 } from "@elementor/ui";
 import { __ as __41 } from "@wordpress/i18n";
@@ -4672,32 +4672,52 @@ import { __ as __35 } from "@wordpress/i18n";
 // src/controls/transform-control/functions/axis-row.tsx
 import * as React72 from "react";
 import { Grid as Grid21 } from "@elementor/ui";
-var AxisRow = ({ label, bindValue, startIcon, anchorRef, units: units2 }) => {
-  return /* @__PURE__ */ React72.createElement(Grid21, { item: true, xs: 12 }, /* @__PURE__ */ React72.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React72.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(ControlLabel, null, label)), /* @__PURE__ */ React72.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(PropKeyProvider, { bind: bindValue }, /* @__PURE__ */ React72.createElement(SizeControl, { anchorRef, startIcon, units: units2, variant: "angle" })))));
+var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
+  return /* @__PURE__ */ React72.createElement(Grid21, { item: true, xs: 12 }, /* @__PURE__ */ React72.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React72.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(ControlLabel, null, label)), /* @__PURE__ */ React72.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React72.createElement(
+    SizeControl,
+    {
+      anchorRef,
+      startIcon,
+      units: units2,
+      variant
+    }
+  )))));
 };
 
 // src/controls/transform-control/functions/move.tsx
 var moveAxisControls = [
   {
     label: __35("Move X", "elementor"),
-    bindValue: "x",
-    startIcon: /* @__PURE__ */ React73.createElement(ArrowRightIcon, { fontSize: "tiny" })
+    bind: "x",
+    startIcon: /* @__PURE__ */ React73.createElement(ArrowRightIcon, { fontSize: "tiny" }),
+    units: ["px", "%", "em", "rem", "vw"]
   },
   {
     label: __35("Move Y", "elementor"),
-    bindValue: "y",
-    startIcon: /* @__PURE__ */ React73.createElement(ArrowDownSmallIcon, { fontSize: "tiny" })
+    bind: "y",
+    startIcon: /* @__PURE__ */ React73.createElement(ArrowDownSmallIcon, { fontSize: "tiny" }),
+    units: ["px", "%", "em", "rem", "vh"]
   },
   {
     label: __35("Move Z", "elementor"),
-    bindValue: "z",
-    startIcon: /* @__PURE__ */ React73.createElement(ArrowDownLeftIcon, { fontSize: "tiny" })
+    bind: "z",
+    startIcon: /* @__PURE__ */ React73.createElement(ArrowDownLeftIcon, { fontSize: "tiny" }),
+    units: ["px", "%", "em", "rem", "vw", "vh"]
   }
 ];
 var Move = () => {
   const context = useBoundProp(moveTransformPropTypeUtil);
-  const rowRef = useRef15(null);
-  return /* @__PURE__ */ React73.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React73.createElement(PropProvider, { ...context }, /* @__PURE__ */ React73.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control) => /* @__PURE__ */ React73.createElement(AxisRow, { key: control.bindValue, ...control, anchorRef: rowRef })))));
+  const rowRefs = [useRef15(null), useRef15(null), useRef15(null)];
+  return /* @__PURE__ */ React73.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React73.createElement(PropProvider, { ...context }, /* @__PURE__ */ React73.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React73.createElement(
+    AxisRow,
+    {
+      key: control.bind,
+      ...control,
+      anchorRef: rowRefs[index],
+      units: control.units,
+      variant: "length"
+    }
+  )))));
 };
 
 // src/controls/transform-control/functions/rotate.tsx
@@ -4710,25 +4730,33 @@ import { __ as __36 } from "@wordpress/i18n";
 var rotateAxisControls = [
   {
     label: __36("Rotate X", "elementor"),
-    bindValue: "x",
+    bind: "x",
     startIcon: /* @__PURE__ */ React74.createElement(Arrow360Icon, { fontSize: "tiny" })
   },
   {
     label: __36("Rotate Y", "elementor"),
-    bindValue: "y",
+    bind: "y",
     startIcon: /* @__PURE__ */ React74.createElement(Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
   },
   {
     label: __36("Rotate Z", "elementor"),
-    bindValue: "z",
+    bind: "z",
     startIcon: /* @__PURE__ */ React74.createElement(RotateClockwiseIcon, { fontSize: "tiny" })
   }
 ];
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(rotateTransformPropTypeUtil2);
-  const rowRef = useRef16(null);
-  return /* @__PURE__ */ React74.createElement(Grid23, { container: true, spacing: 1.5 }, /* @__PURE__ */ React74.createElement(PropProvider, { ...context }, /* @__PURE__ */ React74.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control) => /* @__PURE__ */ React74.createElement(AxisRow, { key: control.bindValue, ...control, anchorRef: rowRef, units: rotateUnits })))));
+  const rowRefs = [useRef16(null), useRef16(null), useRef16(null)];
+  return /* @__PURE__ */ React74.createElement(Grid23, { container: true, spacing: 1.5 }, /* @__PURE__ */ React74.createElement(PropProvider, { ...context }, /* @__PURE__ */ React74.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React74.createElement(
+    AxisRow,
+    {
+      key: control.bind,
+      ...control,
+      anchorRef: rowRefs[index],
+      units: rotateUnits
+    }
+  )))));
 };
 
 // src/controls/transform-control/functions/scale.tsx
@@ -4742,32 +4770,32 @@ import { __ as __37 } from "@wordpress/i18n";
 // src/controls/transform-control/functions/scale-axis-row.tsx
 import * as React75 from "react";
 import { Grid as Grid24 } from "@elementor/ui";
-var ScaleAxisRow = ({ label, bindValue, startIcon, anchorRef }) => {
-  return /* @__PURE__ */ React75.createElement(Grid24, { item: true, xs: 12 }, /* @__PURE__ */ React75.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React75.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(ControlLabel, null, label)), /* @__PURE__ */ React75.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind: bindValue }, /* @__PURE__ */ React75.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
+var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
+  return /* @__PURE__ */ React75.createElement(Grid24, { item: true, xs: 12 }, /* @__PURE__ */ React75.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React75.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(ControlLabel, null, label)), /* @__PURE__ */ React75.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React75.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
 };
 
 // src/controls/transform-control/functions/scale.tsx
 var scaleAxisControls = [
   {
     label: __37("Scale X", "elementor"),
-    bindValue: "x",
+    bind: "x",
     startIcon: /* @__PURE__ */ React76.createElement(ArrowRightIcon2, { fontSize: "tiny" })
   },
   {
     label: __37("Scale Y", "elementor"),
-    bindValue: "y",
+    bind: "y",
     startIcon: /* @__PURE__ */ React76.createElement(ArrowDownSmallIcon2, { fontSize: "tiny" })
   },
   {
     label: __37("Scale Z", "elementor"),
-    bindValue: "z",
+    bind: "z",
     startIcon: /* @__PURE__ */ React76.createElement(ArrowDownLeftIcon2, { fontSize: "tiny" })
   }
 ];
 var Scale = () => {
   const context = useBoundProp(scaleTransformPropTypeUtil2);
-  const rowRef = useRef17(null);
-  return /* @__PURE__ */ React76.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React76.createElement(PropProvider, { ...context }, /* @__PURE__ */ React76.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control) => /* @__PURE__ */ React76.createElement(ScaleAxisRow, { key: control.bindValue, ...control, anchorRef: rowRef })))));
+  const rowRefs = [useRef17(null), useRef17(null), useRef17(null)];
+  return /* @__PURE__ */ React76.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React76.createElement(PropProvider, { ...context }, /* @__PURE__ */ React76.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React76.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
 };
 
 // src/controls/transform-control/functions/skew.tsx
@@ -4780,20 +4808,28 @@ import { __ as __38 } from "@wordpress/i18n";
 var skewAxisControls = [
   {
     label: __38("Skew X", "elementor"),
-    bindValue: "x",
+    bind: "x",
     startIcon: /* @__PURE__ */ React77.createElement(ArrowRightIcon3, { fontSize: "tiny" })
   },
   {
     label: __38("Skew Y", "elementor"),
-    bindValue: "y",
+    bind: "y",
     startIcon: /* @__PURE__ */ React77.createElement(ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
   }
 ];
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(skewTransformPropTypeUtil2);
-  const rowRef = useRef18(null);
-  return /* @__PURE__ */ React77.createElement(Grid26, { container: true, spacing: 1.5 }, /* @__PURE__ */ React77.createElement(PropProvider, { ...context }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control) => /* @__PURE__ */ React77.createElement(AxisRow, { key: control.bindValue, ...control, anchorRef: rowRef, units: skewUnits })))));
+  const rowRefs = [useRef18(null), useRef18(null), useRef18(null)];
+  return /* @__PURE__ */ React77.createElement(Grid26, { container: true, spacing: 1.5 }, /* @__PURE__ */ React77.createElement(PropProvider, { ...context }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React77.createElement(
+    AxisRow,
+    {
+      key: control.bind,
+      ...control,
+      anchorRef: rowRefs[index],
+      units: skewUnits
+    }
+  )))));
 };
 
 // src/controls/transform-control/use-transform-tabs-history.tsx
@@ -4969,17 +5005,23 @@ var Label2 = ({ label, value }) => {
 
 // src/controls/transform-control/transform-repeater-control.tsx
 var TransformRepeaterControl = createControl(() => {
-  const { propType, value: transformValues, setValue } = useBoundProp(transformPropTypeUtil);
+  const context = useBoundProp(transformPropTypeUtil);
+  return /* @__PURE__ */ React81.createElement(PropProvider, { ...context }, /* @__PURE__ */ React81.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React81.createElement(Repeater2, null)));
+});
+var ToolTip = /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }), /* @__PURE__ */ React81.createElement(Typography6, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __41("You can use each kind of transform only once per element.", "elementor")));
+var Repeater2 = () => {
+  const transformFunctionsContext = useBoundProp(transformFunctionsPropTypeUtil);
   const availableValues = [initialTransformValue, initialScaleValue, initialRotateValue, initialSkewValue];
+  const { value: transformValues } = transformFunctionsContext;
   const getInitialValue = () => {
     return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
   };
   const shouldDisableAddItem = !getInitialValue();
-  return /* @__PURE__ */ React81.createElement(PropProvider, { propType, value: transformValues, setValue }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React81.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React81.createElement(
     UnstableRepeater,
     {
       initial: getInitialValue() ?? initialTransformValue,
-      propTypeUtil: transformPropTypeUtil
+      propTypeUtil: transformFunctionsPropTypeUtil
     },
     /* @__PURE__ */ React81.createElement(Header, { label: __41("Transform", "elementor") }, /* @__PURE__ */ React81.createElement(
       TooltipAddItemAction,
@@ -4992,8 +5034,7 @@ var TransformRepeaterControl = createControl(() => {
     /* @__PURE__ */ React81.createElement(ItemsContainer, { itemTemplate: /* @__PURE__ */ React81.createElement(Item, { Icon: TransformIcon, Label: TransformLabel }) }, /* @__PURE__ */ React81.createElement(DisableItemAction, null), /* @__PURE__ */ React81.createElement(RemoveItemAction, null)),
     /* @__PURE__ */ React81.createElement(EditItemPopover, null, /* @__PURE__ */ React81.createElement(TransformContent, null))
   ));
-});
-var ToolTip = /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }), /* @__PURE__ */ React81.createElement(Typography6, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __41("You can use each kind of transform only once per element.", "elementor")));
+};
 
 // src/controls/transition-control/transition-repeater-control.tsx
 import * as React84 from "react";