@elementor/editor-controls 3.32.0-63 → 3.32.0-65

package/dist/index.js

@@ -4666,32 +4666,52 @@ var import_i18n35 = require("@wordpress/i18n");
 // src/controls/transform-control/functions/axis-row.tsx
 var React72 = __toESM(require("react"));
 var import_ui63 = require("@elementor/ui");
-var AxisRow = ({ label, bindValue, startIcon, anchorRef, units: units2 }) => {
-  return /* @__PURE__ */ React72.createElement(import_ui63.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React72.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React72.createElement(import_ui63.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(ControlLabel, null, label)), /* @__PURE__ */ React72.createElement(import_ui63.Grid, { 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(import_ui63.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React72.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React72.createElement(import_ui63.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(ControlLabel, null, label)), /* @__PURE__ */ React72.createElement(import_ui63.Grid, { 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: (0, import_i18n35.__)("Move X", "elementor"),
-    bindValue: "x",
-    startIcon: /* @__PURE__ */ React73.createElement(import_icons25.ArrowRightIcon, { fontSize: "tiny" })
+    bind: "x",
+    startIcon: /* @__PURE__ */ React73.createElement(import_icons25.ArrowRightIcon, { fontSize: "tiny" }),
+    units: ["px", "%", "em", "rem", "vw"]
   },
   {
     label: (0, import_i18n35.__)("Move Y", "elementor"),
-    bindValue: "y",
-    startIcon: /* @__PURE__ */ React73.createElement(import_icons25.ArrowDownSmallIcon, { fontSize: "tiny" })
+    bind: "y",
+    startIcon: /* @__PURE__ */ React73.createElement(import_icons25.ArrowDownSmallIcon, { fontSize: "tiny" }),
+    units: ["px", "%", "em", "rem", "vh"]
   },
   {
     label: (0, import_i18n35.__)("Move Z", "elementor"),
-    bindValue: "z",
-    startIcon: /* @__PURE__ */ React73.createElement(import_icons25.ArrowDownLeftIcon, { fontSize: "tiny" })
+    bind: "z",
+    startIcon: /* @__PURE__ */ React73.createElement(import_icons25.ArrowDownLeftIcon, { fontSize: "tiny" }),
+    units: ["px", "%", "em", "rem", "vw", "vh"]
   }
 ];
 var Move = () => {
   const context = useBoundProp(import_editor_props37.moveTransformPropTypeUtil);
-  const rowRef = (0, import_react38.useRef)(null);
-  return /* @__PURE__ */ React73.createElement(import_ui64.Grid, { 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 = [(0, import_react38.useRef)(null), (0, import_react38.useRef)(null), (0, import_react38.useRef)(null)];
+  return /* @__PURE__ */ React73.createElement(import_ui64.Grid, { 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
@@ -4704,25 +4724,33 @@ var import_i18n36 = require("@wordpress/i18n");
 var rotateAxisControls = [
   {
     label: (0, import_i18n36.__)("Rotate X", "elementor"),
-    bindValue: "x",
+    bind: "x",
     startIcon: /* @__PURE__ */ React74.createElement(import_icons26.Arrow360Icon, { fontSize: "tiny" })
   },
   {
     label: (0, import_i18n36.__)("Rotate Y", "elementor"),
-    bindValue: "y",
+    bind: "y",
     startIcon: /* @__PURE__ */ React74.createElement(import_icons26.Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
   },
   {
     label: (0, import_i18n36.__)("Rotate Z", "elementor"),
-    bindValue: "z",
+    bind: "z",
     startIcon: /* @__PURE__ */ React74.createElement(import_icons26.RotateClockwiseIcon, { fontSize: "tiny" })
   }
 ];
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(import_editor_props38.rotateTransformPropTypeUtil);
-  const rowRef = (0, import_react39.useRef)(null);
-  return /* @__PURE__ */ React74.createElement(import_ui65.Grid, { 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 = [(0, import_react39.useRef)(null), (0, import_react39.useRef)(null), (0, import_react39.useRef)(null)];
+  return /* @__PURE__ */ React74.createElement(import_ui65.Grid, { 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
@@ -4736,32 +4764,32 @@ var import_i18n37 = require("@wordpress/i18n");
 // src/controls/transform-control/functions/scale-axis-row.tsx
 var React75 = __toESM(require("react"));
 var import_ui66 = require("@elementor/ui");
-var ScaleAxisRow = ({ label, bindValue, startIcon, anchorRef }) => {
-  return /* @__PURE__ */ React75.createElement(import_ui66.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React75.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React75.createElement(import_ui66.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(ControlLabel, null, label)), /* @__PURE__ */ React75.createElement(import_ui66.Grid, { 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(import_ui66.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React75.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React75.createElement(import_ui66.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(ControlLabel, null, label)), /* @__PURE__ */ React75.createElement(import_ui66.Grid, { 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: (0, import_i18n37.__)("Scale X", "elementor"),
-    bindValue: "x",
+    bind: "x",
     startIcon: /* @__PURE__ */ React76.createElement(import_icons27.ArrowRightIcon, { fontSize: "tiny" })
   },
   {
     label: (0, import_i18n37.__)("Scale Y", "elementor"),
-    bindValue: "y",
+    bind: "y",
     startIcon: /* @__PURE__ */ React76.createElement(import_icons27.ArrowDownSmallIcon, { fontSize: "tiny" })
   },
   {
     label: (0, import_i18n37.__)("Scale Z", "elementor"),
-    bindValue: "z",
+    bind: "z",
     startIcon: /* @__PURE__ */ React76.createElement(import_icons27.ArrowDownLeftIcon, { fontSize: "tiny" })
   }
 ];
 var Scale = () => {
   const context = useBoundProp(import_editor_props39.scaleTransformPropTypeUtil);
-  const rowRef = (0, import_react40.useRef)(null);
-  return /* @__PURE__ */ React76.createElement(import_ui67.Grid, { 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 = [(0, import_react40.useRef)(null), (0, import_react40.useRef)(null), (0, import_react40.useRef)(null)];
+  return /* @__PURE__ */ React76.createElement(import_ui67.Grid, { 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
@@ -4774,20 +4802,28 @@ var import_i18n38 = require("@wordpress/i18n");
 var skewAxisControls = [
   {
     label: (0, import_i18n38.__)("Skew X", "elementor"),
-    bindValue: "x",
+    bind: "x",
     startIcon: /* @__PURE__ */ React77.createElement(import_icons28.ArrowRightIcon, { fontSize: "tiny" })
   },
   {
     label: (0, import_i18n38.__)("Skew Y", "elementor"),
-    bindValue: "y",
+    bind: "y",
     startIcon: /* @__PURE__ */ React77.createElement(import_icons28.ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
   }
 ];
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(import_editor_props40.skewTransformPropTypeUtil);
-  const rowRef = (0, import_react41.useRef)(null);
-  return /* @__PURE__ */ React77.createElement(import_ui68.Grid, { 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 = [(0, import_react41.useRef)(null), (0, import_react41.useRef)(null), (0, import_react41.useRef)(null)];
+  return /* @__PURE__ */ React77.createElement(import_ui68.Grid, { 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
@@ -4958,17 +4994,23 @@ var Label2 = ({ label, value }) => {
 
 // src/controls/transform-control/transform-repeater-control.tsx
 var TransformRepeaterControl = createControl(() => {
-  const { propType, value: transformValues, setValue } = useBoundProp(import_editor_props42.transformPropTypeUtil);
+  const context = useBoundProp(import_editor_props42.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(import_icons30.InfoCircleFilledIcon, { sx: { color: "secondary.main" } }), /* @__PURE__ */ React81.createElement(import_ui72.Typography, { variant: "body2", color: "text.secondary", fontSize: "14px" }, (0, import_i18n41.__)("You can use each kind of transform only once per element.", "elementor")));
+var Repeater2 = () => {
+  const transformFunctionsContext = useBoundProp(import_editor_props42.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: import_editor_props42.transformPropTypeUtil
+      propTypeUtil: import_editor_props42.transformFunctionsPropTypeUtil
     },
     /* @__PURE__ */ React81.createElement(Header, { label: (0, import_i18n41.__)("Transform", "elementor") }, /* @__PURE__ */ React81.createElement(
       TooltipAddItemAction,
@@ -4981,8 +5023,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(import_icons30.InfoCircleFilledIcon, { sx: { color: "secondary.main" } }), /* @__PURE__ */ React81.createElement(import_ui72.Typography, { variant: "body2", color: "text.secondary", fontSize: "14px" }, (0, import_i18n41.__)("You can use each kind of transform only once per element.", "elementor")));
+};
 
 // src/controls/transition-control/transition-repeater-control.tsx
 var React84 = __toESM(require("react"));