@elementor/editor-interactions 4.0.0-659 → 4.0.0-661

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { RefObject, ComponentType } from 'react';
 import { Unit } from '@elementor/editor-controls';
-import { ElementInteractions, InteractionItemPropValue, AnimationPresetPropValue, BooleanPropValue, ConfigPropValue, ExcludedBreakpointsPropValue, InteractionBreakpointsPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue } from '@elementor/editor-elements';
+import { ElementInteractions, InteractionItemPropValue, AnimationPresetPropValue, BooleanPropValue, ConfigPropValue, ExcludedBreakpointsPropValue, InteractionBreakpointsPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue, ElementID } from '@elementor/editor-elements';
 export { InteractionItemPropValue } from '@elementor/editor-elements';
 import { PropValue, SizePropValue } from '@elementor/editor-props';
 
@@ -205,4 +205,6 @@ type SizeUnit = SizeValue['unit'];
 declare const parseSizeValue: (value: SizeStringValue, allowedUnits: SizeUnit[], defaultValue?: SizeStringValue, defaultUnit?: Unit) => SizeValue;
 declare const formatSizeValue: ({ size, unit }: SizeValue) => SizeStringValue;
 
-export { BASE_EASINGS, BASE_EFFECTS, BASE_REPLAY, BASE_TRIGGERS, type CreateInteractionsProviderOptions, EASING_OPTIONS, EFFECT_OPTIONS, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, EmptyState, type FieldProps, InteractionsTab, 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 };
+declare const useElementInteractions: (elementId: ElementID) => ElementInteractions;
+
+export { BASE_EASINGS, BASE_EFFECTS, BASE_REPLAY, BASE_TRIGGERS, type CreateInteractionsProviderOptions, EASING_OPTIONS, EFFECT_OPTIONS, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, EmptyState, type FieldProps, InteractionsTab, 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 };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { RefObject, ComponentType } from 'react';
 import { Unit } from '@elementor/editor-controls';
-import { ElementInteractions, InteractionItemPropValue, AnimationPresetPropValue, BooleanPropValue, ConfigPropValue, ExcludedBreakpointsPropValue, InteractionBreakpointsPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue } from '@elementor/editor-elements';
+import { ElementInteractions, InteractionItemPropValue, AnimationPresetPropValue, BooleanPropValue, ConfigPropValue, ExcludedBreakpointsPropValue, InteractionBreakpointsPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue, ElementID } from '@elementor/editor-elements';
 export { InteractionItemPropValue } from '@elementor/editor-elements';
 import { PropValue, SizePropValue } from '@elementor/editor-props';
 
@@ -205,4 +205,6 @@ type SizeUnit = SizeValue['unit'];
 declare const parseSizeValue: (value: SizeStringValue, allowedUnits: SizeUnit[], defaultValue?: SizeStringValue, defaultUnit?: Unit) => SizeValue;
 declare const formatSizeValue: ({ size, unit }: SizeValue) => SizeStringValue;
 
-export { BASE_EASINGS, BASE_EFFECTS, BASE_REPLAY, BASE_TRIGGERS, type CreateInteractionsProviderOptions, EASING_OPTIONS, EFFECT_OPTIONS, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, EmptyState, type FieldProps, InteractionsTab, 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 };
+declare const useElementInteractions: (elementId: ElementID) => ElementInteractions;
+
+export { BASE_EASINGS, BASE_EFFECTS, BASE_REPLAY, BASE_TRIGGERS, type CreateInteractionsProviderOptions, EASING_OPTIONS, EFFECT_OPTIONS, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, EmptyState, type FieldProps, InteractionsTab, 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 };

package/dist/index.js

