@elementor/editor-interactions 3.33.0-284 → 3.33.0-286

package/dist/index.js

@@ -125,7 +125,7 @@ var PopupStateProvider = ({ children }) => {
 // src/components/interactions-list.tsx
 var React10 = __toESM(require("react"));
 var import_react4 = require("react");
-var import_editor_controls3 = require("@elementor/editor-controls");
+var import_editor_controls7 = require("@elementor/editor-controls");
 var import_icons3 = require("@elementor/icons");
 var import_ui8 = require("@elementor/ui");
 var import_i18n8 = require("@wordpress/i18n");
@@ -147,6 +147,7 @@ function getInteractionsConfig() {
 
 // src/components/interaction-details.tsx
 var React9 = __toESM(require("react"));
+var import_editor_controls6 = require("@elementor/editor-controls");
 var import_ui7 = require("@elementor/ui");
 var import_i18n7 = require("@wordpress/i18n");
 
@@ -187,11 +188,12 @@ function Direction({ value, onChange, interactionType }) {
       }
     ];
   }, [interactionType]);
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(import_ui2.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React4.createElement(import_ui2.Typography, { variant: "caption", color: "text.secondary" }, (0, import_i18n2.__)("Direction", "elementor"))), /* @__PURE__ */ React4.createElement(import_ui2.Grid, { item: true, xs: 12, md: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React4.createElement(import_editor_controls.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value })));
+  return /* @__PURE__ */ React4.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React4.createElement(import_editor_controls.PopoverGridContainer, null, /* @__PURE__ */ React4.createElement(import_ui2.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React4.createElement(import_editor_controls.ControlFormLabel, null, " ", (0, import_i18n2.__)("Direction", "elementor"))), /* @__PURE__ */ React4.createElement(import_ui2.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React4.createElement(import_editor_controls.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value }))));
 }
 
 // src/components/controls/effect.tsx
 var React5 = __toESM(require("react"));
+var import_editor_controls2 = require("@elementor/editor-controls");
 var import_editor_ui = require("@elementor/editor-ui");
 var import_ui3 = require("@elementor/ui");
 var import_i18n3 = require("@wordpress/i18n");
@@ -201,7 +203,7 @@ function Effect({ value, onChange }) {
     { key: "slide", label: (0, import_i18n3.__)("Slide", "elementor") },
     { key: "scale", label: (0, import_i18n3.__)("Scale", "elementor") }
   ];
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(import_ui3.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React5.createElement(import_ui3.Typography, { variant: "caption", color: "text.secondary" }, (0, import_i18n3.__)("Effect", "elementor"))), /* @__PURE__ */ React5.createElement(import_ui3.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React5.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React5.createElement(import_editor_controls2.PopoverGridContainer, null, /* @__PURE__ */ React5.createElement(import_ui3.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React5.createElement(import_editor_controls2.ControlFormLabel, null, (0, import_i18n3.__)("Effect", "elementor"))), /* @__PURE__ */ React5.createElement(import_ui3.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React5.createElement(
     import_ui3.Select,
     {
       fullWidth: true,
@@ -213,12 +215,12 @@ function Effect({ value, onChange }) {
     availableEffects.map((effect) => {
       return /* @__PURE__ */ React5.createElement(import_editor_ui.MenuListItem, { key: effect.key, value: effect.key }, effect.label);
     })
-  )));
+  ))));
 }
 
 // src/components/controls/effect-type.tsx
 var React6 = __toESM(require("react"));
-var import_editor_controls2 = require("@elementor/editor-controls");
+var import_editor_controls3 = require("@elementor/editor-controls");
 var import_ui4 = require("@elementor/ui");
 var import_i18n4 = require("@wordpress/i18n");
 function EffectType({ value, onChange }) {
@@ -234,11 +236,12 @@ function EffectType({ value, onChange }) {
       renderContent: () => (0, import_i18n4.__)("Out", "elementor")
     }
   ];
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(import_ui4.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React6.createElement(import_ui4.Typography, { variant: "caption", color: "text.secondary" }, (0, import_i18n4.__)("Type", "elementor"))), /* @__PURE__ */ React6.createElement(import_ui4.Grid, { item: true, xs: 12, md: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React6.createElement(import_editor_controls2.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value })));
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React6.createElement(import_editor_controls3.PopoverGridContainer, null, /* @__PURE__ */ React6.createElement(import_ui4.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React6.createElement(import_editor_controls3.ControlFormLabel, null, (0, import_i18n4.__)("Type", "elementor"))), /* @__PURE__ */ React6.createElement(import_ui4.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React6.createElement(import_editor_controls3.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value })))));
 }
 
 // src/components/controls/time-frame-indicator.tsx
 var React7 = __toESM(require("react"));
+var import_editor_controls4 = require("@elementor/editor-controls");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_ui5 = require("@elementor/ui");
 var import_i18n5 = require("@wordpress/i18n");
@@ -250,7 +253,7 @@ function TimeFrameIndicator({ value, onChange, label }) {
       label: (0, import_i18n5.__)("%s MS", "elementor").replace("%s", key)
     })
   );
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(import_ui5.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React7.createElement(import_ui5.Typography, { variant: "caption", color: "text.secondary" }, label)), /* @__PURE__ */ React7.createElement(import_ui5.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React7.createElement(import_editor_controls4.PopoverGridContainer, null, /* @__PURE__ */ React7.createElement(import_ui5.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React7.createElement(import_editor_controls4.ControlFormLabel, null, label)), /* @__PURE__ */ React7.createElement(import_ui5.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React7.createElement(
     import_ui5.Select,
     {
       fullWidth: true,
@@ -262,11 +265,12 @@ function TimeFrameIndicator({ value, onChange, label }) {
     availableTimeFrames.map((timeFrame) => {
       return /* @__PURE__ */ React7.createElement(import_editor_ui2.MenuListItem, { key: timeFrame.key, value: timeFrame.key }, timeFrame.label);
     })
-  )));
+  ))));
 }
 
 // src/components/controls/trigger.tsx
 var React8 = __toESM(require("react"));
+var import_editor_controls5 = require("@elementor/editor-controls");
 var import_editor_ui3 = require("@elementor/editor-ui");
 var import_ui6 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
@@ -279,7 +283,7 @@ function Trigger({ value, onChange }) {
     key,
     label
   }));
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(import_ui6.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React8.createElement(import_ui6.Typography, { variant: "caption", color: "text.secondary" }, (0, import_i18n6.__)("Trigger", "elementor"))), /* @__PURE__ */ React8.createElement(import_ui6.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React8.createElement(import_ui6.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(import_editor_controls5.PopoverGridContainer, null, /* @__PURE__ */ React8.createElement(import_ui6.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(import_editor_controls5.ControlFormLabel, null, (0, import_i18n6.__)("Trigger", "elementor"))), /* @__PURE__ */ React8.createElement(import_ui6.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(
     import_ui6.Select,
     {
       fullWidth: true,
@@ -291,7 +295,7 @@ function Trigger({ value, onChange }) {
     availableTriggers.map((trigger) => {
       return /* @__PURE__ */ React8.createElement(import_editor_ui3.MenuListItem, { key: trigger.key, value: trigger.key }, trigger.label);
     })
-  )));
+  ))));
 }
 
 // src/components/interaction-details.tsx
