@elementor/editor-variables 3.33.0-257 → 3.33.0-259

package/dist/index.mjs

@@ -31,6 +31,43 @@ import {
 } from "@elementor/ui";
 import { __ as __9 } from "@wordpress/i18n";
 
+// src/utils/tracking.ts
+import { getMixpanel } from "@elementor/mixpanel";
+var trackVariableEvent = ({ varType, controlPath, action }) => {
+  const { dispatchEvent, config } = getMixpanel();
+  if (!config?.names?.variables?.[action]) {
+    return;
+  }
+  const name = config.names.variables[action];
+  dispatchEvent?.(name, {
+    location: config?.locations?.variables || "",
+    secondaryLocation: config?.secondaryLocations?.variablesPopover || "",
+    trigger: config?.triggers?.click || "",
+    var_type: varType,
+    control_path: controlPath,
+    action_type: name
+  });
+};
+var trackVariablesManagerEvent = ({ action, varType, controlPath }) => {
+  const { dispatchEvent, config } = getMixpanel();
+  if (!config?.names?.variables?.[action]) {
+    return;
+  }
+  const name = config.names.variables[action];
+  const eventData = {
+    location: config?.locations?.variablesManager || "",
+    trigger: config?.triggers?.click || "",
+    action_type: name
+  };
+  if (varType) {
+    eventData.var_type = varType;
+  }
+  if (controlPath) {
+    eventData.style_control_path = controlPath;
+  }
+  dispatchEvent?.(name, eventData);
+};
+
 // src/utils/validations.ts
 import { AlertTriangleFilledIcon, InfoCircleFilledIcon } from "@elementor/icons";
 import { __, sprintf } from "@wordpress/i18n";
@@ -127,154 +164,70 @@ var validateValue = (value) => {
   return "";
 };
 
-// src/components/ui/delete-confirmation-dialog.tsx
-import * as React from "react";
-import { AlertOctagonFilledIcon } from "@elementor/icons";
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  Typography
-} from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
-var TITLE_ID = "delete-variable-dialog";
-var DeleteConfirmationDialog = ({
-  open,
-  label,
-  closeDialog,
-  onConfirm
-}) => {
-  return /* @__PURE__ */ React.createElement(Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React.createElement(AlertOctagonFilledIcon, { color: "error" }), __2("Delete this variable?", "elementor")), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __2("All elements using", "elementor"), "\xA0", /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2", component: "span", sx: { lineBreak: "anywhere" } }, label), "\xA0", __2("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { color: "secondary", onClick: closeDialog }, __2("Not now", "elementor")), /* @__PURE__ */ React.createElement(Button, { variant: "contained", color: "error", onClick: onConfirm }, __2("Delete", "elementor"))));
-};
+// src/variables-registry/create-variable-type-registry.ts
+import { styleTransformersRegistry } from "@elementor/editor-canvas";
+import { stylesInheritanceTransformersRegistry } from "@elementor/editor-editing-panel";
 
-// src/components/ui/empty-state.tsx
-import * as React2 from "react";
-import { Button as Button2, Stack, Typography as Typography2 } from "@elementor/ui";
+// src/transformers/inheritance-transformer.tsx
+import * as React from "react";
+import { createTransformer } from "@elementor/editor-canvas";
+import { Stack, Typography } from "@elementor/ui";
 import { __ as __3 } from "@wordpress/i18n";
 
-// src/hooks/use-permissions.ts
-import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
-var usePermissions = () => {
-  const { canUser } = useCurrentUserCapabilities();
-  return {
-    canAssign: () => canUser("edit_posts"),
-    canUnlink: () => canUser("edit_posts"),
-    canAdd: () => canUser("manage_options"),
-    canDelete: () => canUser("manage_options"),
-    canEdit: () => canUser("manage_options"),
-    canRestore: () => canUser("manage_options"),
-    canManageSettings: () => canUser("manage_options")
-  };
-};
-
-// src/components/ui/empty-state.tsx
-var EmptyState = ({ icon, title, message, onAdd }) => {
-  const canAdd = usePermissions().canAdd();
-  return /* @__PURE__ */ React2.createElement(
-    Stack,
-    {
-      gap: 1,
-      alignItems: "center",
-      justifyContent: "flex-start",
-      height: "100%",
-      color: "text.secondary",
-      sx: { p: 2.5, pt: 8, pb: 5.5 }
-    },
-    icon,
-    canAdd ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Content, { title, message }), onAdd && /* @__PURE__ */ React2.createElement(Button2, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __3("Create a variable", "elementor"))) : /* @__PURE__ */ React2.createElement(
-      Content,
-      {
-        title: __3("There are no variables", "elementor"),
-        message: __3("With your current role, you can only connect and detach variables.", "elementor")
-      }
-    )
-  );
-};
-function Content({ title, message }) {
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Typography2, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React2.createElement(Typography2, { align: "center", variant: "caption", maxWidth: "180px" }, message));
-}
+// src/components/ui/color-indicator.tsx
+import { styled, UnstableColorIndicator } from "@elementor/ui";
+var ColorIndicator = styled(UnstableColorIndicator)(({ theme }) => ({
+  borderRadius: `${theme.shape.borderRadius / 2}px`,
+  marginRight: theme.spacing(0.25)
+}));
 
