@elementor/editor-controls 4.0.0-676 → 4.0.0-678

package/dist/index.mjs

@@ -2600,11 +2600,11 @@ var ToggleControl = createControl(
 // src/controls/number-control.tsx
 import * as React55 from "react";
 import { numberPropTypeUtil } from "@elementor/editor-props";
-import { InputAdornment as InputAdornment3 } from "@elementor/ui";
+import { InputAdornment as InputAdornment3, Typography as Typography4 } from "@elementor/ui";
 var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
 var renderSuffix = (propType) => {
   if (propType.meta?.suffix) {
-    return /* @__PURE__ */ React55.createElement(InputAdornment3, { position: "end" }, propType.meta.suffix);
+    return /* @__PURE__ */ React55.createElement(InputAdornment3, { position: "end" }, /* @__PURE__ */ React55.createElement(Typography4, { variant: "caption", color: "text.secondary" }, propType.meta.suffix));
   }
   return /* @__PURE__ */ React55.createElement(React55.Fragment, null);
 };
@@ -2953,7 +2953,7 @@ import { __ as __20 } from "@wordpress/i18n";
 import * as React58 from "react";
 import { useCallback as useCallback2, useEffect as useEffect8, useState as useState8 } from "react";
 import { PopoverBody, PopoverHeader as PopoverHeader2, PopoverMenuList, SearchField } from "@elementor/editor-ui";
-import { Box as Box8, Divider as Divider2, Link, Stack as Stack9, Typography as Typography4 } from "@elementor/ui";
+import { Box as Box8, Divider as Divider2, Link, Stack as Stack9, Typography as Typography5 } from "@elementor/ui";
 import { debounce } from "@elementor/utils";
 import { __ as __19 } from "@wordpress/i18n";
 
@@ -3030,8 +3030,8 @@ var ItemSelector = ({
       overflow: "hidden"
     },
     /* @__PURE__ */ React58.createElement(IconComponent, { fontSize: "large" }),
-    /* @__PURE__ */ React58.createElement(Box8, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React58.createElement(Typography4, { align: "center", variant: "subtitle2", color: "text.secondary" }, __19("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React58.createElement(
-      Typography4,
+    /* @__PURE__ */ React58.createElement(Box8, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React58.createElement(Typography5, { align: "center", variant: "subtitle2", color: "text.secondary" }, __19("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React58.createElement(
+      Typography5,
       {
         variant: "subtitle2",
         color: "text.secondary",
@@ -3049,7 +3049,7 @@ var ItemSelector = ({
       /* @__PURE__ */ React58.createElement("span", null, "\u201D.")
     )),
     /* @__PURE__ */ React58.createElement(
-      Typography4,
+      Typography5,
       {
         align: "center",
         variant: "caption",
@@ -3655,7 +3655,7 @@ import * as React67 from "react";
 import { getElementLabel } from "@elementor/editor-elements";
 import { stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem3 } from "@elementor/editor-ui";
-import { Select as Select2, styled as styled6, Typography as Typography5 } from "@elementor/ui";
+import { Select as Select2, styled as styled6, Typography as Typography6 } from "@elementor/ui";
 import { __ as __24 } from "@wordpress/i18n";
 
 // src/components/conditional-control-infotip.tsx
@@ -3730,7 +3730,7 @@ var HtmlTagControl = createControl(({ options, onChange, fallbackLabels = {} })
     }
     const placeholderOption = findOptionByValue(placeholder);
     const displayText = placeholderOption?.label || placeholder;
-    return /* @__PURE__ */ React67.createElement(Typography5, { component: "span", variant: "caption", color: "text.tertiary" }, displayText);
+    return /* @__PURE__ */ React67.createElement(Typography6, { component: "span", variant: "caption", color: "text.tertiary" }, displayText);
   };
   const findOptionByValue = (searchValue) => options.find((opt) => opt.value === searchValue);
   return /* @__PURE__ */ React67.createElement(ControlActions, null, /* @__PURE__ */ React67.createElement(ConditionalControlInfotip, { ...infoTipProps }, /* @__PURE__ */ React67.createElement(
@@ -5132,7 +5132,7 @@ import * as React95 from "react";
 import { useRef as useRef21 } from "react";
 import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from "@elementor/editor-props";
 import { AdjustmentsIcon as AdjustmentsIcon2, InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
-import { bindTrigger as bindTrigger4, Box as Box18, IconButton as IconButton7, Tooltip as Tooltip8, Typography as Typography6, usePopupState as usePopupState6 } from "@elementor/ui";
+import { bindTrigger as bindTrigger4, Box as Box18, IconButton as IconButton7, Tooltip as Tooltip8, Typography as Typography7, usePopupState as usePopupState6 } from "@elementor/ui";
 import { __ as __47 } from "@wordpress/i18n";
 
 // src/controls/transform-control/initial-values.ts
@@ -5674,7 +5674,7 @@ var ToolTip = /* @__PURE__ */ React95.createElement(
     sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
   },
   /* @__PURE__ */ React95.createElement(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }),
-  /* @__PURE__ */ React95.createElement(Typography6, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __47("You can use each kind of transform only once per element.", "elementor"))
+  /* @__PURE__ */ React95.createElement(Typography7, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __47("You can use each kind of transform only once per element.", "elementor"))
 );
 var Repeater2 = ({
   headerRef,
@@ -5740,7 +5740,7 @@ import {
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2
 } from "@elementor/editor-props";
 import { InfoCircleFilledIcon as InfoCircleFilledIcon3 } from "@elementor/icons";
-import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box20, Typography as Typography7 } from "@elementor/ui";
+import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box20, Typography as Typography8 } from "@elementor/ui";
 import { __ as __50 } from "@wordpress/i18n";
 
 // src/controls/selection-size-control.tsx
@@ -6228,7 +6228,7 @@ var disableAddItemTooltipContent = /* @__PURE__ */ React98.createElement(
     icon: /* @__PURE__ */ React98.createElement(InfoCircleFilledIcon3, null)
   },
   /* @__PURE__ */ React98.createElement(AlertTitle3, null, __50("Transitions", "elementor")),
-  /* @__PURE__ */ React98.createElement(Box20, { component: "span" }, /* @__PURE__ */ React98.createElement(Typography7, { variant: "body2" }, __50("Switch to 'Normal' state to add a transition.", "elementor")))
+  /* @__PURE__ */ React98.createElement(Box20, { component: "span" }, /* @__PURE__ */ React98.createElement(Typography8, { variant: "body2" }, __50("Switch to 'Normal' state to add a transition.", "elementor")))
 );
 var TransitionRepeaterControl = createControl(
   ({
@@ -6710,18 +6710,66 @@ import { __ as __52 } from "@wordpress/i18n";
 
 // src/components/promotions/promotion-trigger.tsx
 import * as React103 from "react";
-import { forwardRef as forwardRef11, useImperativeHandle, useState as useState17 } from "react";
+import { forwardRef as forwardRef11, useCallback as useCallback4, useImperativeHandle, useState as useState17 } from "react";
 import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
 import { Box as Box25 } from "@elementor/ui";
+
+// src/utils/tracking.ts
+import { getSelectedElements as getSelectedElements2 } from "@elementor/editor-elements";
+import { getMixpanel } from "@elementor/events";
+var getBaseEventProperties = (data, config) => ({
+  app_type: config?.appTypes?.editor ?? "editor",
+  window_name: config?.appTypes?.editor ?? "editor",
+  interaction_type: config?.triggers?.click ?? "Click",
+  target_name: data.target_name,
+  target_location: data.target_location ?? "widget_panel",
+  location_l1: data.location_l1 ?? getSelectedElements2()[0]?.type ?? "",
+  ...data.location_l2 && { location_l2: data.location_l2 }
+});
+var dispatchPromotionEvent = (data, resolveOptions) => {
+  const { dispatchEvent, config } = getMixpanel();
+  const { eventName, interactionResult, interactionDescription } = resolveOptions(config);
+  if (!eventName) {
+    return;
+  }
+  dispatchEvent?.(eventName, {
+    ...getBaseEventProperties(data, config),
+    interaction_result: interactionResult,
+    interaction_description: interactionDescription
+  });
+};
+var trackViewPromotion = (data) => {
+  dispatchPromotionEvent(data, (config) => ({
+    eventName: config?.names?.promotions?.viewPromotion,
+    interactionResult: config?.interactionResults?.promotionViewed ?? "promotion_viewed",
+    interactionDescription: "user_viewed_promotion"
+  }));
+};
+var trackUpgradePromotionClick = (data) => {
+  dispatchPromotionEvent(data, (config) => ({
+    eventName: config?.names?.promotions?.upgradePromotionClick,
+    interactionResult: config?.interactionResults?.upgradeNow ?? "upgrade_now",
+    interactionDescription: "user_clicked_upgrade_now"
+  }));
+};
+
+// src/components/promotions/promotion-trigger.tsx
 function getV4Promotion(key) {
   return window.elementor?.config?.v4Promotions?.[key];
 }
 var PromotionTrigger = forwardRef11(
-  ({ promotionKey, children }, ref) => {
+  ({ promotionKey, children, trackingData }, ref) => {
     const [isOpen, setIsOpen] = useState17(false);
     const promotion = getV4Promotion(promotionKey);
-    const toggle = () => setIsOpen((prev) => !prev);
-    useImperativeHandle(ref, () => ({ toggle }), []);
+    const toggle = useCallback4(() => {
+      setIsOpen((prev) => {
+        if (!prev) {
+          trackViewPromotion(trackingData);
+        }
+        return !prev;
+      });
+    }, [trackingData]);
+    useImperativeHandle(ref, () => ({ toggle }), [toggle]);
     return /* @__PURE__ */ React103.createElement(React103.Fragment, null, promotion && /* @__PURE__ */ React103.createElement(
       PromotionInfotip,
       {
@@ -6733,7 +6781,8 @@ var PromotionTrigger = forwardRef11(
         onClose: (e) => {
           e.stopPropagation();
           setIsOpen(false);
-        }
+        },
+        onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
       /* @__PURE__ */ React103.createElement(
         Box25,
@@ -6752,6 +6801,7 @@ var PromotionTrigger = forwardRef11(
 
 // src/components/promotions/display-conditions-control.tsx
 var ARIA_LABEL = __52("Display Conditions", "elementor");
+var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
   const triggerRef = useRef25(null);
   return /* @__PURE__ */ React104.createElement(
@@ -6764,7 +6814,7 @@ var DisplayConditionsControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React104.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions" }),
+    /* @__PURE__ */ React104.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
     /* @__PURE__ */ React104.createElement(Tooltip9, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React104.createElement(
       IconButton8,
       {
@@ -6790,6 +6840,7 @@ import { PlusIcon as PlusIcon3 } from "@elementor/icons";
 import { Stack as Stack19, Tooltip as Tooltip10 } from "@elementor/ui";
 import { __ as __53 } from "@wordpress/i18n";
 var ARIA_LABEL2 = __53("Attributes", "elementor");
+var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
   const triggerRef = useRef26(null);
   return /* @__PURE__ */ React105.createElement(
@@ -6802,7 +6853,7 @@ var AttributesControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React105.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes" }),
+    /* @__PURE__ */ React105.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
     /* @__PURE__ */ React105.createElement(Tooltip10, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React105.createElement(
       PlusIcon3,
       {
@@ -7574,6 +7625,8 @@ export {
   injectIntoRepeaterItemLabel,
   isUnitExtendedOption,
   registerControlReplacement,
+  trackUpgradePromotionClick,
+  trackViewPromotion,
   transitionProperties,
   transitionsItemsList,
   useBoundProp,