@@ -331,7 +335,7 @@ var InteractionDetails = ({ interaction, onChange }) => {
     const newInteractionDetails = { ...interactionDetails, [key]: value };
     onChange(Object.values(newInteractionDetails).join(DELIMITER));
   };
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(import_ui7.Grid, { container: true, spacing: 2, sx: { p: 1.5 } }, /* @__PURE__ */ React9.createElement(Trigger, { value: interactionDetails.trigger, onChange: (v) => handleChange("trigger", v) })), /* @__PURE__ */ React9.createElement(import_ui7.Divider, { sx: { mx: 1.5 } }), /* @__PURE__ */ React9.createElement(import_ui7.Grid, { container: true, spacing: 2, sx: { p: 1.5 } }, /* @__PURE__ */ React9.createElement(Effect, { value: interactionDetails.effect, onChange: (v) => handleChange("effect", v) }), /* @__PURE__ */ React9.createElement(EffectType, { value: interactionDetails.type, onChange: (v) => handleChange("type", v) }), /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React9.createElement(import_editor_controls6.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React9.createElement(import_ui7.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React9.createElement(Trigger, { value: interactionDetails.trigger, onChange: (v) => handleChange("trigger", v) })), /* @__PURE__ */ React9.createElement(import_ui7.Divider, { sx: { mx: 1.5 } }), /* @__PURE__ */ React9.createElement(import_ui7.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React9.createElement(Effect, { value: interactionDetails.effect, onChange: (v) => handleChange("effect", v) }), /* @__PURE__ */ React9.createElement(EffectType, { value: interactionDetails.type, onChange: (v) => handleChange("type", v) }), /* @__PURE__ */ React9.createElement(
     Direction,
     {
       value: interactionDetails.direction,
@@ -390,7 +394,7 @@ function InteractionsList(props) {
     return option?.label || interactionForDisplay;
   };
   return /* @__PURE__ */ React10.createElement(
-    import_editor_controls3.Repeater,
+    import_editor_controls7.Repeater,
     {
       openOnAdd: true,
       openItem: triggerCreateOnShowEmpty ? 0 : void 0,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/empty-state.tsx","../src/components/interactions-tab.tsx","../src/contexts/interactions-context.tsx","../src/contexts/popup-state-context.tsx","../src/components/interactions-list.tsx","../src/utils/get-interactions-config.ts","../src/components/interaction-details.tsx","../src/components/controls/direction.tsx","../src/components/controls/effect.tsx","../src/components/controls/effect-type.tsx","../src/components/controls/time-frame-indicator.tsx","../src/components/controls/trigger.tsx","../src/utils/create-interactions-repository.ts","../src/interactions-repository.ts","../src/utils/create-interactions-provider.ts","../src/providers/document-elements-interactions-provider.ts","../src/init.ts"],"sourcesContent":["export * from './components/empty-state';\nexport * from './components/interactions-tab';\nexport * from './types';\nexport * from './utils/get-interactions-config';\n\nexport { interactionsRepository } from './interactions-repository';\nexport {\n\tcreateInteractionsProvider,\n\ttype CreateInteractionsProviderOptions,\n} from './utils/create-interactions-provider';\n\nexport { ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX } from './providers/document-elements-interactions-provider';\nexport { init } from './init';\n","import * as React from 'react';\nimport { SwipeIcon } from '@elementor/icons';\nimport { Button, Stack, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nexport const EmptyState = ( { onCreateInteraction }: { onCreateInteraction: () => void } ) => {\n\treturn (\n\t\t<Stack\n\t\t\talignItems=\"center\"\n\t\t\tjustifyContent=\"center\"\n\t\t\theight=\"100%\"\n\t\t\tcolor=\"text.secondary\"\n\t\t\tsx={ { p: 2.5, pt: 8, pb: 5.5 } }\n\t\t\tgap={ 1.5 }\n\t\t>\n\t\t\t<SwipeIcon fontSize=\"large\" />\n\n\t\t\t<Typography align=\"center\" variant=\"subtitle2\">\n\t\t\t\t{ __( 'Animate elements with Interactions', 'elementor' ) }\n\t\t\t</Typography>\n\n\t\t\t<Typography align=\"center\" variant=\"caption\" maxWidth=\"170px\">\n\t\t\t\t{ __(\n\t\t\t\t\t'Add entrance animations and effects triggered by user interactions such as page load or scroll.',\n\t\t\t\t\t'elementor'\n\t\t\t\t) }\n\t\t\t</Typography>\n\n\t\t\t<Button variant=\"outlined\" color=\"secondary\" size=\"small\" sx={ { mt: 1 } } onClick={ onCreateInteraction }>\n\t\t\t\t{ __( 'Create an interaction', 'elementor' ) }\n\t\t\t</Button>\n\t\t</Stack>\n\t);\n};\n","import * as React from 'react';\nimport { useCallback, useState } from 'react';\nimport { type ElementInteractions, useElementInteractions } from '@elementor/editor-elements';\nimport { SessionStorageProvider } from '@elementor/session';\nimport { Stack } from '@elementor/ui';\n\nimport { InteractionsProvider, useInteractionsContext } from '../contexts/interactions-context';\nimport { PopupStateProvider } from '../contexts/popup-state-context';\nimport { EmptyState } from './empty-state';\nimport { InteractionsList } from './interactions-list';\n\nexport const InteractionsTab = ( { elementId }: { elementId: string } ) => {\n\treturn (\n\t\t<PopupStateProvider>\n\t\t\t<InteractionsTabContent elementId={ elementId } />\n\t\t</PopupStateProvider>\n\t);\n};\n\nfunction InteractionsTabContent( { elementId }: { elementId: string } ) {\n\tconst existingInteractions = useElementInteractions( elementId );\n\tconst [ firstInteraction, setFirstInteraction ] = useState< boolean >( false );\n\tconst hasInteractions = existingInteractions?.items?.length || firstInteraction;\n\n\treturn (\n\t\t<SessionStorageProvider prefix={ elementId }>\n\t\t\t{ hasInteractions ? (\n\t\t\t\t<InteractionsProvider elementId={ elementId }>\n\t\t\t\t\t<InteractionsContent firstInteraction={ firstInteraction } />\n\t\t\t\t</InteractionsProvider>\n\t\t\t) : (\n\t\t\t\t<EmptyState\n\t\t\t\t\tonCreateInteraction={ () => {\n\t\t\t\t\t\tsetFirstInteraction( true );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</SessionStorageProvider>\n\t);\n}\n\nfunction InteractionsContent( { firstInteraction }: { firstInteraction: boolean } ) {\n\tconst { interactions, setInteractions, playInteractions } = useInteractionsContext();\n\n\tconst applyInteraction = useCallback(\n\t\t( newInteractions: ElementInteractions ) => {\n\t\t\tif ( ! newInteractions ) {\n\t\t\t\tsetInteractions( undefined );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetInteractions( newInteractions );\n\t\t},\n\t\t[ setInteractions ]\n\t);\n\n\treturn (\n\t\t<Stack sx={ { m: 1, p: 1.5 } } gap={ 2 }>\n\t\t\t<InteractionsList\n\t\t\t\ttriggerCreateOnShowEmpty={ firstInteraction }\n\t\t\t\tinteractions={ interactions }\n\t\t\t\tonSelectInteractions={ applyInteraction }\n\t\t\t\tonPlayInteraction={ playInteractions }\n\t\t\t/>\n\t\t</Stack>\n\t);\n}\n","import * as React from 'react';\nimport { createContext, type ReactNode, useContext, useEffect } from 'react';\nimport {\n\ttype ElementInteractions,\n\tplayElementInteractions,\n\tupdateElementInteractions,\n\tuseElementInteractions,\n} from '@elementor/editor-elements';\n\ntype InteractionsContextValue = {\n\tinteractions: ElementInteractions;\n\tsetInteractions: ( value: ElementInteractions | undefined ) => void;\n\tplayInteractions: ( animationId: string ) => void;\n};\n\nconst InteractionsContext = createContext< InteractionsContextValue | null >( null );\n\nexport const InteractionsProvider = ( { children, elementId }: { children: ReactNode; elementId: string } ) => {\n\tconst interactions = useElementInteractions( elementId );\n\n\tuseEffect( () => {\n\t\twindow.dispatchEvent( new CustomEvent( 'elementor/element/update_interactions' ) );\n\t}, [] );\n\n\tconst setInteractions = ( value: ElementInteractions | undefined ) => {\n\t\tupdateElementInteractions( {\n\t\t\telementId,\n\t\t\tinteractions: value,\n\t\t} );\n\t};\n\n\tconst playInteractions = ( animationId: string ) => {\n\t\tplayElementInteractions( elementId, animationId );\n\t};\n\n\tconst contextValue: InteractionsContextValue = {\n\t\tinteractions,\n\t\tsetInteractions,\n\t\tplayInteractions,\n\t};\n\n\treturn <InteractionsContext.Provider value={ contextValue }>{ children }</InteractionsContext.Provider>;\n};\n\nexport const useInteractionsContext = () => {\n\tconst context = useContext( InteractionsContext );\n\tif ( ! context ) {\n\t\tthrow new Error( 'useInteractionsContext must be used within InteractionsProvider' );\n\t}\n\treturn context;\n};\n","import * as React from 'react';\nimport { createContext, useCallback, useContext, useState } from 'react';\n\ntype PopupStateContextType = {\n\topenByDefault: boolean;\n\ttriggerDefaultOpen: () => void;\n\tresetDefaultOpen: () => void;\n};\n\nconst PopupStateContext = createContext< PopupStateContextType | undefined >( undefined );\n\nexport const PopupStateProvider = ( { children }: { children: React.ReactNode } ) => {\n\tconst [ openByDefault, setOpenByDefault ] = useState( false );\n\n\tconst triggerDefaultOpen = useCallback( () => {\n\t\tsetOpenByDefault( true );\n\t}, [] );\n\n\tconst resetDefaultOpen = useCallback( () => {\n\t\tsetOpenByDefault( false );\n\t}, [] );\n\n\treturn (\n\t\t<PopupStateContext.Provider value={ { openByDefault, triggerDefaultOpen, resetDefaultOpen } }>\n\t\t\t{ children }\n\t\t</PopupStateContext.Provider>\n\t);\n};\n\nexport const usePopupStateContext = () => {\n\tconst context = useContext( PopupStateContext );\n\tif ( ! context ) {\n\t\tthrow new Error( 'usePopupStateContext must be used within PopupStateProvider' );\n\t}\n\treturn context;\n};\n","import * as React from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { Repeater } from '@elementor/editor-controls';\nimport { type ElementInteractions } from '@elementor/editor-elements';\nimport { PlayerPlayIcon } from '@elementor/icons';\nimport { IconButton } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { getInteractionsConfig } from '../utils/get-interactions-config';\nimport { DEFAULT_INTERACTION, InteractionDetails } from './interaction-details';\n\nexport const MAX_NUMBER_OF_INTERACTIONS = 5;\n\nexport type InteractionListProps = {\n\tonSelectInteractions: ( interactions: ElementInteractions ) => void;\n\tinteractions: ElementInteractions;\n\tonPlayInteraction: ( interactionId: string ) => void;\n\ttriggerCreateOnShowEmpty?: boolean;\n};\n\nexport function InteractionsList( props: InteractionListProps ) {\n\tconst { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;\n\n\tconst [ interactionsState, setInteractionsState ] = useState< ElementInteractions >( interactions );\n\n\tuseEffect( () => {\n\t\tif ( JSON.stringify( interactions.items ) !== JSON.stringify( interactionsState ) ) {\n\t\t\tonSelectInteractions( interactionsState );\n\t\t}\n\t}, [ interactions.items, interactionsState, onSelectInteractions ] );\n\n\tconst isMaxNumberOfInteractionsReached = useMemo( () => {\n\t\treturn interactionsState.items?.length >= MAX_NUMBER_OF_INTERACTIONS;\n\t}, [ interactionsState.items ] );\n\n\tif ( triggerCreateOnShowEmpty && ( ! interactionsState.items || interactionsState.items?.length === 0 ) ) {\n\t\tsetInteractionsState( {\n\t\t\tversion: 1,\n\t\t\titems: [\n\t\t\t\t{\n\t\t\t\t\tanimation: {\n\t\t\t\t\t\tanimation_id: DEFAULT_INTERACTION,\n\t\t\t\t\t\tanimation_type: 'full-preset',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t} );\n\t}\n\n\tconst displayLabel = ( interactionForDisplay: string ) => {\n\t\tif ( ! interactionForDisplay ) {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst animationOptions = getInteractionsConfig()?.animationOptions;\n\t\tconst option = animationOptions.find( ( opt ) => opt.value === interactionForDisplay );\n\n\t\treturn option?.label || interactionForDisplay;\n\t};\n\n\treturn (\n\t\t<Repeater\n\t\t\topenOnAdd\n\t\t\topenItem={ triggerCreateOnShowEmpty ? 0 : undefined }\n\t\t\tlabel={ __( 'Interactions', 'elementor' ) }\n\t\t\tvalues={ interactionsState.items }\n\t\t\tsetValues={ ( newValue: ElementInteractions[ 'items' ] ) => {\n\t\t\t\tsetInteractionsState( {\n\t\t\t\t\t...interactionsState,\n\t\t\t\t\titems: newValue,\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tshowDuplicate={ false }\n\t\t\tshowToggle={ false }\n\t\t\tisSortable={ false }\n\t\t\tdisableAddItemButton={ isMaxNumberOfInteractionsReached }\n\t\t\titemSettings={ {\n\t\t\t\tinitialValues: {\n\t\t\t\t\tanimation: {\n\t\t\t\t\t\tanimation_id: DEFAULT_INTERACTION,\n\t\t\t\t\t\tanimation_type: 'full-preset',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tLabel: ( { value } ) => displayLabel( value.animation.animation_id ),\n\t\t\t\tIcon: () => null,\n\t\t\t\tContent: ( { index, value } ) => (\n\t\t\t\t\t<InteractionDetails\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tinteraction={ value.animation.animation_id }\n\t\t\t\t\t\tonChange={ ( newValue: string ) => {\n\t\t\t\t\t\t\tconst newInteractions = { ...interactionsState };\n\t\t\t\t\t\t\tnewInteractions.items[ index ] = {\n\t\t\t\t\t\t\t\t...newInteractions.items[ index ],\n\t\t\t\t\t\t\t\tanimation: {\n\t\t\t\t\t\t\t\t\t...newInteractions.items[ index ].animation,\n\t\t\t\t\t\t\t\t\tanimation_id: newValue,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\tsetInteractionsState( { ...interactionsState, items: newInteractions.items } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tactions: ( value ) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<IconButton size=\"tiny\" onClick={ () => onPlayInteraction( value.animation.animation_id ) }>\n\t\t\t\t\t\t\t<PlayerPlayIcon fontSize=\"tiny\" />\n\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t</>\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n","import { type InteractionsConfig } from '../types';\n\nconst DEFAULT_CONFIG: InteractionsConfig = {\n\tconstants: {\n\t\tdefaultDuration: 300,\n\t\tdefaultDelay: 0,\n\t\tslideDistance: 100,\n\t\tscaleStart: 0.5,\n\t\teasing: 'linear',\n\t},\n\tanimationOptions: [],\n};\n\nexport function getInteractionsConfig(): InteractionsConfig {\n\treturn window.ElementorInteractionsConfig || DEFAULT_CONFIG;\n}\n","import * as React from 'react';\nimport { Divider, Grid } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { Direction } from './controls/direction';\nimport { Effect } from './controls/effect';\nimport { EffectType } from './controls/effect-type';\nimport { TimeFrameIndicator } from './controls/time-frame-indicator';\nimport { Trigger } from './controls/trigger';\n\nconst DELIMITER = '-';\n\ntype InteractionDetailsProps = {\n\tinteraction: string;\n\tonChange: ( interaction: string ) => void;\n};\nexport const DEFAULT_INTERACTION = 'load-fade-in--300-0';\n\nconst getDefaultInteractionDetails = () => {\n\tconst [ trigger, effect, type, direction, duration, delay ] = DEFAULT_INTERACTION.split( DELIMITER );\n\n\treturn {\n\t\ttrigger,\n\t\teffect,\n\t\ttype,\n\t\tdirection,\n\t\tduration,\n\t\tdelay,\n\t};\n};\n\nconst buildInteractionDetails = ( interaction: string ) => {\n\tconst [ trigger, effect, type, direction, duration, delay ] = interaction.split( DELIMITER );\n\tconst defaultInteractionDetails = getDefaultInteractionDetails();\n\n\treturn {\n\t\ttrigger: trigger || defaultInteractionDetails.trigger,\n\t\teffect: effect || defaultInteractionDetails.effect,\n\t\ttype: type || defaultInteractionDetails.type,\n\t\tdirection: direction || defaultInteractionDetails.direction,\n\t\tduration: duration || defaultInteractionDetails.duration,\n\t\tdelay: delay || defaultInteractionDetails.delay,\n\t};\n};\n\nexport const InteractionDetails = ( { interaction, onChange }: InteractionDetailsProps ) => {\n\tconst interactionDetails = React.useMemo( () => {\n\t\treturn buildInteractionDetails( interaction );\n\t}, [ interaction ] );\n\n\tconst handleChange = < K extends keyof typeof interactionDetails >(\n\t\tkey: K,\n\t\tvalue: ( typeof interactionDetails )[ K ]\n\t) => {\n\t\tif ( value === null ) {\n\t\t\tvalue = getDefaultInteractionDetails()[ key ];\n\t\t}\n\t\tconst newInteractionDetails = { ...interactionDetails, [ key ]: value };\n\t\tonChange( Object.values( newInteractionDetails ).join( DELIMITER ) );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<Grid container spacing={ 2 } sx={ { p: 1.5 } }>\n\t\t\t\t<Trigger value={ interactionDetails.trigger } onChange={ ( v ) => handleChange( 'trigger', v ) } />\n\t\t\t</Grid>\n\t\t\t<Divider sx={ { mx: 1.5 } } />\n\t\t\t<Grid container spacing={ 2 } sx={ { p: 1.5 } }>\n\t\t\t\t<Effect value={ interactionDetails.effect } onChange={ ( v ) => handleChange( 'effect', v ) } />\n\t\t\t\t<EffectType value={ interactionDetails.type } onChange={ ( v ) => handleChange( 'type', v ) } />\n\t\t\t\t<Direction\n\t\t\t\t\tvalue={ interactionDetails.direction }\n\t\t\t\t\tonChange={ ( v ) => handleChange( 'direction', v ) }\n\t\t\t\t\tinteractionType={ interactionDetails.type }\n\t\t\t\t/>\n\t\t\t\t<TimeFrameIndicator\n\t\t\t\t\tvalue={ interactionDetails.duration }\n\t\t\t\t\tonChange={ ( v ) => handleChange( 'duration', v ) }\n\t\t\t\t\tlabel={ __( 'Duration', 'elementor' ) }\n\t\t\t\t/>\n\t\t\t\t<TimeFrameIndicator\n\t\t\t\t\tvalue={ interactionDetails.delay }\n\t\t\t\t\tonChange={ ( v ) => handleChange( 'delay', v ) }\n\t\t\t\t\tlabel={ __( 'Delay', 'elementor' ) }\n\t\t\t\t/>\n\t\t\t</Grid>\n\t\t</>\n\t);\n};\n","import * as React from 'react';\nimport { useMemo } from 'react';\nimport { type ToggleButtonGroupItem, ToggleButtonGroupUi } from '@elementor/editor-controls';\nimport { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from '@elementor/icons';\nimport { Grid, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type DirectionFieldProps } from '../../types';\n\ntype Direction = 'top' | 'bottom' | 'left' | 'right';\n\nexport function Direction( { value, onChange, interactionType }: DirectionFieldProps ) {\n\tconst options: ToggleButtonGroupItem< Direction >[] = useMemo( () => {\n\t\tconst isIn = interactionType === 'in';\n\n\t\treturn [\n\t\t\t{\n\t\t\t\tvalue: 'top',\n\t\t\t\tlabel: isIn ? __( 'From top', 'elementor' ) : __( 'To top', 'elementor' ),\n\t\t\t\trenderContent: ( { size } ) =>\n\t\t\t\t\tisIn ? <ArrowDownSmallIcon fontSize={ size } /> : <ArrowUpSmallIcon fontSize={ size } />,\n\t\t\t\tshowTooltip: true,\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'bottom',\n\t\t\t\tlabel: interactionType === 'in' ? __( 'From bottom', 'elementor' ) : __( 'To bottom', 'elementor' ),\n\t\t\t\trenderContent: ( { size } ) =>\n\t\t\t\t\tisIn ? <ArrowUpSmallIcon fontSize={ size } /> : <ArrowDownSmallIcon fontSize={ size } />,\n\t\t\t\tshowTooltip: true,\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'left',\n\t\t\t\tlabel: interactionType === 'in' ? __( 'From left', 'elementor' ) : __( 'To left', 'elementor' ),\n\t\t\t\trenderContent: ( { size } ) =>\n\t\t\t\t\tisIn ? <ArrowRightIcon fontSize={ size } /> : <ArrowLeftIcon fontSize={ size } />,\n\t\t\t\tshowTooltip: true,\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'right',\n\t\t\t\tlabel: interactionType === 'in' ? __( 'From right', 'elementor' ) : __( 'To right', 'elementor' ),\n\t\t\t\trenderContent: ( { size } ) =>\n\t\t\t\t\tisIn ? <ArrowLeftIcon fontSize={ size } /> : <ArrowRightIcon fontSize={ size } />,\n\t\t\t\tshowTooltip: true,\n\t\t\t},\n\t\t];\n\t}, [ interactionType ] );\n\n\treturn (\n\t\t<>\n\t\t\t<Grid item xs={ 12 } md={ 6 }>\n\t\t\t\t<Typography variant=\"caption\" color=\"text.secondary\">\n\t\t\t\t\t{ __( 'Direction', 'elementor' ) }\n\t\t\t\t</Typography>\n\t\t\t</Grid>\n\t\t\t<Grid item xs={ 12 } md={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end', overflow: 'hidden' } }>\n\t\t\t\t<ToggleButtonGroupUi items={ options } exclusive onChange={ onChange } value={ value } />\n\t\t\t</Grid>\n\t\t</>\n\t);\n}\n","import * as React from 'react';\nimport { MenuListItem } from '@elementor/editor-ui';\nimport { Grid, Select, type SelectChangeEvent, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type FieldProps } from '../../types';\nexport function Effect( { value, onChange }: FieldProps ) {\n\tconst availableEffects = [\n\t\t{ key: 'fade', label: __( 'Fade', 'elementor' ) },\n\t\t{ key: 'slide', label: __( 'Slide', 'elementor' ) },\n\t\t{ key: 'scale', label: __( 'Scale', 'elementor' ) },\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<Grid item xs={ 12 } md={ 6 }>\n\t\t\t\t<Typography variant=\"caption\" color=\"text.secondary\">\n\t\t\t\t\t{ __( 'Effect', 'elementor' ) }\n\t\t\t\t</Typography>\n\t\t\t</Grid>\n\t\t\t<Grid item xs={ 12 } md={ 6 }>\n\t\t\t\t<Select\n\t\t\t\t\tfullWidth\n\t\t\t\t\tdisplayEmpty\n\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }\n\t\t\t\t>\n\t\t\t\t\t{ availableEffects.map( ( effect ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<MenuListItem key={ effect.key } value={ effect.key }>\n\t\t\t\t\t\t\t\t{ effect.label }\n\t\t\t\t\t\t\t</MenuListItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Select>\n\t\t\t</Grid>\n\t\t</>\n\t);\n}\n","import * as React from 'react';\nimport { type ToggleButtonGroupItem, ToggleButtonGroupUi } from '@elementor/editor-controls';\nimport { Grid, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type FieldProps } from '../../types';\n\ntype EffectType = 'in' | 'out';\nexport function EffectType( { value, onChange }: FieldProps ) {\n\tconst options: ToggleButtonGroupItem< EffectType >[] = [\n\t\t{\n\t\t\tvalue: 'in',\n\t\t\tlabel: __( 'In', 'elementor' ),\n\t\t\trenderContent: () => __( 'In', 'elementor' ),\n\t\t},\n\t\t{\n\t\t\tvalue: 'out',\n\t\t\tlabel: __( 'Out', 'elementor' ),\n\t\t\trenderContent: () => __( 'Out', 'elementor' ),\n\t\t},\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<Grid item xs={ 12 } md={ 6 }>\n\t\t\t\t<Typography variant=\"caption\" color=\"text.secondary\">\n\t\t\t\t\t{ __( 'Type', 'elementor' ) }\n\t\t\t\t</Typography>\n\t\t\t</Grid>\n\t\t\t<Grid item xs={ 12 } md={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end', overflow: 'hidden' } }>\n\t\t\t\t<ToggleButtonGroupUi items={ options } exclusive onChange={ onChange } value={ value } />\n\t\t\t</Grid>\n\t\t</>\n\t);\n}\n","import * as React from 'react';\nimport { MenuListItem } from '@elementor/editor-ui';\nimport { Grid, Select, type SelectChangeEvent, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type FieldProps } from '../../types';\n\nexport function TimeFrameIndicator( { value, onChange, label }: FieldProps ) {\n\tconst availableTimeFrames = [ '0', '100', '200', '300', '400', '500', '750', '1000', '1250', '1500' ].map(\n\t\t( key ) => ( {\n\t\t\tkey,\n\t\t\t// translators: %s: time in milliseconds\n\t\t\tlabel: __( '%s MS', 'elementor' ).replace( '%s', key ),\n\t\t} )\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<Grid item xs={ 12 } md={ 6 }>\n\t\t\t\t<Typography variant=\"caption\" color=\"text.secondary\">\n\t\t\t\t\t{ label }\n\t\t\t\t</Typography>\n\t\t\t</Grid>\n\t\t\t<Grid item xs={ 12 } md={ 6 }>\n\t\t\t\t<Select\n\t\t\t\t\tfullWidth\n\t\t\t\t\tdisplayEmpty\n\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }\n\t\t\t\t>\n\t\t\t\t\t{ availableTimeFrames.map( ( timeFrame ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<MenuListItem key={ timeFrame.key } value={ timeFrame.key }>\n\t\t\t\t\t\t\t\t{ timeFrame.label }\n\t\t\t\t\t\t\t</MenuListItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Select>\n\t\t\t</Grid>\n\t\t</>\n\t);\n}\n","import * as React from 'react';\nimport { MenuListItem } from '@elementor/editor-ui';\nimport { Grid, Select, type SelectChangeEvent, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type FieldProps } from '../../types';\n\nexport function Trigger( { value, onChange }: FieldProps ) {\n\tconst availableTriggers = Object.entries( {\n\t\tload: __( 'Page load', 'elementor' ),\n\t\tscrollIn: __( 'Scroll into view', 'elementor' ),\n\t\tscrollOut: __( 'Scroll out of view', 'elementor' ),\n\t} ).map( ( [ key, label ] ) => ( {\n\t\tkey,\n\t\tlabel,\n\t} ) );\n\n\treturn (\n\t\t<>\n\t\t\t<Grid item xs={ 12 } md={ 6 }>\n\t\t\t\t<Typography variant=\"caption\" color=\"text.secondary\">\n\t\t\t\t\t{ __( 'Trigger', 'elementor' ) }\n\t\t\t\t</Typography>\n\t\t\t</Grid>\n\t\t\t<Grid item xs={ 12 } md={ 6 }>\n\t\t\t\t<Select\n\t\t\t\t\tfullWidth\n\t\t\t\t\tdisplayEmpty\n\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\tonChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t>\n\t\t\t\t\t{ availableTriggers.map( ( trigger ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<MenuListItem key={ trigger.key } value={ trigger.key }>\n\t\t\t\t\t\t\t\t{ trigger.label }\n\t\t\t\t\t\t\t</MenuListItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Select>\n\t\t\t</Grid>\n\t\t</>\n\t);\n}\n","import { type InteractionsProvider } from '../types';\n\nexport const createInteractionsRepository = () => {\n\tconst providers: InteractionsProvider[] = [];\n\n\tconst getProviders = () => {\n\t\tconst sorted = providers.slice( 0 ).sort( ( a, b ) => ( a.priority > b.priority ? -1 : 1 ) );\n\t\treturn sorted;\n\t};\n\n\tconst register = ( provider: InteractionsProvider ) => {\n\t\tproviders.push( provider );\n\t};\n\n\tconst all = () => {\n\t\treturn getProviders().flatMap( ( provider ) => provider.actions.all() );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = providers.map( ( provider ) => provider.subscribe( cb ) );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\tconst getProviderByKey = ( key: string ) => {\n\t\treturn providers.find( ( provider ) => {\n\t\t\ttry {\n\t\t\t\treturn provider.getKey() === key;\n\t\t\t} catch {\n\t\t\t\t// Provider might not be ready yet (e.g., no document loaded)\n\t\t\t\treturn false;\n\t\t\t}\n\t\t} );\n\t};\n\n\treturn {\n\t\tall,\n\t\tregister,\n\t\tsubscribe,\n\t\tgetProviders,\n\t\tgetProviderByKey,\n\t};\n};\n","import { createInteractionsRepository } from './utils/create-interactions-repository';\n\nexport const interactionsRepository = createInteractionsRepository();\n","import { type InteractionsProvider } from '../types';\n\nexport type CreateInteractionsProviderOptions = {\n\tkey: string | ( () => string );\n\tpriority?: number;\n\tsubscribe?: ( callback: () => void ) => () => void;\n\tactions: {\n\t\tall: InteractionsProvider[ 'actions' ][ 'all' ];\n\t};\n};\n\nconst DEFAULT_PRIORITY = 10;\n\nexport function createInteractionsProvider( {\n\tkey,\n\tpriority = DEFAULT_PRIORITY,\n\tsubscribe = () => () => {},\n\tactions,\n}: CreateInteractionsProviderOptions ): InteractionsProvider {\n\treturn {\n\t\tgetKey: typeof key === 'string' ? () => key : key,\n\t\tpriority,\n\t\tsubscribe,\n\t\tactions: {\n\t\t\tall: actions.all,\n\t\t},\n\t};\n}\n","import { getCurrentDocumentId, getElementInteractions, getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, windowEvent } from '@elementor/editor-v1-adapters';\n\nimport { createInteractionsProvider } from '../utils/create-interactions-provider';\n\nexport const ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX = 'document-elements-interactions-';\n\nexport const documentElementsInteractionsProvider = createInteractionsProvider( {\n\tkey: () => {\n\t\tconst documentId = getCurrentDocumentId();\n\n\t\tif ( ! documentId ) {\n\t\t\tconst pendingKey = `${ ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX }pending`;\n\t\t\treturn pendingKey;\n\t\t}\n\n\t\tconst key = `${ ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX }${ documentId }`;\n\t\treturn key;\n\t},\n\tpriority: 50,\n\tsubscribe: ( cb ) => {\n\t\treturn listenTo( [ windowEvent( 'elementor/element/update_interactions' ) ], () => cb() );\n\t},\n\tactions: {\n\t\tall: () => {\n\t\t\tconst elements = getElements();\n\n\t\t\tconst filtered = elements.filter( ( element ) => {\n\t\t\t\tconst interactions = getElementInteractions( element.id );\n\t\t\t\tif ( ! interactions ) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t\treturn interactions?.items?.length > 0;\n\t\t\t} );\n\n\t\t\treturn filtered.map( ( element ) => {\n\t\t\t\tconst interactions = getElementInteractions( element.id );\n\t\t\t\treturn {\n\t\t\t\t\telementId: element.id,\n\t\t\t\t\tdataId: element.id,\n\t\t\t\t\tinteractions: interactions || { version: 1, items: [] },\n\t\t\t\t};\n\t\t\t} );\n\t\t},\n\t},\n} );\n","import { interactionsRepository } from './interactions-repository';\nimport { documentElementsInteractionsProvider } from './providers/document-elements-interactions-provider';\n\nexport function init() {\n\ttry {\n\t\tinteractionsRepository.register( documentElementsInteractionsProvider );\n\t} catch ( error ) {\n\t\tthrow error;\n\t}\n}\n"],"mappings":"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","names":["React","import_react","import_editor_elements","import_ui","React","React","import_react","React","import_react","import_editor_controls","import_icons","import_ui","import_i18n","React","import_ui","import_i18n","React","import_react","import_icons","import_ui","import_i18n","React","import_ui","import_i18n","React","import_editor_controls","import_ui","import_i18n","React","import_editor_ui","import_ui","import_i18n","React","import_editor_ui","import_ui","import_i18n","import_editor_elements","listenTo"]}
+{"version":3,"sources":["../src/index.ts","../src/components/empty-state.tsx","../src/components/interactions-tab.tsx","../src/contexts/interactions-context.tsx","../src/contexts/popup-state-context.tsx","../src/components/interactions-list.tsx","../src/utils/get-interactions-config.ts","../src/components/interaction-details.tsx","../src/components/controls/direction.tsx","../src/components/controls/effect.tsx","../src/components/controls/effect-type.tsx","../src/components/controls/time-frame-indicator.tsx","../src/components/controls/trigger.tsx","../src/utils/create-interactions-repository.ts","../src/interactions-repository.ts","../src/utils/create-interactions-provider.ts","../src/providers/document-elements-interactions-provider.ts","../src/init.ts"],"sourcesContent":["export * from './components/empty-state';\nexport * from './components/interactions-tab';\nexport * from './types';\nexport * from './utils/get-interactions-config';\n\nexport { interactionsRepository } from './interactions-repository';\nexport {\n\tcreateInteractionsProvider,\n\ttype CreateInteractionsProviderOptions,\n} from './utils/create-interactions-provider';\n\nexport { ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX } from './providers/document-elements-interactions-provider';\nexport { init } from './init';\n","import * as React from 'react';\nimport { SwipeIcon } from '@elementor/icons';\nimport { Button, Stack, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nexport const EmptyState = ( { onCreateInteraction }: { onCreateInteraction: () => void } ) => {\n\treturn (\n\t\t<Stack\n\t\t\talignItems=\"center\"\n\t\t\tjustifyContent=\"center\"\n\t\t\theight=\"100%\"\n\t\t\tcolor=\"text.secondary\"\n\t\t\tsx={ { p: 2.5, pt: 8, pb: 5.5 } }\n\t\t\tgap={ 1.5 }\n\t\t>\n\t\t\t<SwipeIcon fontSize=\"large\" />\n\n\t\t\t<Typography align=\"center\" variant=\"subtitle2\">\n\t\t\t\t{ __( 'Animate elements with Interactions', 'elementor' ) }\n\t\t\t</Typography>\n\n\t\t\t<Typography align=\"center\" variant=\"caption\" maxWidth=\"170px\">\n\t\t\t\t{ __(\n\t\t\t\t\t'Add entrance animations and effects triggered by user interactions such as page load or scroll.',\n\t\t\t\t\t'elementor'\n\t\t\t\t) }\n\t\t\t</Typography>\n\n\t\t\t<Button variant=\"outlined\" color=\"secondary\" size=\"small\" sx={ { mt: 1 } } onClick={ onCreateInteraction }>\n\t\t\t\t{ __( 'Create an interaction', 'elementor' ) }\n\t\t\t</Button>\n\t\t</Stack>\n\t);\n};\n","import * as React from 'react';\nimport { useCallback, useState } from 'react';\nimport { type ElementInteractions, useElementInteractions } from '@elementor/editor-elements';\nimport { SessionStorageProvider } from '@elementor/session';\nimport { Stack } from '@elementor/ui';\n\nimport { InteractionsProvider, useInteractionsContext } from '../contexts/interactions-context';\nimport { PopupStateProvider } from '../contexts/popup-state-context';\nimport { EmptyState } from './empty-state';\nimport { InteractionsList } from './interactions-list';\n\nexport const InteractionsTab = ( { elementId }: { elementId: string } ) => {\n\treturn (\n\t\t<PopupStateProvider>\n\t\t\t<InteractionsTabContent elementId={ elementId } />\n\t\t</PopupStateProvider>\n\t);\n};\n\nfunction InteractionsTabContent( { elementId }: { elementId: string } ) {\n\tconst existingInteractions = useElementInteractions( elementId );\n\tconst [ firstInteraction, setFirstInteraction ] = useState< boolean >( false );\n\tconst hasInteractions = existingInteractions?.items?.length || firstInteraction;\n\n\treturn (\n\t\t<SessionStorageProvider prefix={ elementId }>\n\t\t\t{ hasInteractions ? (\n\t\t\t\t<InteractionsProvider elementId={ elementId }>\n\t\t\t\t\t<InteractionsContent firstInteraction={ firstInteraction } />\n\t\t\t\t</InteractionsProvider>\n\t\t\t) : (\n\t\t\t\t<EmptyState\n\t\t\t\t\tonCreateInteraction={ () => {\n\t\t\t\t\t\tsetFirstInteraction( true );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</SessionStorageProvider>\n\t);\n}\n\nfunction InteractionsContent( { firstInteraction }: { firstInteraction: boolean } ) {\n\tconst { interactions, setInteractions, playInteractions } = useInteractionsContext();\n\n\tconst applyInteraction = useCallback(\n\t\t( newInteractions: ElementInteractions ) => {\n\t\t\tif ( ! newInteractions ) {\n\t\t\t\tsetInteractions( undefined );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetInteractions( newInteractions );\n\t\t},\n\t\t[ setInteractions ]\n\t);\n\n\treturn (\n\t\t<Stack sx={ { m: 1, p: 1.5 } } gap={ 2 }>\n\t\t\t<InteractionsList\n\t\t\t\ttriggerCreateOnShowEmpty={ firstInteraction }\n\t\t\t\tinteractions={ interactions }\n\t\t\t\tonSelectInteractions={ applyInteraction }\n\t\t\t\tonPlayInteraction={ playInteractions }\n\t\t\t/>\n\t\t</Stack>\n\t);\n}\n","import * as React from 'react';\nimport { createContext, type ReactNode, useContext, useEffect } from 'react';\nimport {\n\ttype ElementInteractions,\n\tplayElementInteractions,\n\tupdateElementInteractions,\n\tuseElementInteractions,\n} from '@elementor/editor-elements';\n\ntype InteractionsContextValue = {\n\tinteractions: ElementInteractions;\n\tsetInteractions: ( value: ElementInteractions | undefined ) => void;\n\tplayInteractions: ( animationId: string ) => void;\n};\n\nconst InteractionsContext = createContext< InteractionsContextValue | null >( null );\n\nexport const InteractionsProvider = ( { children, elementId }: { children: ReactNode; elementId: string } ) => {\n\tconst interactions = useElementInteractions( elementId );\n\n\tuseEffect( () => {\n\t\twindow.dispatchEvent( new CustomEvent( 'elementor/element/update_interactions' ) );\n\t}, [] );\n\n\tconst setInteractions = ( value: ElementInteractions | undefined ) => {\n\t\tupdateElementInteractions( {\n\t\t\telementId,\n\t\t\tinteractions: value,\n\t\t} );\n\t};\n\n\tconst playInteractions = ( animationId: string ) => {\n\t\tplayElementInteractions( elementId, animationId );\n\t};\n\n\tconst contextValue: InteractionsContextValue = {\n\t\tinteractions,\n\t\tsetInteractions,\n\t\tplayInteractions,\n\t};\n\n\treturn <InteractionsContext.Provider value={ contextValue }>{ children }</InteractionsContext.Provider>;\n};\n\nexport const useInteractionsContext = () => {\n\tconst context = useContext( InteractionsContext );\n\tif ( ! context ) {\n\t\tthrow new Error( 'useInteractionsContext must be used within InteractionsProvider' );\n\t}\n\treturn context;\n};\n","import * as React from 'react';\nimport { createContext, useCallback, useContext, useState } from 'react';\n\ntype PopupStateContextType = {\n\topenByDefault: boolean;\n\ttriggerDefaultOpen: () => void;\n\tresetDefaultOpen: () => void;\n};\n\nconst PopupStateContext = createContext< PopupStateContextType | undefined >( undefined );\n\nexport const PopupStateProvider = ( { children }: { children: React.ReactNode } ) => {\n\tconst [ openByDefault, setOpenByDefault ] = useState( false );\n\n\tconst triggerDefaultOpen = useCallback( () => {\n\t\tsetOpenByDefault( true );\n\t}, [] );\n\n\tconst resetDefaultOpen = useCallback( () => {\n\t\tsetOpenByDefault( false );\n\t}, [] );\n\n\treturn (\n\t\t<PopupStateContext.Provider value={ { openByDefault, triggerDefaultOpen, resetDefaultOpen } }>\n\t\t\t{ children }\n\t\t</PopupStateContext.Provider>\n\t);\n};\n\nexport const usePopupStateContext = () => {\n\tconst context = useContext( PopupStateContext );\n\tif ( ! context ) {\n\t\tthrow new Error( 'usePopupStateContext must be used within PopupStateProvider' );\n\t}\n\treturn context;\n};\n","import * as React from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { Repeater } from '@elementor/editor-controls';\nimport { type ElementInteractions } from '@elementor/editor-elements';\nimport { PlayerPlayIcon } from '@elementor/icons';\nimport { IconButton } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { getInteractionsConfig } from '../utils/get-interactions-config';\nimport { DEFAULT_INTERACTION, InteractionDetails } from './interaction-details';\n\nexport const MAX_NUMBER_OF_INTERACTIONS = 5;\n\nexport type InteractionListProps = {\n\tonSelectInteractions: ( interactions: ElementInteractions ) => void;\n\tinteractions: ElementInteractions;\n\tonPlayInteraction: ( interactionId: string ) => void;\n\ttriggerCreateOnShowEmpty?: boolean;\n};\n\nexport function InteractionsList( props: InteractionListProps ) {\n\tconst { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;\n\n\tconst [ interactionsState, setInteractionsState ] = useState< ElementInteractions >( interactions );\n\n\tuseEffect( () => {\n\t\tif ( JSON.stringify( interactions.items ) !== JSON.stringify( interactionsState ) ) {\n\t\t\tonSelectInteractions( interactionsState );\n\t\t}\n\t}, [ interactions.items, interactionsState, onSelectInteractions ] );\n\n\tconst isMaxNumberOfInteractionsReached = useMemo( () => {\n\t\treturn interactionsState.items?.length >= MAX_NUMBER_OF_INTERACTIONS;\n\t}, [ interactionsState.items ] );\n\n\tif ( triggerCreateOnShowEmpty && ( ! interactionsState.items || interactionsState.items?.length === 0 ) ) {\n\t\tsetInteractionsState( {\n\t\t\tversion: 1,\n\t\t\titems: [\n\t\t\t\t{\n\t\t\t\t\tanimation: {\n\t\t\t\t\t\tanimation_id: DEFAULT_INTERACTION,\n\t\t\t\t\t\tanimation_type: 'full-preset',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t} );\n\t}\n\n\tconst displayLabel = ( interactionForDisplay: string ) => {\n\t\tif ( ! interactionForDisplay ) {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst animationOptions = getInteractionsConfig()?.animationOptions;\n\t\tconst option = animationOptions.find( ( opt ) => opt.value === interactionForDisplay );\n\n\t\treturn option?.label || interactionForDisplay;\n\t};\n\n\treturn (\n\t\t<Repeater\n\t\t\topenOnAdd\n\t\t\topenItem={ triggerCreateOnShowEmpty ? 0 : undefined }\n\t\t\tlabel={ __( 'Interactions', 'elementor' ) }\n\t\t\tvalues={ interactionsState.items }\n\t\t\tsetValues={ ( newValue: ElementInteractions[ 'items' ] ) => {\n\t\t\t\tsetInteractionsState( {\n\t\t\t\t\t...interactionsState,\n\t\t\t\t\titems: newValue,\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tshowDuplicate={ false }\n\t\t\tshowToggle={ false }\n\t\t\tisSortable={ false }\n\t\t\tdisableAddItemButton={ isMaxNumberOfInteractionsReached }\n\t\t\titemSettings={ {\n\t\t\t\tinitialValues: {\n\t\t\t\t\tanimation: {\n\t\t\t\t\t\tanimation_id: DEFAULT_INTERACTION,\n\t\t\t\t\t\tanimation_type: 'full-preset',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tLabel: ( { value } ) => displayLabel( value.animation.animation_id ),\n\t\t\t\tIcon: () => null,\n\t\t\t\tContent: ( { index, value } ) => (\n\t\t\t\t\t<InteractionDetails\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tinteraction={ value.animation.animation_id }\n\t\t\t\t\t\tonChange={ ( newValue: string ) => {\n\t\t\t\t\t\t\tconst newInteractions = { ...interactionsState };\n\t\t\t\t\t\t\tnewInteractions.items[ index ] = {\n\t\t\t\t\t\t\t\t...newInteractions.items[ index ],\n\t\t\t\t\t\t\t\tanimation: {\n\t\t\t\t\t\t\t\t\t...newInteractions.items[ index ].animation,\n\t\t\t\t\t\t\t\t\tanimation_id: newValue,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\tsetInteractionsState( { ...interactionsState, items: newInteractions.items } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tactions: ( value ) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<IconButton size=\"tiny\" onClick={ () => onPlayInteraction( value.animation.animation_id ) }>\n\t\t\t\t\t\t\t<PlayerPlayIcon fontSize=\"tiny\" />\n\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t</>\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n","import { type InteractionsConfig } from '../types';\n\nconst DEFAULT_CONFIG: InteractionsConfig = {\n\tconstants: {\n\t\tdefaultDuration: 300,\n\t\tdefaultDelay: 0,\n\t\tslideDistance: 100,\n\t\tscaleStart: 0.5,\n\t\teasing: 'linear',\n\t},\n\tanimationOptions: [],\n};\n\nexport function getInteractionsConfig(): InteractionsConfig {\n\treturn window.ElementorInteractionsConfig || DEFAULT_CONFIG;\n}\n","import * as React from 'react';\nimport { PopoverContent } from '@elementor/editor-controls';\nimport { Divider, Grid } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { Direction } from './controls/direction';\nimport { Effect } from './controls/effect';\nimport { EffectType } from './controls/effect-type';\nimport { TimeFrameIndicator } from './controls/time-frame-indicator';\nimport { Trigger } from './controls/trigger';\n\nconst DELIMITER = '-';\n\ntype InteractionDetailsProps = {\n\tinteraction: string;\n\tonChange: ( interaction: string ) => void;\n};\nexport const DEFAULT_INTERACTION = 'load-fade-in--300-0';\n\nconst getDefaultInteractionDetails = () => {\n\tconst [ trigger, effect, type, direction, duration, delay ] = DEFAULT_INTERACTION.split( DELIMITER );\n\n\treturn {\n\t\ttrigger,\n\t\teffect,\n\t\ttype,\n\t\tdirection,\n\t\tduration,\n\t\tdelay,\n\t};\n};\n\nconst buildInteractionDetails = ( interaction: string ) => {\n\tconst [ trigger, effect, type, direction, duration, delay ] = interaction.split( DELIMITER );\n\tconst defaultInteractionDetails = getDefaultInteractionDetails();\n\n\treturn {\n\t\ttrigger: trigger || defaultInteractionDetails.trigger,\n\t\teffect: effect || defaultInteractionDetails.effect,\n\t\ttype: type || defaultInteractionDetails.type,\n\t\tdirection: direction || defaultInteractionDetails.direction,\n\t\tduration: duration || defaultInteractionDetails.duration,\n\t\tdelay: delay || defaultInteractionDetails.delay,\n\t};\n};\n\nexport const InteractionDetails = ( { interaction, onChange }: InteractionDetailsProps ) => {\n\tconst interactionDetails = React.useMemo( () => {\n\t\treturn buildInteractionDetails( interaction );\n\t}, [ interaction ] );\n\n\tconst handleChange = < K extends keyof typeof interactionDetails >(\n\t\tkey: K,\n\t\tvalue: ( typeof interactionDetails )[ K ]\n\t) => {\n\t\tif ( value === null ) {\n\t\t\tvalue = getDefaultInteractionDetails()[ key ];\n\t\t}\n\t\tconst newInteractionDetails = { ...interactionDetails, [ key ]: value };\n\t\tonChange( Object.values( newInteractionDetails ).join( DELIMITER ) );\n\t};\n\n\treturn (\n\t\t<PopoverContent p={ 1.5 }>\n\t\t\t<Grid container spacing={ 1.5 }>\n\t\t\t\t<Trigger value={ interactionDetails.trigger } onChange={ ( v ) => handleChange( 'trigger', v ) } />\n\t\t\t</Grid>\n\t\t\t<Divider sx={ { mx: 1.5 } } />\n\t\t\t<Grid container spacing={ 1.5 }>\n\t\t\t\t<Effect value={ interactionDetails.effect } onChange={ ( v ) => handleChange( 'effect', v ) } />\n\t\t\t\t<EffectType value={ interactionDetails.type } onChange={ ( v ) => handleChange( 'type', v ) } />\n\t\t\t\t<Direction\n\t\t\t\t\tvalue={ interactionDetails.direction }\n\t\t\t\t\tonChange={ ( v ) => handleChange( 'direction', v ) }\n\t\t\t\t\tinteractionType={ interactionDetails.type }\n\t\t\t\t/>\n\t\t\t\t<TimeFrameIndicator\n\t\t\t\t\tvalue={ interactionDetails.duration }\n\t\t\t\t\tonChange={ ( v ) => handleChange( 'duration', v ) }\n\t\t\t\t\tlabel={ __( 'Duration', 'elementor' ) }\n\t\t\t\t/>\n\t\t\t\t<TimeFrameIndicator\n\t\t\t\t\tvalue={ interactionDetails.delay }\n\t\t\t\t\tonChange={ ( v ) => handleChange( 'delay', v ) }\n\t\t\t\t\tlabel={ __( 'Delay', 'elementor' ) }\n\t\t\t\t/>\n\t\t\t</Grid>\n\t\t</PopoverContent>\n\t);\n};\n","import * as React from 'react';\nimport { useMemo } from 'react';\nimport {\n\tControlFormLabel,\n\tPopoverGridContainer,\n\ttype ToggleButtonGroupItem,\n\tToggleButtonGroupUi,\n} from '@elementor/editor-controls';\nimport { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from '@elementor/icons';\nimport { Grid } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type DirectionFieldProps } from '../../types';\n\ntype Direction = 'top' | 'bottom' | 'left' | 'right';\n\nexport function Direction( { value, onChange, interactionType }: DirectionFieldProps ) {\n\tconst options: ToggleButtonGroupItem< Direction >[] = useMemo( () => {\n\t\tconst isIn = interactionType === 'in';\n\n\t\treturn [\n\t\t\t{\n\t\t\t\tvalue: 'top',\n\t\t\t\tlabel: isIn ? __( 'From top', 'elementor' ) : __( 'To top', 'elementor' ),\n\t\t\t\trenderContent: ( { size } ) =>\n\t\t\t\t\tisIn ? <ArrowDownSmallIcon fontSize={ size } /> : <ArrowUpSmallIcon fontSize={ size } />,\n\t\t\t\tshowTooltip: true,\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'bottom',\n\t\t\t\tlabel: interactionType === 'in' ? __( 'From bottom', 'elementor' ) : __( 'To bottom', 'elementor' ),\n\t\t\t\trenderContent: ( { size } ) =>\n\t\t\t\t\tisIn ? <ArrowUpSmallIcon fontSize={ size } /> : <ArrowDownSmallIcon fontSize={ size } />,\n\t\t\t\tshowTooltip: true,\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'left',\n\t\t\t\tlabel: interactionType === 'in' ? __( 'From left', 'elementor' ) : __( 'To left', 'elementor' ),\n\t\t\t\trenderContent: ( { size } ) =>\n\t\t\t\t\tisIn ? <ArrowRightIcon fontSize={ size } /> : <ArrowLeftIcon fontSize={ size } />,\n\t\t\t\tshowTooltip: true,\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'right',\n\t\t\t\tlabel: interactionType === 'in' ? __( 'From right', 'elementor' ) : __( 'To right', 'elementor' ),\n\t\t\t\trenderContent: ( { size } ) =>\n\t\t\t\t\tisIn ? <ArrowLeftIcon fontSize={ size } /> : <ArrowRightIcon fontSize={ size } />,\n\t\t\t\tshowTooltip: true,\n\t\t\t},\n\t\t];\n\t}, [ interactionType ] );\n\n\treturn (\n\t\t<Grid item xs={ 12 }>\n\t\t\t<PopoverGridContainer>\n\t\t\t\t<Grid item xs={ 6 }>\n\t\t\t\t\t<ControlFormLabel> { __( 'Direction', 'elementor' ) }</ControlFormLabel>\n\t\t\t\t</Grid>\n\t\t\t\t<Grid item xs={ 6 }>\n\t\t\t\t\t<ToggleButtonGroupUi items={ options } exclusive onChange={ onChange } value={ value } />\n\t\t\t\t</Grid>\n\t\t\t</PopoverGridContainer>\n\t\t</Grid>\n\t);\n}\n","import * as React from 'react';\nimport { ControlFormLabel, PopoverGridContainer } from '@elementor/editor-controls';\nimport { MenuListItem } from '@elementor/editor-ui';\nimport { Grid, Select, type SelectChangeEvent } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type FieldProps } from '../../types';\nexport function Effect( { value, onChange }: FieldProps ) {\n\tconst availableEffects = [\n\t\t{ key: 'fade', label: __( 'Fade', 'elementor' ) },\n\t\t{ key: 'slide', label: __( 'Slide', 'elementor' ) },\n\t\t{ key: 'scale', label: __( 'Scale', 'elementor' ) },\n\t];\n\n\treturn (\n\t\t<Grid item xs={ 12 }>\n\t\t\t<PopoverGridContainer>\n\t\t\t\t<Grid item xs={ 6 }>\n\t\t\t\t\t<ControlFormLabel>{ __( 'Effect', 'elementor' ) }</ControlFormLabel>\n\t\t\t\t</Grid>\n\t\t\t\t<Grid item xs={ 6 }>\n\t\t\t\t\t<Select\n\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\tdisplayEmpty\n\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ availableEffects.map( ( effect ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<MenuListItem key={ effect.key } value={ effect.key }>\n\t\t\t\t\t\t\t\t\t{ effect.label }\n\t\t\t\t\t\t\t\t</MenuListItem>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Select>\n\t\t\t\t</Grid>\n\t\t\t</PopoverGridContainer>\n\t\t</Grid>\n\t);\n}\n","import * as React from 'react';\nimport {\n\tControlFormLabel,\n\tPopoverGridContainer,\n\ttype ToggleButtonGroupItem,\n\tToggleButtonGroupUi,\n} from '@elementor/editor-controls';\nimport { Grid } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type FieldProps } from '../../types';\n\ntype EffectType = 'in' | 'out';\nexport function EffectType( { value, onChange }: FieldProps ) {\n\tconst options: ToggleButtonGroupItem< EffectType >[] = [\n\t\t{\n\t\t\tvalue: 'in',\n\t\t\tlabel: __( 'In', 'elementor' ),\n\t\t\trenderContent: () => __( 'In', 'elementor' ),\n\t\t},\n\t\t{\n\t\t\tvalue: 'out',\n\t\t\tlabel: __( 'Out', 'elementor' ),\n\t\t\trenderContent: () => __( 'Out', 'elementor' ),\n\t\t},\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t<PopoverGridContainer>\n\t\t\t\t\t<Grid item xs={ 6 }>\n\t\t\t\t\t\t<ControlFormLabel>{ __( 'Type', 'elementor' ) }</ControlFormLabel>\n\t\t\t\t\t</Grid>\n\t\t\t\t\t<Grid item xs={ 6 }>\n\t\t\t\t\t\t<ToggleButtonGroupUi items={ options } exclusive onChange={ onChange } value={ value } />\n\t\t\t\t\t</Grid>\n\t\t\t\t</PopoverGridContainer>\n\t\t\t</Grid>\n\t\t</>\n\t);\n}\n","import * as React from 'react';\nimport { ControlFormLabel, PopoverGridContainer } from '@elementor/editor-controls';\nimport { MenuListItem } from '@elementor/editor-ui';\nimport { Grid, Select, type SelectChangeEvent } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type FieldProps } from '../../types';\n\nexport function TimeFrameIndicator( { value, onChange, label }: FieldProps ) {\n\tconst availableTimeFrames = [ '0', '100', '200', '300', '400', '500', '750', '1000', '1250', '1500' ].map(\n\t\t( key ) => ( {\n\t\t\tkey,\n\t\t\t// translators: %s: time in milliseconds\n\t\t\tlabel: __( '%s MS', 'elementor' ).replace( '%s', key ),\n\t\t} )\n\t);\n\n\treturn (\n\t\t<Grid item xs={ 12 }>\n\t\t\t<PopoverGridContainer>\n\t\t\t\t<Grid item xs={ 6 }>\n\t\t\t\t\t<ControlFormLabel>{ label }</ControlFormLabel>\n\t\t\t\t</Grid>\n\t\t\t\t<Grid item xs={ 6 }>\n\t\t\t\t\t<Select\n\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\tdisplayEmpty\n\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ availableTimeFrames.map( ( timeFrame ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<MenuListItem key={ timeFrame.key } value={ timeFrame.key }>\n\t\t\t\t\t\t\t\t\t{ timeFrame.label }\n\t\t\t\t\t\t\t\t</MenuListItem>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Select>\n\t\t\t\t</Grid>\n\t\t\t</PopoverGridContainer>\n\t\t</Grid>\n\t);\n}\n","import * as React from 'react';\nimport { ControlFormLabel, PopoverGridContainer } from '@elementor/editor-controls';\nimport { MenuListItem } from '@elementor/editor-ui';\nimport { Grid, Select, type SelectChangeEvent } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type FieldProps } from '../../types';\n\nexport function Trigger( { value, onChange }: FieldProps ) {\n\tconst availableTriggers = Object.entries( {\n\t\tload: __( 'Page load', 'elementor' ),\n\t\tscrollIn: __( 'Scroll into view', 'elementor' ),\n\t\tscrollOut: __( 'Scroll out of view', 'elementor' ),\n\t} ).map( ( [ key, label ] ) => ( {\n\t\tkey,\n\t\tlabel,\n\t} ) );\n\n\treturn (\n\t\t<Grid item xs={ 12 }>\n\t\t\t<PopoverGridContainer>\n\t\t\t\t<Grid item xs={ 6 }>\n\t\t\t\t\t<ControlFormLabel>{ __( 'Trigger', 'elementor' ) }</ControlFormLabel>\n\t\t\t\t</Grid>\n\t\t\t\t<Grid item xs={ 6 }>\n\t\t\t\t\t<Select\n\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\tdisplayEmpty\n\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\tonChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ availableTriggers.map( ( trigger ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<MenuListItem key={ trigger.key } value={ trigger.key }>\n\t\t\t\t\t\t\t\t\t{ trigger.label }\n\t\t\t\t\t\t\t\t</MenuListItem>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Select>\n\t\t\t\t</Grid>\n\t\t\t</PopoverGridContainer>\n\t\t</Grid>\n\t);\n}\n","import { type InteractionsProvider } from '../types';\n\nexport const createInteractionsRepository = () => {\n\tconst providers: InteractionsProvider[] = [];\n\n\tconst getProviders = () => {\n\t\tconst sorted = providers.slice( 0 ).sort( ( a, b ) => ( a.priority > b.priority ? -1 : 1 ) );\n\t\treturn sorted;\n\t};\n\n\tconst register = ( provider: InteractionsProvider ) => {\n\t\tproviders.push( provider );\n\t};\n\n\tconst all = () => {\n\t\treturn getProviders().flatMap( ( provider ) => provider.actions.all() );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = providers.map( ( provider ) => provider.subscribe( cb ) );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\tconst getProviderByKey = ( key: string ) => {\n\t\treturn providers.find( ( provider ) => {\n\t\t\ttry {\n\t\t\t\treturn provider.getKey() === key;\n\t\t\t} catch {\n\t\t\t\t// Provider might not be ready yet (e.g., no document loaded)\n\t\t\t\treturn false;\n\t\t\t}\n\t\t} );\n\t};\n\n\treturn {\n\t\tall,\n\t\tregister,\n\t\tsubscribe,\n\t\tgetProviders,\n\t\tgetProviderByKey,\n\t};\n};\n","import { createInteractionsRepository } from './utils/create-interactions-repository';\n\nexport const interactionsRepository = createInteractionsRepository();\n","import { type InteractionsProvider } from '../types';\n\nexport type CreateInteractionsProviderOptions = {\n\tkey: string | ( () => string );\n\tpriority?: number;\n\tsubscribe?: ( callback: () => void ) => () => void;\n\tactions: {\n\t\tall: InteractionsProvider[ 'actions' ][ 'all' ];\n\t};\n};\n\nconst DEFAULT_PRIORITY = 10;\n\nexport function createInteractionsProvider( {\n\tkey,\n\tpriority = DEFAULT_PRIORITY,\n\tsubscribe = () => () => {},\n\tactions,\n}: CreateInteractionsProviderOptions ): InteractionsProvider {\n\treturn {\n\t\tgetKey: typeof key === 'string' ? () => key : key,\n\t\tpriority,\n\t\tsubscribe,\n\t\tactions: {\n\t\t\tall: actions.all,\n\t\t},\n\t};\n}\n","import { getCurrentDocumentId, getElementInteractions, getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, windowEvent } from '@elementor/editor-v1-adapters';\n\nimport { createInteractionsProvider } from '../utils/create-interactions-provider';\n\nexport const ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX = 'document-elements-interactions-';\n\nexport const documentElementsInteractionsProvider = createInteractionsProvider( {\n\tkey: () => {\n\t\tconst documentId = getCurrentDocumentId();\n\n\t\tif ( ! documentId ) {\n\t\t\tconst pendingKey = `${ ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX }pending`;\n\t\t\treturn pendingKey;\n\t\t}\n\n\t\tconst key = `${ ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX }${ documentId }`;\n\t\treturn key;\n\t},\n\tpriority: 50,\n\tsubscribe: ( cb ) => {\n\t\treturn listenTo( [ windowEvent( 'elementor/element/update_interactions' ) ], () => cb() );\n\t},\n\tactions: {\n\t\tall: () => {\n\t\t\tconst elements = getElements();\n\n\t\t\tconst filtered = elements.filter( ( element ) => {\n\t\t\t\tconst interactions = getElementInteractions( element.id );\n\t\t\t\tif ( ! interactions ) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t\treturn interactions?.items?.length > 0;\n\t\t\t} );\n\n\t\t\treturn filtered.map( ( element ) => {\n\t\t\t\tconst interactions = getElementInteractions( element.id );\n\t\t\t\treturn {\n\t\t\t\t\telementId: element.id,\n\t\t\t\t\tdataId: element.id,\n\t\t\t\t\tinteractions: interactions || { version: 1, items: [] },\n\t\t\t\t};\n\t\t\t} );\n\t\t},\n\t},\n} );\n","import { interactionsRepository } from './interactions-repository';\nimport { documentElementsInteractionsProvider } from './providers/document-elements-interactions-provider';\n\nexport function init() {\n\ttry {\n\t\tinteractionsRepository.register( documentElementsInteractionsProvider );\n\t} catch ( error ) {\n\t\tthrow error;\n\t}\n}\n"],"mappings":"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","names":["React","import_react","import_editor_elements","import_ui","React","React","import_react","React","import_react","import_editor_controls","import_icons","import_ui","import_i18n","React","import_editor_controls","import_ui","import_i18n","React","import_react","import_icons","import_ui","import_i18n","React","import_editor_controls","import_ui","import_i18n","React","import_editor_controls","import_ui","import_i18n","React","import_editor_controls","import_editor_ui","import_ui","import_i18n","React","import_editor_controls","import_editor_ui","import_ui","import_i18n","import_editor_elements","listenTo"]}

package/dist/index.mjs

@@ -109,15 +109,20 @@ function getInteractionsConfig() {
 
 // src/components/interaction-details.tsx
 import * as React9 from "react";
+import { PopoverContent } from "@elementor/editor-controls";
 import { Divider, Grid as Grid6 } from "@elementor/ui";
 import { __ as __7 } from "@wordpress/i18n";
 
 // src/components/controls/direction.tsx
 import * as React4 from "react";
 import { useMemo } from "react";
-import { ToggleButtonGroupUi } from "@elementor/editor-controls";
+import {
+  ControlFormLabel,
+  PopoverGridContainer,
+  ToggleButtonGroupUi
+} from "@elementor/editor-controls";
 import { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from "@elementor/icons";
-import { Grid, Typography as Typography2 } from "@elementor/ui";
+import { Grid } from "@elementor/ui";
 import { __ as __2 } from "@wordpress/i18n";
 function Direction({ value, onChange, interactionType }) {
   const options = useMemo(() => {
@@ -149,13 +154,14 @@ function Direction({ value, onChange, interactionType }) {
       }
     ];
   }, [interactionType]);
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React4.createElement(Typography2, { variant: "caption", color: "text.secondary" }, __2("Direction", "elementor"))), /* @__PURE__ */ React4.createElement(Grid, { item: true, xs: 12, md: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React4.createElement(ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value })));
+  return /* @__PURE__ */ React4.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React4.createElement(PopoverGridContainer, null, /* @__PURE__ */ React4.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React4.createElement(ControlFormLabel, null, " ", __2("Direction", "elementor"))), /* @__PURE__ */ React4.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React4.createElement(ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value }))));
 }
 
 // src/components/controls/effect.tsx
 import * as React5 from "react";
+import { ControlFormLabel as ControlFormLabel2, PopoverGridContainer as PopoverGridContainer2 } from "@elementor/editor-controls";
 import { MenuListItem } from "@elementor/editor-ui";
-import { Grid as Grid2, Select, Typography as Typography3 } from "@elementor/ui";
+import { Grid as Grid2, Select } from "@elementor/ui";
 import { __ as __3 } from "@wordpress/i18n";
 function Effect({ value, onChange }) {
   const availableEffects = [
@@ -163,7 +169,7 @@ function Effect({ value, onChange }) {
     { key: "slide", label: __3("Slide", "elementor") },
     { key: "scale", label: __3("Scale", "elementor") }
   ];
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(Grid2, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React5.createElement(Typography3, { variant: "caption", color: "text.secondary" }, __3("Effect", "elementor"))), /* @__PURE__ */ React5.createElement(Grid2, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React5.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React5.createElement(PopoverGridContainer2, null, /* @__PURE__ */ React5.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React5.createElement(ControlFormLabel2, null, __3("Effect", "elementor"))), /* @__PURE__ */ React5.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React5.createElement(
     Select,
     {
       fullWidth: true,
@@ -175,13 +181,17 @@ function Effect({ value, onChange }) {
     availableEffects.map((effect) => {
       return /* @__PURE__ */ React5.createElement(MenuListItem, { key: effect.key, value: effect.key }, effect.label);
     })
-  )));
+  ))));
 }
 
 // src/components/controls/effect-type.tsx
 import * as React6 from "react";
-import { ToggleButtonGroupUi as ToggleButtonGroupUi2 } from "@elementor/editor-controls";
-import { Grid as Grid3, Typography as Typography4 } from "@elementor/ui";
+import {
+  ControlFormLabel as ControlFormLabel3,
+  PopoverGridContainer as PopoverGridContainer3,
+  ToggleButtonGroupUi as ToggleButtonGroupUi2
+} from "@elementor/editor-controls";
+import { Grid as Grid3 } from "@elementor/ui";
 import { __ as __4 } from "@wordpress/i18n";
 function EffectType({ value, onChange }) {
   const options = [
@@ -196,13 +206,14 @@ function EffectType({ value, onChange }) {
       renderContent: () => __4("Out", "elementor")
     }
   ];
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(Grid3, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React6.createElement(Typography4, { variant: "caption", color: "text.secondary" }, __4("Type", "elementor"))), /* @__PURE__ */ React6.createElement(Grid3, { item: true, xs: 12, md: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React6.createElement(ToggleButtonGroupUi2, { items: options, exclusive: true, onChange, value })));
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React6.createElement(PopoverGridContainer3, null, /* @__PURE__ */ React6.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React6.createElement(ControlFormLabel3, null, __4("Type", "elementor"))), /* @__PURE__ */ React6.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React6.createElement(ToggleButtonGroupUi2, { items: options, exclusive: true, onChange, value })))));
 }
 
 // src/components/controls/time-frame-indicator.tsx
 import * as React7 from "react";
