@elementor/editor-interactions 4.0.0-524 → 4.0.0-526

package/dist/index.mjs

@@ -25,8 +25,8 @@ var EmptyState = ({ onCreateInteraction }) => {
 };
 
 // src/components/interactions-tab.tsx
-import * as React12 from "react";
-import { useCallback as useCallback5, useState as useState2 } from "react";
+import * as React13 from "react";
+import { useCallback as useCallback5, useState as useState3 } from "react";
 import { useElementInteractions as useElementInteractions2 } from "@elementor/editor-elements";
 import { SessionStorageProvider } from "@elementor/session";
 import { Stack as Stack2 } from "@elementor/ui";
@@ -91,12 +91,12 @@ var PopupStateProvider = ({ children }) => {
 };
 
 // src/components/interactions-list.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { useCallback as useCallback4, useEffect as useEffect2, useMemo as useMemo3, useRef } from "react";
 import { Repeater } from "@elementor/editor-controls";
 import { InfoCircleFilledIcon, PlayerPlayIcon } from "@elementor/icons";
 import { Alert, AlertTitle, Box, IconButton, Tooltip } from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
+import { __ as __8 } from "@wordpress/i18n";
 
 // src/contexts/interactions-item-context.tsx
 import * as React4 from "react";
@@ -161,6 +161,19 @@ var createConfig = ({
 var extractBoolean = (prop, fallback = false) => {
   return prop?.value ?? fallback;
 };
+var createExcludedBreakpoints = (breakpoints) => ({
+  $$type: "excluded-breakpoints",
+  value: breakpoints.map(createString)
+});
+var createInteractionBreakpoints = (excluded) => ({
+  $$type: "interaction-breakpoints",
+  value: {
+    excluded: createExcludedBreakpoints(excluded)
+  }
+});
+var extractExcludedBreakpoints = (breakpoints) => {
+  return breakpoints?.value.excluded.value.map((bp) => bp.value) ?? [];
+};
 var createAnimationPreset = ({
   effect,
   type,
@@ -200,7 +213,8 @@ var createInteractionItem = ({
   easing = "easeIn",
   relativeTo,
   offsetTop,
-  offsetBottom
+  offsetBottom,
+  excludedBreakpoints
 }) => ({
   $$type: "interaction-item",
   value: {
@@ -217,7 +231,10 @@ var createInteractionItem = ({
       relativeTo,
       offsetTop,
       offsetBottom
-    })
+    }),
+    ...excludedBreakpoints && excludedBreakpoints.length > 0 && {
+      breakpoints: createInteractionBreakpoints(excludedBreakpoints)
+    }
   }
 });
 var createDefaultInteractionItem = () => {
@@ -258,8 +275,10 @@ var buildDisplayLabel = (item) => {
 };
 
 // src/components/interactions-list-item.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { useCallback as useCallback3 } from "react";
+import { Divider as Divider2, Tab, TabPanel, Tabs, useTabs } from "@elementor/ui";
+import { __ as __7 } from "@wordpress/i18n";
 
 // src/components/interaction-details.tsx
 import * as React9 from "react";
@@ -583,8 +602,56 @@ function Field({ label, children }) {
   return /* @__PURE__ */ React9.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(PopoverGridContainer, null, /* @__PURE__ */ React9.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React9.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React9.createElement(Grid, { item: true, xs: 6 }, children)));
 }
 
+// src/components/interaction-settings.tsx
+import * as React10 from "react";
+import { useState as useState2 } from "react";
+import { ControlFormLabel as ControlFormLabel2, PopoverContent as PopoverContent2 } from "@elementor/editor-controls";
+import { Autocomplete, Grid as Grid2, TextField } from "@elementor/ui";
+import { __ as __6 } from "@wordpress/i18n";
+var availableBreakpoints = [
+  { label: __6("Desktop", "elementor"), value: "desktop" },
+  { label: __6("Tablet", "elementor"), value: "tablet" },
+  { label: __6("Mobile", "elementor"), value: "mobile" }
+];
+var InteractionSettings = ({ interaction, onChange }) => {
+  const [selectedBreakpoints, setSelectedBreakpoints] = useState2(() => {
+    const excluded = extractExcludedBreakpoints(interaction.breakpoints);
+    return availableBreakpoints.filter(({ value }) => {
+      return !excluded.includes(value);
+    });
+  });
+  const handleBreakpointChange = (_, newValue) => {
+    setSelectedBreakpoints(newValue);
+    const selectedValues = newValue.map((option) => option.value);
+    const newExcluded = availableBreakpoints.filter((bp) => !selectedValues.includes(bp.value)).map((bp) => bp.value);
+    const updatedInteraction = {
+      ...interaction,
+      ...newExcluded.length > 0 && {
+        breakpoints: createInteractionBreakpoints(newExcluded)
+      }
+    };
+    if (newExcluded.length === 0) {
+      delete updatedInteraction.breakpoints;
+    }
+    onChange(updatedInteraction);
+  };
+  return /* @__PURE__ */ React10.createElement(PopoverContent2, { p: 1.5 }, /* @__PURE__ */ React10.createElement(Grid2, { container: true, spacing: 1.5 }, /* @__PURE__ */ React10.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(ControlFormLabel2, { sx: { width: "100%" } }, __6("Trigger on", "elementor"))), /* @__PURE__ */ React10.createElement(Grid2, { id: "interactions-settings-breakpoints", item: true, xs: 12, sx: { paddingTop: 0 } }, /* @__PURE__ */ React10.createElement(
+    Autocomplete,
+    {
+      fullWidth: true,
+      multiple: true,
+      value: selectedBreakpoints,
+      onChange: handleBreakpointChange,
+      size: "tiny",
+      options: availableBreakpoints,
+      renderInput: (params) => /* @__PURE__ */ React10.createElement(TextField, { ...params })
+    }
+  ))));
+};
+
 // src/components/interactions-list-item.tsx
 var InteractionsListItem = ({ index, value }) => {
+  const { getTabsProps, getTabProps, getTabPanelProps } = useTabs("details");
   const context = useInteractionItemContext();
   const handleChange = useCallback3(
     (newInteractionValue) => {
@@ -598,15 +665,32 @@ var InteractionsListItem = ({ index, value }) => {
     },
     [context]
   );
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+    Tabs,
+    {
+      size: "small",
+      variant: "fullWidth",
+      "aria-label": __7("Interaction", "elementor"),
+      ...getTabsProps()
+    },
+    /* @__PURE__ */ React11.createElement(Tab, { label: __7("Details", "elementor"), ...getTabProps("details") }),
+    /* @__PURE__ */ React11.createElement(Tab, { label: __7("Settings", "elementor"), ...getTabProps("settings") })
+  ), /* @__PURE__ */ React11.createElement(Divider2, null), /* @__PURE__ */ React11.createElement(TabPanel, { sx: { p: 0 }, ...getTabPanelProps("details") }, /* @__PURE__ */ React11.createElement(
     InteractionDetails,
     {
-      key: index,
+      key: `details-${index}`,
       interaction: value.value,
       onChange: handleChange,
       onPlayInteraction: handlePlayInteraction
     }
-  );
+  )), /* @__PURE__ */ React11.createElement(TabPanel, { sx: { p: 0 }, ...getTabPanelProps("settings") }, /* @__PURE__ */ React11.createElement(
+    InteractionSettings,
+    {
+      key: `settings-${index}`,
+      interaction: value.value,
+      onChange: handleChange
+    }
+  )));
 };
 
 // src/components/interactions-list.tsx