@@ -67,7 +67,8 @@ __export(index_exports, {
   isTempId: () => isTempId,
   parseSizeValue: () => parseSizeValue,
   registerInteractionsControl: () => registerInteractionsControl,
-  resolveDirection: () => resolveDirection
+  resolveDirection: () => resolveDirection,
+  useElementInteractions: () => useElementInteractions
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -99,35 +100,56 @@ var EmptyState = ({ onCreateInteraction }) => {
 
 // src/components/interactions-tab.tsx
 var React11 = __toESM(require("react"));
-var import_react9 = require("react");
-var import_editor_elements2 = require("@elementor/editor-elements");
+var import_react10 = require("react");
 var import_session = require("@elementor/session");
 var import_ui7 = require("@elementor/ui");
 
 // src/contexts/interactions-context.tsx
 var React2 = __toESM(require("react"));
+var import_react2 = require("react");
+var import_editor_elements2 = require("@elementor/editor-elements");
+
+// src/hooks/use-element-interactions.ts
 var import_react = require("react");
 var import_editor_elements = require("@elementor/editor-elements");
-var InteractionsContext = (0, import_react.createContext)(null);
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var useElementInteractions = (elementId) => {
+  const [interactions, setInteractions] = (0, import_react.useState)(() => {
+    const initial = (0, import_editor_elements.getElementInteractions)(elementId);
+    return initial ?? { version: 1, items: [] };
+  });
+  (0, import_editor_v1_adapters.__privateUseListenTo)(
+    (0, import_editor_v1_adapters.windowEvent)("elementor/element/update_interactions"),
+    () => {
+      const newInteractions = (0, import_editor_elements.getElementInteractions)(elementId);
+      setInteractions(newInteractions ?? { version: 1, items: [] });
+    },
+    [elementId]
+  );
+  return interactions;
+};
+
+// src/contexts/interactions-context.tsx
+var InteractionsContext = (0, import_react2.createContext)(null);
 var DEFAULT_INTERACTIONS = {
   version: 1,
   items: []
 };
 var InteractionsProvider = ({ children, elementId }) => {
-  const rawInteractions = (0, import_editor_elements.useElementInteractions)(elementId);
-  (0, import_react.useEffect)(() => {
+  const rawInteractions = useElementInteractions(elementId);
+  (0, import_react2.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;
-    (0, import_editor_elements.updateElementInteractions)({
+    (0, import_editor_elements2.updateElementInteractions)({
       elementId,
       interactions: normalizedValue
     });
   };
   const playInteractions = (interactionId) => {
-    (0, import_editor_elements.playElementInteractions)(elementId, interactionId);
+    (0, import_editor_elements2.playElementInteractions)(elementId, interactionId);
   };
   const contextValue = {
     interactions,
@@ -137,7 +159,7 @@ var InteractionsProvider = ({ children, elementId }) => {
   return /* @__PURE__ */ React2.createElement(InteractionsContext.Provider, { value: contextValue }, children);
 };
 var useInteractionsContext = () => {
-  const context = (0, import_react.useContext)(InteractionsContext);
+  const context = (0, import_react2.useContext)(InteractionsContext);
   if (!context) {
     throw new Error("useInteractionsContext must be used within InteractionsProvider");
   }
@@ -146,14 +168,14 @@ var useInteractionsContext = () => {
 
 // src/contexts/popup-state-context.tsx
 var React3 = __toESM(require("react"));
-var import_react2 = require("react");
-var PopupStateContext = (0, import_react2.createContext)(void 0);
+var import_react3 = require("react");
+var PopupStateContext = (0, import_react3.createContext)(void 0);
 var PopupStateProvider = ({ children }) => {
-  const [openByDefault, setOpenByDefault] = (0, import_react2.useState)(false);
-  const triggerDefaultOpen = (0, import_react2.useCallback)(() => {
+  const [openByDefault, setOpenByDefault] = (0, import_react3.useState)(false);
+  const triggerDefaultOpen = (0, import_react3.useCallback)(() => {
     setOpenByDefault(true);
   }, []);
-  const resetDefaultOpen = (0, import_react2.useCallback)(() => {
+  const resetDefaultOpen = (0, import_react3.useCallback)(() => {
     setOpenByDefault(false);
   }, []);
   return /* @__PURE__ */ React3.createElement(PopupStateContext.Provider, { value: { openByDefault, triggerDefaultOpen, resetDefaultOpen } }, children);
@@ -161,7 +183,7 @@ var PopupStateProvider = ({ children }) => {
 
 // src/components/interactions-list.tsx
 var React10 = __toESM(require("react"));
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_editor_controls5 = require("@elementor/editor-controls");
 var import_icons2 = require("@elementor/icons");
 var import_ui6 = require("@elementor/ui");
@@ -169,8 +191,8 @@ var import_i18n5 = require("@wordpress/i18n");
 
 // src/contexts/interactions-item-context.tsx
 var React4 = __toESM(require("react"));
-var import_react3 = require("react");
-var InteractionItemContext = (0, import_react3.createContext)(null);
+var import_react4 = require("react");
+var InteractionItemContext = (0, import_react4.createContext)(null);
 function InteractionItemContextProvider({
   value,
   children
@@ -178,7 +200,7 @@ function InteractionItemContextProvider({
   return /* @__PURE__ */ React4.createElement(InteractionItemContext.Provider, { value }, children);
 }
 function useInteractionItemContext() {
-  const context = (0, import_react3.useContext)(InteractionItemContext);
+  const context = (0, import_react4.useContext)(InteractionItemContext);
   if (!context) {
     throw new Error("useInteractionItemContext must be used within InteractionItemContextProvider");
   }
@@ -440,13 +462,13 @@ var buildDisplayLabel = (item) => {
 
 // src/components/interactions-list-item.tsx
 var React9 = __toESM(require("react"));
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_ui5 = require("@elementor/ui");
 var import_i18n4 = require("@wordpress/i18n");
 
 // src/components/interaction-details.tsx
 var React7 = __toESM(require("react"));
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_editor_controls3 = require("@elementor/editor-controls");
 var import_ui3 = require("@elementor/ui");
 var import_i18n2 = require("@wordpress/i18n");
@@ -480,7 +502,7 @@ var resolveDirection = (hasDirection, newEffect, newDirection, currentDirection,
 
 // src/components/controls/time-frame-indicator.tsx
 var React5 = __toESM(require("react"));
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_editor_controls = require("@elementor/editor-controls");
 
 // src/utils/time-conversion.ts
@@ -499,8 +521,8 @@ function TimeFrameIndicator({
   defaultValue
 }) {
   const sizeValue = parseSizeValue(value, TIME_UNITS, defaultValue, DEFAULT_TIME_UNIT);
-  const prevUnitRef = (0, import_react4.useRef)(sizeValue.unit);
-  const setValue = (0, import_react4.useCallback)(
+  const prevUnitRef = (0, import_react5.useRef)(sizeValue.unit);
+  const setValue = (0, import_react5.useCallback)(
     (size) => {
       const unitChanged = prevUnitRef.current !== size.unit;
       if (unitChanged) {
@@ -589,7 +611,7 @@ function normalizeTimesValue(value, fallback) {
   return Math.max(1, Math.floor(numericValue));
 }
 function useControlComponent(controlName, isVisible = true) {
-  return (0, import_react5.useMemo)(() => {
+  return (0, import_react6.useMemo)(() => {
     if (!isVisible) {
       return null;
     }
@@ -655,7 +677,7 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     controlVisibilityConfig.times(interactionValues)
   );
   const EasingControl = useControlComponent("easing");
-  const containerRef = (0, import_react5.useRef)(null);
+  const containerRef = (0, import_react6.useRef)(null);
   const updateInteraction = (updates) => {
     const resolvedDirectionValue = resolveDirection(
       "direction" in updates,
@@ -770,7 +792,7 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
 
 // src/components/interaction-settings.tsx
 var React8 = __toESM(require("react"));
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_editor_controls4 = require("@elementor/editor-controls");
 var import_editor_responsive = require("@elementor/editor-responsive");
 var import_ui4 = require("@elementor/ui");
@@ -778,11 +800,11 @@ var import_i18n3 = require("@wordpress/i18n");
 var SIZE = "tiny";
 var InteractionSettings = ({ interaction, onChange }) => {
   const breakpoints = (0, import_editor_responsive.useBreakpoints)();
-  const availableBreakpoints = (0, import_react6.useMemo)(
+  const availableBreakpoints = (0, import_react7.useMemo)(
     () => breakpoints.map((breakpoint) => ({ label: breakpoint.label, value: String(breakpoint.id) })),
     [breakpoints]
   );
-  const [selectedBreakpoints, setSelectedBreakpoints] = (0, import_react6.useState)(() => {
+  const [selectedBreakpoints, setSelectedBreakpoints] = (0, import_react7.useState)(() => {
     const excluded = extractExcludedBreakpoints(interaction.breakpoints).filter((excludedBreakpoint) => {
       return availableBreakpoints.some(({ value }) => value === excludedBreakpoint);
     });
@@ -790,7 +812,7 @@ var InteractionSettings = ({ interaction, onChange }) => {
       return !excluded.includes(value);
     });
   });
-  const handleBreakpointChange = (0, import_react6.useCallback)(
+  const handleBreakpointChange = (0, import_react7.useCallback)(
     (_, newValue) => {
       setSelectedBreakpoints(newValue);
       const selectedValues = newValue.map((option) => option.value);
@@ -834,13 +856,13 @@ var InteractionsListItem = ({
 }) => {
   const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui5.useTabs)("details");
   const context = useInteractionItemContext();
-  const handleChange = (0, import_react7.useCallback)(
+  const handleChange = (0, import_react8.useCallback)(
     (newInteractionValue) => {
       context?.onInteractionChange(index, newInteractionValue);
     },
     [context, index]
   );
-  const handlePlayInteraction = (0, import_react7.useCallback)(
+  const handlePlayInteraction = (0, import_react8.useCallback)(
     (interactionId2) => {
       context?.onPlayInteraction(interactionId2);
     },
@@ -879,14 +901,14 @@ var InteractionsListItem = ({
 var MAX_NUMBER_OF_INTERACTIONS = 5;
 function InteractionsList(props) {
   const { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;
-  const hasInitializedRef = (0, import_react8.useRef)(false);
-  const handleUpdateInteractions = (0, import_react8.useCallback)(
+  const hasInitializedRef = (0, import_react9.useRef)(false);
+  const handleUpdateInteractions = (0, import_react9.useCallback)(
     (newInteractions) => {
       onSelectInteractions(newInteractions);
     },
     [onSelectInteractions]
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (triggerCreateOnShowEmpty && !hasInitializedRef.current && (!interactions.items || interactions.items?.length === 0)) {
       hasInitializedRef.current = true;
       const newState = {
@@ -896,14 +918,14 @@ function InteractionsList(props) {
       handleUpdateInteractions(newState);
     }
   }, [triggerCreateOnShowEmpty, interactions.items, handleUpdateInteractions]);
-  const isMaxNumberOfInteractionsReached = (0, import_react8.useMemo)(() => {
+  const isMaxNumberOfInteractionsReached = (0, import_react9.useMemo)(() => {
     return interactions.items?.length >= MAX_NUMBER_OF_INTERACTIONS;
   }, [interactions.items?.length]);
   const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React10.createElement(import_ui6.Alert, { color: "secondary", icon: /* @__PURE__ */ React10.createElement(import_icons2.InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React10.createElement(import_ui6.AlertTitle, null, (0, import_i18n5.__)("Interactions", "elementor")), /* @__PURE__ */ React10.createElement(import_ui6.Box, { component: "span" }, (0, import_i18n5.__)(
     "You've reached the limit of 5 interactions for this element. Please remove an interaction before creating a new one.",
     "elementor"
   ))) : void 0;
-  const handleRepeaterChange = (0, import_react8.useCallback)(
+  const handleRepeaterChange = (0, import_react9.useCallback)(
     (newItems) => {
       handleUpdateInteractions({
         ...interactions,
@@ -912,7 +934,7 @@ function InteractionsList(props) {
     },
     [interactions, handleUpdateInteractions]
   );
-  const handleInteractionChange = (0, import_react8.useCallback)(
+  const handleInteractionChange = (0, import_react9.useCallback)(
     (index, newInteractionValue) => {
       const newItems = structuredClone(interactions.items);
       newItems[index] = {
@@ -926,7 +948,7 @@ function InteractionsList(props) {
     },
     [interactions, handleUpdateInteractions]
   );
-  const contextValue = (0, import_react8.useMemo)(
+  const contextValue = (0, import_react9.useMemo)(
     () => ({
       onInteractionChange: handleInteractionChange,
       onPlayInteraction
@@ -970,8 +992,8 @@ var InteractionsTab = ({ elementId }) => {
   return /* @__PURE__ */ React11.createElement(PopupStateProvider, null, /* @__PURE__ */ React11.createElement(InteractionsTabContent, { elementId }));
 };
 function InteractionsTabContent({ elementId }) {
-  const existingInteractions = (0, import_editor_elements2.useElementInteractions)(elementId);
-  const firstInteractionState = (0, import_react9.useState)(false);
+  const existingInteractions = useElementInteractions(elementId);
+  const firstInteractionState = (0, import_react10.useState)(false);
   const hasInteractions = existingInteractions?.items?.length || firstInteractionState[0];
   return /* @__PURE__ */ React11.createElement(import_session.SessionStorageProvider, { prefix: elementId }, hasInteractions ? /* @__PURE__ */ React11.createElement(InteractionsProvider, { elementId }, /* @__PURE__ */ React11.createElement(InteractionsContent, { firstInteractionState })) : /* @__PURE__ */ React11.createElement(
     EmptyState,
@@ -986,7 +1008,7 @@ function InteractionsContent({
   firstInteractionState
 }) {
   const { interactions, setInteractions, playInteractions } = useInteractionsContext();
-  const applyInteraction = (0, import_react9.useCallback)(
+  const applyInteraction = (0, import_react10.useCallback)(
     (newInteractions) => {
       firstInteractionState[1](false);
       if (!newInteractions) {
@@ -1069,7 +1091,7 @@ function createInteractionsProvider({
 
 // src/providers/document-elements-interactions-provider.ts
 var import_editor_elements3 = require("@elementor/editor-elements");
-var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX = "document-elements-interactions-";
 var documentElementsInteractionsProvider = createInteractionsProvider({
   key: () => {
@@ -1083,7 +1105,7 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
   },
   priority: 50,
   subscribe: (cb) => {
-    return (0, import_editor_v1_adapters.__privateListenTo)([(0, import_editor_v1_adapters.windowEvent)("elementor/element/update_interactions")], () => cb());
+    return (0, import_editor_v1_adapters2.__privateListenTo)([(0, import_editor_v1_adapters2.windowEvent)("elementor/element/update_interactions")], () => cb());
   },
   actions: {
     all: () => {
@@ -1109,12 +1131,12 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
 
 // src/components/controls/direction.tsx
 var React12 = __toESM(require("react"));
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_editor_controls6 = require("@elementor/editor-controls");
 var import_icons3 = require("@elementor/icons");
 var import_i18n6 = require("@wordpress/i18n");
 function Direction({ value, onChange, interactionType }) {
-  const options = (0, import_react10.useMemo)(() => {
+  const options = (0, import_react11.useMemo)(() => {
     const isIn = interactionType === "in";
     return [
       {
@@ -1152,23 +1174,23 @@ var import_i18n9 = require("@wordpress/i18n");
 
 // src/ui/promotion-select.tsx
 var React14 = __toESM(require("react"));
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_ui9 = require("@elementor/ui");
 var import_i18n8 = require("@wordpress/i18n");
 
 // src/ui/interactions-promotion-chip.tsx
 var React13 = __toESM(require("react"));
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_editor_ui = require("@elementor/editor-ui");
 var import_ui8 = require("@elementor/ui");
 var import_i18n7 = require("@wordpress/i18n");
-var InteractionsPromotionChip = (0, import_react11.forwardRef)(
+var InteractionsPromotionChip = (0, import_react12.forwardRef)(
   ({ content, upgradeUrl, anchorRef }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
+    const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
     (0, import_editor_ui.useCanvasClickHandler)(isOpen, () => setIsOpen(false));
     const toggle = () => setIsOpen((prev) => !prev);
-    (0, import_react11.useImperativeHandle)(ref, () => ({ toggle }), []);
+    (0, import_react12.useImperativeHandle)(ref, () => ({ toggle }), []);
     const handleToggle = (e) => {
       e.stopPropagation();
       toggle();
@@ -1212,8 +1234,8 @@ function PromotionSelect({
   promotionContent,
   upgradeUrl
 }) {
-  const promotionRef = (0, import_react12.useRef)(null);
-  const anchorRef = (0, import_react12.useRef)(null);
+  const promotionRef = (0, import_react13.useRef)(null);
+  const anchorRef = (0, import_react13.useRef)(null);
   return /* @__PURE__ */ React14.createElement(
     import_ui9.Select,
     {
@@ -1416,9 +1438,9 @@ function Trigger({ value, onChange }) {
 
 // src/hooks/on-duplicate.ts
 var import_editor_elements4 = require("@elementor/editor-elements");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 function initCleanInteractionIdsOnDuplicate() {
-  (0, import_editor_v1_adapters2.registerDataHook)("after", "document/elements/duplicate", (_args, result) => {
+  (0, import_editor_v1_adapters3.registerDataHook)("after", "document/elements/duplicate", (_args, result) => {
     const containers = Array.isArray(result) ? result : [result];
     containers.forEach((container) => {
       cleanInteractionIdsRecursive(container.id);
@@ -1830,6 +1852,7 @@ function init() {
   isTempId,
   parseSizeValue,
   registerInteractionsControl,
-  resolveDirection
+  resolveDirection,
+  useElementInteractions
 });
 //# sourceMappingURL=index.js.map