@elementor/editor-interactions 4.1.0-732 → 4.1.0-734

package/dist/index.mjs

@@ -589,11 +589,26 @@ function useInteractionItemContext() {
   return context;
 }
 
-// src/components/interactions-list-item.tsx
-import * as React9 from "react";
-import { useCallback as useCallback4 } from "react";
-import { Divider as Divider2, Tab, TabPanel, Tabs, useTabs } from "@elementor/ui";
-import { __ as __4 } from "@wordpress/i18n";
+// src/utils/scroll-interaction-event.ts
+var SCROLL_INTERACTION_EVENT = "elementor/interactions/scroll-change";
+function dispatchScrollInteraction(data) {
+  window.dispatchEvent(new CustomEvent(SCROLL_INTERACTION_EVENT, { detail: data }));
+}
+function extractScrollOverlayParams(interaction, defaults) {
+  return {
+    trigger: extractString(interaction.trigger, defaults.trigger),
+    start: extractSize(interaction.animation.value.config?.value.start, defaults.start),
+    end: extractSize(interaction.animation.value.config?.value.end, defaults.end),
+    relativeTo: extractString(interaction.animation.value.config?.value.relativeTo, defaults.relativeTo)
+  };
+}
+function syncGridOverlay(trigger, start, end, relativeTo) {
+  if (trigger === "scrollOn") {
+    dispatchScrollInteraction({ start, end, relativeTo });
+  } else {
+    dispatchScrollInteraction(null);
+  }
+}
 
 // src/components/interaction-details.tsx
 import * as React7 from "react";
@@ -822,6 +837,12 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
       })
     };
     onChange(updatedInteraction);
+    syncGridOverlay(
+      updates.trigger ?? trigger,
+      updates.start ?? start,
+      updates.end ?? end,
+      updates.relativeTo ?? relativeTo
+    );
     const interactionId = extractString(updatedInteraction.interaction_id);
     setTimeout(() => {
       onPlayInteraction(interactionId);
@@ -898,6 +919,12 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
   ))));
 };
 
+// src/components/interactions-list-item.tsx
+import * as React9 from "react";
+import { useCallback as useCallback4 } from "react";
+import { Divider as Divider2, Tab, TabPanel, Tabs, useTabs } from "@elementor/ui";
+import { __ as __4 } from "@wordpress/i18n";
+
 // src/components/interaction-settings.tsx
 import * as React8 from "react";
 import { useCallback as useCallback3, useMemo as useMemo2, useState as useState3 } from "react";
@@ -1088,6 +1115,14 @@ function InteractionsList(props) {
         Label: ({ value }) => buildDisplayLabel(value.value),
         Icon: () => null,
         Content: InteractionsListItem,
+        onPopoverOpen: (value) => {
+          const { trigger, start, end, relativeTo } = extractScrollOverlayParams(
+            value.value,
+            DEFAULT_VALUES
+          );
+          syncGridOverlay(trigger, start, end, relativeTo);
+        },
+        onPopoverClose: () => dispatchScrollInteraction(null),
         actions: (value) => /* @__PURE__ */ React10.createElement(Tooltip, { key: "preview", placement: "top", title: __5("Preview", "elementor") }, /* @__PURE__ */ React10.createElement(
           IconButton,
           {
@@ -2204,6 +2239,7 @@ export {
   REPEAT_OPTIONS,
   REPEAT_TOOLTIPS,
   REPLAY_OPTIONS,
+  SCROLL_INTERACTION_EVENT,
   TRIGGER_OPTIONS,
   buildDisplayLabel,
   convertTimeUnit,
@@ -2219,8 +2255,10 @@ export {
   createNumber,
   createString,
   createTimingConfig,
+  dispatchScrollInteraction,
   extractBoolean,
   extractExcludedBreakpoints,
+  extractScrollOverlayParams,
   extractSize,
   extractString,
   formatSizeValue,
@@ -2232,6 +2270,7 @@ export {
   parseSizeValue,
   registerInteractionsControl,
   resolveDirection,
+  syncGridOverlay,
   useElementInteractions
 };
 //# sourceMappingURL=index.mjs.map