@elementor/editor-interactions 4.1.0-711 → 4.1.0-713

package/dist/index.mjs

@@ -1364,40 +1364,89 @@ function initPasteInteractionsCommand() {
 // src/components/controls/direction.tsx
 import * as React12 from "react";
 import { useMemo as useMemo4 } from "react";
-import { ToggleButtonGroupUi } from "@elementor/editor-controls";
+import { StyledToggleButton, StyledToggleButtonGroup } from "@elementor/editor-controls";
 import { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from "@elementor/icons";
+import { Tooltip as Tooltip2 } from "@elementor/ui";
 import { __ as __7 } from "@wordpress/i18n";
+var AXIS = {
+  top: "vertical",
+  bottom: "vertical",
+  left: "horizontal",
+  right: "horizontal"
+};
+function parseValue(value) {
+  return value.split("-").filter(Boolean);
+}
+function serializeValue(directions) {
+  const vertical = directions.find((d) => d === "top" || d === "bottom");
+  const horizontal = directions.find((d) => d === "left" || d === "right");
+  if (vertical && horizontal) {
+    return `${vertical}-${horizontal}`;
+  }
+  return directions[0] ?? "";
+}
+function toggleDirection(current, clicked) {
+  if (current.includes(clicked)) {
+    return current.filter((d) => d !== clicked);
+  }
+  const filtered = current.filter((d) => AXIS[d] !== AXIS[clicked]);
+  return [...filtered, clicked];
+}
 function Direction({ value, onChange, interactionType }) {
-  const options = useMemo4(() => {
-    const isIn = interactionType === "in";
-    return [
+  const isIn = interactionType === "in";
+  const options = useMemo4(
+    () => [
       {
-        value: "top",
+        dir: "top",
         label: isIn ? __7("From top", "elementor") : __7("To top", "elementor"),
-        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(ArrowDownSmallIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(ArrowUpSmallIcon, { fontSize: size }),
-        showTooltip: true
+        Icon: isIn ? ArrowDownSmallIcon : ArrowUpSmallIcon
       },
       {
-        value: "bottom",
-        label: interactionType === "in" ? __7("From bottom", "elementor") : __7("To bottom", "elementor"),
-        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(ArrowUpSmallIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(ArrowDownSmallIcon, { fontSize: size }),
-        showTooltip: true
+        dir: "bottom",
+        label: isIn ? __7("From bottom", "elementor") : __7("To bottom", "elementor"),
+        Icon: isIn ? ArrowUpSmallIcon : ArrowDownSmallIcon
       },
       {
-        value: "left",
-        label: interactionType === "in" ? __7("From left", "elementor") : __7("To left", "elementor"),
-        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(ArrowRightIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(ArrowLeftIcon, { fontSize: size }),
-        showTooltip: true
+        dir: "left",
+        label: isIn ? __7("From left", "elementor") : __7("To left", "elementor"),
+        Icon: isIn ? ArrowRightIcon : ArrowLeftIcon
       },
       {
-        value: "right",
-        label: interactionType === "in" ? __7("From right", "elementor") : __7("To right", "elementor"),
-        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(ArrowLeftIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(ArrowRightIcon, { fontSize: size }),
-        showTooltip: true
+        dir: "right",
+        label: isIn ? __7("From right", "elementor") : __7("To right", "elementor"),
+        Icon: isIn ? ArrowLeftIcon : ArrowRightIcon
+      }
+    ],
+    [isIn]
+  );
+  const selectedDirections = useMemo4(() => parseValue(value), [value]);
+  return /* @__PURE__ */ React12.createElement(
+    StyledToggleButtonGroup,
+    {
+      size: "tiny",
+      justify: "end",
+      sx: {
+        display: "grid",
+        gridTemplateColumns: "repeat(4, minmax(0, 25%))",
+        width: "100%"
       }
-    ];
-  }, [interactionType]);
-  return /* @__PURE__ */ React12.createElement(ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
+    },
+    options.map(({ dir, label, Icon }) => /* @__PURE__ */ React12.createElement(Tooltip2, { key: dir, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React12.createElement(
+      StyledToggleButton,
+      {
+        value: dir,
+        selected: selectedDirections.includes(dir),
+        "aria-label": label,
+        size: "tiny",
+        isPlaceholder: false,
+        onChange: () => {
+          const next = toggleDirection(selectedDirections, dir);
+          onChange(serializeValue(next));
+        }
+      },
+      /* @__PURE__ */ React12.createElement(Icon, { fontSize: "tiny" })
+    )))
+  );
 }
 
 // src/components/controls/easing.tsx
@@ -1591,7 +1640,7 @@ function Effect({ value, onChange }) {
 
 // src/components/controls/effect-type.tsx
 import * as React17 from "react";
-import { ToggleButtonGroupUi as ToggleButtonGroupUi2 } from "@elementor/editor-controls";
+import { ToggleButtonGroupUi } from "@elementor/editor-controls";
 import { __ as __12 } from "@wordpress/i18n";
 function EffectType({ value, onChange }) {
   const options = [
@@ -1608,12 +1657,12 @@ function EffectType({ value, onChange }) {
       showTooltip: true
     }
   ];
-  return /* @__PURE__ */ React17.createElement(ToggleButtonGroupUi2, { items: options, exclusive: true, onChange, value });
+  return /* @__PURE__ */ React17.createElement(ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
 }
 
 // src/components/controls/replay.tsx
 import * as React18 from "react";
-import { ToggleButtonGroupUi as ToggleButtonGroupUi3 } from "@elementor/editor-controls";
+import { ToggleButtonGroupUi as ToggleButtonGroupUi2 } from "@elementor/editor-controls";
 import { CheckIcon, MinusIcon } from "@elementor/icons";
 import { Box as Box4 } from "@elementor/ui";
 import { __ as __13 } from "@wordpress/i18n";
@@ -1642,7 +1691,7 @@ function Replay({ onChange, anchorRef }) {
       showTooltip: true
     }
   ];
-  return /* @__PURE__ */ React18.createElement(Box4, { sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(Box4, { sx: { gridArea: OVERLAY_GRID } }, /* @__PURE__ */ React18.createElement(ToggleButtonGroupUi3, { items: options, exclusive: true, onChange, value: false })), /* @__PURE__ */ React18.createElement(Box4, { sx: { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: "end" } }, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React18.createElement(Box4, { sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(Box4, { sx: { gridArea: OVERLAY_GRID } }, /* @__PURE__ */ React18.createElement(ToggleButtonGroupUi2, { items: options, exclusive: true, onChange, value: false })), /* @__PURE__ */ React18.createElement(Box4, { sx: { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: "end" } }, /* @__PURE__ */ React18.createElement(
     InteractionsPromotionChip,
     {
       content: __13("Upgrade to run the animation every time its trigger occurs.", "elementor"),
@@ -1740,7 +1789,9 @@ var baseSchema = {
   trigger: z.enum(["load", "scrollIn"]).optional().describe("Event that triggers the animation"),
   effect: z.enum(["fade", "slide", "scale"]).optional().describe("Animation effect type"),
   effectType: z.enum(["in", "out"]).optional().describe("Whether the animation plays in or out"),
-  direction: z.enum(["top", "bottom", "left", "right", ""]).optional().describe("Direction for slide effect. Use empty string for fade/scale."),
+  direction: z.enum(["top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", "bottom-right"]).optional().describe(
+    "Direction of the Animation. Can be one of the following or empty if not needed. At slide effect, this is required field."
+  ),
   duration: z.number().min(0).max(1e4).optional().describe("Animation duration in milliseconds"),
   delay: z.number().min(0).max(1e4).optional().describe("Animation delay in milliseconds"),
   easing: z.string().optional().describe("Easing function. See interactions schema for options."),