@elementor/editor-interactions 4.0.0-564 → 4.0.0-573

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ComponentType } from 'react';
+import { RefObject, ComponentType } from 'react';
 import { Unit } from '@elementor/editor-controls';
 import { ElementInteractions, InteractionItemPropValue } from '@elementor/editor-elements';
 export { AnimationPresetPropValue, BooleanPropValue, ConfigPropValue, ElementInteractions, ExcludedBreakpointsPropValue, InteractionBreakpointsPropValue, InteractionItemPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue } from '@elementor/editor-elements';
@@ -36,6 +36,7 @@ type ReplayFieldProps = {
     value: boolean;
     onChange: (value: boolean) => void;
     disabled?: boolean;
+    anchorRef?: RefObject<HTMLElement | null>;
 };
 type DirectionFieldProps = FieldProps & {
     interactionType: string;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ComponentType } from 'react';
+import { RefObject, ComponentType } from 'react';
 import { Unit } from '@elementor/editor-controls';
 import { ElementInteractions, InteractionItemPropValue } from '@elementor/editor-elements';
 export { AnimationPresetPropValue, BooleanPropValue, ConfigPropValue, ElementInteractions, ExcludedBreakpointsPropValue, InteractionBreakpointsPropValue, InteractionItemPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue } from '@elementor/editor-elements';
@@ -36,6 +36,7 @@ type ReplayFieldProps = {
     value: boolean;
     onChange: (value: boolean) => void;
     disabled?: boolean;
+    anchorRef?: RefObject<HTMLElement | null>;
 };
 type DirectionFieldProps = FieldProps & {
     interactionType: string;

package/dist/index.js

@@ -620,6 +620,7 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     controlVisibilityConfig.offsetBottom(interactionValues)
   );
   const EasingControl = useControlComponent("easing");
+  const containerRef = (0, import_react6.useRef)(null);
   const updateInteraction = (updates) => {
     const resolvedDirectionValue = resolveDirection(
       "direction" in updates,
@@ -651,12 +652,19 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
       onPlayInteraction(interactionId);
     }, 0);
   };
-  return /* @__PURE__ */ React9.createElement(import_editor_controls5.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React9.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Trigger", "elementor") }, /* @__PURE__ */ React9.createElement(TriggerControl, { value: trigger, onChange: (v) => updateInteraction({ trigger: v }) })), ReplayControl && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Replay", "elementor") }, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React9.createElement(import_ui3.Box, { ref: containerRef }, /* @__PURE__ */ React9.createElement(import_editor_controls5.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React9.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Trigger", "elementor") }, /* @__PURE__ */ React9.createElement(
+    TriggerControl,
+    {
+      value: trigger,
+      onChange: (v) => updateInteraction({ trigger: v })
+    }
+  )), ReplayControl && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Replay", "elementor") }, /* @__PURE__ */ React9.createElement(
     ReplayControl,
     {
       value: replay,
       onChange: (v) => updateInteraction({ replay: v }),
-      disabled: true
+      disabled: true,
+      anchorRef: containerRef
     }
   ))), /* @__PURE__ */ React9.createElement(import_ui3.Divider, null), /* @__PURE__ */ React9.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, EffectControl && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Effect", "elementor") }, /* @__PURE__ */ React9.createElement(EffectControl, { value: effect, onChange: (v) => updateInteraction({ effect: v }) })), /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Type", "elementor") }, /* @__PURE__ */ React9.createElement(EffectType, { value: type, onChange: (v) => updateInteraction({ type: v }) })), /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Direction", "elementor") }, /* @__PURE__ */ React9.createElement(
     Direction,
@@ -705,7 +713,7 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
         updateInteraction({ easing: v });
       }
     }
-  ))));
+  )))));
 };
 
 // src/components/interaction-settings.tsx
@@ -1162,44 +1170,87 @@ function Effect({ value, onChange }) {
 }
 
 // src/components/controls/replay.tsx
-var React16 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 var import_editor_controls8 = require("@elementor/editor-controls");
 var import_icons4 = require("@elementor/icons");
+var import_ui11 = require("@elementor/ui");
+var import_i18n11 = require("@wordpress/i18n");
+
+// src/ui/interactions-promotion-chip.tsx
+var React16 = __toESM(require("react"));
+var import_react11 = require("react");
+var import_editor_ui3 = require("@elementor/editor-ui");
+var import_ui10 = require("@elementor/ui");
 var import_i18n10 = require("@wordpress/i18n");
