@elementor/editor-interactions 3.33.0-224

package/dist/index.mjs

@@ -0,0 +1,376 @@
+// src/components/empty-state.tsx
+import * as React from "react";
+import { SwipeIcon } from "@elementor/icons";
+import { Button, Stack, Typography } from "@elementor/ui";
+import { __ } from "@wordpress/i18n";
+var EmptyState = ({ onCreateInteraction }) => {
+  return /* @__PURE__ */ React.createElement(
+    Stack,
+    {
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%",
+      color: "text.secondary",
+      sx: { p: 2.5, pt: 8, pb: 5.5 },
+      gap: 1.5
+    },
+    /* @__PURE__ */ React.createElement(SwipeIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React.createElement(Typography, { align: "center", variant: "subtitle2" }, __("Animate elements with Interactions", "elementor")),
+    /* @__PURE__ */ React.createElement(Typography, { align: "center", variant: "caption", maxWidth: "170px" }, __(
+      "Add entrance animations and effects triggered by user interactions such as click, hover, or scroll.",
+      "elementor"
+    )),
+    /* @__PURE__ */ React.createElement(Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onCreateInteraction }, __("Create an interaction", "elementor"))
+  );
+};
+
+// src/components/interactions-list.tsx
+import * as React10 from "react";
+import { useEffect as useEffect2, useId, useMemo, useRef, useState as useState3 } from "react";
+import { EyeIcon, XIcon } from "@elementor/icons";
+import { bindPopover, bindTrigger, IconButton as IconButton2, Popover, Stack as Stack3, UnstableTag, usePopupState } from "@elementor/ui";
+import { __ as __8 } from "@wordpress/i18n";
+
+// src/contexts/popup-state-contex.tsx
+import * as React2 from "react";
+import { createContext, useCallback, useContext, useState } from "react";
+var PopupStateContext = createContext(void 0);
+var PopupStateProvider = ({ children }) => {
+  const [openByDefault, setOpenByDefault] = useState(false);
+  const triggerDefaultOpen = useCallback(() => {
+    setOpenByDefault(true);
+  }, []);
+  const resetDefaultOpen = useCallback(() => {
+    setOpenByDefault(false);
+  }, []);
+  return /* @__PURE__ */ React2.createElement(PopupStateContext.Provider, { value: { openByDefault, triggerDefaultOpen, resetDefaultOpen } }, children);
+};
+var usePopupStateContext = () => {
+  const context = useContext(PopupStateContext);
+  if (!context) {
+    throw new Error("usePopupStateContext must be used within PopupStateProvider");
+  }
+  return context;
+};
+
+// src/utils/get-interactions-config.ts
+var DEFAULT_CONFIG = {
+  constants: {
+    defaultDuration: 300,
+    defaultDelay: 0,
+    slideDistance: 100,
+    scaleStart: 0.5,
+    easing: "linear"
+  },
+  animationOptions: []
+};
+function getInteractionsConfig() {
+  return window.ElementorInteractionsConfig || DEFAULT_CONFIG;
+}
+
+// src/utils/format-interaction-label.ts
+function formatInteractionLabel(animationId) {
+  if (!animationId) {
+    return "";
+  }
+  const [trigger, effect, type, direction, duration, delay] = animationId.split("-");
+  const baseValue = `${trigger}-${effect}-${type}-${direction || ""}`;
+  const animationOptions = getInteractionsConfig()?.animationOptions;
+  const option = animationOptions.find((opt) => opt.value === baseValue);
+  let label = option?.label || animationId;
+  if (duration || delay) {
+    const constants = getInteractionsConfig()?.constants;
+    const durationValue = duration || String(constants.defaultDuration);
+    const delayValue = delay || String(constants.defaultDelay);
+    label += ` (${durationValue}ms`;
+    if (delayValue !== "0") {
+      label += `, ${delayValue}ms delay`;
+    }
+    label += ")";
+  }
+  return label;
+}
+
+// src/components/header.tsx
+import * as React3 from "react";
+import { PlusIcon } from "@elementor/icons";
+import { IconButton, Stack as Stack2, Typography as Typography2 } from "@elementor/ui";
+var Header = ({ label }) => {
+  return /* @__PURE__ */ React3.createElement(
+    Stack2,
+    {
+      direction: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: 1,
+      sx: { marginInlineEnd: -0.75, py: 0.25 }
+    },
+    /* @__PURE__ */ React3.createElement(Typography2, { component: "label", variant: "caption", color: "text.secondary", sx: { lineHeight: 1 } }, label),
+    /* @__PURE__ */ React3.createElement(IconButton, { size: "tiny", disabled: true }, /* @__PURE__ */ React3.createElement(PlusIcon, { fontSize: "tiny" }))
+  );
+};
+
+// src/components/interaction-details.tsx
+import * as React9 from "react";
+import { useEffect, useState as useState2 } from "react";
+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 { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from "@elementor/icons";
+import { Grid, ToggleButton, ToggleButtonGroup, Tooltip, Typography as Typography3 } from "@elementor/ui";
+import { __ as __2 } from "@wordpress/i18n";
+function Direction({ value, onChange }) {
+  const availableDirections = [
+    { key: "top", label: __2("Up", "elementor"), icon: /* @__PURE__ */ React4.createElement(ArrowUpSmallIcon, { fontSize: "tiny" }) },
+    { key: "bottom", label: __2("Down", "elementor"), icon: /* @__PURE__ */ React4.createElement(ArrowDownSmallIcon, { fontSize: "tiny" }) },
+    { key: "left", label: __2("Left", "elementor"), icon: /* @__PURE__ */ React4.createElement(ArrowLeftIcon, { fontSize: "tiny" }) },
+    { key: "right", label: __2("Right", "elementor"), icon: /* @__PURE__ */ React4.createElement(ArrowRightIcon, { fontSize: "tiny" }) }
+  ];
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React4.createElement(Typography3, { variant: "caption", color: "text.secondary" }, __2("Direction", "elementor"))), /* @__PURE__ */ React4.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React4.createElement(
+    ToggleButtonGroup,
+    {
+      size: "tiny",
+      exclusive: true,
+      onChange: (event, newValue) => onChange(newValue),
+      value
+    },
+    availableDirections.map((direction) => {
+      return /* @__PURE__ */ React4.createElement(Tooltip, { key: direction.key, title: direction.label, placement: "top" }, /* @__PURE__ */ React4.createElement(ToggleButton, { key: direction.key, value: direction.key }, direction.icon));
+    })
+  )));
+}
+
+// src/components/controls/effect.tsx
+import * as React5 from "react";
+import { MenuListItem } from "@elementor/editor-ui";
+import { Grid as Grid2, Select, Typography as Typography4 } from "@elementor/ui";
+import { __ as __3 } from "@wordpress/i18n";
+function Effect({ value, onChange }) {
+  const availableEffects = [
+    { key: "fade", label: __3("Fade", "elementor") },
+    { 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(Typography4, { variant: "caption", color: "text.secondary" }, __3("Effect", "elementor"))), /* @__PURE__ */ React5.createElement(Grid2, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React5.createElement(
+    Select,
+    {
+      fullWidth: true,
+      displayEmpty: true,
+      size: "tiny",
+      value,
+      onChange: (event) => onChange(event.target.value)
+    },
+    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 { Grid as Grid3, ToggleButton as ToggleButton2, ToggleButtonGroup as ToggleButtonGroup2, Tooltip as Tooltip2, Typography as Typography5 } from "@elementor/ui";
+import { __ as __4 } from "@wordpress/i18n";
+function EffectType({ value, onChange }) {
+  const availableEffectTypes = [
+    { key: "in", label: __4("In", "elementor") },
+    { key: "out", label: __4("Out", "elementor") }
+  ];
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(Grid3, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React6.createElement(Typography5, { variant: "caption", color: "text.secondary" }, __4("Type", "elementor"))), /* @__PURE__ */ React6.createElement(Grid3, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React6.createElement(
+    ToggleButtonGroup2,
+    {
+      size: "tiny",
+      exclusive: true,
+      onChange: (event, newValue) => onChange(newValue),
+      value
+    },
+    availableEffectTypes.map((effectType) => {
+      return /* @__PURE__ */ React6.createElement(Tooltip2, { key: effectType.key, title: effectType.label, placement: "top" }, /* @__PURE__ */ React6.createElement(ToggleButton2, { key: effectType.key, value: effectType.key }, effectType.label));
+    })
+  )));
+}
+
+// src/components/controls/time-frame-indicator.tsx
+import * as React7 from "react";
+import { MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
+import { Grid as Grid4, Select as Select2, Typography as Typography6 } 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(
+    (key) => ({
+      key,
+      // translators: %s: time in milliseconds
+      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(Typography6, { variant: "caption", color: "text.secondary" }, label)), /* @__PURE__ */ React7.createElement(Grid4, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React7.createElement(
+    Select2,
+    {
+      fullWidth: true,
+      displayEmpty: true,
+      size: "tiny",
+      value,
+      onChange: (event) => onChange(event.target.value)
+    },
+    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 { MenuListItem as MenuListItem3 } from "@elementor/editor-ui";
+import { Grid as Grid5, Select as Select3, Typography as Typography7 } from "@elementor/ui";
+import { __ as __6 } from "@wordpress/i18n";
+function Trigger({ value, onChange }) {
+  const availableTriggers = Object.entries({
+    load: __6("Page load", "elementor"),
+    scrollIn: __6("Scroll into view", "elementor"),
+    scrollOut: __6("Scroll out of view", "elementor")
+  }).map(([key, label]) => ({
+    key,
+    label
+  }));
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Grid5, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React8.createElement(Typography7, { variant: "caption", color: "text.secondary" }, __6("Trigger", "elementor"))), /* @__PURE__ */ React8.createElement(Grid5, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React8.createElement(
+    Select3,
+    {
+      fullWidth: true,
+      displayEmpty: true,
+      size: "tiny",
+      onChange: (event) => onChange(event.target.value),
+      value
+    },
+    availableTriggers.map((trigger) => {
+      return /* @__PURE__ */ React8.createElement(MenuListItem3, { key: trigger.key, value: trigger.key }, trigger.label);
+    })
+  )));
+}
+
+// src/components/interaction-details.tsx
+var DELIMITER = "-";
+var InteractionDetails = ({ interaction, onChange }) => {
+  const [interactionDetails, setInteractionDetails] = useState2(() => {
+    const [trigger, effect, type, direction, duration, delay] = interaction.split(DELIMITER);
+    return {
+      trigger: trigger || "load",
+      effect: effect || "fade",
+      type: type || "in",
+      direction: direction || "",
+      duration: duration || "300",
+      delay: delay || "0"
+    };
+  });
+  useEffect(() => {
+    const newValue = Object.values(interactionDetails).join(DELIMITER);
+    onChange(newValue);
+  }, [interactionDetails, onChange]);
+  const handleChange = (key, value) => {
+    setInteractionDetails((prev) => ({ ...prev, [key]: value }));
+  };
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(Grid6, { container: true, spacing: 2, sx: { width: "300px", p: 1 } }, /* @__PURE__ */ React9.createElement(Trigger, { value: interactionDetails.trigger, onChange: (v) => handleChange("trigger", v) })), /* @__PURE__ */ React9.createElement(Divider, null), /* @__PURE__ */ React9.createElement(Grid6, { container: true, spacing: 2, sx: { width: "300px", p: 1 } }, /* @__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 ?? "",
+      onChange: (v) => handleChange("direction", v)
+    }
+  ), /* @__PURE__ */ React9.createElement(
+    TimeFrameIndicator,
+    {
+      value: interactionDetails.duration,
+      onChange: (v) => handleChange("duration", v),
+      label: __7("Duration", "elementor")
+    }
+  ), /* @__PURE__ */ React9.createElement(
+    TimeFrameIndicator,
+    {
+      value: interactionDetails.delay,
+      onChange: (v) => handleChange("delay", v),
+      label: __7("Delay", "elementor")
+    }
+  )));
+};
+
+// src/components/interactions-list.tsx
+var PredefinedInteractionsList = ({
+  onSelectInteraction,
+  selectedInteraction,
+  onDelete
+}) => {
+  return /* @__PURE__ */ React10.createElement(Stack3, { sx: { m: 1, p: 1.5 }, gap: 2 }, /* @__PURE__ */ React10.createElement(Header, { label: __8("Interactions", "elementor") }), /* @__PURE__ */ React10.createElement(
+    InteractionsList,
+    {
+      onDelete: () => onDelete?.(),
+      selectedInteraction,
+      onSelectInteraction
+    }
+  ));
+};
+function InteractionsList({ onSelectInteraction, selectedInteraction, defaultStateRef }) {
+  const [interactionId, setInteractionId] = useState3(selectedInteraction);
+  const anchorEl = useRef(null);
+  const popupId = useId();
+  const popupState = usePopupState({
+    variant: "popover",
+    popupId: `elementor-interactions-list-${popupId}`
+  });
+  const { openByDefault, resetDefaultOpen } = usePopupStateContext();
+  useEffect2(() => {
+    if (interactionId) {
+      onSelectInteraction(interactionId);
+    }
+  }, [interactionId, onSelectInteraction]);
+  useEffect2(() => {
+    if (openByDefault && anchorEl.current) {
+      popupState.open();
+      resetDefaultOpen();
+    }
+  }, [defaultStateRef, openByDefault, popupState, resetDefaultOpen]);
+  const displayLabel = useMemo(() => {
+    return formatInteractionLabel(interactionId);
+  }, [interactionId]);
+  return /* @__PURE__ */ React10.createElement(Stack3, { gap: 1.5, ref: anchorEl }, /* @__PURE__ */ React10.createElement(
+    UnstableTag,
+    {
+      ...bindTrigger(popupState),
+      fullWidth: true,
+      variant: "outlined",
+      label: displayLabel,
+      showActionsOnHover: true,
+      actions: /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(IconButton2, { size: "tiny", disabled: true }, /* @__PURE__ */ React10.createElement(EyeIcon, { fontSize: "tiny" })), /* @__PURE__ */ React10.createElement(IconButton2, { size: "tiny" }, /* @__PURE__ */ React10.createElement(XIcon, { fontSize: "tiny" })))
+    }
+  ), /* @__PURE__ */ React10.createElement(
+    Popover,
+    {
+      ...bindPopover(popupState),
+      disableScrollLock: true,
+      anchorEl: anchorEl.current,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      PaperProps: {
+        sx: { my: 1 }
+      },
+      onClose: () => {
+        popupState.close();
+      }
+    },
+    /* @__PURE__ */ React10.createElement(
+      InteractionDetails,
+      {
+        interaction: selectedInteraction,
+        onChange: (newValue) => {
+          setInteractionId(newValue);
+        }
+      }
+    )
+  ));
+}
+export {
+  EmptyState,
+  PopupStateProvider,
+  PredefinedInteractionsList,
+  getInteractionsConfig,
+  usePopupStateContext
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/empty-state.tsx","../src/components/interactions-list.tsx","../src/contexts/popup-state-contex.tsx","../src/utils/get-interactions-config.ts","../src/utils/format-interaction-label.ts","../src/components/header.tsx","../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"],"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 click, hover, 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 { useEffect, useId, useMemo, useRef, useState } from 'react';\nimport { EyeIcon, XIcon } from '@elementor/icons';\nimport { bindPopover, bindTrigger, IconButton, Popover, Stack, UnstableTag, usePopupState } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { usePopupStateContext } from '../contexts/popup-state-contex';\nimport { formatInteractionLabel } from '../utils/format-interaction-label';\nimport { Header } from './header';\nimport { InteractionDetails } from './interaction-details';\n\ntype PredefinedInteractionsListProps = {\n\tonSelectInteraction: ( interaction: string ) => void;\n\tselectedInteraction: string;\n\tonDelete?: () => void;\n};\n\nexport const PredefinedInteractionsList = ( {\n\tonSelectInteraction,\n\tselectedInteraction,\n\tonDelete,\n}: PredefinedInteractionsListProps ) => {\n\treturn (\n\t\t<Stack sx={ { m: 1, p: 1.5 } } gap={ 2 }>\n\t\t\t<Header label={ __( 'Interactions', 'elementor' ) } />\n\t\t\t<InteractionsList\n\t\t\t\tonDelete={ () => onDelete?.() }\n\t\t\t\tselectedInteraction={ selectedInteraction }\n\t\t\t\tonSelectInteraction={ onSelectInteraction }\n\t\t\t/>\n\t\t</Stack>\n\t);\n};\n\ntype InteractionListProps = {\n\tonDelete: () => void;\n\tonSelectInteraction: ( interaction: string ) => void;\n\tselectedInteraction: string;\n\tdefaultStateRef?: React.MutableRefObject< boolean | undefined >;\n};\n\nfunction InteractionsList( { onSelectInteraction, selectedInteraction, defaultStateRef }: InteractionListProps ) {\n\tconst [ interactionId, setInteractionId ] = useState( selectedInteraction );\n\n\tconst anchorEl = useRef< HTMLDivElement | null >( null );\n\n\tconst popupId = useId();\n\tconst popupState = usePopupState( {\n\t\tvariant: 'popover',\n\t\tpopupId: `elementor-interactions-list-${ popupId }`,\n\t} );\n\n\tconst { openByDefault, resetDefaultOpen } = usePopupStateContext();\n\n\tuseEffect( () => {\n\t\tif ( interactionId ) {\n\t\t\tonSelectInteraction( interactionId );\n\t\t}\n\t}, [ interactionId, onSelectInteraction ] );\n\n\tuseEffect( () => {\n\t\tif ( openByDefault && anchorEl.current ) {\n\t\t\tpopupState.open();\n\t\t\tresetDefaultOpen();\n\t\t}\n\t}, [ defaultStateRef, openByDefault, popupState, resetDefaultOpen ] );\n\n\tconst displayLabel = useMemo( () => {\n\t\treturn formatInteractionLabel( interactionId );\n\t}, [ interactionId ] );\n\n\treturn (\n\t\t<Stack gap={ 1.5 } ref={ anchorEl }>\n\t\t\t<UnstableTag\n\t\t\t\t{ ...bindTrigger( popupState ) }\n\t\t\t\tfullWidth\n\t\t\t\tvariant=\"outlined\"\n\t\t\t\tlabel={ displayLabel }\n\t\t\t\tshowActionsOnHover\n\t\t\t\tactions={\n\t\t\t\t\t<>\n\t\t\t\t\t\t<IconButton size=\"tiny\" disabled>\n\t\t\t\t\t\t\t<EyeIcon fontSize=\"tiny\" />\n\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t\t<IconButton size=\"tiny\">\n\t\t\t\t\t\t\t<XIcon 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\t<Popover\n\t\t\t\t{ ...bindPopover( popupState ) }\n\t\t\t\tdisableScrollLock\n\t\t\t\tanchorEl={ anchorEl.current }\n\t\t\t\tanchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }\n\t\t\t\ttransformOrigin={ { vertical: 'top', horizontal: 'left' } }\n\t\t\t\tPaperProps={ {\n\t\t\t\t\tsx: { my: 1 },\n\t\t\t\t} }\n\t\t\t\tonClose={ () => {\n\t\t\t\t\tpopupState.close();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<InteractionDetails\n\t\t\t\t\tinteraction={ selectedInteraction }\n\t\t\t\t\tonChange={ ( newValue: string ) => {\n\t\t\t\t\t\tsetInteractionId( newValue );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</Popover>\n\t\t</Stack>\n\t);\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 { 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 { getInteractionsConfig } from './get-interactions-config';\n\nexport function formatInteractionLabel( animationId: string ): string {\n\tif ( ! animationId ) {\n\t\treturn '';\n\t}\n\n\tconst [ trigger, effect, type, direction, duration, delay ] = animationId.split( '-' );\n\n\tconst baseValue = `${ trigger }-${ effect }-${ type }-${ direction || '' }`;\n\n\tconst animationOptions = getInteractionsConfig()?.animationOptions;\n\tconst option = animationOptions.find( ( opt ) => opt.value === baseValue );\n\n\tlet label = option?.label || animationId;\n\n\tif ( duration || delay ) {\n\t\tconst constants = getInteractionsConfig()?.constants;\n\t\tconst durationValue = duration || String( constants.defaultDuration );\n\t\tconst delayValue = delay || String( constants.defaultDelay );\n\n\t\tlabel += ` (${ durationValue }ms`;\n\n\t\tif ( delayValue !== '0' ) {\n\t\t\tlabel += `, ${ delayValue }ms delay`;\n\t\t}\n\n\t\tlabel += ')';\n\t}\n\n\treturn label;\n}\n","import * as React from 'react';\nimport { PlusIcon } from '@elementor/icons';\nimport { IconButton, Stack, Typography } from '@elementor/ui';\n\nexport const Header = ( { label }: { label: string } ) => {\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"row\"\n\t\t\talignItems=\"center\"\n\t\t\tjustifyContent=\"space-between\"\n\t\t\tgap={ 1 }\n\t\t\tsx={ { marginInlineEnd: -0.75, py: 0.25 } }\n\t\t>\n\t\t\t<Typography component=\"label\" variant=\"caption\" color=\"text.secondary\" sx={ { lineHeight: 1 } }>\n\t\t\t\t{ label }\n\t\t\t</Typography>\n\t\t\t<IconButton size=\"tiny\" disabled>\n\t\t\t\t<PlusIcon fontSize=\"tiny\" />\n\t\t\t</IconButton>\n\t\t</Stack>\n\t);\n};\n","import * as React from 'react';\nimport { useEffect, useState } 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};\n\nexport const InteractionDetails = ( { interaction, onChange }: InteractionDetailsProps ) => {\n\tconst [ interactionDetails, setInteractionDetails ] = useState( () => {\n\t\tconst [ trigger, effect, type, direction, duration, delay ] = interaction.split( DELIMITER );\n\n\t\treturn {\n\t\t\ttrigger: trigger || 'load',\n\t\t\teffect: effect || 'fade',\n\t\t\ttype: type || 'in',\n\t\t\tdirection: direction || '',\n\t\t\tduration: duration || '300',\n\t\t\tdelay: delay || '0',\n\t\t};\n\t} );\n\n\tuseEffect( () => {\n\t\tconst newValue = Object.values( interactionDetails ).join( DELIMITER );\n\t\tonChange( newValue );\n\t}, [ interactionDetails, onChange ] );\n\n\tconst handleChange = < K extends keyof typeof interactionDetails >(\n\t\tkey: K,\n\t\tvalue: ( typeof interactionDetails )[ K ]\n\t) => {\n\t\tsetInteractionDetails( ( prev ) => ( { ...prev, [ key ]: value } ) );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<Grid container spacing={ 2 } sx={ { width: '300px', p: 1 } }>\n\t\t\t\t<Trigger value={ interactionDetails.trigger } onChange={ ( v ) => handleChange( 'trigger', v ) } />\n\t\t\t</Grid>\n\t\t\t<Divider />\n\t\t\t<Grid container spacing={ 2 } sx={ { width: '300px', p: 1 } }>\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/>\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 { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from '@elementor/icons';\nimport { Grid, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type FieldProps } from '../../types';\n\nexport function Direction( { value, onChange }: FieldProps ) {\n\tconst availableDirections = [\n\t\t{ key: 'top', label: __( 'Up', 'elementor' ), icon: <ArrowUpSmallIcon fontSize=\"tiny\" /> },\n\t\t{ key: 'bottom', label: __( 'Down', 'elementor' ), icon: <ArrowDownSmallIcon fontSize=\"tiny\" /> },\n\t\t{ key: 'left', label: __( 'Left', 'elementor' ), icon: <ArrowLeftIcon fontSize=\"tiny\" /> },\n\t\t{ key: 'right', label: __( 'Right', 'elementor' ), icon: <ArrowRightIcon fontSize=\"tiny\" /> },\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{ __( 'Direction', '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<ToggleButtonGroup\n\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\texclusive\n\t\t\t\t\tonChange={ ( event: React.MouseEvent< HTMLElement >, newValue: string ) => onChange( newValue ) }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t>\n\t\t\t\t\t{ availableDirections.map( ( direction ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Tooltip key={ direction.key } title={ direction.label } placement=\"top\">\n\t\t\t\t\t\t\t\t<ToggleButton key={ direction.key } value={ direction.key }>\n\t\t\t\t\t\t\t\t\t{ direction.icon }\n\t\t\t\t\t\t\t\t</ToggleButton>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</ToggleButtonGroup>\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 { Grid, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type FieldProps } from '../../types';\n\nexport function EffectType( { value, onChange }: FieldProps ) {\n\tconst availableEffectTypes = [\n\t\t{ key: 'in', label: __( 'In', 'elementor' ) },\n\t\t{ key: 'out', label: __( 'Out', '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{ __( 'Type', '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<ToggleButtonGroup\n\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\texclusive\n\t\t\t\t\tonChange={ ( event: React.MouseEvent< HTMLElement >, newValue: string ) => onChange( newValue ) }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t>\n\t\t\t\t\t{ availableEffectTypes.map( ( effectType ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Tooltip key={ effectType.key } title={ effectType.label } placement=\"top\">\n\t\t\t\t\t\t\t\t<ToggleButton key={ effectType.key } value={ effectType.key }>\n\t\t\t\t\t\t\t\t\t{ effectType.label }\n\t\t\t\t\t\t\t\t</ToggleButton>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</ToggleButtonGroup>\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"],"mappings":"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","names":["React","useEffect","useState","IconButton","Stack","__","React","React","Stack","Typography","React","useState","Grid","__","React","Typography","__","React","Grid","Typography","__","React","Grid","ToggleButton","ToggleButtonGroup","Tooltip","Typography","__","React","MenuListItem","Grid","Select","Typography","__","React","MenuListItem","Grid","Select","Typography","__","useState","Grid","__","Stack","__","useState","useEffect","IconButton"]}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@elementor/editor-interactions",
+  "version": "3.33.0-224",
+  "private": false,
+  "author": "Elementor Team",
+  "homepage": "https://elementor.com/",
+  "license": "GPL-3.0-or-later",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/elementor/elementor.git",
+    "directory": "packages/core/editor-interactions"
+  },
+  "bugs": {
+    "url": "https://github.com/elementor/elementor/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "README.md",
+    "CHANGELOG.md",
+    "/dist",
+    "/src",
+    "!**/__tests__"
+  ],
+  "scripts": {
+    "build": "tsup --config=../../tsup.build.ts",
+    "dev": "tsup --config=../../tsup.dev.ts"
+  },
+  "dependencies": {
+    "@elementor/editor-ui": "3.33.0-224",
+    "@elementor/ui": "1.36.15",
+    "@elementor/icons": "1.56.0",
+    "@wordpress/i18n": "^5.13.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5"
+  }
+}

package/src/components/controls/direction.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from '@elementor/icons';
+import { Grid, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { type FieldProps } from '../../types';
+
+export function Direction( { value, onChange }: FieldProps ) {
+	const availableDirections = [
+		{ key: 'top', label: __( 'Up', 'elementor' ), icon: <ArrowUpSmallIcon fontSize="tiny" /> },
+		{ key: 'bottom', label: __( 'Down', 'elementor' ), icon: <ArrowDownSmallIcon fontSize="tiny" /> },
+		{ key: 'left', label: __( 'Left', 'elementor' ), icon: <ArrowLeftIcon fontSize="tiny" /> },
+		{ key: 'right', label: __( 'Right', 'elementor' ), icon: <ArrowRightIcon fontSize="tiny" /> },
+	];
+
+	return (
+		<>
+			<Grid item xs={ 12 } md={ 6 }>
+				<Typography variant="caption" color="text.secondary">
+					{ __( 'Direction', 'elementor' ) }
+				</Typography>
+			</Grid>
+			<Grid item xs={ 12 } md={ 6 }>
+				<ToggleButtonGroup
+					size="tiny"
+					exclusive
+					onChange={ ( event: React.MouseEvent< HTMLElement >, newValue: string ) => onChange( newValue ) }
+					value={ value }
+				>
+					{ availableDirections.map( ( direction ) => {
+						return (
+							<Tooltip key={ direction.key } title={ direction.label } placement="top">
+								<ToggleButton key={ direction.key } value={ direction.key }>
+									{ direction.icon }
+								</ToggleButton>
+							</Tooltip>
+						);
+					} ) }
+				</ToggleButtonGroup>
+			</Grid>
+		</>
+	);
+}

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Grid, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { type FieldProps } from '../../types';
+
+export function EffectType( { value, onChange }: FieldProps ) {
+	const availableEffectTypes = [
+		{ key: 'in', label: __( 'In', 'elementor' ) },
+		{ key: 'out', label: __( 'Out', 'elementor' ) },
+	];
+
+	return (
+		<>
+			<Grid item xs={ 12 } md={ 6 }>
+				<Typography variant="caption" color="text.secondary">
+					{ __( 'Type', 'elementor' ) }
+				</Typography>
+			</Grid>
+			<Grid item xs={ 12 } md={ 6 }>
+				<ToggleButtonGroup
+					size="tiny"
+					exclusive
+					onChange={ ( event: React.MouseEvent< HTMLElement >, newValue: string ) => onChange( newValue ) }
+					value={ value }
+				>
+					{ availableEffectTypes.map( ( effectType ) => {
+						return (
+							<Tooltip key={ effectType.key } title={ effectType.label } placement="top">
+								<ToggleButton key={ effectType.key } value={ effectType.key }>
+									{ effectType.label }
+								</ToggleButton>
+							</Tooltip>
+						);
+					} ) }
+				</ToggleButtonGroup>
+			</Grid>
+		</>
+	);
+}

package/src/components/controls/effect.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { MenuListItem } from '@elementor/editor-ui';
+import { Grid, Select, type SelectChangeEvent, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { type FieldProps } from '../../types';
+export function Effect( { value, onChange }: FieldProps ) {
+	const availableEffects = [
+		{ key: 'fade', label: __( 'Fade', 'elementor' ) },
+		{ key: 'slide', label: __( 'Slide', 'elementor' ) },
+		{ key: 'scale', label: __( 'Scale', 'elementor' ) },
+	];
+
+	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>
+		</>
+	);
+}