-// src/components/ui/no-search-results.tsx
-import * as React3 from "react";
-import { Link, Stack as Stack2, Typography as Typography3 } from "@elementor/ui";
-import { __ as __4 } from "@wordpress/i18n";
-var NoSearchResults = ({ searchValue, onClear, icon }) => {
-  return /* @__PURE__ */ React3.createElement(
-    Stack2,
-    {
-      gap: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      p: 2.5,
-      color: "text.secondary",
-      sx: { pb: 3.5, pt: 8 }
-    },
-    icon,
-    /* @__PURE__ */ React3.createElement(Typography3, { align: "center", variant: "subtitle2" }, __4("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React3.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React3.createElement(Typography3, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __4("Try something else.", "elementor"), /* @__PURE__ */ React3.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __4("Clear & try again", "elementor")))
-  );
-};
+// src/prop-types/color-variable-prop-type.ts
+import { createPropUtils } from "@elementor/editor-props";
+import { z } from "@elementor/schema";
+var colorVariablePropTypeUtil = createPropUtils("global-color-variable", z.string());
 
-// src/components/variables-manager/hooks/use-auto-edit.ts
-import { useCallback, useState } from "react";
-var useAutoEdit = () => {
-  const [autoEditVariableId, setAutoEditVariableId] = useState(void 0);
-  const startAutoEdit = useCallback((variableId) => {
-    setAutoEditVariableId(variableId);
-  }, []);
-  const handleAutoEditComplete = useCallback(() => {
-    setTimeout(() => {
-      setAutoEditVariableId(void 0);
-    }, 100);
-  }, []);
-  return {
-    autoEditVariableId,
-    startAutoEdit,
-    handleAutoEditComplete
-  };
-};
+// src/service.ts
+import { __ as __2 } from "@wordpress/i18n";
 
-// src/components/variables-manager/hooks/use-error-navigation.ts
-import { useCallback as useCallback2, useRef } from "react";
-var useErrorNavigation = () => {
-  const currentIndexRef = useRef(0);
-  const createNavigationCallback = useCallback2(
-    (ids, onNavigate, onComplete) => {
-      return () => {
-        if (!ids?.length) {
-          return;
-        }
-        const currentIndex = currentIndexRef.current;
-        const currentId = ids[currentIndex];
-        if (currentId) {
-          onNavigate(currentId);
-          const nextIndex = currentIndex + 1;
-          if (nextIndex >= ids.length) {
-            onComplete();
-            currentIndexRef.current = 0;
-          } else {
-            currentIndexRef.current = nextIndex;
-          }
-        }
-      };
-    },
-    []
-  );
-  const resetNavigation = useCallback2(() => {
-    currentIndexRef.current = 0;
-  }, []);
-  return {
-    createNavigationCallback,
-    resetNavigation
-  };
+// src/api.ts
+import { httpService } from "@elementor/http-client";
+var BASE_PATH = "elementor/v1/variables";
+var apiClient = {
+  list: () => {
+    return httpService().get(BASE_PATH + "/list");
+  },
+  create: (type, label, value) => {
+    return httpService().post(BASE_PATH + "/create", {
+      type,
+      label,
+      value
+    });
+  },
+  update: (id2, label, value) => {
+    return httpService().put(BASE_PATH + "/update", {
+      id: id2,
+      label,
+      value
+    });
+  },
+  delete: (id2) => {
+    return httpService().post(BASE_PATH + "/delete", { id: id2 });
+  },
+  restore: (id2, label, value) => {
+    const payload = { id: id2 };
+    if (label) {
+      payload.label = label;
+    }
+    if (value) {
+      payload.value = value;
+    }
+    return httpService().post(BASE_PATH + "/restore", payload);
+  },
+  batch: (payload) => {
+    return httpService().post(BASE_PATH + "/batch", payload);
+  }
 };
 
-// src/components/variables-manager/hooks/use-variables-manager-state.ts
-import { useCallback as useCallback3, useState as useState2 } from "react";
-
 // src/batch-operations.ts
 var generateTempId = () => {
   const timestamp = Date.now().toString(36);
@@ -335,78 +288,6 @@ var buildOperationsArray = (originalVariables, currentVariables) => {
   });
 };
 
-// src/hooks/use-prop-variables.ts
-import { useMemo } from "react";
-import { useBoundProp } from "@elementor/editor-controls";
-
-// src/context/variable-type-context.tsx
-import * as React5 from "react";
-import { createContext, useContext } from "react";
-
-// src/variables-registry/create-variable-type-registry.ts
-import { styleTransformersRegistry } from "@elementor/editor-canvas";
-import { stylesInheritanceTransformersRegistry } from "@elementor/editor-editing-panel";
-
-// src/transformers/inheritance-transformer.tsx
-import * as React4 from "react";
-import { createTransformer } from "@elementor/editor-canvas";
-import { Stack as Stack3, Typography as Typography4 } from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
-
-// src/components/ui/color-indicator.tsx
-import { styled, UnstableColorIndicator } from "@elementor/ui";
-var ColorIndicator = styled(UnstableColorIndicator)(({ theme }) => ({
-  borderRadius: `${theme.shape.borderRadius / 2}px`,
-  marginRight: theme.spacing(0.25)
-}));
-
-// src/prop-types/color-variable-prop-type.ts
-import { createPropUtils } from "@elementor/editor-props";
-import { z } from "@elementor/schema";
-var colorVariablePropTypeUtil = createPropUtils("global-color-variable", z.string());
-
-// src/service.ts
-import { __ as __5 } from "@wordpress/i18n";
-
-// src/api.ts
-import { httpService } from "@elementor/http-client";
-var BASE_PATH = "elementor/v1/variables";
-var apiClient = {
-  list: () => {
-    return httpService().get(BASE_PATH + "/list");
-  },
-  create: (type, label, value) => {
-    return httpService().post(BASE_PATH + "/create", {
-      type,
-      label,
-      value
-    });
-  },
-  update: (id2, label, value) => {
-    return httpService().put(BASE_PATH + "/update", {
-      id: id2,
-      label,
-      value
-    });
-  },
-  delete: (id2) => {
-    return httpService().post(BASE_PATH + "/delete", { id: id2 });
-  },
-  restore: (id2, label, value) => {
-    const payload = { id: id2 };
-    if (label) {
-      payload.label = label;
-    }
-    if (value) {
-      payload.value = value;
-    }
-    return httpService().post(BASE_PATH + "/restore", payload);
-  },
-  batch: (payload) => {
-    return httpService().post(BASE_PATH + "/batch", payload);
-  }
-};
-
 // src/storage.ts
 var STORAGE_KEY = "elementor-global-variables";
 var STORAGE_WATERMARK_KEY = "elementor-global-variables-watermark";
@@ -571,7 +452,7 @@ var service = {
     return apiClient.create(type, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || __5("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || __2("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -593,7 +474,7 @@ var service = {
     return apiClient.update(id2, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || __5("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || __2("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -726,11 +607,11 @@ var inheritanceTransformer = createTransformer((id2) => {
   const variables = service.variables();
   const variable = variables[id2];
   if (!variable) {
-    return /* @__PURE__ */ React4.createElement("span", null, __6("Missing variable", "elementor"));
+    return /* @__PURE__ */ React.createElement("span", null, __3("Missing variable", "elementor"));
   }
   const showColorIndicator = variable.type === colorVariablePropTypeUtil.key;
   const css = resolveCssVariable(id2, variable);
-  return /* @__PURE__ */ React4.createElement(Stack3, { direction: "row", spacing: 0.5, sx: { paddingInline: "1px" }, alignItems: "center" }, showColorIndicator && /* @__PURE__ */ React4.createElement(ColorIndicator, { size: "inherit", value: variable.value }), /* @__PURE__ */ React4.createElement(Typography4, { variant: "caption", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, css));
+  return /* @__PURE__ */ React.createElement(Stack, { direction: "row", spacing: 0.5, sx: { paddingInline: "1px" }, alignItems: "center" }, showColorIndicator && /* @__PURE__ */ React.createElement(ColorIndicator, { size: "inherit", value: variable.value }), /* @__PURE__ */ React.createElement(Typography, { variant: "caption", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, css));
 });
 
 // src/transformers/variable-transformer.ts
@@ -812,7 +693,161 @@ function createVariableTypeRegistry() {
 // src/variables-registry/variable-type-registry.ts
 var { registerVariableType, getVariableType, getVariableTypes, hasVariableType } = createVariableTypeRegistry();
 
+// src/components/ui/delete-confirmation-dialog.tsx
+import * as React2 from "react";
+import { AlertOctagonFilledIcon } from "@elementor/icons";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Typography as Typography2
+} from "@elementor/ui";
+import { __ as __4 } from "@wordpress/i18n";
+var TITLE_ID = "delete-variable-dialog";
+var DeleteConfirmationDialog = ({
+  open,
+  label,
+  closeDialog,
+  onConfirm
+}) => {
+  return /* @__PURE__ */ React2.createElement(Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React2.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React2.createElement(AlertOctagonFilledIcon, { color: "error" }), __4("Delete this variable?", "elementor")), /* @__PURE__ */ React2.createElement(DialogContent, null, /* @__PURE__ */ React2.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __4("All elements using", "elementor"), "\xA0", /* @__PURE__ */ React2.createElement(Typography2, { variant: "subtitle2", component: "span", sx: { lineBreak: "anywhere" } }, label), "\xA0", __4("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React2.createElement(DialogActions, null, /* @__PURE__ */ React2.createElement(Button, { color: "secondary", onClick: closeDialog }, __4("Not now", "elementor")), /* @__PURE__ */ React2.createElement(Button, { variant: "contained", color: "error", onClick: onConfirm }, __4("Delete", "elementor"))));
+};
+
+// src/components/ui/empty-state.tsx
+import * as React3 from "react";
+import { Button as Button2, Stack as Stack2, Typography as Typography3 } from "@elementor/ui";
+import { __ as __5 } from "@wordpress/i18n";
+
+// src/hooks/use-permissions.ts
+import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
+var usePermissions = () => {
+  const { canUser } = useCurrentUserCapabilities();
+  return {
+    canAssign: () => canUser("edit_posts"),
+    canUnlink: () => canUser("edit_posts"),
+    canAdd: () => canUser("manage_options"),
+    canDelete: () => canUser("manage_options"),
+    canEdit: () => canUser("manage_options"),
+    canRestore: () => canUser("manage_options"),
+    canManageSettings: () => canUser("manage_options")
+  };
+};
+
+// src/components/ui/empty-state.tsx
+var EmptyState = ({ icon, title, message, onAdd }) => {
+  const canAdd = usePermissions().canAdd();
+  return /* @__PURE__ */ React3.createElement(
+    Stack2,
+    {
+      gap: 1,
+      alignItems: "center",
+      justifyContent: "flex-start",
+      height: "100%",
+      color: "text.secondary",
+      sx: { p: 2.5, pt: 8, pb: 5.5 }
+    },
+    icon,
+    canAdd ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Content, { title, message }), onAdd && /* @__PURE__ */ React3.createElement(Button2, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __5("Create a variable", "elementor"))) : /* @__PURE__ */ React3.createElement(
+      Content,
+      {
+        title: __5("There are no variables", "elementor"),
+        message: __5("With your current role, you can only connect and detach variables.", "elementor")
+      }
+    )
+  );
+};
+function Content({ title, message }) {
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Typography3, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React3.createElement(Typography3, { align: "center", variant: "caption", maxWidth: "180px" }, message));
+}
+
+// src/components/ui/no-search-results.tsx
+import * as React4 from "react";
+import { Link, Stack as Stack3, Typography as Typography4 } from "@elementor/ui";
+import { __ as __6 } from "@wordpress/i18n";
+var NoSearchResults = ({ searchValue, onClear, icon }) => {
+  return /* @__PURE__ */ React4.createElement(
+    Stack3,
+    {
+      gap: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      p: 2.5,
+      color: "text.secondary",
+      sx: { pb: 3.5, pt: 8 }
+    },
+    icon,
+    /* @__PURE__ */ React4.createElement(Typography4, { align: "center", variant: "subtitle2" }, __6("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React4.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React4.createElement(Typography4, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __6("Try something else.", "elementor"), /* @__PURE__ */ React4.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __6("Clear & try again", "elementor")))
+  );
+};
+
+// src/components/variables-manager/hooks/use-auto-edit.ts
+import { useCallback, useState } from "react";
+var useAutoEdit = () => {
+  const [autoEditVariableId, setAutoEditVariableId] = useState(void 0);
+  const startAutoEdit = useCallback((variableId) => {
+    setAutoEditVariableId(variableId);
+  }, []);
+  const handleAutoEditComplete = useCallback(() => {
+    setTimeout(() => {
+      setAutoEditVariableId(void 0);
+    }, 100);
+  }, []);
+  return {
+    autoEditVariableId,
+    startAutoEdit,
+    handleAutoEditComplete
+  };
+};
+
+// src/components/variables-manager/hooks/use-error-navigation.ts
+import { useCallback as useCallback2, useRef } from "react";
+var useErrorNavigation = () => {
+  const currentIndexRef = useRef(0);
+  const createNavigationCallback = useCallback2(
+    (ids, onNavigate, onComplete) => {
+      return () => {
+        if (!ids?.length) {
+          return;
+        }
+        const currentIndex = currentIndexRef.current;
+        const currentId = ids[currentIndex];
+        if (currentId) {
+          onNavigate(currentId);
+          const nextIndex = currentIndex + 1;
+          if (nextIndex >= ids.length) {
+            onComplete();
+            currentIndexRef.current = 0;
+          } else {
+            currentIndexRef.current = nextIndex;
+          }
+        }
+      };
+    },
+    []
+  );
+  const resetNavigation = useCallback2(() => {
+    currentIndexRef.current = 0;
+  }, []);
+  return {
+    createNavigationCallback,
+    resetNavigation
+  };
+};
+
+// src/components/variables-manager/hooks/use-variables-manager-state.ts
+import { useCallback as useCallback3, useState as useState2 } from "react";
+
+// src/hooks/use-prop-variables.ts
+import { useMemo } from "react";
+import { useBoundProp } from "@elementor/editor-controls";
+
 // src/context/variable-type-context.tsx
+import * as React5 from "react";
+import { createContext, useContext } from "react";
 var VariableTypeContext = createContext(null);
 function VariableTypeProvider({ children, propTypeKey }) {
   return /* @__PURE__ */ React5.createElement(VariableTypeContext.Provider, { value: propTypeKey }, children);
@@ -990,6 +1025,7 @@ var VariableManagerCreateMenu = ({
       onClick: () => {
         const defaultName = getDefaultName(variables, key, variable.variableType);
         onCreate(key, defaultName, variable.defaultValue || "");
+        trackVariablesManagerEvent({ action: "add", varType: variable.variableType });
       }
     };
   });
@@ -1659,7 +1695,9 @@ function VariablesManagerPanel() {
     try {
       setServerError(null);
       resetNavigation();
-      return await handleSave();
+      const result = await handleSave();
+      trackVariablesManagerEvent({ action: "saveChanges" });
+      return result;
     } catch (error) {
       const mappedError = mapServerError(error);
       const duplicatedIds = mappedError?.action?.data?.duplicatedIds;
@@ -1691,8 +1729,11 @@ function VariablesManagerPanel() {
       icon: TrashIcon,
       color: "error.main",
       onClick: (itemId) => {
-        if (variables[itemId]) {
-          setDeleteConfirmation({ id: itemId, label: variables[itemId].label });
+        const variable = variables[itemId];
+        if (variable) {
+          setDeleteConfirmation({ id: itemId, label: variable.label });
+          const variableTypeOptions = getVariableType(variable.type);
+          trackVariablesManagerEvent({ action: "delete", varType: variableTypeOptions?.variableType });
         }
       }
     }
@@ -1959,24 +2000,6 @@ var unwrapValue = (input) => {
   return input;
 };
 
-// src/utils/tracking.ts
-import { getMixpanel } from "@elementor/mixpanel";
-var trackVariableEvent = ({ varType, controlPath, action }) => {
-  const { dispatchEvent, config } = getMixpanel();
-  if (!config?.names?.variables?.[action]) {
-    return;
-  }
-  const name = config.names.variables[action];
-  dispatchEvent?.(name, {
-    location: config?.locations?.variables || "",
-    secondaryLocation: config?.secondaryLocations?.variablesPopover || "",
-    trigger: config?.triggers?.click || "",
-    var_type: varType,
-    control_path: controlPath,
-    action_type: name
-  });
-};
-
 // src/components/ui/form-field.tsx
 import * as React14 from "react";
 import { FormHelperText, FormLabel, Grid } from "@elementor/ui";
@@ -2481,13 +2504,21 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
     );
   }
   if (onSettings) {
+    const handleOpenManager = () => {
+      onSettings();
+      trackVariablesManagerEvent({
+        action: "openManager",
+        varType: variableType,
+        controlPath: path.join(".")
+      });
+    };
     actions.push(
       /* @__PURE__ */ React19.createElement(Tooltip3, { key: "settings", placement: "top", title: MANAGER_LABEL }, /* @__PURE__ */ React19.createElement(
         IconButton7,
         {
           id: "variables-manager-button",
           size: SIZE5,
-          onClick: onSettings,
+          onClick: handleOpenManager,
           "aria-label": MANAGER_LABEL
         },
         /* @__PURE__ */ React19.createElement(SettingsIcon, { fontSize: SIZE5 })