+import { ControlFormLabel as ControlFormLabel4, PopoverGridContainer as PopoverGridContainer4 } from "@elementor/editor-controls";
 import { MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
-import { Grid as Grid4, Select as Select2, Typography as Typography5 } from "@elementor/ui";
+import { Grid as Grid4, Select as Select2 } from "@elementor/ui";
 import { __ as __5 } from "@wordpress/i18n";
 function TimeFrameIndicator({ value, onChange, label }) {
   const availableTimeFrames = ["0", "100", "200", "300", "400", "500", "750", "1000", "1250", "1500"].map(
@@ -212,7 +223,7 @@ function TimeFrameIndicator({ value, onChange, label }) {
       label: __5("%s MS", "elementor").replace("%s", key)
     })
   );
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Grid4, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React7.createElement(Typography5, { variant: "caption", color: "text.secondary" }, label)), /* @__PURE__ */ React7.createElement(Grid4, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React7.createElement(PopoverGridContainer4, null, /* @__PURE__ */ React7.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React7.createElement(ControlFormLabel4, null, label)), /* @__PURE__ */ React7.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React7.createElement(
     Select2,
     {
       fullWidth: true,
@@ -224,13 +235,14 @@ function TimeFrameIndicator({ value, onChange, label }) {
     availableTimeFrames.map((timeFrame) => {
       return /* @__PURE__ */ React7.createElement(MenuListItem2, { key: timeFrame.key, value: timeFrame.key }, timeFrame.label);
     })
-  )));
+  ))));
 }
 
 // src/components/controls/trigger.tsx
 import * as React8 from "react";