@@ -633,7 +717,7 @@ function InteractionsList(props) {
   const isMaxNumberOfInteractionsReached = useMemo3(() => {
     return interactions.items?.length >= MAX_NUMBER_OF_INTERACTIONS;
   }, [interactions.items?.length]);
-  const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React11.createElement(Alert, { color: "secondary", icon: /* @__PURE__ */ React11.createElement(InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React11.createElement(AlertTitle, null, __6("Interactions", "elementor")), /* @__PURE__ */ React11.createElement(Box, { component: "span" }, __6(
+  const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React12.createElement(Alert, { color: "secondary", icon: /* @__PURE__ */ React12.createElement(InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React12.createElement(AlertTitle, null, __8("Interactions", "elementor")), /* @__PURE__ */ React12.createElement(Box, { component: "span" }, __8(
     "You've reached the limit of 5 interactions for this element. Please remove an interaction before creating a new one.",
     "elementor"
   ))) : void 0;
@@ -667,12 +751,12 @@ function InteractionsList(props) {
     }),
     [handleInteractionChange, onPlayInteraction]
   );
-  return /* @__PURE__ */ React11.createElement(InteractionItemContextProvider, { value: contextValue }, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(InteractionItemContextProvider, { value: contextValue }, /* @__PURE__ */ React12.createElement(
     Repeater,
     {
       openOnAdd: true,
       openItem: triggerCreateOnShowEmpty ? 0 : void 0,
-      label: __6("Interactions", "elementor"),
+      label: __8("Interactions", "elementor"),
       values: interactions.items,
       setValues: handleRepeaterChange,
       showDuplicate: false,
@@ -685,14 +769,14 @@ function InteractionsList(props) {
         Label: ({ value }) => buildDisplayLabel(value.value),
         Icon: () => null,
         Content: InteractionsListItem,
-        actions: (value) => /* @__PURE__ */ React11.createElement(Tooltip, { key: "preview", placement: "top", title: __6("Preview", "elementor") }, /* @__PURE__ */ React11.createElement(
+        actions: (value) => /* @__PURE__ */ React12.createElement(Tooltip, { key: "preview", placement: "top", title: __8("Preview", "elementor") }, /* @__PURE__ */ React12.createElement(
           IconButton,
           {
-            "aria-label": __6("Play interaction", "elementor"),
+            "aria-label": __8("Play interaction", "elementor"),
             size: "tiny",
             onClick: () => onPlayInteraction(extractString(value.value.interaction_id))
           },
-          /* @__PURE__ */ React11.createElement(PlayerPlayIcon, { fontSize: "tiny" })
+          /* @__PURE__ */ React12.createElement(PlayerPlayIcon, { fontSize: "tiny" })
         ))
       }
     }
@@ -701,13 +785,13 @@ function InteractionsList(props) {
 
 // src/components/interactions-tab.tsx
 var InteractionsTab = ({ elementId }) => {
-  return /* @__PURE__ */ React12.createElement(PopupStateProvider, null, /* @__PURE__ */ React12.createElement(InteractionsTabContent, { elementId }));
+  return /* @__PURE__ */ React13.createElement(PopupStateProvider, null, /* @__PURE__ */ React13.createElement(InteractionsTabContent, { elementId }));
 };
 function InteractionsTabContent({ elementId }) {
   const existingInteractions = useElementInteractions2(elementId);
-  const firstInteractionState = useState2(false);
+  const firstInteractionState = useState3(false);
   const hasInteractions = existingInteractions?.items?.length || firstInteractionState[0];
-  return /* @__PURE__ */ React12.createElement(SessionStorageProvider, { prefix: elementId }, hasInteractions ? /* @__PURE__ */ React12.createElement(InteractionsProvider, { elementId }, /* @__PURE__ */ React12.createElement(InteractionsContent, { firstInteractionState })) : /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(SessionStorageProvider, { prefix: elementId }, hasInteractions ? /* @__PURE__ */ React13.createElement(InteractionsProvider, { elementId }, /* @__PURE__ */ React13.createElement(InteractionsContent, { firstInteractionState })) : /* @__PURE__ */ React13.createElement(
     EmptyState,
     {
       onCreateInteraction: () => {
@@ -731,7 +815,7 @@ function InteractionsContent({
     },
     [setInteractions, firstInteractionState]
   );
-  return /* @__PURE__ */ React12.createElement(Stack2, { sx: { m: 1, p: 1.5 }, gap: 2 }, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(Stack2, { sx: { m: 1, p: 1.5 }, gap: 2 }, /* @__PURE__ */ React13.createElement(
     InteractionsList,
     {
       triggerCreateOnShowEmpty: firstInteractionState[0],
@@ -857,18 +941,18 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
 });
 
 // src/components/controls/easing.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import { MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
 import { Select as Select2 } from "@elementor/ui";
-import { __ as __7 } from "@wordpress/i18n";
+import { __ as __9 } from "@wordpress/i18n";
 var EASING_OPTIONS = {
-  easeIn: __7("Ease In", "elementor"),
-  easeInOut: __7("Ease In Out", "elementor"),
-  easeOut: __7("Ease Out", "elementor"),
-  backIn: __7("Back In", "elementor"),
-  backInOut: __7("Back In Out", "elementor"),
-  backOut: __7("Back Out", "elementor"),
-  linear: __7("Linear", "elementor")
+  easeIn: __9("Ease In", "elementor"),
+  easeInOut: __9("Ease In Out", "elementor"),
+  easeOut: __9("Ease Out", "elementor"),
+  backIn: __9("Back In", "elementor"),
+  backInOut: __9("Back In Out", "elementor"),
+  backOut: __9("Back Out", "elementor"),
+  linear: __9("Linear", "elementor")
 };
 var DEFAULT_EASING = "easeIn";
 function Easing({}) {
@@ -876,27 +960,27 @@ function Easing({}) {
     key,
     label
   }));
-  return /* @__PURE__ */ React13.createElement(Select2, { value: DEFAULT_EASING, onChange: () => {
+  return /* @__PURE__ */ React14.createElement(Select2, { value: DEFAULT_EASING, onChange: () => {
   }, fullWidth: true, displayEmpty: true, size: "tiny" }, availableOptions.map((option) => {
     const isDisabled = DEFAULT_EASING !== option.key;
-    return /* @__PURE__ */ React13.createElement(MenuListItem2, { key: option.key, value: option.key, disabled: isDisabled }, option.label);
+    return /* @__PURE__ */ React14.createElement(MenuListItem2, { key: option.key, value: option.key, disabled: isDisabled }, option.label);
   }));
 }
 
 // src/components/controls/trigger.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 import { MenuListItem as MenuListItem3 } from "@elementor/editor-ui";
 import { Select as Select3 } from "@elementor/ui";
-import { __ as __8 } from "@wordpress/i18n";
+import { __ as __10 } from "@wordpress/i18n";
 function Trigger({ value, onChange }) {
   const availableTriggers = Object.entries({
-    load: __8("Page load", "elementor"),
-    scrollIn: __8("Scroll into view", "elementor")
+    load: __10("Page load", "elementor"),
+    scrollIn: __10("Scroll into view", "elementor")
   }).map(([key, label]) => ({
     key,
     label
   }));
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(
     Select3,
     {
       fullWidth: true,
@@ -906,7 +990,7 @@ function Trigger({ value, onChange }) {
       value
     },
     availableTriggers.map((trigger) => {
-      return /* @__PURE__ */ React14.createElement(MenuListItem3, { key: trigger.key, value: trigger.key }, trigger.label);
+      return /* @__PURE__ */ React15.createElement(MenuListItem3, { key: trigger.key, value: trigger.key }, trigger.label);
     })
   );
 }