@elementor/editor-interactions 4.1.0-712 → 4.1.0-714

package/dist/index.js

@@ -1427,38 +1427,87 @@ var React12 = __toESM(require("react"));
 var import_react11 = require("react");
 var import_editor_controls6 = require("@elementor/editor-controls");
 var import_icons3 = require("@elementor/icons");
+var import_ui8 = require("@elementor/ui");
 var import_i18n7 = require("@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 = (0, import_react11.useMemo)(() => {
-    const isIn = interactionType === "in";
-    return [
+  const isIn = interactionType === "in";
+  const options = (0, import_react11.useMemo)(
+    () => [
       {
-        value: "top",
+        dir: "top",
         label: isIn ? (0, import_i18n7.__)("From top", "elementor") : (0, import_i18n7.__)("To top", "elementor"),
-        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(import_icons3.ArrowDownSmallIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(import_icons3.ArrowUpSmallIcon, { fontSize: size }),
-        showTooltip: true
+        Icon: isIn ? import_icons3.ArrowDownSmallIcon : import_icons3.ArrowUpSmallIcon
       },
       {
-        value: "bottom",
-        label: interactionType === "in" ? (0, import_i18n7.__)("From bottom", "elementor") : (0, import_i18n7.__)("To bottom", "elementor"),
-        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(import_icons3.ArrowUpSmallIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(import_icons3.ArrowDownSmallIcon, { fontSize: size }),
-        showTooltip: true
+        dir: "bottom",
+        label: isIn ? (0, import_i18n7.__)("From bottom", "elementor") : (0, import_i18n7.__)("To bottom", "elementor"),
+        Icon: isIn ? import_icons3.ArrowUpSmallIcon : import_icons3.ArrowDownSmallIcon
       },
       {
-        value: "left",
-        label: interactionType === "in" ? (0, import_i18n7.__)("From left", "elementor") : (0, import_i18n7.__)("To left", "elementor"),
-        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(import_icons3.ArrowRightIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(import_icons3.ArrowLeftIcon, { fontSize: size }),
-        showTooltip: true
+        dir: "left",
+        label: isIn ? (0, import_i18n7.__)("From left", "elementor") : (0, import_i18n7.__)("To left", "elementor"),
+        Icon: isIn ? import_icons3.ArrowRightIcon : import_icons3.ArrowLeftIcon
       },
       {
-        value: "right",
-        label: interactionType === "in" ? (0, import_i18n7.__)("From right", "elementor") : (0, import_i18n7.__)("To right", "elementor"),
-        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(import_icons3.ArrowLeftIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(import_icons3.ArrowRightIcon, { fontSize: size }),
-        showTooltip: true
+        dir: "right",
+        label: isIn ? (0, import_i18n7.__)("From right", "elementor") : (0, import_i18n7.__)("To right", "elementor"),
+        Icon: isIn ? import_icons3.ArrowLeftIcon : import_icons3.ArrowRightIcon
+      }
+    ],
+    [isIn]
+  );
+  const selectedDirections = (0, import_react11.useMemo)(() => parseValue(value), [value]);
+  return /* @__PURE__ */ React12.createElement(
+    import_editor_controls6.StyledToggleButtonGroup,
+    {
+      size: "tiny",
+      justify: "end",
+      sx: {
+        display: "grid",
+        gridTemplateColumns: "repeat(4, minmax(0, 25%))",
+        width: "100%"
       }
-    ];
-  }, [interactionType]);
-  return /* @__PURE__ */ React12.createElement(import_editor_controls6.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
+    },
+    options.map(({ dir, label, Icon }) => /* @__PURE__ */ React12.createElement(import_ui8.Tooltip, { key: dir, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React12.createElement(
+      import_editor_controls6.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
@@ -1469,7 +1518,7 @@ var import_i18n10 = require("@wordpress/i18n");
 var React14 = __toESM(require("react"));
 var import_react13 = require("react");
 var import_editor_ui2 = require("@elementor/editor-ui");
-var import_ui9 = require("@elementor/ui");
+var import_ui10 = require("@elementor/ui");
 var import_i18n9 = require("@wordpress/i18n");
 
 // src/ui/interactions-promotion-chip.tsx
@@ -1477,7 +1526,7 @@ var React13 = __toESM(require("react"));
 var import_react12 = require("react");
 var import_editor_controls7 = require("@elementor/editor-controls");
 var import_editor_ui = require("@elementor/editor-ui");
-var import_ui8 = require("@elementor/ui");
+var import_ui9 = require("@elementor/ui");
 var import_i18n8 = require("@wordpress/i18n");
 var InteractionsPromotionChip = (0, import_react12.forwardRef)(
   ({ content, upgradeUrl, anchorRef, trackingData }, ref) => {
@@ -1513,7 +1562,7 @@ var InteractionsPromotionChip = (0, import_react12.forwardRef)(
         onCtaClick: () => (0, import_editor_controls7.trackUpgradePromotionClick)(trackingData)
       },
       /* @__PURE__ */ React13.createElement(
-        import_ui8.Box,
+        import_ui9.Box,
         {
           onMouseDown: (e) => e.stopPropagation(),
           onClick: handleToggle,
@@ -1540,7 +1589,7 @@ function PromotionSelect({
   const promotionRef = (0, import_react13.useRef)(null);
   const anchorRef = (0, import_react13.useRef)(null);
   return /* @__PURE__ */ React14.createElement(
-    import_ui9.Select,
+    import_ui10.Select,
     {
       value,
       onChange: (e) => onChange?.(e.target.value),
@@ -1551,7 +1600,7 @@ function PromotionSelect({
     },
     Object.entries(baseOptions).map(([key, label]) => /* @__PURE__ */ React14.createElement(import_editor_ui2.MenuListItem, { key, value: key }, label)),
     /* @__PURE__ */ React14.createElement(
-      import_ui9.MenuSubheader,
+      import_ui10.MenuSubheader,
       {
         ref: anchorRef,
         sx: {
@@ -1676,7 +1725,7 @@ function EffectType({ value, onChange }) {
 var React18 = __toESM(require("react"));
 var import_editor_controls9 = require("@elementor/editor-controls");
 var import_icons4 = require("@elementor/icons");
-var import_ui10 = require("@elementor/ui");
+var import_ui11 = require("@elementor/ui");
 var import_i18n13 = require("@wordpress/i18n");
 var TRACKING_DATA3 = { target_name: "interactions_replay", location_l2: "interactions" };
 var REPLAY_OPTIONS = {
@@ -1703,7 +1752,7 @@ function Replay({ onChange, anchorRef }) {
       showTooltip: true
     }
   ];
-  return /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { gridArea: OVERLAY_GRID } }, /* @__PURE__ */ React18.createElement(import_editor_controls9.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value: false })), /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: "end" } }, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React18.createElement(import_ui11.Box, { sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(import_ui11.Box, { sx: { gridArea: OVERLAY_GRID } }, /* @__PURE__ */ React18.createElement(import_editor_controls9.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value: false })), /* @__PURE__ */ React18.createElement(import_ui11.Box, { sx: { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: "end" } }, /* @__PURE__ */ React18.createElement(
     InteractionsPromotionChip,
     {
       content: (0, import_i18n13.__)("Upgrade to run the animation every time its trigger occurs.", "elementor"),
@@ -1801,7 +1850,9 @@ var baseSchema = {
   trigger: import_schema.z.enum(["load", "scrollIn"]).optional().describe("Event that triggers the animation"),
   effect: import_schema.z.enum(["fade", "slide", "scale"]).optional().describe("Animation effect type"),
   effectType: import_schema.z.enum(["in", "out"]).optional().describe("Whether the animation plays in or out"),
-  direction: import_schema.z.enum(["top", "bottom", "left", "right", ""]).optional().describe("Direction for slide effect. Use empty string for fade/scale."),
+  direction: import_schema.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: import_schema.z.number().min(0).max(1e4).optional().describe("Animation duration in milliseconds"),
   delay: import_schema.z.number().min(0).max(1e4).optional().describe("Animation delay in milliseconds"),
   easing: import_schema.z.string().optional().describe("Easing function. See interactions schema for options."),