+import { ControlFormLabel as ControlFormLabel5, PopoverGridContainer as PopoverGridContainer5 } from "@elementor/editor-controls";
 import { MenuListItem as MenuListItem3 } from "@elementor/editor-ui";
-import { Grid as Grid5, Select as Select3, Typography as Typography6 } from "@elementor/ui";
+import { Grid as Grid5, Select as Select3 } from "@elementor/ui";
 import { __ as __6 } from "@wordpress/i18n";
 function Trigger({ value, onChange }) {
   const availableTriggers = Object.entries({
@@ -241,7 +253,7 @@ function Trigger({ value, onChange }) {
     key,
     label
   }));
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Grid5, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React8.createElement(Typography6, { variant: "caption", color: "text.secondary" }, __6("Trigger", "elementor"))), /* @__PURE__ */ React8.createElement(Grid5, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React8.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(PopoverGridContainer5, null, /* @__PURE__ */ React8.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(ControlFormLabel5, null, __6("Trigger", "elementor"))), /* @__PURE__ */ React8.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(
     Select3,
     {
       fullWidth: true,
@@ -253,7 +265,7 @@ function Trigger({ value, onChange }) {
     availableTriggers.map((trigger) => {
       return /* @__PURE__ */ React8.createElement(MenuListItem3, { key: trigger.key, value: trigger.key }, trigger.label);
     })
-  )));
+  ))));
 }
 
 // src/components/interaction-details.tsx
