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

package/dist/index.d.mts

@@ -261,4 +261,24 @@ declare const formatSizeValue: ({ size, unit }: SizeValue) => SizeStringValue;
 
 declare const useElementInteractions: (elementId: ElementID) => ElementInteractions;
 
-export { BASE_EASINGS, BASE_EFFECTS, BASE_REPLAY, BASE_TRIGGERS, type CreateInteractionsProviderOptions, DEFAULT_VALUES, EASING_OPTIONS, EFFECT_OPTIONS, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, EmptyState, type FieldProps, InteractionsTab, REPEAT_OPTIONS, REPEAT_TOOLTIPS, REPLAY_OPTIONS, type ReplayFieldProps, TRIGGER_OPTIONS, buildDisplayLabel, convertTimeUnit, createAnimationPreset, createBoolean, createConfig, createDefaultInteractionItem, createDefaultInteractions, createExcludedBreakpoints, createInteractionBreakpoints, createInteractionItem, createInteractionsProvider, createNumber, createString, createTimingConfig, extractBoolean, extractExcludedBreakpoints, extractSize, extractString, formatSizeValue, generateTempInteractionId, getInteractionsConfig, init, interactionsRepository, isTempId, parseSizeValue, registerInteractionsControl, resolveDirection, useElementInteractions };
+type ActiveScrollInteraction = {
+    start: SizeStringValue;
+    end: SizeStringValue;
+    relativeTo: string;
+};
+declare const SCROLL_INTERACTION_EVENT = "elementor/interactions/scroll-change";
+declare function dispatchScrollInteraction(data: ActiveScrollInteraction | null): void;
+declare function extractScrollOverlayParams(interaction: InteractionItemValue, defaults: {
+    trigger: string;
+    start: number;
+    end: number;
+    relativeTo: string;
+}): {
+    trigger: string;
+    start: SizeStringValue;
+    end: SizeStringValue;
+    relativeTo: string;
+};
+declare function syncGridOverlay(trigger: string, start: SizeStringValue, end: SizeStringValue, relativeTo: string): void;
+
+export { type ActiveScrollInteraction, BASE_EASINGS, BASE_EFFECTS, BASE_REPLAY, BASE_TRIGGERS, type CreateInteractionsProviderOptions, DEFAULT_VALUES, EASING_OPTIONS, EFFECT_OPTIONS, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, EmptyState, type FieldProps, InteractionsTab, REPEAT_OPTIONS, REPEAT_TOOLTIPS, REPLAY_OPTIONS, type ReplayFieldProps, SCROLL_INTERACTION_EVENT, TRIGGER_OPTIONS, buildDisplayLabel, convertTimeUnit, createAnimationPreset, createBoolean, createConfig, createDefaultInteractionItem, createDefaultInteractions, createExcludedBreakpoints, createInteractionBreakpoints, createInteractionItem, createInteractionsProvider, createNumber, createString, createTimingConfig, dispatchScrollInteraction, extractBoolean, extractExcludedBreakpoints, extractScrollOverlayParams, extractSize, extractString, formatSizeValue, generateTempInteractionId, getInteractionsConfig, init, interactionsRepository, isTempId, parseSizeValue, registerInteractionsControl, resolveDirection, syncGridOverlay, useElementInteractions };

package/dist/index.d.ts

@@ -261,4 +261,24 @@ declare const formatSizeValue: ({ size, unit }: SizeValue) => SizeStringValue;
 
 declare const useElementInteractions: (elementId: ElementID) => ElementInteractions;
 
