@elementor/editor-interactions 3.33.0-255 → 3.33.0-257

package/dist/index.js

@@ -67,10 +67,11 @@ var EmptyState = ({ onCreateInteraction }) => {
 };
 
 // src/components/interactions-tab.tsx
-var React12 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_react5 = require("react");
 var import_editor_elements2 = require("@elementor/editor-elements");
 var import_session = require("@elementor/session");
+var import_ui9 = require("@elementor/ui");
 
 // src/contexts/interactions-context.tsx
 var React2 = __toESM(require("react"));
@@ -82,7 +83,7 @@ var InteractionsProvider = ({ children, elementId }) => {
   const setInteractions = (value) => {
     (0, import_editor_elements.updateElementInteractions)({
       elementId,
-      interactions: value
+      interactions: value || void 0
     });
   };
   const playInteractions = () => {
@@ -117,19 +118,13 @@ var PopupStateProvider = ({ children }) => {
   }, []);
   return /* @__PURE__ */ React3.createElement(PopupStateContext.Provider, { value: { openByDefault, triggerDefaultOpen, resetDefaultOpen } }, children);
 };
-var usePopupStateContext = () => {
-  const context = (0, import_react2.useContext)(PopupStateContext);
-  if (!context) {
-    throw new Error("usePopupStateContext must be used within PopupStateProvider");
-  }
-  return context;
-};
 
 // src/components/interactions-list.tsx
-var React11 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var import_react4 = require("react");
-var import_icons4 = require("@elementor/icons");
-var import_ui9 = require("@elementor/ui");
+var import_editor_controls = require("@elementor/editor-controls");
+var import_icons3 = require("@elementor/icons");
+var import_ui8 = require("@elementor/ui");
 var import_i18n8 = require("@wordpress/i18n");
 
 // src/utils/get-interactions-config.ts
@@ -147,45 +142,26 @@ function getInteractionsConfig() {
   return window.ElementorInteractionsConfig || DEFAULT_CONFIG;
 }
 
-// src/components/header.tsx
-var React4 = __toESM(require("react"));
-var import_icons2 = require("@elementor/icons");
-var import_ui2 = require("@elementor/ui");
-var Header = ({ label }) => {
-  return /* @__PURE__ */ React4.createElement(
-    import_ui2.Stack,
-    {
-      direction: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-      gap: 1,
-      sx: { marginInlineEnd: -0.75, py: 0.25 }
-    },
-    /* @__PURE__ */ React4.createElement(import_ui2.Typography, { component: "label", variant: "caption", color: "text.secondary", sx: { lineHeight: 1 } }, label),
-    /* @__PURE__ */ React4.createElement(import_ui2.IconButton, { size: "tiny", disabled: true }, /* @__PURE__ */ React4.createElement(import_icons2.PlusIcon, { fontSize: "tiny" }))
-  );
-};
-
 // src/components/interaction-details.tsx
-var React10 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 var import_react3 = require("react");
-var import_ui8 = require("@elementor/ui");
+var import_ui7 = require("@elementor/ui");
 var import_i18n7 = require("@wordpress/i18n");
 
 // src/components/controls/direction.tsx