-function Replay({ onChange }) {
+function InteractionsPromotionChip({ content, upgradeUrl, anchorRef }) {
+  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
+  (0, import_editor_ui3.useCanvasClickHandler)(isOpen, () => setIsOpen(false));
+  const handleToggle = (e) => {
+    e.stopPropagation();
+    setIsOpen((prev) => !prev);
+  };
+  return /* @__PURE__ */ React16.createElement(
+    import_editor_ui3.PromotionPopover,
+    {
+      open: isOpen,
+      title: (0, import_i18n10.__)("Interactions", "elementor"),
+      content,
+      ctaText: (0, import_i18n10.__)("Upgrade now", "elementor"),
+      ctaUrl: upgradeUrl,
+      anchorRef,
+      placement: anchorRef ? "right-start" : void 0,
+      onClose: handleToggle
+    },
+    /* @__PURE__ */ React16.createElement(import_ui10.Box, { onClick: handleToggle, sx: { cursor: "pointer", display: "inline-flex", mr: 1 } }, /* @__PURE__ */ React16.createElement(import_editor_ui3.PromotionChip, null))
+  );
+}
+
+// src/components/controls/replay.tsx
+var OVERLAY_GRID = "1 / 1";
+var CHIP_OFFSET = "50%";
+function Replay({ onChange, anchorRef }) {
   const options = [
     {
       value: false,
       disabled: false,
-      label: (0, import_i18n10.__)("No", "elementor"),
-      renderContent: ({ size }) => /* @__PURE__ */ React16.createElement(import_icons4.MinusIcon, { fontSize: size })
+      label: (0, import_i18n11.__)("No", "elementor"),
+      renderContent: ({ size }) => /* @__PURE__ */ React17.createElement(import_icons4.MinusIcon, { fontSize: size }),
+      showTooltip: true
     },
     {
       value: true,
       disabled: true,
-      label: (0, import_i18n10.__)("Yes", "elementor"),
-      renderContent: ({ size }) => /* @__PURE__ */ React16.createElement(import_icons4.CheckIcon, { fontSize: size })
+      label: (0, import_i18n11.__)("Yes", "elementor"),
+      renderContent: ({ size }) => /* @__PURE__ */ React17.createElement(import_icons4.CheckIcon, { fontSize: size }),
+      showTooltip: true
     }
   ];
-  return /* @__PURE__ */ React16.createElement(import_editor_controls8.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value: false });
+  return /* @__PURE__ */ React17.createElement(import_ui11.Box, { sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React17.createElement(import_ui11.Box, { sx: { gridArea: OVERLAY_GRID } }, /* @__PURE__ */ React17.createElement(import_editor_controls8.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value: false })), /* @__PURE__ */ React17.createElement(import_ui11.Box, { sx: { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: "end" } }, /* @__PURE__ */ React17.createElement(
+    InteractionsPromotionChip,
+    {
+      content: (0, import_i18n11.__)("Upgrade to run the animation every time its trigger occurs.", "elementor"),
+      upgradeUrl: "https://go.elementor.com/go-pro-interactions-replay-modal/",
+      anchorRef
+    }
+  )));
 }
 
 // src/components/controls/trigger.tsx
-var React17 = __toESM(require("react"));
-var import_editor_ui3 = require("@elementor/editor-ui");
-var import_ui10 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
+var React18 = __toESM(require("react"));
+var import_editor_ui4 = require("@elementor/editor-ui");
+var import_ui12 = require("@elementor/ui");
+var import_i18n12 = require("@wordpress/i18n");
 function Trigger({ value, onChange }) {
   const availableTriggers = Object.entries({
-    load: (0, import_i18n11.__)("Page load", "elementor"),
-    scrollIn: (0, import_i18n11.__)("Scroll into view", "elementor"),
-    scrollOn: (0, import_i18n11.__)("While Scrolling", "elementor")
+    load: (0, import_i18n12.__)("Page load", "elementor"),
+    scrollIn: (0, import_i18n12.__)("Scroll into view", "elementor"),
+    scrollOn: (0, import_i18n12.__)("While Scrolling", "elementor")
   }).map(([key, label]) => ({
     key,
     label
   }));
-  return /* @__PURE__ */ React17.createElement(
-    import_ui10.Select,
+  return /* @__PURE__ */ React18.createElement(
+    import_ui12.Select,
     {
       fullWidth: true,
       displayEmpty: true,
@@ -1208,7 +1259,7 @@ function Trigger({ value, onChange }) {
       value
     },
     availableTriggers.map((trigger) => {
-      return /* @__PURE__ */ React17.createElement(import_editor_ui3.MenuListItem, { key: trigger.key, value: trigger.key }, trigger.label);
+      return /* @__PURE__ */ React18.createElement(import_editor_ui4.MenuListItem, { key: trigger.key, value: trigger.key }, trigger.label);
     })
   );
 }