-export { BASE_EASINGS, BASE_EFFECTS, BASE_REPLAY, BASE_TRIGGERS, type CreateInteractionsProviderOptions, DEFAULT_VALUES, EASING_OPTIONS, EFFECT_OPTIONS, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, EmptyState, type FieldProps, InteractionsTab, REPEAT_OPTIONS, REPEAT_TOOLTIPS, REPLAY_OPTIONS, type ReplayFieldProps, TRIGGER_OPTIONS, buildDisplayLabel, convertTimeUnit, createAnimationPreset, createBoolean, createConfig, createDefaultInteractionItem, createDefaultInteractions, createExcludedBreakpoints, createInteractionBreakpoints, createInteractionItem, createInteractionsProvider, createNumber, createString, createTimingConfig, extractBoolean, extractExcludedBreakpoints, extractSize, extractString, formatSizeValue, generateTempInteractionId, getInteractionsConfig, init, interactionsRepository, isTempId, parseSizeValue, registerInteractionsControl, resolveDirection, useElementInteractions };
+type ActiveScrollInteraction = {
+    start: SizeStringValue;
+    end: SizeStringValue;
+    relativeTo: string;
+};
+declare const SCROLL_INTERACTION_EVENT = "elementor/interactions/scroll-change";
+declare function dispatchScrollInteraction(data: ActiveScrollInteraction | null): void;
+declare function extractScrollOverlayParams(interaction: InteractionItemValue, defaults: {
+    trigger: string;
+    start: number;
+    end: number;
+    relativeTo: string;
+}): {
+    trigger: string;
+    start: SizeStringValue;
+    end: SizeStringValue;
+    relativeTo: string;
+};
+declare function syncGridOverlay(trigger: string, start: SizeStringValue, end: SizeStringValue, relativeTo: string): void;
+
+export { type ActiveScrollInteraction, BASE_EASINGS, BASE_EFFECTS, BASE_REPLAY, BASE_TRIGGERS, type CreateInteractionsProviderOptions, DEFAULT_VALUES, EASING_OPTIONS, EFFECT_OPTIONS, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, EmptyState, type FieldProps, InteractionsTab, REPEAT_OPTIONS, REPEAT_TOOLTIPS, REPLAY_OPTIONS, type ReplayFieldProps, SCROLL_INTERACTION_EVENT, TRIGGER_OPTIONS, buildDisplayLabel, convertTimeUnit, createAnimationPreset, createBoolean, createConfig, createDefaultInteractionItem, createDefaultInteractions, createExcludedBreakpoints, createInteractionBreakpoints, createInteractionItem, createInteractionsProvider, createNumber, createString, createTimingConfig, dispatchScrollInteraction, extractBoolean, extractExcludedBreakpoints, extractScrollOverlayParams, extractSize, extractString, formatSizeValue, generateTempInteractionId, getInteractionsConfig, init, interactionsRepository, isTempId, parseSizeValue, registerInteractionsControl, resolveDirection, syncGridOverlay, useElementInteractions };

package/dist/index.js

@@ -43,6 +43,7 @@ __export(index_exports, {
   REPEAT_OPTIONS: () => REPEAT_OPTIONS,
   REPEAT_TOOLTIPS: () => REPEAT_TOOLTIPS,
   REPLAY_OPTIONS: () => REPLAY_OPTIONS,
+  SCROLL_INTERACTION_EVENT: () => SCROLL_INTERACTION_EVENT,
   TRIGGER_OPTIONS: () => TRIGGER_OPTIONS,
   buildDisplayLabel: () => buildDisplayLabel,
   convertTimeUnit: () => convertTimeUnit,
@@ -58,8 +59,10 @@ __export(index_exports, {
   createNumber: () => createNumber,
   createString: () => createString,
   createTimingConfig: () => createTimingConfig,
+  dispatchScrollInteraction: () => dispatchScrollInteraction,
   extractBoolean: () => extractBoolean,
   extractExcludedBreakpoints: () => extractExcludedBreakpoints,
+  extractScrollOverlayParams: () => extractScrollOverlayParams,
   extractSize: () => extractSize,
   extractString: () => extractString,
   formatSizeValue: () => formatSizeValue,
@@ -71,6 +74,7 @@ __export(index_exports, {
   parseSizeValue: () => parseSizeValue,
   registerInteractionsControl: () => registerInteractionsControl,
   resolveDirection: () => resolveDirection,
+  syncGridOverlay: () => syncGridOverlay,
   useElementInteractions: () => useElementInteractions
 });
 module.exports = __toCommonJS(index_exports);
@@ -663,11 +667,26 @@ function useInteractionItemContext() {
   return context;
 }
 
-// src/components/interactions-list-item.tsx
-var React9 = __toESM(require("react"));
-var import_react8 = require("react");
-var import_ui5 = require("@elementor/ui");
-var import_i18n4 = require("@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
 var React7 = __toESM(require("react"));
@@ -896,6 +915,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);
@@ -972,6 +997,12 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
   ))));
 };
 
+// src/components/interactions-list-item.tsx
+var React9 = __toESM(require("react"));
+var import_react8 = require("react");
+var import_ui5 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
+
 // src/components/interaction-settings.tsx
 var React8 = __toESM(require("react"));
 var import_react7 = require("react");
@@ -1162,6 +1193,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(import_ui6.Tooltip, { key: "preview", placement: "top", title: (0, import_i18n5.__)("Preview", "elementor") }, /* @__PURE__ */ React10.createElement(
           import_ui6.IconButton,
           {
@@ -2269,6 +2308,7 @@ function init() {
   REPEAT_OPTIONS,
   REPEAT_TOOLTIPS,
   REPLAY_OPTIONS,
+  SCROLL_INTERACTION_EVENT,
   TRIGGER_OPTIONS,
   buildDisplayLabel,
   convertTimeUnit,
@@ -2284,8 +2324,10 @@ function init() {
   createNumber,
   createString,
   createTimingConfig,
+  dispatchScrollInteraction,
   extractBoolean,
   extractExcludedBreakpoints,
+  extractScrollOverlayParams,
   extractSize,
   extractString,
   formatSizeValue,
@@ -2297,6 +2339,7 @@ function init() {
   parseSizeValue,
   registerInteractionsControl,
   resolveDirection,
+  syncGridOverlay,
   useElementInteractions
 });
 //# sourceMappingURL=index.js.map