-var React5 = __toESM(require("react"));
-var import_icons3 = require("@elementor/icons");
-var import_ui3 = require("@elementor/ui");
+var React4 = __toESM(require("react"));
+var import_icons2 = require("@elementor/icons");
+var import_ui2 = require("@elementor/ui");
 var import_i18n2 = require("@wordpress/i18n");
 function Direction({ value, onChange }) {
   const availableDirections = [
-    { key: "top", label: (0, import_i18n2.__)("From bottom", "elementor"), icon: /* @__PURE__ */ React5.createElement(import_icons3.ArrowUpSmallIcon, { fontSize: "tiny" }) },
-    { key: "bottom", label: (0, import_i18n2.__)("From top", "elementor"), icon: /* @__PURE__ */ React5.createElement(import_icons3.ArrowDownSmallIcon, { fontSize: "tiny" }) },
-    { key: "left", label: (0, import_i18n2.__)("From right", "elementor"), icon: /* @__PURE__ */ React5.createElement(import_icons3.ArrowLeftIcon, { fontSize: "tiny" }) },
-    { key: "right", label: (0, import_i18n2.__)("From left", "elementor"), icon: /* @__PURE__ */ React5.createElement(import_icons3.ArrowRightIcon, { fontSize: "tiny" }) }
+    { key: "top", label: (0, import_i18n2.__)("From bottom", "elementor"), icon: /* @__PURE__ */ React4.createElement(import_icons2.ArrowUpSmallIcon, { fontSize: "tiny" }) },
+    { key: "bottom", label: (0, import_i18n2.__)("From top", "elementor"), icon: /* @__PURE__ */ React4.createElement(import_icons2.ArrowDownSmallIcon, { fontSize: "tiny" }) },
+    { key: "left", label: (0, import_i18n2.__)("From right", "elementor"), icon: /* @__PURE__ */ React4.createElement(import_icons2.ArrowLeftIcon, { fontSize: "tiny" }) },
+    { key: "right", label: (0, import_i18n2.__)("From left", "elementor"), icon: /* @__PURE__ */ React4.createElement(import_icons2.ArrowRightIcon, { fontSize: "tiny" }) }
   ];
-  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_i18n2.__)("Direction", "elementor"))), /* @__PURE__ */ React5.createElement(import_ui3.Grid, { item: true, xs: 12, md: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React5.createElement(
-    import_ui3.ToggleButtonGroup,
+  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_ui2.ToggleButtonGroup,
     {
       size: "tiny",
       exclusive: true,
@@ -193,15 +169,15 @@ function Direction({ value, onChange }) {
       value
     },
     availableDirections.map((direction) => {
-      return /* @__PURE__ */ React5.createElement(import_ui3.Tooltip, { key: direction.key, title: direction.label, placement: "top" }, /* @__PURE__ */ React5.createElement(import_ui3.ToggleButton, { key: direction.key, value: direction.key }, direction.icon));
+      return /* @__PURE__ */ React4.createElement(import_ui2.Tooltip, { key: direction.key, title: direction.label, placement: "top" }, /* @__PURE__ */ React4.createElement(import_ui2.ToggleButton, { key: direction.key, value: direction.key }, direction.icon));
     })
   )));
 }
 
 // src/components/controls/effect.tsx
-var React6 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var import_editor_ui = require("@elementor/editor-ui");
-var import_ui4 = require("@elementor/ui");
+var import_ui3 = require("@elementor/ui");
 var import_i18n3 = require("@wordpress/i18n");
 function Effect({ value, onChange }) {
   const availableEffects = [
@@ -209,8 +185,8 @@ function Effect({ value, onChange }) {
     { key: "slide", label: (0, import_i18n3.__)("Slide", "elementor") },
     { key: "scale", label: (0, import_i18n3.__)("Scale", "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_i18n3.__)("Effect", "elementor"))), /* @__PURE__ */ React6.createElement(import_ui4.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React6.createElement(
-    import_ui4.Select,
+  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(
+    import_ui3.Select,
     {
       fullWidth: true,
       displayEmpty: true,
@@ -219,22 +195,22 @@ function Effect({ value, onChange }) {
       onChange: (event) => onChange(event.target.value)
     },
     availableEffects.map((effect) => {
-      return /* @__PURE__ */ React6.createElement(import_editor_ui.MenuListItem, { key: effect.key, value: effect.key }, effect.label);
+      return /* @__PURE__ */ React5.createElement(import_editor_ui.MenuListItem, { key: effect.key, value: effect.key }, effect.label);
     })
   )));
 }
 
 // src/components/controls/effect-type.tsx
-var React7 = __toESM(require("react"));
-var import_ui5 = require("@elementor/ui");
+var React6 = __toESM(require("react"));
+var import_ui4 = require("@elementor/ui");
 var import_i18n4 = require("@wordpress/i18n");
 function EffectType({ value, onChange }) {
   const availableEffectTypes = [
     { key: "in", label: (0, import_i18n4.__)("In", "elementor") },
     { key: "out", label: (0, import_i18n4.__)("Out", "elementor") }
   ];
-  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" }, (0, import_i18n4.__)("Type", "elementor"))), /* @__PURE__ */ React7.createElement(import_ui5.Grid, { item: true, xs: 12, md: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React7.createElement(
-    import_ui5.ToggleButtonGroup,
+  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_ui4.ToggleButtonGroup,
     {
       size: "tiny",
       exclusive: true,
@@ -242,15 +218,15 @@ function EffectType({ value, onChange }) {
       value
     },
     availableEffectTypes.map((effectType) => {
-      return /* @__PURE__ */ React7.createElement(import_ui5.Tooltip, { key: effectType.key, title: effectType.label, placement: "top" }, /* @__PURE__ */ React7.createElement(import_ui5.ToggleButton, { key: effectType.key, value: effectType.key }, effectType.label));
+      return /* @__PURE__ */ React6.createElement(import_ui4.Tooltip, { key: effectType.key, title: effectType.label, placement: "top" }, /* @__PURE__ */ React6.createElement(import_ui4.ToggleButton, { key: effectType.key, value: effectType.key }, effectType.label));
     })
   )));
 }
 
 // src/components/controls/time-frame-indicator.tsx
-var React8 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var import_editor_ui2 = require("@elementor/editor-ui");
-var import_ui6 = require("@elementor/ui");
+var import_ui5 = require("@elementor/ui");
 var import_i18n5 = require("@wordpress/i18n");
 function TimeFrameIndicator({ value, onChange, label }) {
   const availableTimeFrames = ["0", "100", "200", "300", "400", "500", "750", "1000", "1250", "1500"].map(
@@ -260,8 +236,8 @@ function TimeFrameIndicator({ value, onChange, label }) {
       label: (0, import_i18n5.__)("%s MS", "elementor").replace("%s", key)
     })
   );
-  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" }, label)), /* @__PURE__ */ React8.createElement(import_ui6.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React8.createElement(
-    import_ui6.Select,
+  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(
+    import_ui5.Select,
     {
       fullWidth: true,
       displayEmpty: true,
@@ -270,15 +246,15 @@ function TimeFrameIndicator({ value, onChange, label }) {
       onChange: (event) => onChange(event.target.value)
     },
     availableTimeFrames.map((timeFrame) => {
-      return /* @__PURE__ */ React8.createElement(import_editor_ui2.MenuListItem, { key: timeFrame.key, value: timeFrame.key }, timeFrame.label);
+      return /* @__PURE__ */ React7.createElement(import_editor_ui2.MenuListItem, { key: timeFrame.key, value: timeFrame.key }, timeFrame.label);
     })
   )));
 }
 
 // src/components/controls/trigger.tsx
