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

package/dist/index.js

@@ -44,7 +44,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/init.ts
 var import_editor = require("@elementor/editor");
-var import_editor_controls15 = require("@elementor/editor-controls");
+var import_editor_controls18 = require("@elementor/editor-controls");
 var import_editor_panels2 = require("@elementor/editor-panels");
 var import_editor_props7 = require("@elementor/editor-props");
 var import_menus = require("@elementor/menus");
@@ -1127,16 +1127,24 @@ var useQuotaPermissions = (variableType) => {
 // src/components/ui/variable-promotion-chip.tsx
 var React6 = __toESM(require("react"));
 var import_react6 = require("react");
+var import_editor_controls2 = require("@elementor/editor-controls");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_ui6 = require("@elementor/ui");
 var import_utils = require("@elementor/utils");
 var import_i18n7 = require("@wordpress/i18n");
 var VariablePromotionChip = (0, import_react6.forwardRef)(
-  ({ variableType, upgradeUrl }, ref) => {
+  ({ variableType, upgradeUrl, trackingData }, ref) => {
     const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
     (0, import_editor_ui2.useCanvasClickHandler)(isOpen, () => setIsOpen(false));
-    const toggle = () => setIsOpen((prev) => !prev);
-    (0, import_react6.useImperativeHandle)(ref, () => ({ toggle }), []);
+    const toggle = (0, import_react6.useCallback)(() => {
+      setIsOpen((prev) => {
+        if (!prev) {
+          (0, import_editor_controls2.trackViewPromotion)(trackingData);
+        }
+        return !prev;
+      });
+    }, [trackingData]);
+    (0, import_react6.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
     const title = (0, import_i18n7.sprintf)(
       /* translators: %s: Variable Type. */
       (0, import_i18n7.__)("%s variables", "elementor"),
@@ -1158,7 +1166,8 @@ var VariablePromotionChip = (0, import_react6.forwardRef)(
         onClose: (e) => {
           e.stopPropagation();
           setIsOpen(false);
-        }
+        },
+        onCtaClick: () => (0, import_editor_controls2.trackUpgradePromotionClick)(trackingData)
       },
       /* @__PURE__ */ React6.createElement(
         import_ui6.Box,
@@ -1176,6 +1185,11 @@ var VariablePromotionChip = (0, import_react6.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 = (0, import_react7.useRef)(null);
@@ -1258,7 +1272,8 @@ var MenuOption = ({
     {
       variableType: config.variableType,
       upgradeUrl: `https://go.elementor.com/go-pro-manager-${config.variableType}-variable/`,
-      ref: promotionRef
+      ref: promotionRef,
+      trackingData: TRACKING_DATA
     }
   ));
 };
@@ -1588,6 +1603,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,
@@ -1750,7 +1766,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 })))
   );
@@ -2253,12 +2270,12 @@ function OpenPanelFromUrl() {
 
 // src/controls/variable-control.tsx
 var React33 = __toESM(require("react"));
-var import_editor_controls11 = require("@elementor/editor-controls");
+var import_editor_controls13 = require("@elementor/editor-controls");
 
 // src/components/ui/variable/assigned-variable.tsx
 var import_react22 = require("react");
 var React24 = __toESM(require("react"));
-var import_editor_controls6 = require("@elementor/editor-controls");
+var import_editor_controls8 = require("@elementor/editor-controls");
 var import_icons12 = require("@elementor/icons");
 var import_ui24 = require("@elementor/ui");
 
@@ -2299,16 +2316,16 @@ var usePopoverContentRef = () => {
 // src/components/variable-creation.tsx
 var React17 = __toESM(require("react"));
 var import_react17 = require("react");
-var import_editor_controls4 = require("@elementor/editor-controls");
+var import_editor_controls5 = require("@elementor/editor-controls");
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons6 = require("@elementor/icons");
 var import_ui17 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
 
 // src/hooks/use-initial-value.ts
-var import_editor_controls2 = require("@elementor/editor-controls");
+var import_editor_controls3 = require("@elementor/editor-controls");
 var useInitialValue = () => {
-  const { value: initial } = (0, import_editor_controls2.useBoundProp)();
+  const { value: initial } = (0, import_editor_controls3.useBoundProp)();
   const hasAssignedVariable = hasVariableType(initial?.$$type) && Boolean(initial?.value);
   const variable = useVariable(hasAssignedVariable ? initial.value : "");
   if (hasAssignedVariable) {
@@ -2318,11 +2335,11 @@ var useInitialValue = () => {
 };
 
 // src/hooks/use-variable-bound-prop.ts
-var import_editor_controls3 = require("@elementor/editor-controls");
+var import_editor_controls4 = require("@elementor/editor-controls");
 var import_editor_props3 = require("@elementor/editor-props");
 var useVariableBoundProp = () => {
   const { propTypeUtil } = useVariableType();
-  const boundProp = (0, import_editor_controls3.useBoundProp)(propTypeUtil);
+  const boundProp = (0, import_editor_controls4.useBoundProp)(propTypeUtil);
   return {
     ...boundProp,
     setVariableValue: (value) => resolveBoundPropAndSetValue(value, boundProp),
@@ -2357,7 +2374,7 @@ var SIZE2 = "tiny";
 var VariableCreation = ({ onGoBack, onClose }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
   const { setVariableValue: setVariable, path } = useVariableBoundProp();
-  const { propType } = (0, import_editor_controls4.useBoundProp)();
+  const { propType } = (0, import_editor_controls5.useBoundProp)();
   const initialValue = useInitialValue();
   const [value, setValue] = (0, import_react17.useState)(initialValue);
   const [label, setLabel] = (0, import_react17.useState)("");
@@ -2427,7 +2444,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       title: (0, import_i18n11.__)("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React17.createElement(import_ui17.Divider, null), /* @__PURE__ */ React17.createElement(import_editor_controls4.PopoverContent, { p: 2 }, /* @__PURE__ */ React17.createElement(
+  ), /* @__PURE__ */ React17.createElement(import_ui17.Divider, null), /* @__PURE__ */ React17.createElement(import_editor_controls5.PopoverContent, { p: 2 }, /* @__PURE__ */ React17.createElement(
     FormField,
     {
       id: "variable-label",
@@ -2484,7 +2501,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
 // src/components/variable-edit.tsx
 var React19 = __toESM(require("react"));
 var import_react19 = require("react");
-var import_editor_controls5 = require("@elementor/editor-controls");
+var import_editor_controls6 = require("@elementor/editor-controls");
 var import_editor_current_user3 = require("@elementor/editor-current-user");
 var import_editor_ui7 = require("@elementor/editor-ui");
 var import_icons8 = require("@elementor/icons");
@@ -2535,7 +2552,7 @@ var DELETE_LABEL = (0, import_i18n13.__)("Delete variable", "elementor");
 var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
   const { setVariableValue: notifyBoundPropChange, variableId } = useVariableBoundProp();
-  const { propType } = (0, import_editor_controls5.useBoundProp)();
+  const { propType } = (0, import_editor_controls6.useBoundProp)();
   const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user3.useSuppressedMessage)(EDIT_CONFIRMATION_DIALOG_ID);
   const [deleteConfirmation, setDeleteConfirmation] = (0, import_react19.useState)(false);
   const [editConfirmation, setEditConfirmation] = (0, import_react19.useState)(false);
@@ -2653,7 +2670,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       ), /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: SIZE3 })),
       actions
     }
-  ), /* @__PURE__ */ React19.createElement(import_ui19.Divider, null), /* @__PURE__ */ React19.createElement(import_editor_controls5.PopoverContent, { p: 2 }, /* @__PURE__ */ React19.createElement(
+  ), /* @__PURE__ */ React19.createElement(import_ui19.Divider, null), /* @__PURE__ */ React19.createElement(import_editor_controls6.PopoverContent, { p: 2 }, /* @__PURE__ */ React19.createElement(
     FormField,
     {
       id: "variable-label",
@@ -2716,6 +2733,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 // src/components/variables-selection.tsx
 var import_react20 = require("react");
 var React21 = __toESM(require("react"));
+var import_editor_controls7 = require("@elementor/editor-controls");
 var import_editor_ui9 = require("@elementor/editor-ui");
 var import_editor_ui10 = require("@elementor/editor-ui");
 var import_icons10 = require("@elementor/icons");
@@ -2898,6 +2916,15 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
   const handleClearSearch = () => {
     setSearchValue("");
   };
+  (0, import_react20.useEffect)(() => {
+    if (disabled) {
+      (0, import_editor_controls7.trackViewPromotion)({
+        target_name: "variables_popover",
+        target_location: "widget_panel",
+        location_l1: "variables_list"
+      });
+    }
+  }, [disabled]);
   return /* @__PURE__ */ React21.createElement(import_editor_ui9.SectionPopoverBody, null, /* @__PURE__ */ React21.createElement(
     import_editor_ui9.PopoverHeader,
     {
@@ -3104,7 +3131,7 @@ var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
 // src/components/ui/variable/assigned-variable.tsx
 var AssignedVariable = ({ variable, propTypeKey }) => {
   const { startIcon, propTypeUtil } = getVariableType(propTypeKey);
-  const { setValue } = (0, import_editor_controls6.useBoundProp)();
+  const { setValue } = (0, import_editor_controls8.useBoundProp)();
   const anchorRef = (0, import_react22.useRef)(null);
   const popupId = (0, import_react22.useId)();
   const popupState = (0, import_ui24.usePopupState)({
@@ -3147,14 +3174,14 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 // src/components/ui/variable/deleted-variable.tsx
 var React28 = __toESM(require("react"));
 var import_react24 = require("react");
-var import_editor_controls8 = require("@elementor/editor-controls");
+var import_editor_controls10 = require("@elementor/editor-controls");
 var import_ui28 = require("@elementor/ui");
 var import_i18n19 = require("@wordpress/i18n");
 
 // src/components/variable-restore.tsx
 var React25 = __toESM(require("react"));
 var import_react23 = require("react");
-var import_editor_controls7 = require("@elementor/editor-controls");
+var import_editor_controls9 = require("@elementor/editor-controls");
 var import_editor_ui11 = require("@elementor/editor-ui");
 var import_ui25 = require("@elementor/ui");
 var import_i18n17 = require("@wordpress/i18n");
@@ -3162,7 +3189,7 @@ var SIZE7 = "tiny";
 var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
   const { setVariableValue: notifyBoundPropChange } = useVariableBoundProp();
-  const { propType } = (0, import_editor_controls7.useBoundProp)();
+  const { propType } = (0, import_editor_controls9.useBoundProp)();
   const variable = useVariable(variableId);
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
@@ -3224,7 +3251,7 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
       title: (0, import_i18n17.__)("Restore variable", "elementor"),
       onClose
     }
-  ), /* @__PURE__ */ React25.createElement(import_ui25.Divider, null), /* @__PURE__ */ React25.createElement(import_editor_controls7.PopoverContent, { p: 2 }, /* @__PURE__ */ React25.createElement(
+  ), /* @__PURE__ */ React25.createElement(import_ui25.Divider, null), /* @__PURE__ */ React25.createElement(import_editor_controls9.PopoverContent, { p: 2 }, /* @__PURE__ */ React25.createElement(
     FormField,
     {
       id: "variable-label",
@@ -3325,7 +3352,7 @@ WarningVariableTag.displayName = "WarningVariableTag";
 // src/components/ui/variable/deleted-variable.tsx
 var DeletedVariable = ({ variable, propTypeKey }) => {
   const { propTypeUtil } = getVariableType(propTypeKey);
-  const boundProp = (0, import_editor_controls8.useBoundProp)();
+  const boundProp = (0, import_editor_controls10.useBoundProp)();
   const userPermissions = usePermissions();
   const [showInfotip, setShowInfotip] = (0, import_react24.useState)(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
@@ -3419,7 +3446,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 // src/components/ui/variable/mismatch-variable.tsx
 var React30 = __toESM(require("react"));
 var import_react25 = require("react");
-var import_editor_controls9 = require("@elementor/editor-controls");
+var import_editor_controls11 = require("@elementor/editor-controls");
 var import_ui30 = require("@elementor/ui");
 var import_i18n21 = require("@wordpress/i18n");
 
@@ -3455,7 +3482,7 @@ var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
 
 // src/components/ui/variable/mismatch-variable.tsx
 var MismatchVariable = ({ variable }) => {
-  const { setValue, value } = (0, import_editor_controls9.useBoundProp)();
+  const { setValue, value } = (0, import_editor_controls11.useBoundProp)();
   const anchorRef = (0, import_react25.useRef)(null);
   const popupId = (0, import_react25.useId)();
   const popupState = (0, import_ui30.usePopupState)({
@@ -3536,7 +3563,7 @@ var MismatchVariable = ({ variable }) => {
 // src/components/ui/variable/missing-variable.tsx
 var React32 = __toESM(require("react"));
 var import_react26 = require("react");
-var import_editor_controls10 = require("@elementor/editor-controls");
+var import_editor_controls12 = require("@elementor/editor-controls");
 var import_ui32 = require("@elementor/ui");
 var import_i18n23 = require("@wordpress/i18n");
 
@@ -3564,7 +3591,7 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
 
 // src/components/ui/variable/missing-variable.tsx
 var MissingVariable = () => {
-  const { setValue } = (0, import_editor_controls10.useBoundProp)();
+  const { setValue } = (0, import_editor_controls12.useBoundProp)();
   const [infotipVisible, setInfotipVisible] = (0, import_react26.useState)(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
@@ -3595,7 +3622,7 @@ var MissingVariable = () => {
 
 // src/controls/variable-control.tsx
 var VariableControl = () => {
-  const boundProp = (0, import_editor_controls11.useBoundProp)();
+  const boundProp = (0, import_editor_controls13.useBoundProp)();
   const boundPropValue = boundProp.value ?? boundProp.placeholder;
   const assignedVariable = useVariable(boundPropValue?.value);
   if (!assignedVariable) {
@@ -3614,11 +3641,11 @@ var VariableControl = () => {
 
 // src/hooks/use-prop-variable-action.tsx
 var React34 = __toESM(require("react"));
-var import_editor_controls12 = require("@elementor/editor-controls");
+var import_editor_controls14 = require("@elementor/editor-controls");
 var import_icons14 = require("@elementor/icons");
 var import_i18n24 = require("@wordpress/i18n");
 var usePropVariableAction = () => {
-  const { propType, path } = (0, import_editor_controls12.useBoundProp)();
+  const { propType, path } = (0, import_editor_controls14.useBoundProp)();
   const variable = resolveVariableFromPropType(propType);
   return {
     visible: Boolean(variable),
@@ -3776,6 +3803,7 @@ function initMcp() {
 
 // src/register-variable-types.tsx
 var React37 = __toESM(require("react"));
+var import_editor_controls16 = require("@elementor/editor-controls");
 var import_editor_props5 = require("@elementor/editor-props");
 var import_editor_ui13 = require("@elementor/editor-ui");
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
@@ -3829,7 +3857,7 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 // src/components/fields/font-field.tsx
 var React36 = __toESM(require("react"));
 var import_react28 = require("react");
-var import_editor_controls13 = require("@elementor/editor-controls");
+var import_editor_controls15 = require("@elementor/editor-controls");
 var import_editor_ui12 = require("@elementor/editor-ui");
 var import_icons15 = require("@elementor/icons");
 var import_ui34 = require("@elementor/ui");
@@ -3839,7 +3867,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
   const defaultRef = (0, import_react28.useRef)(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const fontPopoverState = (0, import_ui34.usePopupState)({ variant: "popover" });
-  const fontFamilies = (0, import_editor_controls13.useFontFamilies)();
+  const fontFamilies = (0, import_editor_controls15.useFontFamilies)();
   const sectionWidth = (0, import_editor_ui12.useSectionWidth)();
   const mapFontSubs = React36.useMemo(() => {
     return fontFamilies.map(({ label, fonts }) => ({
@@ -3879,7 +3907,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
       ...(0, import_ui34.bindPopover)(fontPopoverState)
     },
     /* @__PURE__ */ React36.createElement(
-      import_editor_controls13.ItemSelector,
+      import_editor_controls15.ItemSelector,
       {
         id: "font-family-variables-selector",
         itemsList: mapFontSubs,
@@ -3889,7 +3917,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
         sectionWidth,
         title: (0, import_i18n25.__)("Font family", "elementor"),
         itemStyle: (item) => ({ fontFamily: item.value }),
-        onDebounce: import_editor_controls13.enqueueFont,
+        onDebounce: import_editor_controls15.enqueueFont,
         icon: import_icons15.TextIcon
       }
     )
@@ -3958,7 +3986,14 @@ function registerVariableTypes() {
     styleTransformer: EmptyTransformer,
     variableType: "size",
     selectionFilter: () => [],
-    emptyState: /* @__PURE__ */ React37.createElement(import_editor_ui13.CtaButton, { size: "small", href: "https://go.elementor.com/go-pro-panel-size-variable/" })
+    emptyState: /* @__PURE__ */ React37.createElement(
+      import_editor_ui13.CtaButton,
+      {
+        size: "small",
+        href: "https://go.elementor.com/go-pro-panel-size-variable/",
+        onClick: () => (0, import_editor_controls16.trackUpgradePromotionClick)({ target_name: "variables_popover", location_l1: "variables_list" })
+      }
+    )
   };
   registerVariableType({
     ...sizePromotions,
@@ -4012,7 +4047,7 @@ function convertToCssVariables(variables) {
 }
 
 // src/repeater-injections.ts
-var import_editor_controls14 = require("@elementor/editor-controls");
+var import_editor_controls17 = require("@elementor/editor-controls");
 var import_editor_props6 = require("@elementor/editor-props");
 
 // src/components/variables-repeater-item-slot.tsx
@@ -4036,21 +4071,21 @@ var BoxShadowRepeaterColorIndicator = ({ value }) => {
 
 // src/repeater-injections.ts
 function registerRepeaterInjections() {
-  (0, import_editor_controls14.injectIntoRepeaterItemIcon)({
+  (0, import_editor_controls17.injectIntoRepeaterItemIcon)({
     id: "color-variables-background-icon",
     component: BackgroundRepeaterColorIndicator,
     condition: ({ value: prop }) => {
       return hasAssignedColorVariable(import_editor_props6.backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
     }
   });
-  (0, import_editor_controls14.injectIntoRepeaterItemIcon)({
+  (0, import_editor_controls17.injectIntoRepeaterItemIcon)({
     id: "color-variables-icon",
     component: BoxShadowRepeaterColorIndicator,
     condition: ({ value: prop }) => {
       return hasAssignedColorVariable(import_editor_props6.shadowPropTypeUtil.extract(prop)?.color);
     }
   });
-  (0, import_editor_controls14.injectIntoRepeaterItemLabel)({
+  (0, import_editor_controls17.injectIntoRepeaterItemLabel)({
     id: "color-variables-label",
     component: BackgroundRepeaterLabel,
     condition: ({ value: prop }) => {
@@ -4067,7 +4102,7 @@ var { registerPopoverAction } = import_menus.controlActionsMenu;
 function init() {
   registerVariableTypes();
   registerRepeaterInjections();
-  (0, import_editor_controls15.registerControlReplacement)({
+  (0, import_editor_controls18.registerControlReplacement)({
     component: VariableControl,
     condition: ({ value, placeholder }) => {
       if (hasVariableAssigned(value)) {