@@ -293,7 +305,7 @@ var InteractionDetails = ({ interaction, onChange }) => {
     const newInteractionDetails = { ...interactionDetails, [key]: value };
     onChange(Object.values(newInteractionDetails).join(DELIMITER));
   };
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(Grid6, { container: true, spacing: 2, sx: { p: 1.5 } }, /* @__PURE__ */ React9.createElement(Trigger, { value: interactionDetails.trigger, onChange: (v) => handleChange("trigger", v) })), /* @__PURE__ */ React9.createElement(Divider, { sx: { mx: 1.5 } }), /* @__PURE__ */ React9.createElement(Grid6, { container: true, spacing: 2, sx: { p: 1.5 } }, /* @__PURE__ */ React9.createElement(Effect, { value: interactionDetails.effect, onChange: (v) => handleChange("effect", v) }), /* @__PURE__ */ React9.createElement(EffectType, { value: interactionDetails.type, onChange: (v) => handleChange("type", v) }), /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React9.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React9.createElement(Grid6, { container: true, spacing: 1.5 }, /* @__PURE__ */ React9.createElement(Trigger, { value: interactionDetails.trigger, onChange: (v) => handleChange("trigger", v) })), /* @__PURE__ */ React9.createElement(Divider, { sx: { mx: 1.5 } }), /* @__PURE__ */ React9.createElement(Grid6, { container: true, spacing: 1.5 }, /* @__PURE__ */ React9.createElement(Effect, { value: interactionDetails.effect, onChange: (v) => handleChange("effect", v) }), /* @__PURE__ */ React9.createElement(EffectType, { value: interactionDetails.type, onChange: (v) => handleChange("type", v) }), /* @__PURE__ */ React9.createElement(
     Direction,
     {
       value: interactionDetails.direction,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/empty-state.tsx","../src/components/interactions-tab.tsx","../src/contexts/interactions-context.tsx","../src/contexts/popup-state-context.tsx","../src/components/interactions-list.tsx","../src/utils/get-interactions-config.ts","../src/components/interaction-details.tsx","../src/components/controls/direction.tsx","../src/components/controls/effect.tsx","../src/components/controls/effect-type.tsx","../src/components/controls/time-frame-indicator.tsx","../src/components/controls/trigger.tsx","../src/utils/create-interactions-repository.ts","../src/interactions-repository.ts","../src/utils/create-interactions-provider.ts","../src/providers/document-elements-interactions-provider.ts","../src/init.ts"],"sourcesContent":["import * as React from 'react';\nimport { SwipeIcon } from '@elementor/icons';\nimport { Button, Stack, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nexport const EmptyState = ( { onCreateInteraction }: { onCreateInteraction: () => void } ) => {\n\treturn (\n\t\t<Stack\n\t\t\talignItems=\"center\"\n\t\t\tjustifyContent=\"center\"\n\t\t\theight=\"100%\"\n\t\t\tcolor=\"text.secondary\"\n\t\t\tsx={ { p: 2.5, pt: 8, pb: 5.5 } }\n\t\t\tgap={ 1.5 }\n\t\t>\n\t\t\t<SwipeIcon fontSize=\"large\" />\n\n\t\t\t<Typography align=\"center\" variant=\"subtitle2\">\n\t\t\t\t{ __( 'Animate elements with Interactions', 'elementor' ) }\n\t\t\t</Typography>\n\n\t\t\t<Typography align=\"center\" variant=\"caption\" maxWidth=\"170px\">\n\t\t\t\t{ __(\n\t\t\t\t\t'Add entrance animations and effects triggered by user interactions such as page load or scroll.',\n\t\t\t\t\t'elementor'\n\t\t\t\t) }\n\t\t\t</Typography>\n\n\t\t\t<Button variant=\"outlined\" color=\"secondary\" size=\"small\" sx={ { mt: 1 } } onClick={ onCreateInteraction }>\n\t\t\t\t{ __( 'Create an interaction', 'elementor' ) }\n\t\t\t</Button>\n\t\t</Stack>\n\t);\n};\n","import * as React from 'react';\nimport { useCallback, useState } from 'react';\nimport { type ElementInteractions, useElementInteractions } from '@elementor/editor-elements';\nimport { SessionStorageProvider } from '@elementor/session';\nimport { Stack } from '@elementor/ui';\n\nimport { InteractionsProvider, useInteractionsContext } from '../contexts/interactions-context';\nimport { PopupStateProvider } from '../contexts/popup-state-context';\nimport { EmptyState } from './empty-state';\nimport { InteractionsList } from './interactions-list';\n\nexport const InteractionsTab = ( { elementId }: { elementId: string } ) => {\n\treturn (\n\t\t<PopupStateProvider>\n\t\t\t<InteractionsTabContent elementId={ elementId } />\n\t\t</PopupStateProvider>\n\t);\n};\n\nfunction InteractionsTabContent( { elementId }: { elementId: string } ) {\n\tconst existingInteractions = useElementInteractions( elementId );\n\tconst [ firstInteraction, setFirstInteraction ] = useState< boolean >( false );\n\tconst hasInteractions = existingInteractions?.items?.length || firstInteraction;\n\n\treturn (\n\t\t<SessionStorageProvider prefix={ elementId }>\n\t\t\t{ hasInteractions ? (\n\t\t\t\t<InteractionsProvider elementId={ elementId }>\n\t\t\t\t\t<InteractionsContent firstInteraction={ firstInteraction } />\n\t\t\t\t</InteractionsProvider>\n\t\t\t) : (\n\t\t\t\t<EmptyState\n\t\t\t\t\tonCreateInteraction={ () => {\n\t\t\t\t\t\tsetFirstInteraction( true );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</SessionStorageProvider>\n\t);\n}\n\nfunction InteractionsContent( { firstInteraction }: { firstInteraction: boolean } ) {\n\tconst { interactions, setInteractions, playInteractions } = useInteractionsContext();\n\n\tconst applyInteraction = useCallback(\n\t\t( newInteractions: ElementInteractions ) => {\n\t\t\tif ( ! newInteractions ) {\n\t\t\t\tsetInteractions( undefined );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetInteractions( newInteractions );\n\t\t},\n\t\t[ setInteractions ]\n\t);\n\n\treturn (\n\t\t<Stack sx={ { m: 1, p: 1.5 } } gap={ 2 }>\n\t\t\t<InteractionsList\n\t\t\t\ttriggerCreateOnShowEmpty={ firstInteraction }\n\t\t\t\tinteractions={ interactions }\n\t\t\t\tonSelectInteractions={ applyInteraction }\n\t\t\t\tonPlayInteraction={ playInteractions }\n\t\t\t/>\n\t\t</Stack>\n\t);\n}\n","import * as React from 'react';\nimport { createContext, type ReactNode, useContext, useEffect } from 'react';\nimport {\n\ttype ElementInteractions,\n\tplayElementInteractions,\n\tupdateElementInteractions,\n\tuseElementInteractions,\n} from '@elementor/editor-elements';\n\ntype InteractionsContextValue = {\n\tinteractions: ElementInteractions;\n\tsetInteractions: ( value: ElementInteractions | undefined ) => void;\n\tplayInteractions: ( animationId: string ) => void;\n};\n\nconst InteractionsContext = createContext< InteractionsContextValue | null >( null );\n\nexport const InteractionsProvider = ( { children, elementId }: { children: ReactNode; elementId: string } ) => {\n\tconst interactions = useElementInteractions( elementId );\n\n\tuseEffect( () => {\n\t\twindow.dispatchEvent( new CustomEvent( 'elementor/element/update_interactions' ) );\n\t}, [] );\n\n\tconst setInteractions = ( value: ElementInteractions | undefined ) => {\n\t\tupdateElementInteractions( {\n\t\t\telementId,\n\t\t\tinteractions: value,\n\t\t} );\n\t};\n\n\tconst playInteractions = ( animationId: string ) => {\n\t\tplayElementInteractions( elementId, animationId );\n\t};\n\n\tconst contextValue: InteractionsContextValue = {\n\t\tinteractions,\n\t\tsetInteractions,\n\t\tplayInteractions,\n\t};\n\n\treturn <InteractionsContext.Provider value={ contextValue }>{ children }</InteractionsContext.Provider>;\n};\n\nexport const useInteractionsContext = () => {\n\tconst context = useContext( InteractionsContext );\n\tif ( ! context ) {\n\t\tthrow new Error( 'useInteractionsContext must be used within InteractionsProvider' );\n\t}\n\treturn context;\n};\n","import * as React from 'react';\nimport { createContext, useCallback, useContext, useState } from 'react';\n\ntype PopupStateContextType = {\n\topenByDefault: boolean;\n\ttriggerDefaultOpen: () => void;\n\tresetDefaultOpen: () => void;\n};\n\nconst PopupStateContext = createContext< PopupStateContextType | undefined >( undefined );\n\nexport const PopupStateProvider = ( { children }: { children: React.ReactNode } ) => {\n\tconst [ openByDefault, setOpenByDefault ] = useState( false );\n\n\tconst triggerDefaultOpen = useCallback( () => {\n\t\tsetOpenByDefault( true );\n\t}, [] );\n\n\tconst resetDefaultOpen = useCallback( () => {\n\t\tsetOpenByDefault( false );\n\t}, [] );\n\n\treturn (\n\t\t<PopupStateContext.Provider value={ { openByDefault, triggerDefaultOpen, resetDefaultOpen } }>\n\t\t\t{ children }\n\t\t</PopupStateContext.Provider>\n\t);\n};\n\nexport const usePopupStateContext = () => {\n\tconst context = useContext( PopupStateContext );\n\tif ( ! context ) {\n\t\tthrow new Error( 'usePopupStateContext must be used within PopupStateProvider' );\n\t}\n\treturn context;\n};\n","import * as React from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { Repeater } from '@elementor/editor-controls';\nimport { type ElementInteractions } from '@elementor/editor-elements';\nimport { PlayerPlayIcon } from '@elementor/icons';\nimport { IconButton } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { getInteractionsConfig } from '../utils/get-interactions-config';\nimport { DEFAULT_INTERACTION, InteractionDetails } from './interaction-details';\n\nexport const MAX_NUMBER_OF_INTERACTIONS = 5;\n\nexport type InteractionListProps = {\n\tonSelectInteractions: ( interactions: ElementInteractions ) => void;\n\tinteractions: ElementInteractions;\n\tonPlayInteraction: ( interactionId: string ) => void;\n\ttriggerCreateOnShowEmpty?: boolean;\n};\n\nexport function InteractionsList( props: InteractionListProps ) {\n\tconst { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;\n\n\tconst [ interactionsState, setInteractionsState ] = useState< ElementInteractions >( interactions );\n\n\tuseEffect( () => {\n\t\tif ( JSON.stringify( interactions.items ) !== JSON.stringify( interactionsState ) ) {\n\t\t\tonSelectInteractions( interactionsState );\n\t\t}\n\t}, [ interactions.items, interactionsState, onSelectInteractions ] );\n\n\tconst isMaxNumberOfInteractionsReached = useMemo( () => {\n\t\treturn interactionsState.items?.length >= MAX_NUMBER_OF_INTERACTIONS;\n\t}, [ interactionsState.items ] );\n\n\tif ( triggerCreateOnShowEmpty && ( ! interactionsState.items || interactionsState.items?.length === 0 ) ) {\n\t\tsetInteractionsState( {\n\t\t\tversion: 1,\n\t\t\titems: [\n\t\t\t\t{\n\t\t\t\t\tanimation: {\n\t\t\t\t\t\tanimation_id: DEFAULT_INTERACTION,\n\t\t\t\t\t\tanimation_type: 'full-preset',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t} );\n\t}\n\n\tconst displayLabel = ( interactionForDisplay: string ) => {\n\t\tif ( ! interactionForDisplay ) {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst animationOptions = getInteractionsConfig()?.animationOptions;\n\t\tconst option = animationOptions.find( ( opt ) => opt.value === interactionForDisplay );\n\n\t\treturn option?.label || interactionForDisplay;\n\t};\n\n\treturn (\n\t\t<Repeater\n\t\t\topenOnAdd\n\t\t\topenItem={ triggerCreateOnShowEmpty ? 0 : undefined }\n\t\t\tlabel={ __( 'Interactions', 'elementor' ) }\n\t\t\tvalues={ interactionsState.items }\n\t\t\tsetValues={ ( newValue: ElementInteractions[ 'items' ] ) => {\n\t\t\t\tsetInteractionsState( {\n\t\t\t\t\t...interactionsState,\n\t\t\t\t\titems: newValue,\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tshowDuplicate={ false }\n\t\t\tshowToggle={ false }\n\t\t\tisSortable={ false }\n\t\t\tdisableAddItemButton={ isMaxNumberOfInteractionsReached }\n\t\t\titemSettings={ {\n\t\t\t\tinitialValues: {\n\t\t\t\t\tanimation: {\n\t\t\t\t\t\tanimation_id: DEFAULT_INTERACTION,\n\t\t\t\t\t\tanimation_type: 'full-preset',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tLabel: ( { value } ) => displayLabel( value.animation.animation_id ),\n\t\t\t\tIcon: () => null,\n\t\t\t\tContent: ( { index, value } ) => (\n\t\t\t\t\t<InteractionDetails\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tinteraction={ value.animation.animation_id }\n\t\t\t\t\t\tonChange={ ( newValue: string ) => {\n\t\t\t\t\t\t\tconst newInteractions = { ...interactionsState };\n\t\t\t\t\t\t\tnewInteractions.items[ index ] = {\n\t\t\t\t\t\t\t\t...newInteractions.items[ index ],\n\t\t\t\t\t\t\t\tanimation: {\n\t\t\t\t\t\t\t\t\t...newInteractions.items[ index ].animation,\n\t\t\t\t\t\t\t\t\tanimation_id: newValue,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\tsetInteractionsState( { ...interactionsState, items: newInteractions.items } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tactions: ( value ) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<IconButton size=\"tiny\" onClick={ () => onPlayInteraction( value.animation.animation_id ) }>\n\t\t\t\t\t\t\t<PlayerPlayIcon fontSize=\"tiny\" />\n\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t</>\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n","import { type InteractionsConfig } from '../types';\n\nconst DEFAULT_CONFIG: InteractionsConfig = {\n\tconstants: {\n\t\tdefaultDuration: 300,\n\t\tdefaultDelay: 0,\n\t\tslideDistance: 100,\n\t\tscaleStart: 0.5,\n\t\teasing: 'linear',\n\t},\n\tanimationOptions: [],\n};\n\nexport function getInteractionsConfig(): InteractionsConfig {\n\treturn window.ElementorInteractionsConfig || DEFAULT_CONFIG;\n}\n","import * as React from 'react';\nimport { Divider, Grid } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { Direction } from './controls/direction';\nimport { Effect } from './controls/effect';\nimport { EffectType } from './controls/effect-type';\nimport { TimeFrameIndicator } from './controls/time-frame-indicator';\nimport { Trigger } from './controls/trigger';\n\nconst DELIMITER = '-';\n\ntype InteractionDetailsProps = {\n\tinteraction: string;\n\tonChange: ( interaction: string ) => void;\n};\nexport const DEFAULT_INTERACTION = 'load-fade-in--300-0';\n\nconst getDefaultInteractionDetails = () => {\n\tconst [ trigger, effect, type, direction, duration, delay ] = DEFAULT_INTERACTION.split( DELIMITER );\n\n\treturn {\n\t\ttrigger,\n\t\teffect,\n\t\ttype,\n\t\tdirection,\n\t\tduration,\n\t\tdelay,\n\t};\n};\n\nconst buildInteractionDetails = ( interaction: string ) => {\n\tconst [ trigger, effect, type, direction, duration, delay ] = interaction.split( DELIMITER );\n\tconst defaultInteractionDetails = getDefaultInteractionDetails();\n\n\treturn {\n\t\ttrigger: trigger || defaultInteractionDetails.trigger,\n\t\teffect: effect || defaultInteractionDetails.effect,\n\t\ttype: type || defaultInteractionDetails.type,\n\t\tdirection: direction || defaultInteractionDetails.direction,\n\t\tduration: duration || defaultInteractionDetails.duration,\n\t\tdelay: delay || defaultInteractionDetails.delay,\n\t};\n};\n\nexport const InteractionDetails = ( { interaction, onChange }: InteractionDetailsProps ) => {\n\tconst interactionDetails = React.useMemo( () => {\n\t\treturn buildInteractionDetails( interaction );\n\t}, [ interaction ] );\n\n\tconst handleChange = < K extends keyof typeof interactionDetails >(\n\t\tkey: K,\n\t\tvalue: ( typeof interactionDetails )[ K ]\n\t) => {\n\t\tif ( value === null ) {\n\t\t\tvalue = getDefaultInteractionDetails()[ key ];\n\t\t}\n\t\tconst newInteractionDetails = { ...interactionDetails, [ key ]: value };\n\t\tonChange( Object.values( newInteractionDetails ).join( DELIMITER ) );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<Grid container spacing={ 2 } sx={ { p: 1.5 } }>\n\t\t\t\t<Trigger value={ interactionDetails.trigger } onChange={ ( v ) => handleChange( 'trigger', v ) } />\n\t\t\t</Grid>\n\t\t\t<Divider sx={ { mx: 1.5 } } />\n\t\t\t<Grid container spacing={ 2 } sx={ { p: 1.5 } }>\n\t\t\t\t<Effect value={ interactionDetails.effect } onChange={ ( v ) => handleChange( 'effect', v ) } />\n\t\t\t\t<EffectType value={ interactionDetails.type } onChange={ ( v ) => handleChange( 'type', v ) } />\n\t\t\t\t<Direction\n\t\t\t\t\tvalue={ interactionDetails.direction }\n\t\t\t\t\tonChange={ ( v ) => handleChange( 'direction', v ) }\n\t\t\t\t\tinteractionType={ interactionDetails.type }\n\t\t\t\t/>\n\t\t\t\t<TimeFrameIndicator\n\t\t\t\t\tvalue={ interactionDetails.duration }\n\t\t\t\t\tonChange={ ( v ) => handleChange( 'duration', v ) }\n\t\t\t\t\tlabel={ __( 'Duration', 'elementor' ) }\n\t\t\t\t/>\n\t\t\t\t<TimeFrameIndicator\n\t\t\t\t\tvalue={ interactionDetails.delay }\n\t\t\t\t\tonChange={ ( v ) => handleChange( 'delay', v ) }\n\t\t\t\t\tlabel={ __( 'Delay', 'elementor' ) }\n\t\t\t\t/>\n\t\t\t</Grid>\n\t\t</>\n\t);\n};\n","import * as React from 'react';\nimport { useMemo } from 'react';\nimport { type ToggleButtonGroupItem, ToggleButtonGroupUi } from '@elementor/editor-controls';\nimport { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from '@elementor/icons';\nimport { Grid, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type DirectionFieldProps } from '../../types';\n\ntype Direction = 'top' | 'bottom' | 'left' | 'right';\n\nexport function Direction( { value, onChange, interactionType }: DirectionFieldProps ) {\n\tconst options: ToggleButtonGroupItem< Direction >[] = useMemo( () => {\n\t\tconst isIn = interactionType === 'in';\n\n\t\treturn [\n\t\t\t{\n\t\t\t\tvalue: 'top',\n\t\t\t\tlabel: isIn ? __( 'From top', 'elementor' ) : __( 'To top', 'elementor' ),\n\t\t\t\trenderContent: ( { size } ) =>\n\t\t\t\t\tisIn ? <ArrowDownSmallIcon fontSize={ size } /> : <ArrowUpSmallIcon fontSize={ size } />,\n\t\t\t\tshowTooltip: true,\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'bottom',\n\t\t\t\tlabel: interactionType === 'in' ? __( 'From bottom', 'elementor' ) : __( 'To bottom', 'elementor' ),\n\t\t\t\trenderContent: ( { size } ) =>\n\t\t\t\t\tisIn ? <ArrowUpSmallIcon fontSize={ size } /> : <ArrowDownSmallIcon fontSize={ size } />,\n\t\t\t\tshowTooltip: true,\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'left',\n\t\t\t\tlabel: interactionType === 'in' ? __( 'From left', 'elementor' ) : __( 'To left', 'elementor' ),\n\t\t\t\trenderContent: ( { size } ) =>\n\t\t\t\t\tisIn ? <ArrowRightIcon fontSize={ size } /> : <ArrowLeftIcon fontSize={ size } />,\n\t\t\t\tshowTooltip: true,\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'right',\n\t\t\t\tlabel: interactionType === 'in' ? __( 'From right', 'elementor' ) : __( 'To right', 'elementor' ),\n\t\t\t\trenderContent: ( { size } ) =>\n\t\t\t\t\tisIn ? <ArrowLeftIcon fontSize={ size } /> : <ArrowRightIcon fontSize={ size } />,\n\t\t\t\tshowTooltip: true,\n\t\t\t},\n\t\t];\n\t}, [ interactionType ] );\n\n\treturn (\n\t\t<>\n\t\t\t<Grid item xs={ 12 } md={ 6 }>\n\t\t\t\t<Typography variant=\"caption\" color=\"text.secondary\">\n\t\t\t\t\t{ __( 'Direction', 'elementor' ) }\n\t\t\t\t</Typography>\n\t\t\t</Grid>\n\t\t\t<Grid item xs={ 12 } md={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end', overflow: 'hidden' } }>\n\t\t\t\t<ToggleButtonGroupUi items={ options } exclusive onChange={ onChange } value={ value } />\n\t\t\t</Grid>\n\t\t</>\n\t);\n}\n","import * as React from 'react';\nimport { MenuListItem } from '@elementor/editor-ui';\nimport { Grid, Select, type SelectChangeEvent, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type FieldProps } from '../../types';\nexport function Effect( { value, onChange }: FieldProps ) {\n\tconst availableEffects = [\n\t\t{ key: 'fade', label: __( 'Fade', 'elementor' ) },\n\t\t{ key: 'slide', label: __( 'Slide', 'elementor' ) },\n\t\t{ key: 'scale', label: __( 'Scale', 'elementor' ) },\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<Grid item xs={ 12 } md={ 6 }>\n\t\t\t\t<Typography variant=\"caption\" color=\"text.secondary\">\n\t\t\t\t\t{ __( 'Effect', 'elementor' ) }\n\t\t\t\t</Typography>\n\t\t\t</Grid>\n\t\t\t<Grid item xs={ 12 } md={ 6 }>\n\t\t\t\t<Select\n\t\t\t\t\tfullWidth\n\t\t\t\t\tdisplayEmpty\n\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }\n\t\t\t\t>\n\t\t\t\t\t{ availableEffects.map( ( effect ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<MenuListItem key={ effect.key } value={ effect.key }>\n\t\t\t\t\t\t\t\t{ effect.label }\n\t\t\t\t\t\t\t</MenuListItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Select>\n\t\t\t</Grid>\n\t\t</>\n\t);\n}\n","import * as React from 'react';\nimport { type ToggleButtonGroupItem, ToggleButtonGroupUi } from '@elementor/editor-controls';\nimport { Grid, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type FieldProps } from '../../types';\n\ntype EffectType = 'in' | 'out';\nexport function EffectType( { value, onChange }: FieldProps ) {\n\tconst options: ToggleButtonGroupItem< EffectType >[] = [\n\t\t{\n\t\t\tvalue: 'in',\n\t\t\tlabel: __( 'In', 'elementor' ),\n\t\t\trenderContent: () => __( 'In', 'elementor' ),\n\t\t},\n\t\t{\n\t\t\tvalue: 'out',\n\t\t\tlabel: __( 'Out', 'elementor' ),\n\t\t\trenderContent: () => __( 'Out', 'elementor' ),\n\t\t},\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<Grid item xs={ 12 } md={ 6 }>\n\t\t\t\t<Typography variant=\"caption\" color=\"text.secondary\">\n\t\t\t\t\t{ __( 'Type', 'elementor' ) }\n\t\t\t\t</Typography>\n\t\t\t</Grid>\n\t\t\t<Grid item xs={ 12 } md={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end', overflow: 'hidden' } }>\n\t\t\t\t<ToggleButtonGroupUi items={ options } exclusive onChange={ onChange } value={ value } />\n\t\t\t</Grid>\n\t\t</>\n\t);\n}\n","import * as React from 'react';\nimport { MenuListItem } from '@elementor/editor-ui';\nimport { Grid, Select, type SelectChangeEvent, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type FieldProps } from '../../types';\n\nexport function TimeFrameIndicator( { value, onChange, label }: FieldProps ) {\n\tconst availableTimeFrames = [ '0', '100', '200', '300', '400', '500', '750', '1000', '1250', '1500' ].map(\n\t\t( key ) => ( {\n\t\t\tkey,\n\t\t\t// translators: %s: time in milliseconds\n\t\t\tlabel: __( '%s MS', 'elementor' ).replace( '%s', key ),\n\t\t} )\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<Grid item xs={ 12 } md={ 6 }>\n\t\t\t\t<Typography variant=\"caption\" color=\"text.secondary\">\n\t\t\t\t\t{ label }\n\t\t\t\t</Typography>\n\t\t\t</Grid>\n\t\t\t<Grid item xs={ 12 } md={ 6 }>\n\t\t\t\t<Select\n\t\t\t\t\tfullWidth\n\t\t\t\t\tdisplayEmpty\n\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }\n\t\t\t\t>\n\t\t\t\t\t{ availableTimeFrames.map( ( timeFrame ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<MenuListItem key={ timeFrame.key } value={ timeFrame.key }>\n\t\t\t\t\t\t\t\t{ timeFrame.label }\n\t\t\t\t\t\t\t</MenuListItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Select>\n\t\t\t</Grid>\n\t\t</>\n\t);\n}\n","import * as React from 'react';\nimport { MenuListItem } from '@elementor/editor-ui';\nimport { Grid, Select, type SelectChangeEvent, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type FieldProps } from '../../types';\n\nexport function Trigger( { value, onChange }: FieldProps ) {\n\tconst availableTriggers = Object.entries( {\n\t\tload: __( 'Page load', 'elementor' ),\n\t\tscrollIn: __( 'Scroll into view', 'elementor' ),\n\t\tscrollOut: __( 'Scroll out of view', 'elementor' ),\n\t} ).map( ( [ key, label ] ) => ( {\n\t\tkey,\n\t\tlabel,\n\t} ) );\n\n\treturn (\n\t\t<>\n\t\t\t<Grid item xs={ 12 } md={ 6 }>\n\t\t\t\t<Typography variant=\"caption\" color=\"text.secondary\">\n\t\t\t\t\t{ __( 'Trigger', 'elementor' ) }\n\t\t\t\t</Typography>\n\t\t\t</Grid>\n\t\t\t<Grid item xs={ 12 } md={ 6 }>\n\t\t\t\t<Select\n\t\t\t\t\tfullWidth\n\t\t\t\t\tdisplayEmpty\n\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\tonChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t>\n\t\t\t\t\t{ availableTriggers.map( ( trigger ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<MenuListItem key={ trigger.key } value={ trigger.key }>\n\t\t\t\t\t\t\t\t{ trigger.label }\n\t\t\t\t\t\t\t</MenuListItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Select>\n\t\t\t</Grid>\n\t\t</>\n\t);\n}\n","import { type InteractionsProvider } from '../types';\n\nexport const createInteractionsRepository = () => {\n\tconst providers: InteractionsProvider[] = [];\n\n\tconst getProviders = () => {\n\t\tconst sorted = providers.slice( 0 ).sort( ( a, b ) => ( a.priority > b.priority ? -1 : 1 ) );\n\t\treturn sorted;\n\t};\n\n\tconst register = ( provider: InteractionsProvider ) => {\n\t\tproviders.push( provider );\n\t};\n\n\tconst all = () => {\n\t\treturn getProviders().flatMap( ( provider ) => provider.actions.all() );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = providers.map( ( provider ) => provider.subscribe( cb ) );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\tconst getProviderByKey = ( key: string ) => {\n\t\treturn providers.find( ( provider ) => {\n\t\t\ttry {\n\t\t\t\treturn provider.getKey() === key;\n\t\t\t} catch {\n\t\t\t\t// Provider might not be ready yet (e.g., no document loaded)\n\t\t\t\treturn false;\n\t\t\t}\n\t\t} );\n\t};\n\n\treturn {\n\t\tall,\n\t\tregister,\n\t\tsubscribe,\n\t\tgetProviders,\n\t\tgetProviderByKey,\n\t};\n};\n","import { createInteractionsRepository } from './utils/create-interactions-repository';\n\nexport const interactionsRepository = createInteractionsRepository();\n","import { type InteractionsProvider } from '../types';\n\nexport type CreateInteractionsProviderOptions = {\n\tkey: string | ( () => string );\n\tpriority?: number;\n\tsubscribe?: ( callback: () => void ) => () => void;\n\tactions: {\n\t\tall: InteractionsProvider[ 'actions' ][ 'all' ];\n\t};\n};\n\nconst DEFAULT_PRIORITY = 10;\n\nexport function createInteractionsProvider( {\n\tkey,\n\tpriority = DEFAULT_PRIORITY,\n\tsubscribe = () => () => {},\n\tactions,\n}: CreateInteractionsProviderOptions ): InteractionsProvider {\n\treturn {\n\t\tgetKey: typeof key === 'string' ? () => key : key,\n\t\tpriority,\n\t\tsubscribe,\n\t\tactions: {\n\t\t\tall: actions.all,\n\t\t},\n\t};\n}\n","import { getCurrentDocumentId, getElementInteractions, getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, windowEvent } from '@elementor/editor-v1-adapters';\n\nimport { createInteractionsProvider } from '../utils/create-interactions-provider';\n\nexport const ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX = 'document-elements-interactions-';\n\nexport const documentElementsInteractionsProvider = createInteractionsProvider( {\n\tkey: () => {\n\t\tconst documentId = getCurrentDocumentId();\n\n\t\tif ( ! documentId ) {\n\t\t\tconst pendingKey = `${ ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX }pending`;\n\t\t\treturn pendingKey;\n\t\t}\n\n\t\tconst key = `${ ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX }${ documentId }`;\n\t\treturn key;\n\t},\n\tpriority: 50,\n\tsubscribe: ( cb ) => {\n\t\treturn listenTo( [ windowEvent( 'elementor/element/update_interactions' ) ], () => cb() );\n\t},\n\tactions: {\n\t\tall: () => {\n\t\t\tconst elements = getElements();\n\n\t\t\tconst filtered = elements.filter( ( element ) => {\n\t\t\t\tconst interactions = getElementInteractions( element.id );\n\t\t\t\tif ( ! interactions ) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t\treturn interactions?.items?.length > 0;\n\t\t\t} );\n\n\t\t\treturn filtered.map( ( element ) => {\n\t\t\t\tconst interactions = getElementInteractions( element.id );\n\t\t\t\treturn {\n\t\t\t\t\telementId: element.id,\n\t\t\t\t\tdataId: element.id,\n\t\t\t\t\tinteractions: interactions || { version: 1, items: [] },\n\t\t\t\t};\n\t\t\t} );\n\t\t},\n\t},\n} );\n","import { interactionsRepository } from './interactions-repository';\nimport { documentElementsInteractionsProvider } from './providers/document-elements-interactions-provider';\n\nexport function init() {\n\ttry {\n\t\tinteractionsRepository.register( documentElementsInteractionsProvider );\n\t} catch ( error ) {\n\t\tthrow error;\n\t}\n}\n"],"mappings":"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","names":["React","useCallback","useState","useElementInteractions","Stack","React","React","createContext","useContext","React","useEffect","useMemo","useState","__","React","Grid","__","React","Typography","__","React","Grid","Typography","__","React","ToggleButtonGroupUi","Grid","Typography","__","React","MenuListItem","Grid","Select","Typography","__","React","MenuListItem","Grid","Select","Typography","__","Grid","__","useState","useEffect","useMemo","__","useElementInteractions","useState","useCallback","Stack"]}
+{"version":3,"sources":["../src/components/empty-state.tsx","../src/components/interactions-tab.tsx","../src/contexts/interactions-context.tsx","../src/contexts/popup-state-context.tsx","../src/components/interactions-list.tsx","../src/utils/get-interactions-config.ts","../src/components/interaction-details.tsx","../src/components/controls/direction.tsx","../src/components/controls/effect.tsx","../src/components/controls/effect-type.tsx","../src/components/controls/time-frame-indicator.tsx","../src/components/controls/trigger.tsx","../src/utils/create-interactions-repository.ts","../src/interactions-repository.ts","../src/utils/create-interactions-provider.ts","../src/providers/document-elements-interactions-provider.ts","../src/init.ts"],"sourcesContent":["import * as React from 'react';\nimport { SwipeIcon } from '@elementor/icons';\nimport { Button, Stack, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nexport const EmptyState = ( { onCreateInteraction }: { onCreateInteraction: () => void } ) => {\n\treturn (\n\t\t<Stack\n\t\t\talignItems=\"center\"\n\t\t\tjustifyContent=\"center\"\n\t\t\theight=\"100%\"\n\t\t\tcolor=\"text.secondary\"\n\t\t\tsx={ { p: 2.5, pt: 8, pb: 5.5 } }\n\t\t\tgap={ 1.5 }\n\t\t>\n\t\t\t<SwipeIcon fontSize=\"large\" />\n\n\t\t\t<Typography align=\"center\" variant=\"subtitle2\">\n\t\t\t\t{ __( 'Animate elements with Interactions', 'elementor' ) }\n\t\t\t</Typography>\n\n\t\t\t<Typography align=\"center\" variant=\"caption\" maxWidth=\"170px\">\n\t\t\t\t{ __(\n\t\t\t\t\t'Add entrance animations and effects triggered by user interactions such as page load or scroll.',\n\t\t\t\t\t'elementor'\n\t\t\t\t) }\n\t\t\t</Typography>\n\n\t\t\t<Button variant=\"outlined\" color=\"secondary\" size=\"small\" sx={ { mt: 1 } } onClick={ onCreateInteraction }>\n\t\t\t\t{ __( 'Create an interaction', 'elementor' ) }\n\t\t\t</Button>\n\t\t</Stack>\n\t);\n};\n","import * as React from 'react';\nimport { useCallback, useState } from 'react';\nimport { type ElementInteractions, useElementInteractions } from '@elementor/editor-elements';\nimport { SessionStorageProvider } from '@elementor/session';\nimport { Stack } from '@elementor/ui';\n\nimport { InteractionsProvider, useInteractionsContext } from '../contexts/interactions-context';\nimport { PopupStateProvider } from '../contexts/popup-state-context';\nimport { EmptyState } from './empty-state';\nimport { InteractionsList } from './interactions-list';\n\nexport const InteractionsTab = ( { elementId }: { elementId: string } ) => {\n\treturn (\n\t\t<PopupStateProvider>\n\t\t\t<InteractionsTabContent elementId={ elementId } />\n\t\t</PopupStateProvider>\n\t);\n};\n\nfunction InteractionsTabContent( { elementId }: { elementId: string } ) {\n\tconst existingInteractions = useElementInteractions( elementId );\n\tconst [ firstInteraction, setFirstInteraction ] = useState< boolean >( false );\n\tconst hasInteractions = existingInteractions?.items?.length || firstInteraction;\n\n\treturn (\n\t\t<SessionStorageProvider prefix={ elementId }>\n\t\t\t{ hasInteractions ? (\n\t\t\t\t<InteractionsProvider elementId={ elementId }>\n\t\t\t\t\t<InteractionsContent firstInteraction={ firstInteraction } />\n\t\t\t\t</InteractionsProvider>\n\t\t\t) : (\n\t\t\t\t<EmptyState\n\t\t\t\t\tonCreateInteraction={ () => {\n\t\t\t\t\t\tsetFirstInteraction( true );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</SessionStorageProvider>\n\t);\n}\n\nfunction InteractionsContent( { firstInteraction }: { firstInteraction: boolean } ) {\n\tconst { interactions, setInteractions, playInteractions } = useInteractionsContext();\n\n\tconst applyInteraction = useCallback(\n\t\t( newInteractions: ElementInteractions ) => {\n\t\t\tif ( ! newInteractions ) {\n\t\t\t\tsetInteractions( undefined );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetInteractions( newInteractions );\n\t\t},\n\t\t[ setInteractions ]\n\t);\n\n\treturn (\n\t\t<Stack sx={ { m: 1, p: 1.5 } } gap={ 2 }>\n\t\t\t<InteractionsList\n\t\t\t\ttriggerCreateOnShowEmpty={ firstInteraction }\n\t\t\t\tinteractions={ interactions }\n\t\t\t\tonSelectInteractions={ applyInteraction }\n\t\t\t\tonPlayInteraction={ playInteractions }\n\t\t\t/>\n\t\t</Stack>\n\t);\n}\n","import * as React from 'react';\nimport { createContext, type ReactNode, useContext, useEffect } from 'react';\nimport {\n\ttype ElementInteractions,\n\tplayElementInteractions,\n\tupdateElementInteractions,\n\tuseElementInteractions,\n} from '@elementor/editor-elements';\n\ntype InteractionsContextValue = {\n\tinteractions: ElementInteractions;\n\tsetInteractions: ( value: ElementInteractions | undefined ) => void;\n\tplayInteractions: ( animationId: string ) => void;\n};\n\nconst InteractionsContext = createContext< InteractionsContextValue | null >( null );\n\nexport const InteractionsProvider = ( { children, elementId }: { children: ReactNode; elementId: string } ) => {\n\tconst interactions = useElementInteractions( elementId );\n\n\tuseEffect( () => {\n\t\twindow.dispatchEvent( new CustomEvent( 'elementor/element/update_interactions' ) );\n\t}, [] );\n\n\tconst setInteractions = ( value: ElementInteractions | undefined ) => {\n\t\tupdateElementInteractions( {\n\t\t\telementId,\n\t\t\tinteractions: value,\n\t\t} );\n\t};\n\n\tconst playInteractions = ( animationId: string ) => {\n\t\tplayElementInteractions( elementId, animationId );\n\t};\n\n\tconst contextValue: InteractionsContextValue = {\n\t\tinteractions,\n\t\tsetInteractions,\n\t\tplayInteractions,\n\t};\n\n\treturn <InteractionsContext.Provider value={ contextValue }>{ children }</InteractionsContext.Provider>;\n};\n\nexport const useInteractionsContext = () => {\n\tconst context = useContext( InteractionsContext );\n\tif ( ! context ) {\n\t\tthrow new Error( 'useInteractionsContext must be used within InteractionsProvider' );\n\t}\n\treturn context;\n};\n","import * as React from 'react';\nimport { createContext, useCallback, useContext, useState } from 'react';\n\ntype PopupStateContextType = {\n\topenByDefault: boolean;\n\ttriggerDefaultOpen: () => void;\n\tresetDefaultOpen: () => void;\n};\n\nconst PopupStateContext = createContext< PopupStateContextType | undefined >( undefined );\n\nexport const PopupStateProvider = ( { children }: { children: React.ReactNode } ) => {\n\tconst [ openByDefault, setOpenByDefault ] = useState( false );\n\n\tconst triggerDefaultOpen = useCallback( () => {\n\t\tsetOpenByDefault( true );\n\t}, [] );\n\n\tconst resetDefaultOpen = useCallback( () => {\n\t\tsetOpenByDefault( false );\n\t}, [] );\n\n\treturn (\n\t\t<PopupStateContext.Provider value={ { openByDefault, triggerDefaultOpen, resetDefaultOpen } }>\n\t\t\t{ children }\n\t\t</PopupStateContext.Provider>\n\t);\n};\n\nexport const usePopupStateContext = () => {\n\tconst context = useContext( PopupStateContext );\n\tif ( ! context ) {\n\t\tthrow new Error( 'usePopupStateContext must be used within PopupStateProvider' );\n\t}\n\treturn context;\n};\n","import * as React from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { Repeater } from '@elementor/editor-controls';\nimport { type ElementInteractions } from '@elementor/editor-elements';\nimport { PlayerPlayIcon } from '@elementor/icons';\nimport { IconButton } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { getInteractionsConfig } from '../utils/get-interactions-config';\nimport { DEFAULT_INTERACTION, InteractionDetails } from './interaction-details';\n\nexport const MAX_NUMBER_OF_INTERACTIONS = 5;\n\nexport type InteractionListProps = {\n\tonSelectInteractions: ( interactions: ElementInteractions ) => void;\n\tinteractions: ElementInteractions;\n\tonPlayInteraction: ( interactionId: string ) => void;\n\ttriggerCreateOnShowEmpty?: boolean;\n};\n\nexport function InteractionsList( props: InteractionListProps ) {\n\tconst { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;\n\n\tconst [ interactionsState, setInteractionsState ] = useState< ElementInteractions >( interactions );\n\n\tuseEffect( () => {\n\t\tif ( JSON.stringify( interactions.items ) !== JSON.stringify( interactionsState ) ) {\n\t\t\tonSelectInteractions( interactionsState );\n\t\t}\n\t}, [ interactions.items, interactionsState, onSelectInteractions ] );\n\n\tconst isMaxNumberOfInteractionsReached = useMemo( () => {\n\t\treturn interactionsState.items?.length >= MAX_NUMBER_OF_INTERACTIONS;\n\t}, [ interactionsState.items ] );\n\n\tif ( triggerCreateOnShowEmpty && ( ! interactionsState.items || interactionsState.items?.length === 0 ) ) {\n\t\tsetInteractionsState( {\n\t\t\tversion: 1,\n\t\t\titems: [\n\t\t\t\t{\n\t\t\t\t\tanimation: {\n\t\t\t\t\t\tanimation_id: DEFAULT_INTERACTION,\n\t\t\t\t\t\tanimation_type: 'full-preset',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t} );\n\t}\n\n\tconst displayLabel = ( interactionForDisplay: string ) => {\n\t\tif ( ! interactionForDisplay ) {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst animationOptions = getInteractionsConfig()?.animationOptions;\n\t\tconst option = animationOptions.find( ( opt ) => opt.value === interactionForDisplay );\n\n\t\treturn option?.label || interactionForDisplay;\n\t};\n\n\treturn (\n\t\t<Repeater\n\t\t\topenOnAdd\n\t\t\topenItem={ triggerCreateOnShowEmpty ? 0 : undefined }\n\t\t\tlabel={ __( 'Interactions', 'elementor' ) }\n\t\t\tvalues={ interactionsState.items }\n\t\t\tsetValues={ ( newValue: ElementInteractions[ 'items' ] ) => {\n\t\t\t\tsetInteractionsState( {\n\t\t\t\t\t...interactionsState,\n\t\t\t\t\titems: newValue,\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tshowDuplicate={ false }\n\t\t\tshowToggle={ false }\n\t\t\tisSortable={ false }\n\t\t\tdisableAddItemButton={ isMaxNumberOfInteractionsReached }\n\t\t\titemSettings={ {\n\t\t\t\tinitialValues: {\n\t\t\t\t\tanimation: {\n\t\t\t\t\t\tanimation_id: DEFAULT_INTERACTION,\n\t\t\t\t\t\tanimation_type: 'full-preset',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tLabel: ( { value } ) => displayLabel( value.animation.animation_id ),\n\t\t\t\tIcon: () => null,\n\t\t\t\tContent: ( { index, value } ) => (\n\t\t\t\t\t<InteractionDetails\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tinteraction={ value.animation.animation_id }\n\t\t\t\t\t\tonChange={ ( newValue: string ) => {\n\t\t\t\t\t\t\tconst newInteractions = { ...interactionsState };\n\t\t\t\t\t\t\tnewInteractions.items[ index ] = {\n\t\t\t\t\t\t\t\t...newInteractions.items[ index ],\n\t\t\t\t\t\t\t\tanimation: {\n\t\t\t\t\t\t\t\t\t...newInteractions.items[ index ].animation,\n\t\t\t\t\t\t\t\t\tanimation_id: newValue,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\tsetInteractionsState( { ...interactionsState, items: newInteractions.items } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tactions: ( value ) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<IconButton size=\"tiny\" onClick={ () => onPlayInteraction( value.animation.animation_id ) }>\n\t\t\t\t\t\t\t<PlayerPlayIcon fontSize=\"tiny\" />\n\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t</>\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n","import { type InteractionsConfig } from '../types';\n\nconst DEFAULT_CONFIG: InteractionsConfig = {\n\tconstants: {\n\t\tdefaultDuration: 300,\n\t\tdefaultDelay: 0,\n\t\tslideDistance: 100,\n\t\tscaleStart: 0.5,\n\t\teasing: 'linear',\n\t},\n\tanimationOptions: [],\n};\n\nexport function getInteractionsConfig(): InteractionsConfig {\n\treturn window.ElementorInteractionsConfig || DEFAULT_CONFIG;\n}\n","import * as React from 'react';\nimport { PopoverContent } from '@elementor/editor-controls';\nimport { Divider, Grid } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { Direction } from './controls/direction';\nimport { Effect } from './controls/effect';\nimport { EffectType } from './controls/effect-type';\nimport { TimeFrameIndicator } from './controls/time-frame-indicator';\nimport { Trigger } from './controls/trigger';\n\nconst DELIMITER = '-';\n\ntype InteractionDetailsProps = {\n\tinteraction: string;\n\tonChange: ( interaction: string ) => void;\n};\nexport const DEFAULT_INTERACTION = 'load-fade-in--300-0';\n\nconst getDefaultInteractionDetails = () => {\n\tconst [ trigger, effect, type, direction, duration, delay ] = DEFAULT_INTERACTION.split( DELIMITER );\n\n\treturn {\n\t\ttrigger,\n\t\teffect,\n\t\ttype,\n\t\tdirection,\n\t\tduration,\n\t\tdelay,\n\t};\n};\n\nconst buildInteractionDetails = ( interaction: string ) => {\n\tconst [ trigger, effect, type, direction, duration, delay ] = interaction.split( DELIMITER );\n\tconst defaultInteractionDetails = getDefaultInteractionDetails();\n\n\treturn {\n\t\ttrigger: trigger || defaultInteractionDetails.trigger,\n\t\teffect: effect || defaultInteractionDetails.effect,\n\t\ttype: type || defaultInteractionDetails.type,\n\t\tdirection: direction || defaultInteractionDetails.direction,\n\t\tduration: duration || defaultInteractionDetails.duration,\n\t\tdelay: delay || defaultInteractionDetails.delay,\n\t};\n};\n\nexport const InteractionDetails = ( { interaction, onChange }: InteractionDetailsProps ) => {\n\tconst interactionDetails = React.useMemo( () => {\n\t\treturn buildInteractionDetails( interaction );\n\t}, [ interaction ] );\n\n\tconst handleChange = < K extends keyof typeof interactionDetails >(\n\t\tkey: K,\n\t\tvalue: ( typeof interactionDetails )[ K ]\n\t) => {\n\t\tif ( value === null ) {\n\t\t\tvalue = getDefaultInteractionDetails()[ key ];\n\t\t}\n\t\tconst newInteractionDetails = { ...interactionDetails, [ key ]: value };\n\t\tonChange( Object.values( newInteractionDetails ).join( DELIMITER ) );\n\t};\n\n\treturn (\n\t\t<PopoverContent p={ 1.5 }>\n\t\t\t<Grid container spacing={ 1.5 }>\n\t\t\t\t<Trigger value={ interactionDetails.trigger } onChange={ ( v ) => handleChange( 'trigger', v ) } />\n\t\t\t</Grid>\n\t\t\t<Divider sx={ { mx: 1.5 } } />\n\t\t\t<Grid container spacing={ 1.5 }>\n\t\t\t\t<Effect value={ interactionDetails.effect } onChange={ ( v ) => handleChange( 'effect', v ) } />\n\t\t\t\t<EffectType value={ interactionDetails.type } onChange={ ( v ) => handleChange( 'type', v ) } />\n\t\t\t\t<Direction\n\t\t\t\t\tvalue={ interactionDetails.direction }\n\t\t\t\t\tonChange={ ( v ) => handleChange( 'direction', v ) }\n\t\t\t\t\tinteractionType={ interactionDetails.type }\n\t\t\t\t/>\n\t\t\t\t<TimeFrameIndicator\n\t\t\t\t\tvalue={ interactionDetails.duration }\n\t\t\t\t\tonChange={ ( v ) => handleChange( 'duration', v ) }\n\t\t\t\t\tlabel={ __( 'Duration', 'elementor' ) }\n\t\t\t\t/>\n\t\t\t\t<TimeFrameIndicator\n\t\t\t\t\tvalue={ interactionDetails.delay }\n\t\t\t\t\tonChange={ ( v ) => handleChange( 'delay', v ) }\n\t\t\t\t\tlabel={ __( 'Delay', 'elementor' ) }\n\t\t\t\t/>\n\t\t\t</Grid>\n\t\t</PopoverContent>\n\t);\n};\n","import * as React from 'react';\nimport { useMemo } from 'react';\nimport {\n\tControlFormLabel,\n\tPopoverGridContainer,\n\ttype ToggleButtonGroupItem,\n\tToggleButtonGroupUi,\n} from '@elementor/editor-controls';\nimport { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from '@elementor/icons';\nimport { Grid } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type DirectionFieldProps } from '../../types';\n\ntype Direction = 'top' | 'bottom' | 'left' | 'right';\n\nexport function Direction( { value, onChange, interactionType }: DirectionFieldProps ) {\n\tconst options: ToggleButtonGroupItem< Direction >[] = useMemo( () => {\n\t\tconst isIn = interactionType === 'in';\n\n\t\treturn [\n\t\t\t{\n\t\t\t\tvalue: 'top',\n\t\t\t\tlabel: isIn ? __( 'From top', 'elementor' ) : __( 'To top', 'elementor' ),\n\t\t\t\trenderContent: ( { size } ) =>\n\t\t\t\t\tisIn ? <ArrowDownSmallIcon fontSize={ size } /> : <ArrowUpSmallIcon fontSize={ size } />,\n\t\t\t\tshowTooltip: true,\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'bottom',\n\t\t\t\tlabel: interactionType === 'in' ? __( 'From bottom', 'elementor' ) : __( 'To bottom', 'elementor' ),\n\t\t\t\trenderContent: ( { size } ) =>\n\t\t\t\t\tisIn ? <ArrowUpSmallIcon fontSize={ size } /> : <ArrowDownSmallIcon fontSize={ size } />,\n\t\t\t\tshowTooltip: true,\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'left',\n\t\t\t\tlabel: interactionType === 'in' ? __( 'From left', 'elementor' ) : __( 'To left', 'elementor' ),\n\t\t\t\trenderContent: ( { size } ) =>\n\t\t\t\t\tisIn ? <ArrowRightIcon fontSize={ size } /> : <ArrowLeftIcon fontSize={ size } />,\n\t\t\t\tshowTooltip: true,\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'right',\n\t\t\t\tlabel: interactionType === 'in' ? __( 'From right', 'elementor' ) : __( 'To right', 'elementor' ),\n\t\t\t\trenderContent: ( { size } ) =>\n\t\t\t\t\tisIn ? <ArrowLeftIcon fontSize={ size } /> : <ArrowRightIcon fontSize={ size } />,\n\t\t\t\tshowTooltip: true,\n\t\t\t},\n\t\t];\n\t}, [ interactionType ] );\n\n\treturn (\n\t\t<Grid item xs={ 12 }>\n\t\t\t<PopoverGridContainer>\n\t\t\t\t<Grid item xs={ 6 }>\n\t\t\t\t\t<ControlFormLabel> { __( 'Direction', 'elementor' ) }</ControlFormLabel>\n\t\t\t\t</Grid>\n\t\t\t\t<Grid item xs={ 6 }>\n\t\t\t\t\t<ToggleButtonGroupUi items={ options } exclusive onChange={ onChange } value={ value } />\n\t\t\t\t</Grid>\n\t\t\t</PopoverGridContainer>\n\t\t</Grid>\n\t);\n}\n","import * as React from 'react';\nimport { ControlFormLabel, PopoverGridContainer } from '@elementor/editor-controls';\nimport { MenuListItem } from '@elementor/editor-ui';\nimport { Grid, Select, type SelectChangeEvent } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type FieldProps } from '../../types';\nexport function Effect( { value, onChange }: FieldProps ) {\n\tconst availableEffects = [\n\t\t{ key: 'fade', label: __( 'Fade', 'elementor' ) },\n\t\t{ key: 'slide', label: __( 'Slide', 'elementor' ) },\n\t\t{ key: 'scale', label: __( 'Scale', 'elementor' ) },\n\t];\n\n\treturn (\n\t\t<Grid item xs={ 12 }>\n\t\t\t<PopoverGridContainer>\n\t\t\t\t<Grid item xs={ 6 }>\n\t\t\t\t\t<ControlFormLabel>{ __( 'Effect', 'elementor' ) }</ControlFormLabel>\n\t\t\t\t</Grid>\n\t\t\t\t<Grid item xs={ 6 }>\n\t\t\t\t\t<Select\n\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\tdisplayEmpty\n\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ availableEffects.map( ( effect ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<MenuListItem key={ effect.key } value={ effect.key }>\n\t\t\t\t\t\t\t\t\t{ effect.label }\n\t\t\t\t\t\t\t\t</MenuListItem>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Select>\n\t\t\t\t</Grid>\n\t\t\t</PopoverGridContainer>\n\t\t</Grid>\n\t);\n}\n","import * as React from 'react';\nimport {\n\tControlFormLabel,\n\tPopoverGridContainer,\n\ttype ToggleButtonGroupItem,\n\tToggleButtonGroupUi,\n} from '@elementor/editor-controls';\nimport { Grid } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type FieldProps } from '../../types';\n\ntype EffectType = 'in' | 'out';\nexport function EffectType( { value, onChange }: FieldProps ) {\n\tconst options: ToggleButtonGroupItem< EffectType >[] = [\n\t\t{\n\t\t\tvalue: 'in',\n\t\t\tlabel: __( 'In', 'elementor' ),\n\t\t\trenderContent: () => __( 'In', 'elementor' ),\n\t\t},\n\t\t{\n\t\t\tvalue: 'out',\n\t\t\tlabel: __( 'Out', 'elementor' ),\n\t\t\trenderContent: () => __( 'Out', 'elementor' ),\n\t\t},\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t<PopoverGridContainer>\n\t\t\t\t\t<Grid item xs={ 6 }>\n\t\t\t\t\t\t<ControlFormLabel>{ __( 'Type', 'elementor' ) }</ControlFormLabel>\n\t\t\t\t\t</Grid>\n\t\t\t\t\t<Grid item xs={ 6 }>\n\t\t\t\t\t\t<ToggleButtonGroupUi items={ options } exclusive onChange={ onChange } value={ value } />\n\t\t\t\t\t</Grid>\n\t\t\t\t</PopoverGridContainer>\n\t\t\t</Grid>\n\t\t</>\n\t);\n}\n","import * as React from 'react';\nimport { ControlFormLabel, PopoverGridContainer } from '@elementor/editor-controls';\nimport { MenuListItem } from '@elementor/editor-ui';\nimport { Grid, Select, type SelectChangeEvent } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type FieldProps } from '../../types';\n\nexport function TimeFrameIndicator( { value, onChange, label }: FieldProps ) {\n\tconst availableTimeFrames = [ '0', '100', '200', '300', '400', '500', '750', '1000', '1250', '1500' ].map(\n\t\t( key ) => ( {\n\t\t\tkey,\n\t\t\t// translators: %s: time in milliseconds\n\t\t\tlabel: __( '%s MS', 'elementor' ).replace( '%s', key ),\n\t\t} )\n\t);\n\n\treturn (\n\t\t<Grid item xs={ 12 }>\n\t\t\t<PopoverGridContainer>\n\t\t\t\t<Grid item xs={ 6 }>\n\t\t\t\t\t<ControlFormLabel>{ label }</ControlFormLabel>\n\t\t\t\t</Grid>\n\t\t\t\t<Grid item xs={ 6 }>\n\t\t\t\t\t<Select\n\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\tdisplayEmpty\n\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ availableTimeFrames.map( ( timeFrame ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<MenuListItem key={ timeFrame.key } value={ timeFrame.key }>\n\t\t\t\t\t\t\t\t\t{ timeFrame.label }\n\t\t\t\t\t\t\t\t</MenuListItem>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Select>\n\t\t\t\t</Grid>\n\t\t\t</PopoverGridContainer>\n\t\t</Grid>\n\t);\n}\n","import * as React from 'react';\nimport { ControlFormLabel, PopoverGridContainer } from '@elementor/editor-controls';\nimport { MenuListItem } from '@elementor/editor-ui';\nimport { Grid, Select, type SelectChangeEvent } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type FieldProps } from '../../types';\n\nexport function Trigger( { value, onChange }: FieldProps ) {\n\tconst availableTriggers = Object.entries( {\n\t\tload: __( 'Page load', 'elementor' ),\n\t\tscrollIn: __( 'Scroll into view', 'elementor' ),\n\t\tscrollOut: __( 'Scroll out of view', 'elementor' ),\n\t} ).map( ( [ key, label ] ) => ( {\n\t\tkey,\n\t\tlabel,\n\t} ) );\n\n\treturn (\n\t\t<Grid item xs={ 12 }>\n\t\t\t<PopoverGridContainer>\n\t\t\t\t<Grid item xs={ 6 }>\n\t\t\t\t\t<ControlFormLabel>{ __( 'Trigger', 'elementor' ) }</ControlFormLabel>\n\t\t\t\t</Grid>\n\t\t\t\t<Grid item xs={ 6 }>\n\t\t\t\t\t<Select\n\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\tdisplayEmpty\n\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\tonChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ availableTriggers.map( ( trigger ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<MenuListItem key={ trigger.key } value={ trigger.key }>\n\t\t\t\t\t\t\t\t\t{ trigger.label }\n\t\t\t\t\t\t\t\t</MenuListItem>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Select>\n\t\t\t\t</Grid>\n\t\t\t</PopoverGridContainer>\n\t\t</Grid>\n\t);\n}\n","import { type InteractionsProvider } from '../types';\n\nexport const createInteractionsRepository = () => {\n\tconst providers: InteractionsProvider[] = [];\n\n\tconst getProviders = () => {\n\t\tconst sorted = providers.slice( 0 ).sort( ( a, b ) => ( a.priority > b.priority ? -1 : 1 ) );\n\t\treturn sorted;\n\t};\n\n\tconst register = ( provider: InteractionsProvider ) => {\n\t\tproviders.push( provider );\n\t};\n\n\tconst all = () => {\n\t\treturn getProviders().flatMap( ( provider ) => provider.actions.all() );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = providers.map( ( provider ) => provider.subscribe( cb ) );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\tconst getProviderByKey = ( key: string ) => {\n\t\treturn providers.find( ( provider ) => {\n\t\t\ttry {\n\t\t\t\treturn provider.getKey() === key;\n\t\t\t} catch {\n\t\t\t\t// Provider might not be ready yet (e.g., no document loaded)\n\t\t\t\treturn false;\n\t\t\t}\n\t\t} );\n\t};\n\n\treturn {\n\t\tall,\n\t\tregister,\n\t\tsubscribe,\n\t\tgetProviders,\n\t\tgetProviderByKey,\n\t};\n};\n","import { createInteractionsRepository } from './utils/create-interactions-repository';\n\nexport const interactionsRepository = createInteractionsRepository();\n","import { type InteractionsProvider } from '../types';\n\nexport type CreateInteractionsProviderOptions = {\n\tkey: string | ( () => string );\n\tpriority?: number;\n\tsubscribe?: ( callback: () => void ) => () => void;\n\tactions: {\n\t\tall: InteractionsProvider[ 'actions' ][ 'all' ];\n\t};\n};\n\nconst DEFAULT_PRIORITY = 10;\n\nexport function createInteractionsProvider( {\n\tkey,\n\tpriority = DEFAULT_PRIORITY,\n\tsubscribe = () => () => {},\n\tactions,\n}: CreateInteractionsProviderOptions ): InteractionsProvider {\n\treturn {\n\t\tgetKey: typeof key === 'string' ? () => key : key,\n\t\tpriority,\n\t\tsubscribe,\n\t\tactions: {\n\t\t\tall: actions.all,\n\t\t},\n\t};\n}\n","import { getCurrentDocumentId, getElementInteractions, getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, windowEvent } from '@elementor/editor-v1-adapters';\n\nimport { createInteractionsProvider } from '../utils/create-interactions-provider';\n\nexport const ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX = 'document-elements-interactions-';\n\nexport const documentElementsInteractionsProvider = createInteractionsProvider( {\n\tkey: () => {\n\t\tconst documentId = getCurrentDocumentId();\n\n\t\tif ( ! documentId ) {\n\t\t\tconst pendingKey = `${ ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX }pending`;\n\t\t\treturn pendingKey;\n\t\t}\n\n\t\tconst key = `${ ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX }${ documentId }`;\n\t\treturn key;\n\t},\n\tpriority: 50,\n\tsubscribe: ( cb ) => {\n\t\treturn listenTo( [ windowEvent( 'elementor/element/update_interactions' ) ], () => cb() );\n\t},\n\tactions: {\n\t\tall: () => {\n\t\t\tconst elements = getElements();\n\n\t\t\tconst filtered = elements.filter( ( element ) => {\n\t\t\t\tconst interactions = getElementInteractions( element.id );\n\t\t\t\tif ( ! interactions ) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t\treturn interactions?.items?.length > 0;\n\t\t\t} );\n\n\t\t\treturn filtered.map( ( element ) => {\n\t\t\t\tconst interactions = getElementInteractions( element.id );\n\t\t\t\treturn {\n\t\t\t\t\telementId: element.id,\n\t\t\t\t\tdataId: element.id,\n\t\t\t\t\tinteractions: interactions || { version: 1, items: [] },\n\t\t\t\t};\n\t\t\t} );\n\t\t},\n\t},\n} );\n","import { interactionsRepository } from './interactions-repository';\nimport { documentElementsInteractionsProvider } from './providers/document-elements-interactions-provider';\n\nexport function init() {\n\ttry {\n\t\tinteractionsRepository.register( documentElementsInteractionsProvider );\n\t} catch ( error ) {\n\t\tthrow error;\n\t}\n}\n"],"mappings":"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","names":["React","useCallback","useState","useElementInteractions","Stack","React","React","createContext","useContext","React","useEffect","useMemo","useState","__","React","Grid","__","React","__","React","ControlFormLabel","PopoverGridContainer","Grid","__","React","ControlFormLabel","PopoverGridContainer","ToggleButtonGroupUi","Grid","__","React","ControlFormLabel","PopoverGridContainer","MenuListItem","Grid","Select","__","React","ControlFormLabel","PopoverGridContainer","MenuListItem","Grid","Select","__","Grid","__","useState","useEffect","useMemo","__","useElementInteractions","useState","useCallback","Stack"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-interactions",
-  "version": "3.33.0-284",
+  "version": "3.33.0-286",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,13 +39,13 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-controls": "3.33.0-284",
-    "@elementor/editor-elements": "3.33.0-284",
-    "@elementor/editor-ui": "3.33.0-284",
+    "@elementor/editor-controls": "3.33.0-286",
+    "@elementor/editor-elements": "3.33.0-286",
+    "@elementor/editor-ui": "3.33.0-286",
     "@elementor/icons": "^1.61.0",
-    "@elementor/editor-v1-adapters": "3.33.0-284",
-    "@elementor/utils": "3.33.0-284",
-    "@elementor/session": "3.33.0-284",
+    "@elementor/editor-v1-adapters": "3.33.0-286",
+    "@elementor/utils": "3.33.0-286",
+    "@elementor/session": "3.33.0-286",
     "@elementor/ui": "1.36.17",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/controls/direction.tsx

@@ -1,8 +1,13 @@
 import * as React from 'react';
 import { useMemo } from 'react';
-import { type ToggleButtonGroupItem, ToggleButtonGroupUi } from '@elementor/editor-controls';
+import {
+	ControlFormLabel,
+	PopoverGridContainer,
+	type ToggleButtonGroupItem,
+	ToggleButtonGroupUi,
+} from '@elementor/editor-controls';
 import { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from '@elementor/icons';
-import { Grid, Typography } from '@elementor/ui';
+import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { type DirectionFieldProps } from '../../types';
@@ -46,15 +51,15 @@ export function Direction( { value, onChange, interactionType }: DirectionFieldP
 	}, [ interactionType ] );
 
 	return (
-		<>
-			<Grid item xs={ 12 } md={ 6 }>
-				<Typography variant="caption" color="text.secondary">
-					{ __( 'Direction', 'elementor' ) }
-				</Typography>
-			</Grid>
-			<Grid item xs={ 12 } md={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end', overflow: 'hidden' } }>
-				<ToggleButtonGroupUi items={ options } exclusive onChange={ onChange } value={ value } />
-			</Grid>
-		</>
+		<Grid item xs={ 12 }>
+			<PopoverGridContainer>
+				<Grid item xs={ 6 }>
+					<ControlFormLabel> { __( 'Direction', 'elementor' ) }</ControlFormLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<ToggleButtonGroupUi items={ options } exclusive onChange={ onChange } value={ value } />
+				</Grid>
+			</PopoverGridContainer>
+		</Grid>
 	);
 }

package/src/components/controls/effect-type.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react';
-import { type ToggleButtonGroupItem, ToggleButtonGroupUi } from '@elementor/editor-controls';
-import { Grid, Typography } from '@elementor/ui';
+import {
+	ControlFormLabel,
+	PopoverGridContainer,
+	type ToggleButtonGroupItem,
+	ToggleButtonGroupUi,
+} from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { type FieldProps } from '../../types';
@@ -22,13 +27,15 @@ export function EffectType( { value, onChange }: FieldProps ) {
 
 	return (
 		<>
-			<Grid item xs={ 12 } md={ 6 }>
-				<Typography variant="caption" color="text.secondary">
-					{ __( 'Type', 'elementor' ) }
-				</Typography>
-			</Grid>
-			<Grid item xs={ 12 } md={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end', overflow: 'hidden' } }>
-				<ToggleButtonGroupUi items={ options } exclusive onChange={ onChange } value={ value } />
+			<Grid item xs={ 12 }>
+				<PopoverGridContainer>
+					<Grid item xs={ 6 }>
+						<ControlFormLabel>{ __( 'Type', 'elementor' ) }</ControlFormLabel>
+					</Grid>
+					<Grid item xs={ 6 }>
+						<ToggleButtonGroupUi items={ options } exclusive onChange={ onChange } value={ value } />
+					</Grid>
+				</PopoverGridContainer>
 			</Grid>
 		</>
 	);

package/src/components/controls/effect.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { ControlFormLabel, PopoverGridContainer } from '@elementor/editor-controls';
 import { MenuListItem } from '@elementor/editor-ui';
-import { Grid, Select, type SelectChangeEvent, Typography } from '@elementor/ui';
+import { Grid, Select, type SelectChangeEvent } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { type FieldProps } from '../../types';
@@ -12,29 +13,29 @@ export function Effect( { value, onChange }: FieldProps ) {
 	];
 
 	return (
-		<>
-			<Grid item xs={ 12 } md={ 6 }>
-				<Typography variant="caption" color="text.secondary">
-					{ __( 'Effect', 'elementor' ) }
-				</Typography>
-			</Grid>
-			<Grid item xs={ 12 } md={ 6 }>
-				<Select
-					fullWidth
-					displayEmpty
-					size="tiny"
-					value={ value }
-					onChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }
-				>
-					{ availableEffects.map( ( effect ) => {
-						return (
-							<MenuListItem key={ effect.key } value={ effect.key }>
-								{ effect.label }
-							</MenuListItem>
-						);
-					} ) }
-				</Select>
-			</Grid>
-		</>
+		<Grid item xs={ 12 }>
+			<PopoverGridContainer>
+				<Grid item xs={ 6 }>
+					<ControlFormLabel>{ __( 'Effect', 'elementor' ) }</ControlFormLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<Select
+						fullWidth
+						displayEmpty
+						size="tiny"
+						value={ value }
+						onChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }
+					>
+						{ availableEffects.map( ( effect ) => {
+							return (
+								<MenuListItem key={ effect.key } value={ effect.key }>
+									{ effect.label }
+								</MenuListItem>
+							);
+						} ) }
+					</Select>
+				</Grid>
+			</PopoverGridContainer>
+		</Grid>
 	);
 }

package/src/components/controls/time-frame-indicator.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { ControlFormLabel, PopoverGridContainer } from '@elementor/editor-controls';
 import { MenuListItem } from '@elementor/editor-ui';
-import { Grid, Select, type SelectChangeEvent, Typography } from '@elementor/ui';
+import { Grid, Select, type SelectChangeEvent } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { type FieldProps } from '../../types';
@@ -15,29 +16,29 @@ export function TimeFrameIndicator( { value, onChange, label }: FieldProps ) {
 	);
 
 	return (
-		<>
-			<Grid item xs={ 12 } md={ 6 }>
-				<Typography variant="caption" color="text.secondary">
-					{ label }
-				</Typography>
-			</Grid>
-			<Grid item xs={ 12 } md={ 6 }>
-				<Select
-					fullWidth
-					displayEmpty
-					size="tiny"
-					value={ value }
-					onChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }
-				>
-					{ availableTimeFrames.map( ( timeFrame ) => {
-						return (
-							<MenuListItem key={ timeFrame.key } value={ timeFrame.key }>
-								{ timeFrame.label }
-							</MenuListItem>
-						);
-					} ) }
-				</Select>
-			</Grid>
-		</>
+		<Grid item xs={ 12 }>
+			<PopoverGridContainer>
+				<Grid item xs={ 6 }>
+					<ControlFormLabel>{ label }</ControlFormLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<Select
+						fullWidth
+						displayEmpty
+						size="tiny"
+						value={ value }
+						onChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }
+					>
+						{ availableTimeFrames.map( ( timeFrame ) => {
+							return (
+								<MenuListItem key={ timeFrame.key } value={ timeFrame.key }>
+									{ timeFrame.label }
+								</MenuListItem>
+							);
+						} ) }
+					</Select>
+				</Grid>
+			</PopoverGridContainer>
+		</Grid>
 	);
 }

package/src/components/controls/trigger.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { ControlFormLabel, PopoverGridContainer } from '@elementor/editor-controls';
 import { MenuListItem } from '@elementor/editor-ui';
-import { Grid, Select, type SelectChangeEvent, Typography } from '@elementor/ui';
+import { Grid, Select, type SelectChangeEvent } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { type FieldProps } from '../../types';
@@ -16,29 +17,29 @@ export function Trigger( { value, onChange }: FieldProps ) {
 	} ) );
 
 	return (
-		<>
-			<Grid item xs={ 12 } md={ 6 }>
-				<Typography variant="caption" color="text.secondary">
-					{ __( 'Trigger', 'elementor' ) }
-				</Typography>
-			</Grid>
-			<Grid item xs={ 12 } md={ 6 }>
-				<Select
-					fullWidth
-					displayEmpty
-					size="tiny"
-					onChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }
-					value={ value }
-				>
-					{ availableTriggers.map( ( trigger ) => {
-						return (
-							<MenuListItem key={ trigger.key } value={ trigger.key }>
-								{ trigger.label }
-							</MenuListItem>
-						);
-					} ) }
-				</Select>
-			</Grid>
-		</>
+		<Grid item xs={ 12 }>
+			<PopoverGridContainer>
+				<Grid item xs={ 6 }>
+					<ControlFormLabel>{ __( 'Trigger', 'elementor' ) }</ControlFormLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<Select
+						fullWidth
+						displayEmpty
+						size="tiny"
+						onChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }
+						value={ value }
+					>
+						{ availableTriggers.map( ( trigger ) => {
+							return (
+								<MenuListItem key={ trigger.key } value={ trigger.key }>
+									{ trigger.label }
+								</MenuListItem>
+							);
+						} ) }
+					</Select>
+				</Grid>
+			</PopoverGridContainer>
+		</Grid>
 	);
 }

package/src/components/interaction-details.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { PopoverContent } from '@elementor/editor-controls';
 import { Divider, Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -60,12 +61,12 @@ export const InteractionDetails = ( { interaction, onChange }: InteractionDetail
 	};
 
 	return (
-		<>
-			<Grid container spacing={ 2 } sx={ { p: 1.5 } }>
+		<PopoverContent p={ 1.5 }>
+			<Grid container spacing={ 1.5 }>
 				<Trigger value={ interactionDetails.trigger } onChange={ ( v ) => handleChange( 'trigger', v ) } />
 			</Grid>
 			<Divider sx={ { mx: 1.5 } } />
-			<Grid container spacing={ 2 } sx={ { p: 1.5 } }>
+			<Grid container spacing={ 1.5 }>
 				<Effect value={ interactionDetails.effect } onChange={ ( v ) => handleChange( 'effect', v ) } />
 				<EffectType value={ interactionDetails.type } onChange={ ( v ) => handleChange( 'type', v ) } />
 				<Direction
@@ -84,6 +85,6 @@ export const InteractionDetails = ( { interaction, onChange }: InteractionDetail
 					label={ __( 'Delay', 'elementor' ) }
 				/>
 			</Grid>
-		</>
+		</PopoverContent>
 	);
 };