-var React9 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var import_editor_ui3 = require("@elementor/editor-ui");
-var import_ui7 = require("@elementor/ui");
+var import_ui6 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
 function Trigger({ value, onChange }) {
   const availableTriggers = Object.entries({
@@ -289,8 +265,8 @@ function Trigger({ value, onChange }) {
     key,
     label
   }));
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(import_ui7.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React9.createElement(import_ui7.Typography, { variant: "caption", color: "text.secondary" }, (0, import_i18n6.__)("Trigger", "elementor"))), /* @__PURE__ */ React9.createElement(import_ui7.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React9.createElement(
-    import_ui7.Select,
+  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(
+    import_ui6.Select,
     {
       fullWidth: true,
       displayEmpty: true,
@@ -299,7 +275,7 @@ function Trigger({ value, onChange }) {
       value
     },
     availableTriggers.map((trigger) => {
-      return /* @__PURE__ */ React9.createElement(import_editor_ui3.MenuListItem, { key: trigger.key, value: trigger.key }, trigger.label);
+      return /* @__PURE__ */ React8.createElement(import_editor_ui3.MenuListItem, { key: trigger.key, value: trigger.key }, trigger.label);
     })
   )));
 }
@@ -325,20 +301,20 @@ var InteractionDetails = ({ interaction, onChange }) => {
   const handleChange = (key, value) => {
     setInteractionDetails((prev) => ({ ...prev, [key]: value }));
   };
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(import_ui8.Grid, { container: true, spacing: 2, sx: { width: "300px", p: 1 } }, /* @__PURE__ */ React10.createElement(Trigger, { value: interactionDetails.trigger, onChange: (v) => handleChange("trigger", v) })), /* @__PURE__ */ React10.createElement(import_ui8.Divider, null), /* @__PURE__ */ React10.createElement(import_ui8.Grid, { container: true, spacing: 2, sx: { width: "300px", p: 1 } }, /* @__PURE__ */ React10.createElement(Effect, { value: interactionDetails.effect, onChange: (v) => handleChange("effect", v) }), /* @__PURE__ */ React10.createElement(EffectType, { value: interactionDetails.type, onChange: (v) => handleChange("type", v) }), /* @__PURE__ */ React10.createElement(
+  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(
     Direction,
     {
       value: interactionDetails.direction ?? "",
       onChange: (v) => handleChange("direction", v)
     }
-  ), /* @__PURE__ */ React10.createElement(
+  ), /* @__PURE__ */ React9.createElement(
     TimeFrameIndicator,
     {
       value: interactionDetails.duration,
       onChange: (v) => handleChange("duration", v),
       label: (0, import_i18n7.__)("Duration", "elementor")
     }
-  ), /* @__PURE__ */ React10.createElement(
+  ), /* @__PURE__ */ React9.createElement(
     TimeFrameIndicator,
     {
       value: interactionDetails.delay,
@@ -349,96 +325,68 @@ var InteractionDetails = ({ interaction, onChange }) => {
 };
 
 // src/components/interactions-list.tsx
-var PredefinedInteractionsList = ({
-  onSelectInteraction,
-  selectedInteraction,
-  onDelete,
-  onPlayInteraction
-}) => {
-  return /* @__PURE__ */ React11.createElement(import_ui9.Stack, { sx: { m: 1, p: 1.5 }, gap: 2 }, /* @__PURE__ */ React11.createElement(Header, { label: (0, import_i18n8.__)("Interactions", "elementor") }), /* @__PURE__ */ React11.createElement(
-    InteractionsList,
-    {
-      onDelete,
-      selectedInteraction,
-      onSelectInteraction,
-      onPlayInteraction
-    }
-  ));
-};
 function InteractionsList(props) {
-  const { onSelectInteraction, selectedInteraction, defaultStateRef, onDelete, onPlayInteraction } = props;
+  const { onSelectInteraction, selectedInteraction, onPlayInteraction, triggerCreateOnShowEmpty } = props;
   const [interactionId, setInteractionId] = (0, import_react4.useState)(selectedInteraction);
-  const anchorEl = (0, import_react4.useRef)(null);
-  const popupId = (0, import_react4.useId)();
-  const popupState = (0, import_ui9.usePopupState)({
-    variant: "popover",
-    popupId: `elementor-interactions-list-${popupId}`
-  });
-  const { openByDefault, resetDefaultOpen } = usePopupStateContext();
+  if (triggerCreateOnShowEmpty && !interactionId) {
+    setInteractionId("load-fade-in-left-100-0");
+  }
   (0, import_react4.useEffect)(() => {
-    if (interactionId && interactionId !== selectedInteraction) {
+    if (interactionId !== selectedInteraction) {
       onSelectInteraction(interactionId);
     }
   }, [interactionId, selectedInteraction, onSelectInteraction]);
-  (0, import_react4.useEffect)(() => {
-    if (openByDefault && anchorEl.current) {
-      popupState.setAnchorEl(anchorEl.current);
-      popupState.open();
-      resetDefaultOpen();
-    }
-  }, [defaultStateRef, popupState, anchorEl, openByDefault, resetDefaultOpen]);
-  const displayLabel = (0, import_react4.useMemo)(() => {
-    if (!interactionId) {
+  const displayLabel = (interactionForDisplay) => {
+    if (!interactionForDisplay) {
       return "";
     }
     const animationOptions = getInteractionsConfig()?.animationOptions;
-    const option = animationOptions.find((opt) => opt.value === interactionId);
-    return option?.label || interactionId;
-  }, [interactionId]);
-  return /* @__PURE__ */ React11.createElement(import_ui9.Stack, { gap: 1.5, ref: anchorEl }, /* @__PURE__ */ React11.createElement(
-    import_ui9.UnstableTag,
-    {
-      ...(0, import_ui9.bindTrigger)(popupState),
-      fullWidth: true,
-      variant: "outlined",
-      label: displayLabel,
-      showActionsOnHover: true,
-      actions: /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(import_ui9.IconButton, { size: "tiny", onClick: onPlayInteraction }, /* @__PURE__ */ React11.createElement(import_icons4.PlayerPlayIcon, { fontSize: "tiny" })), /* @__PURE__ */ React11.createElement(import_ui9.IconButton, { size: "tiny", onClick: () => onDelete?.() }, /* @__PURE__ */ React11.createElement(import_icons4.XIcon, { fontSize: "tiny" })))
-    }
-  ), /* @__PURE__ */ React11.createElement(
-    import_ui9.Popover,
+    const option = animationOptions.find((opt) => opt.value === interactionForDisplay);
+    return option?.label || interactionForDisplay;
+  };
+  return /* @__PURE__ */ React10.createElement(
+    import_editor_controls.Repeater,
     {
-      ...(0, import_ui9.bindPopover)(popupState),
-      disableScrollLock: true,
-      anchorEl: anchorEl.current,
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      transformOrigin: { vertical: "top", horizontal: "left" },
-      PaperProps: {
-        sx: { my: 1 }
+      addToBottom: true,
+      openOnAdd: true,
+      openItem: triggerCreateOnShowEmpty ? 0 : void 0,
+      label: (0, import_i18n8.__)("Interactions", "elementor"),
+      values: interactionId ? [interactionId] : [],
+      setValues: (newValue) => {
+        setInteractionId(newValue.length > 0 ? newValue[0] : null);
       },
-      onClose: () => {
-        popupState.close();
-      }
-    },
-    /* @__PURE__ */ React11.createElement(
-      InteractionDetails,
-      {
-        interaction: selectedInteraction,
-        onChange: (newValue) => {
-          setInteractionId(newValue);
-        }
+      showDuplicate: false,
+      showToggle: false,
+      isSortable: false,
+      disableAddItemButton: !!interactionId,
+      itemSettings: {
+        initialValues: interactionId ?? "load-fade-in-left-100-0",
+        Label: ({ value }) => displayLabel(value),
+        Icon: () => null,
+        Content: ({ value }) => /* @__PURE__ */ React10.createElement(
+          InteractionDetails,
+          {
+            interaction: value,
+            onChange: (newValue) => {
+              if (value !== newValue) {
+                setInteractionId(newValue);
+              }
+            }
+          }
+        ),
+        actions: /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(import_ui8.IconButton, { size: "tiny", onClick: onPlayInteraction }, /* @__PURE__ */ React10.createElement(import_icons3.PlayerPlayIcon, { fontSize: "tiny" })))
       }
-    )
-  ));
+    }
+  );
 }
 
 // src/components/interactions-tab.tsx
 var InteractionsTab = ({ elementId }) => {
-  return /* @__PURE__ */ React12.createElement(PopupStateProvider, null, /* @__PURE__ */ React12.createElement(InteractionsTabContent, { elementId }));
+  return /* @__PURE__ */ React11.createElement(PopupStateProvider, null, /* @__PURE__ */ React11.createElement(InteractionsTabContent, { elementId }));
 };
 function InteractionsTabContent({ elementId }) {
   const existingInteractions = (0, import_editor_elements2.useElementInteractions)(elementId);
-  const { triggerDefaultOpen } = usePopupStateContext();
+  const [firstInteraction, setFirstInteraction] = (0, import_react5.useState)(false);
   const [showInteractions, setShowInteractions] = (0, import_react5.useState)(() => {
     const parsed = JSON.parse(existingInteractions || "{}");
     if (parsed && parsed?.items?.length > 0) {
@@ -446,20 +394,24 @@ function InteractionsTabContent({ elementId }) {
     }
     return false;
   });
-  return /* @__PURE__ */ React12.createElement(import_session.SessionStorageProvider, { prefix: elementId }, showInteractions ? /* @__PURE__ */ React12.createElement(InteractionsProvider, { elementId }, /* @__PURE__ */ React12.createElement(InteractionsContent, null)) : /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React11.createElement(import_session.SessionStorageProvider, { prefix: elementId }, showInteractions ? /* @__PURE__ */ React11.createElement(InteractionsProvider, { elementId }, /* @__PURE__ */ React11.createElement(InteractionsContent, { firstInteraction })) : /* @__PURE__ */ React11.createElement(
     EmptyState,
     {
       onCreateInteraction: () => {
+        setFirstInteraction(true);
         setShowInteractions(true);
-        triggerDefaultOpen();
       }
     }
   ));
 }
-function InteractionsContent() {
+function InteractionsContent({ firstInteraction }) {
   const { interactions, setInteractions, playInteractions } = useInteractionsContext();
   const applyInteraction = (0, import_react5.useCallback)(
     (interaction) => {
+      if (!interaction) {
+        setInteractions(void 0);
+        return;
+      }
       const newInteractions = {
         version: 1,
         items: [
@@ -486,9 +438,10 @@ function InteractionsContent() {
       return "";
     }
   }, [interactions]);
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
-    PredefinedInteractionsList,
+  return /* @__PURE__ */ React11.createElement(import_ui9.Stack, { sx: { m: 1, p: 1.5 }, gap: 2 }, /* @__PURE__ */ React11.createElement(
+    InteractionsList,
     {
+      triggerCreateOnShowEmpty: firstInteraction,
       selectedInteraction,
       onSelectInteraction: applyInteraction,
       onPlayInteraction: playInteractions