@elementor/editor-interactions 4.0.0-679 → 4.0.0-680

package/dist/index.mjs

@@ -42,74 +42,22 @@ import {
 import { useState } from "react";
 import { getElementInteractions } from "@elementor/editor-elements";
 import { __privateUseListenTo as useListenTo, windowEvent } from "@elementor/editor-v1-adapters";
-var useElementInteractions = (elementId) => {
-  const [interactions, setInteractions] = useState(() => {
-    const initial = getElementInteractions(elementId);
-    return initial ?? { version: 1, items: [] };
-  });
-  useListenTo(
-    windowEvent("elementor/element/update_interactions"),
-    () => {
-      const newInteractions = getElementInteractions(elementId);
-      setInteractions(newInteractions ?? { version: 1, items: [] });
-    },
-    [elementId]
-  );
-  return interactions;
-};
 
-// src/contexts/interactions-context.tsx
-var InteractionsContext = createContext(null);
-var DEFAULT_INTERACTIONS = {
-  version: 1,
-  items: []
-};
-var InteractionsProvider = ({ children, elementId }) => {
-  const rawInteractions = useElementInteractions(elementId);
-  useEffect(() => {
-    window.dispatchEvent(new CustomEvent("elementor/element/update_interactions"));
-  }, []);
-  const interactions = rawInteractions ?? DEFAULT_INTERACTIONS;
-  const setInteractions = (value) => {
-    const normalizedValue = value && value.items?.length === 0 ? void 0 : value;
-    updateElementInteractions({
-      elementId,
-      interactions: normalizedValue
-    });
-  };
-  const playInteractions = (interactionId) => {
-    playElementInteractions(elementId, interactionId);
-  };
-  const contextValue = {
-    elementId,
-    interactions,
-    setInteractions,
-    playInteractions
-  };
-  return /* @__PURE__ */ React2.createElement(InteractionsContext.Provider, { value: contextValue }, children);
-};
-var useInteractionsContext = () => {
-  const context = useContext(InteractionsContext);
-  if (!context) {
-    throw new Error("useInteractionsContext must be used within InteractionsProvider");
-  }
-  return context;
-};
-
-// src/contexts/popup-state-context.tsx
-import * as React3 from "react";
-import { createContext as createContext2, useCallback, useContext as useContext2, useState as useState2 } from "react";
-var PopupStateContext = createContext2(void 0);
-var PopupStateProvider = ({ children }) => {
-  const [openByDefault, setOpenByDefault] = useState2(false);
-  const triggerDefaultOpen = useCallback(() => {
-    setOpenByDefault(true);
-  }, []);
-  const resetDefaultOpen = useCallback(() => {
-    setOpenByDefault(false);
-  }, []);
-  return /* @__PURE__ */ React3.createElement(PopupStateContext.Provider, { value: { openByDefault, triggerDefaultOpen, resetDefaultOpen } }, children);
-};
+// src/interactions-controls-registry.ts
+var controlsRegistry = /* @__PURE__ */ new Map();
+function registerInteractionsControl({
+  type,
+  component,
+  options
+}) {
+  controlsRegistry.set(type, { type, component, options });
+}
+function getInteractionsControl(type) {
+  return controlsRegistry.get(type);
+}
+function getInteractionsControlOptions(type) {
+  return controlsRegistry.get(type)?.options ?? [];
+}
 
 // src/utils/prop-value-utils.ts
 import { sizePropTypeUtil } from "@elementor/editor-props";
@@ -364,6 +312,115 @@ var buildDisplayLabel = (item) => {
   return `${triggerLabel}: ${effectLabel} ${typeLabel}`;
 };
 
+// src/utils/is-supported-interaction-item.ts
+function isSupportedInteractionItem(interaction) {
+  const value = interaction.value;
+  const replay = extractBoolean(value.animation.value.config?.value.replay);
+  if (true === replay) {
+    return hasSupport("replay", "yes");
+  }
+  const trigger = extractString(value.trigger);
+  const easing = extractString(value.animation.value.config?.value.easing);
+  const effect = extractString(value.animation.value.effect);
+  const checks = [
+    ["trigger", trigger],
+    ["easing", easing],
+    ["effect", effect]
+  ];
+  return checks.every(([controlType, controlValue]) => {
+    if (controlValue === "" || controlValue === null) {
+      return true;
+    }
+    return hasSupport(controlType, controlValue);
+  });
+}
+function hasSupport(controlType, controlValue) {
+  const supportedOptions = getInteractionsControlOptions(controlType);
+  if (1 > supportedOptions.length) {
+    return true;
+  }
+  return supportedOptions.includes(controlValue);
+}
+
+// src/utils/filter-interactions.ts
+var filterInteractions = (interactions) => {
+  return interactions.filter((interaction) => {
+    return isSupportedInteractionItem(interaction);
+  });
+};
+
+// src/hooks/use-element-interactions.ts
+var useElementInteractions = (elementId) => {
+  const [interactions, setInteractions] = useState(() => {
+    const initial = getElementInteractions(elementId);
+    const filteredInteractions = filterInteractions(initial?.items ?? []);
+    return { version: initial?.version ?? 1, items: filteredInteractions };
+  });
+  useListenTo(
+    windowEvent("elementor/element/update_interactions"),
+    () => {
+      const newInteractions = getElementInteractions(elementId);
+      const filteredInteractions = filterInteractions(newInteractions?.items ?? []);
+      setInteractions({ version: newInteractions?.version ?? 1, items: filteredInteractions });
+    },
+    [elementId]
+  );
+  return interactions;
+};
+
+// src/contexts/interactions-context.tsx
+var InteractionsContext = createContext(null);
+var DEFAULT_INTERACTIONS = {
+  version: 1,
+  items: []
+};
+var InteractionsProvider = ({ children, elementId }) => {
+  const rawInteractions = useElementInteractions(elementId);
+  useEffect(() => {
+    window.dispatchEvent(new CustomEvent("elementor/element/update_interactions"));
+  }, []);
+  const interactions = rawInteractions ?? DEFAULT_INTERACTIONS;
+  const setInteractions = (value) => {
+    const normalizedValue = value && value.items?.length === 0 ? void 0 : value;
+    updateElementInteractions({
+      elementId,
+      interactions: normalizedValue
+    });
+  };
+  const playInteractions = (interactionId) => {
+    playElementInteractions(elementId, interactionId);
+  };
+  const contextValue = {
+    elementId,
+    interactions,
+    setInteractions,
+    playInteractions
+  };
+  return /* @__PURE__ */ React2.createElement(InteractionsContext.Provider, { value: contextValue }, children);
+};
+var useInteractionsContext = () => {
+  const context = useContext(InteractionsContext);
+  if (!context) {
+    throw new Error("useInteractionsContext must be used within InteractionsProvider");
+  }
+  return context;
+};
+
+// src/contexts/popup-state-context.tsx
+import * as React3 from "react";
+import { createContext as createContext2, useCallback, useContext as useContext2, useState as useState2 } from "react";
+var PopupStateContext = createContext2(void 0);
+var PopupStateProvider = ({ children }) => {
+  const [openByDefault, setOpenByDefault] = useState2(false);
+  const triggerDefaultOpen = useCallback(() => {
+    setOpenByDefault(true);
+  }, []);
+  const resetDefaultOpen = useCallback(() => {
+    setOpenByDefault(false);
+  }, []);
+  return /* @__PURE__ */ React3.createElement(PopupStateContext.Provider, { value: { openByDefault, triggerDefaultOpen, resetDefaultOpen } }, children);
+};
+
 // src/utils/tracking.ts
 import { getElementLabel } from "@elementor/editor-elements";
 import { getMixpanel } from "@elementor/events";
@@ -438,19 +495,6 @@ import { PopoverContent } from "@elementor/editor-controls";
 import { Box, Divider, Grid as Grid2 } from "@elementor/ui";
 import { __ as __2 } from "@wordpress/i18n";
 
-// src/interactions-controls-registry.ts
-var controlsRegistry = /* @__PURE__ */ new Map();
-function registerInteractionsControl({
-  type,
-  component,
-  options
-}) {
-  controlsRegistry.set(type, { type, component, options });
-}
-function getInteractionsControl(type) {
-  return controlsRegistry.get(type);
-}
-
 // src/utils/resolve-direction.ts
 var resolveDirection = (hasDirection, newEffect, newDirection, currentDirection, currentEffect) => {
   if (newEffect === "slide" && !newDirection) {
@@ -1892,7 +1936,7 @@ function init() {
     registerInteractionsControl({
       type: "replay",
       component: Replay,
-      options: ["true", "false"]
+      options: ["no"]
     });
     registerInteractionsControl({
       type: "effectType",