@elementor/editor-variables 4.0.0-675 → 4.0.0-677

package/dist/index.mjs

@@ -15,7 +15,7 @@ import {
 
 // src/components/variables-manager/variables-manager-panel.tsx
 import * as React14 from "react";
-import { useCallback as useCallback5, useEffect as useEffect3, useState as useState6 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect3, useState as useState6 } from "react";
 import { useSuppressedMessage } from "@elementor/editor-current-user";
 import {
   __createPanel as createPanel,
@@ -1106,17 +1106,25 @@ var useQuotaPermissions = (variableType) => {
 
 // src/components/ui/variable-promotion-chip.tsx
 import * as React6 from "react";
-import { forwardRef, useImperativeHandle, useState as useState3 } from "react";
+import { forwardRef, useCallback as useCallback4, useImperativeHandle, useState as useState3 } from "react";
+import { trackUpgradePromotionClick, trackViewPromotion } from "@elementor/editor-controls";
 import { PromotionChip, PromotionPopover, useCanvasClickHandler } from "@elementor/editor-ui";
 import { Box } from "@elementor/ui";
 import { capitalize } from "@elementor/utils";
 import { __ as __7, sprintf as sprintf2 } from "@wordpress/i18n";
 var VariablePromotionChip = forwardRef(
-  ({ variableType, upgradeUrl }, ref) => {
+  ({ variableType, upgradeUrl, trackingData }, ref) => {
     const [isOpen, setIsOpen] = useState3(false);
     useCanvasClickHandler(isOpen, () => setIsOpen(false));
-    const toggle = () => setIsOpen((prev) => !prev);
-    useImperativeHandle(ref, () => ({ toggle }), []);
+    const toggle = useCallback4(() => {
+      setIsOpen((prev) => {
+        if (!prev) {
+          trackViewPromotion(trackingData);
+        }
+        return !prev;
+      });
+    }, [trackingData]);
+    useImperativeHandle(ref, () => ({ toggle }), [toggle]);
     const title = sprintf2(
       /* translators: %s: Variable Type. */
       __7("%s variables", "elementor"),
@@ -1138,7 +1146,8 @@ var VariablePromotionChip = forwardRef(
         onClose: (e) => {
           e.stopPropagation();
           setIsOpen(false);
-        }
+        },
+        onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
       /* @__PURE__ */ React6.createElement(
         Box,
@@ -1156,6 +1165,11 @@ var VariablePromotionChip = forwardRef(
 );
 
 // src/components/variables-manager/variables-manager-create-menu.tsx
+var TRACKING_DATA = {
+  target_name: "variables_manager",
+  target_location: "variables_manager",
+  location_l1: "create variable menu"
+};
 var SIZE = "tiny";
 var VariableManagerCreateMenu = ({ variables, onCreate, menuState }) => {
   const buttonRef = useRef2(null);
@@ -1238,7 +1252,8 @@ var MenuOption = ({
     {
       variableType: config.variableType,
       upgradeUrl: `https://go.elementor.com/go-pro-manager-${config.variableType}-variable/`,
-      ref: promotionRef
+      ref: promotionRef,
+      trackingData: TRACKING_DATA
     }
   ));
 };
@@ -1385,7 +1400,7 @@ var LabelField = ({
 
 // src/components/variables-manager/variable-editable-cell.tsx
 import * as React10 from "react";
-import { useCallback as useCallback4, useEffect, useRef as useRef4, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect, useRef as useRef4, useState as useState5 } from "react";
 import { ClickAwayListener, Stack as Stack4 } from "@elementor/ui";
 var VariableEditableCell = React10.memo(
   ({
@@ -1406,7 +1421,7 @@ var VariableEditableCell = React10.memo(
     const { labelFieldError, setLabelFieldError } = useLabelError();
     const [valueFieldError, setValueFieldError] = useState5("");
     const rowRef = useRef4(null);
-    const handleSave = useCallback4(() => {
+    const handleSave = useCallback5(() => {
       const hasError = fieldType === "label" && labelFieldError?.message || fieldType === "value" && valueFieldError;
       if (!hasError) {
         onChange(value);
@@ -1442,10 +1457,10 @@ var VariableEditableCell = React10.memo(
         setIsEditing(true);
       }
     };
-    const handleChange = useCallback4((newValue) => {
+    const handleChange = useCallback5((newValue) => {
       setValue(newValue);
     }, []);
-    const handleValidationChange = useCallback4(
+    const handleValidationChange = useCallback5(
       (errorMsg) => {
         if (fieldType === "label") {
           setLabelFieldError({
@@ -1576,6 +1591,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
 };
 
 // src/components/variables-manager/ui/variable-table-row.tsx
+var TRACKING_DATA2 = { target_name: "variables_manager", target_location: "variables_manager" };
 var VariableRow = (props) => {
   const {
     row,
@@ -1738,7 +1754,8 @@ var VariableRow = (props) => {
       {
         variableType: row.variableType,
         upgradeUrl: `https://go.elementor.com/renew-license-manager-${row.variableType}-variable`,
-        ref: promotionRef
+        ref: promotionRef,
+        trackingData: TRACKING_DATA2
       }
     ), /* @__PURE__ */ React12.createElement(VariableEditMenu, { menuActions: menuActions(row.id), disabled: isSorting, itemId: row.id })))
   );
@@ -1897,7 +1914,7 @@ function VariablesManagerPanel() {
     }
     closePanel();
   };
-  const handleCreateVariable = useCallback5(
+  const handleCreateVariable = useCallback6(
     (type, defaultName, defaultValue) => {
       const newId = createVariable2(type, defaultName, defaultValue);
       if (newId) {
@@ -1931,21 +1948,21 @@ function VariablesManagerPanel() {
       setIsSaving(false);
     }
   };
-  const handleDeleteVariableWithConfirmation = useCallback5(
+  const handleDeleteVariableWithConfirmation = useCallback6(
     (itemId) => {
       handleDeleteVariable(itemId);
       setDeleteConfirmation(null);
     },
     [handleDeleteVariable]
   );
-  const handleStopSyncWithConfirmation = useCallback5(
+  const handleStopSyncWithConfirmation = useCallback6(
     (itemId) => {
       handleStopSync(itemId);
       setStopSyncConfirmation(null);
     },
     [handleStopSync]
   );
-  const handleShowStopSyncDialog = useCallback5(
+  const handleShowStopSyncDialog = useCallback6(
     (itemId) => {
       if (!isStopSyncSuppressed) {
         setStopSyncConfirmation(itemId);
@@ -1955,7 +1972,7 @@ function VariablesManagerPanel() {
     },
     [isStopSyncSuppressed, handleStopSync]
   );
-  const buildMenuActions = useCallback5(
+  const buildMenuActions = useCallback6(
     (variableId) => {
       const variable = variables[variableId];
       if (!variable) {
@@ -2712,8 +2729,9 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-import { useState as useState12 } from "react";
+import { useEffect as useEffect7, useState as useState12 } from "react";
 import * as React21 from "react";
+import { trackViewPromotion as trackViewPromotion2 } from "@elementor/editor-controls";
 import {
   PopoverHeader as PopoverHeader3,
   PopoverMenuList,
@@ -2901,6 +2919,15 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
   const handleClearSearch = () => {
     setSearchValue("");
   };
+  useEffect7(() => {
+    if (disabled) {
+      trackViewPromotion2({
+        target_name: "variables_popover",
+        target_location: "widget_panel",
+        location_l1: "variables_list"
+      });
+    }
+  }, [disabled]);
   return /* @__PURE__ */ React21.createElement(SectionPopoverBody3, null, /* @__PURE__ */ React21.createElement(
     PopoverHeader3,
     {
@@ -3779,6 +3806,7 @@ function initMcp() {
 
 // src/register-variable-types.tsx
 import * as React37 from "react";
+import { trackUpgradePromotionClick as trackUpgradePromotionClick2 } from "@elementor/editor-controls";
 import { colorPropTypeUtil, sizePropTypeUtil, stringPropTypeUtil } from "@elementor/editor-props";
 import { CtaButton } from "@elementor/editor-ui";
 import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
@@ -3961,7 +3989,14 @@ function registerVariableTypes() {
     styleTransformer: EmptyTransformer,
     variableType: "size",
     selectionFilter: () => [],
-    emptyState: /* @__PURE__ */ React37.createElement(CtaButton, { size: "small", href: "https://go.elementor.com/go-pro-panel-size-variable/" })
+    emptyState: /* @__PURE__ */ React37.createElement(
+      CtaButton,
+      {
+        size: "small",
+        href: "https://go.elementor.com/go-pro-panel-size-variable/",
+        onClick: () => trackUpgradePromotionClick2({ target_name: "variables_popover", location_l1: "variables_list" })
+      }
+    )
   };
   registerVariableType({
     ...sizePromotions,
@@ -3976,7 +4011,7 @@ function registerVariableTypes() {
 
 // src/renderers/style-variables-renderer.tsx
 import * as React38 from "react";
-import { useEffect as useEffect7, useState as useState20 } from "react";
+import { useEffect as useEffect8, useState as useState20 } from "react";
 import {
   __privateUseListenTo as useListenTo,
   commandEndEvent,
@@ -4000,7 +4035,7 @@ function usePortalContainer() {
 }
 function useStyleVariables() {
   const [variables, setVariables] = useState20({});
-  useEffect7(() => {
+  useEffect8(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();