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

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ComponentType } from 'react';
 import { ElementInteractions, InteractionItemPropValue } from '@elementor/editor-elements';
-export { AnimationPresetPropValue, BooleanPropValue, ConfigPropValue, ElementInteractions, InteractionItemPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue } from '@elementor/editor-elements';
+export { AnimationPresetPropValue, BooleanPropValue, ConfigPropValue, ElementInteractions, ExcludedBreakpointsPropValue, InteractionBreakpointsPropValue, InteractionItemPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue } from '@elementor/editor-elements';
 
 declare const EmptyState: ({ onCreateInteraction }: {
     onCreateInteraction: () => void;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ComponentType } from 'react';
 import { ElementInteractions, InteractionItemPropValue } from '@elementor/editor-elements';
-export { AnimationPresetPropValue, BooleanPropValue, ConfigPropValue, ElementInteractions, InteractionItemPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue } from '@elementor/editor-elements';
+export { AnimationPresetPropValue, BooleanPropValue, ConfigPropValue, ElementInteractions, ExcludedBreakpointsPropValue, InteractionBreakpointsPropValue, InteractionItemPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue } from '@elementor/editor-elements';
 
 declare const EmptyState: ({ onCreateInteraction }: {
     onCreateInteraction: () => void;

package/dist/index.js

@@ -68,11 +68,11 @@ var EmptyState = ({ onCreateInteraction }) => {
 };
 
 // src/components/interactions-tab.tsx
-var React12 = __toESM(require("react"));
-var import_react9 = require("react");
+var React13 = __toESM(require("react"));
+var import_react10 = require("react");
 var import_editor_elements2 = require("@elementor/editor-elements");
 var import_session = require("@elementor/session");
-var import_ui5 = require("@elementor/ui");
+var import_ui7 = require("@elementor/ui");
 
 // src/contexts/interactions-context.tsx
 var React2 = __toESM(require("react"));
@@ -130,12 +130,12 @@ var PopupStateProvider = ({ children }) => {
 };
 
 // src/components/interactions-list.tsx
-var React11 = __toESM(require("react"));
-var import_react8 = require("react");
-var import_editor_controls5 = require("@elementor/editor-controls");
+var React12 = __toESM(require("react"));
+var import_react9 = require("react");
+var import_editor_controls6 = require("@elementor/editor-controls");
 var import_icons3 = require("@elementor/icons");
-var import_ui4 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
+var import_ui6 = require("@elementor/ui");
+var import_i18n8 = require("@wordpress/i18n");
 
 // src/contexts/interactions-item-context.tsx
 var React4 = __toESM(require("react"));
@@ -200,6 +200,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,
@@ -239,7 +252,8 @@ var createInteractionItem = ({
   easing = "easeIn",
   relativeTo,
   offsetTop,
-  offsetBottom
+  offsetBottom,
+  excludedBreakpoints
 }) => ({
   $$type: "interaction-item",
   value: {
@@ -256,7 +270,10 @@ var createInteractionItem = ({
       relativeTo,
       offsetTop,
       offsetBottom
-    })
+    }),
+    ...excludedBreakpoints && excludedBreakpoints.length > 0 && {
+      breakpoints: createInteractionBreakpoints(excludedBreakpoints)
+    }
   }
 });
 var createDefaultInteractionItem = () => {
@@ -297,8 +314,10 @@ var buildDisplayLabel = (item) => {
 };
 
 // src/components/interactions-list-item.tsx
-var React10 = __toESM(require("react"));
-var import_react7 = require("react");
+var React11 = __toESM(require("react"));
+var import_react8 = require("react");
+var import_ui5 = require("@elementor/ui");
+var import_i18n7 = require("@wordpress/i18n");
 
 // src/components/interaction-details.tsx
 var React9 = __toESM(require("react"));
@@ -622,44 +641,109 @@ function Field({ label, children }) {
   return /* @__PURE__ */ React9.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(import_editor_controls4.PopoverGridContainer, null, /* @__PURE__ */ React9.createElement(import_ui3.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React9.createElement(import_editor_controls4.ControlFormLabel, null, label)), /* @__PURE__ */ React9.createElement(import_ui3.Grid, { item: true, xs: 6 }, children)));
 }
 
+// src/components/interaction-settings.tsx
+var React10 = __toESM(require("react"));
+var import_react7 = require("react");
+var import_editor_controls5 = require("@elementor/editor-controls");
+var import_ui4 = require("@elementor/ui");
+var import_i18n6 = require("@wordpress/i18n");
+var availableBreakpoints = [
+  { label: (0, import_i18n6.__)("Desktop", "elementor"), value: "desktop" },
+  { label: (0, import_i18n6.__)("Tablet", "elementor"), value: "tablet" },
+  { label: (0, import_i18n6.__)("Mobile", "elementor"), value: "mobile" }
+];
+var InteractionSettings = ({ interaction, onChange }) => {
+  const [selectedBreakpoints, setSelectedBreakpoints] = (0, import_react7.useState)(() => {
+    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(import_editor_controls5.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React10.createElement(import_ui4.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React10.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(import_editor_controls5.ControlFormLabel, { sx: { width: "100%" } }, (0, import_i18n6.__)("Trigger on", "elementor"))), /* @__PURE__ */ React10.createElement(import_ui4.Grid, { id: "interactions-settings-breakpoints", item: true, xs: 12, sx: { paddingTop: 0 } }, /* @__PURE__ */ React10.createElement(
+    import_ui4.Autocomplete,
+    {
+      fullWidth: true,
+      multiple: true,
+      value: selectedBreakpoints,
+      onChange: handleBreakpointChange,
+      size: "tiny",
+      options: availableBreakpoints,
+      renderInput: (params) => /* @__PURE__ */ React10.createElement(import_ui4.TextField, { ...params })
+    }
+  ))));
+};
+
 // src/components/interactions-list-item.tsx
 var InteractionsListItem = ({ index, value }) => {
+  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui5.useTabs)("details");
   const context = useInteractionItemContext();
-  const handleChange = (0, import_react7.useCallback)(
+  const handleChange = (0, import_react8.useCallback)(
     (newInteractionValue) => {
       context?.onInteractionChange(index, newInteractionValue);
     },
     [context, index]
   );
-  const handlePlayInteraction = (0, import_react7.useCallback)(
+  const handlePlayInteraction = (0, import_react8.useCallback)(
     (interactionId) => {
       context?.onPlayInteraction(interactionId);
     },
     [context]
   );
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+    import_ui5.Tabs,
+    {
+      size: "small",
+      variant: "fullWidth",
+      "aria-label": (0, import_i18n7.__)("Interaction", "elementor"),
+      ...getTabsProps()
+    },
+    /* @__PURE__ */ React11.createElement(import_ui5.Tab, { label: (0, import_i18n7.__)("Details", "elementor"), ...getTabProps("details") }),
+    /* @__PURE__ */ React11.createElement(import_ui5.Tab, { label: (0, import_i18n7.__)("Settings", "elementor"), ...getTabProps("settings") })
+  ), /* @__PURE__ */ React11.createElement(import_ui5.Divider, null), /* @__PURE__ */ React11.createElement(import_ui5.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(import_ui5.TabPanel, { sx: { p: 0 }, ...getTabPanelProps("settings") }, /* @__PURE__ */ React11.createElement(
+    InteractionSettings,
+    {
+      key: `settings-${index}`,
+      interaction: value.value,
+      onChange: handleChange
+    }
+  )));
 };
 
 // src/components/interactions-list.tsx
 var MAX_NUMBER_OF_INTERACTIONS = 5;
 function InteractionsList(props) {
   const { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;
-  const hasInitializedRef = (0, import_react8.useRef)(false);
-  const handleUpdateInteractions = (0, import_react8.useCallback)(
+  const hasInitializedRef = (0, import_react9.useRef)(false);
+  const handleUpdateInteractions = (0, import_react9.useCallback)(
     (newInteractions) => {
       onSelectInteractions(newInteractions);
     },
     [onSelectInteractions]
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (triggerCreateOnShowEmpty && !hasInitializedRef.current && (!interactions.items || interactions.items?.length === 0)) {
       hasInitializedRef.current = true;
       const newState = {
@@ -669,14 +753,14 @@ function InteractionsList(props) {
       handleUpdateInteractions(newState);
     }
   }, [triggerCreateOnShowEmpty, interactions.items, handleUpdateInteractions]);
-  const isMaxNumberOfInteractionsReached = (0, import_react8.useMemo)(() => {
+  const isMaxNumberOfInteractionsReached = (0, import_react9.useMemo)(() => {
     return interactions.items?.length >= MAX_NUMBER_OF_INTERACTIONS;
   }, [interactions.items?.length]);
-  const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React11.createElement(import_ui4.Alert, { color: "secondary", icon: /* @__PURE__ */ React11.createElement(import_icons3.InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React11.createElement(import_ui4.AlertTitle, null, (0, import_i18n6.__)("Interactions", "elementor")), /* @__PURE__ */ React11.createElement(import_ui4.Box, { component: "span" }, (0, import_i18n6.__)(
+  const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React12.createElement(import_ui6.Alert, { color: "secondary", icon: /* @__PURE__ */ React12.createElement(import_icons3.InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React12.createElement(import_ui6.AlertTitle, null, (0, import_i18n8.__)("Interactions", "elementor")), /* @__PURE__ */ React12.createElement(import_ui6.Box, { component: "span" }, (0, import_i18n8.__)(
     "You've reached the limit of 5 interactions for this element. Please remove an interaction before creating a new one.",
     "elementor"
   ))) : void 0;
-  const handleRepeaterChange = (0, import_react8.useCallback)(
+  const handleRepeaterChange = (0, import_react9.useCallback)(
     (newItems) => {
       handleUpdateInteractions({
         ...interactions,
@@ -685,7 +769,7 @@ function InteractionsList(props) {
     },
     [interactions, handleUpdateInteractions]
   );
-  const handleInteractionChange = (0, import_react8.useCallback)(
+  const handleInteractionChange = (0, import_react9.useCallback)(
     (index, newInteractionValue) => {
       const newItems = structuredClone(interactions.items);
       newItems[index] = {
@@ -699,19 +783,19 @@ function InteractionsList(props) {
     },
     [interactions, handleUpdateInteractions]
   );
-  const contextValue = (0, import_react8.useMemo)(
+  const contextValue = (0, import_react9.useMemo)(
     () => ({
       onInteractionChange: handleInteractionChange,
       onPlayInteraction
     }),
     [handleInteractionChange, onPlayInteraction]
   );
-  return /* @__PURE__ */ React11.createElement(InteractionItemContextProvider, { value: contextValue }, /* @__PURE__ */ React11.createElement(
-    import_editor_controls5.Repeater,
+  return /* @__PURE__ */ React12.createElement(InteractionItemContextProvider, { value: contextValue }, /* @__PURE__ */ React12.createElement(
+    import_editor_controls6.Repeater,
     {
       openOnAdd: true,
       openItem: triggerCreateOnShowEmpty ? 0 : void 0,
-      label: (0, import_i18n6.__)("Interactions", "elementor"),
+      label: (0, import_i18n8.__)("Interactions", "elementor"),
       values: interactions.items,
       setValues: handleRepeaterChange,
       showDuplicate: false,
@@ -724,14 +808,14 @@ function InteractionsList(props) {
         Label: ({ value }) => buildDisplayLabel(value.value),
         Icon: () => null,
         Content: InteractionsListItem,
-        actions: (value) => /* @__PURE__ */ React11.createElement(import_ui4.Tooltip, { key: "preview", placement: "top", title: (0, import_i18n6.__)("Preview", "elementor") }, /* @__PURE__ */ React11.createElement(
-          import_ui4.IconButton,
+        actions: (value) => /* @__PURE__ */ React12.createElement(import_ui6.Tooltip, { key: "preview", placement: "top", title: (0, import_i18n8.__)("Preview", "elementor") }, /* @__PURE__ */ React12.createElement(
+          import_ui6.IconButton,
           {
-            "aria-label": (0, import_i18n6.__)("Play interaction", "elementor"),
+            "aria-label": (0, import_i18n8.__)("Play interaction", "elementor"),
             size: "tiny",
             onClick: () => onPlayInteraction(extractString(value.value.interaction_id))
           },
-          /* @__PURE__ */ React11.createElement(import_icons3.PlayerPlayIcon, { fontSize: "tiny" })
+          /* @__PURE__ */ React12.createElement(import_icons3.PlayerPlayIcon, { fontSize: "tiny" })
         ))
       }
     }
@@ -740,13 +824,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 = (0, import_editor_elements2.useElementInteractions)(elementId);
-  const firstInteractionState = (0, import_react9.useState)(false);
+  const firstInteractionState = (0, import_react10.useState)(false);
   const hasInteractions = existingInteractions?.items?.length || firstInteractionState[0];
-  return /* @__PURE__ */ React12.createElement(import_session.SessionStorageProvider, { prefix: elementId }, hasInteractions ? /* @__PURE__ */ React12.createElement(InteractionsProvider, { elementId }, /* @__PURE__ */ React12.createElement(InteractionsContent, { firstInteractionState })) : /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(import_session.SessionStorageProvider, { prefix: elementId }, hasInteractions ? /* @__PURE__ */ React13.createElement(InteractionsProvider, { elementId }, /* @__PURE__ */ React13.createElement(InteractionsContent, { firstInteractionState })) : /* @__PURE__ */ React13.createElement(
     EmptyState,
     {
       onCreateInteraction: () => {
@@ -759,7 +843,7 @@ function InteractionsContent({
   firstInteractionState
 }) {
   const { interactions, setInteractions, playInteractions } = useInteractionsContext();
-  const applyInteraction = (0, import_react9.useCallback)(
+  const applyInteraction = (0, import_react10.useCallback)(
     (newInteractions) => {
       firstInteractionState[1](false);
       if (!newInteractions) {
@@ -770,7 +854,7 @@ function InteractionsContent({
     },
     [setInteractions, firstInteractionState]
   );
-  return /* @__PURE__ */ React12.createElement(import_ui5.Stack, { sx: { m: 1, p: 1.5 }, gap: 2 }, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(import_ui7.Stack, { sx: { m: 1, p: 1.5 }, gap: 2 }, /* @__PURE__ */ React13.createElement(
     InteractionsList,
     {
       triggerCreateOnShowEmpty: firstInteractionState[0],
@@ -896,18 +980,18 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
 });
 
 // src/components/controls/easing.tsx
-var React13 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 var import_editor_ui2 = require("@elementor/editor-ui");
-var import_ui6 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
+var import_ui8 = require("@elementor/ui");
+var import_i18n9 = require("@wordpress/i18n");
 var EASING_OPTIONS = {
-  easeIn: (0, import_i18n7.__)("Ease In", "elementor"),
-  easeInOut: (0, import_i18n7.__)("Ease In Out", "elementor"),
-  easeOut: (0, import_i18n7.__)("Ease Out", "elementor"),
-  backIn: (0, import_i18n7.__)("Back In", "elementor"),
-  backInOut: (0, import_i18n7.__)("Back In Out", "elementor"),
-  backOut: (0, import_i18n7.__)("Back Out", "elementor"),
-  linear: (0, import_i18n7.__)("Linear", "elementor")
+  easeIn: (0, import_i18n9.__)("Ease In", "elementor"),
+  easeInOut: (0, import_i18n9.__)("Ease In Out", "elementor"),
+  easeOut: (0, import_i18n9.__)("Ease Out", "elementor"),
+  backIn: (0, import_i18n9.__)("Back In", "elementor"),
+  backInOut: (0, import_i18n9.__)("Back In Out", "elementor"),
+  backOut: (0, import_i18n9.__)("Back Out", "elementor"),
+  linear: (0, import_i18n9.__)("Linear", "elementor")
 };
 var DEFAULT_EASING = "easeIn";
 function Easing({}) {
@@ -915,28 +999,28 @@ function Easing({}) {
     key,
     label
   }));
-  return /* @__PURE__ */ React13.createElement(import_ui6.Select, { value: DEFAULT_EASING, onChange: () => {
+  return /* @__PURE__ */ React14.createElement(import_ui8.Select, { value: DEFAULT_EASING, onChange: () => {
   }, fullWidth: true, displayEmpty: true, size: "tiny" }, availableOptions.map((option) => {
     const isDisabled = DEFAULT_EASING !== option.key;
-    return /* @__PURE__ */ React13.createElement(import_editor_ui2.MenuListItem, { key: option.key, value: option.key, disabled: isDisabled }, option.label);
+    return /* @__PURE__ */ React14.createElement(import_editor_ui2.MenuListItem, { key: option.key, value: option.key, disabled: isDisabled }, option.label);
   }));
 }
 
 // src/components/controls/trigger.tsx
-var React14 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 var import_editor_ui3 = require("@elementor/editor-ui");
-var import_ui7 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var import_ui9 = require("@elementor/ui");
+var import_i18n10 = require("@wordpress/i18n");
 function Trigger({ value, onChange }) {
   const availableTriggers = Object.entries({
-    load: (0, import_i18n8.__)("Page load", "elementor"),
-    scrollIn: (0, import_i18n8.__)("Scroll into view", "elementor")
+    load: (0, import_i18n10.__)("Page load", "elementor"),
+    scrollIn: (0, import_i18n10.__)("Scroll into view", "elementor")
   }).map(([key, label]) => ({
     key,
     label
   }));
-  return /* @__PURE__ */ React14.createElement(
-    import_ui7.Select,
+  return /* @__PURE__ */ React15.createElement(
+    import_ui9.Select,
     {
       fullWidth: true,
       displayEmpty: true,
@@ -945,7 +1029,7 @@ function Trigger({ value, onChange }) {
       value
     },
     availableTriggers.map((trigger) => {
-      return /* @__PURE__ */ React14.createElement(import_editor_ui3.MenuListItem, { key: trigger.key, value: trigger.key }, trigger.label);
+      return /* @__PURE__ */ React15.createElement(import_editor_ui3.MenuListItem, { key: trigger.key, value: trigger.key }, trigger.label);
     })
   );
 }