@elementor/editor-controls 4.0.0-manual → 4.1.0-684

package/dist/index.d.mts

@@ -413,6 +413,15 @@ declare const DisplayConditionsControl: ControlComponent$1<() => React$1.JSX.Ele
 
 declare const AttributesControl: ControlComponent$1<() => React$1.JSX.Element>;
 
+type PromotionTrackingData = {
+    target_name: string;
+    target_location?: 'widget_panel' | 'variables_manager';
+    location_l1?: string;
+    location_l2?: 'style' | 'general' | 'interactions';
+};
+declare const trackViewPromotion: (data: PromotionTrackingData) => void;
+declare const trackUpgradePromotionClick: (data: PromotionTrackingData) => void;
+
 type V4PromotionData = {
     title: string;
     content: string;
@@ -424,6 +433,7 @@ type V4PromotionKey = 'displayConditions' | 'customCss' | 'attributes';
 type PromotionTriggerProps = {
     promotionKey: V4PromotionKey;
     children?: ReactNode;
+    trackingData: PromotionTrackingData;
 };
 type PromotionTriggerRef = {
     toggle: () => void;
@@ -727,4 +737,4 @@ declare function useTypingBuffer(options?: UseTypingBufferOptions): {
     startsWith: (haystack: string, needle: string) => boolean;
 };
 
-export { type AdornmentComponent, type AngleUnit, AspectRatioControl, AttributesControl, BackgroundControl, BoxShadowRepeaterControl, ChipsControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, type ControlReplacement, ControlReplacementsProvider, ControlToggleButtonGroup, DateTimeControl, DisplayConditionsControl, EmailFormActionControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, type InlineEditorToolbarProps, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, NumberInput, PopoverContent, PopoverGridContainer, PositionControl, PromotionTrigger, type PromotionTriggerRef, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UnstableSizeField, UrlControl, type UseTypingBufferOptions, type V4PromotionData, type V4PromotionKey, VideoMediaControl, createControl, createControlReplacementsRegistry, enqueueFont, getControlReplacements, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, isUnitExtendedOption, registerControlReplacement, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useControlReplacement, useFontFamilies, useSyncExternalState, useTypingBuffer };
+export { type AdornmentComponent, type AngleUnit, AspectRatioControl, AttributesControl, BackgroundControl, BoxShadowRepeaterControl, ChipsControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, type ControlReplacement, ControlReplacementsProvider, ControlToggleButtonGroup, DateTimeControl, DisplayConditionsControl, EmailFormActionControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, type InlineEditorToolbarProps, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, NumberInput, PopoverContent, PopoverGridContainer, PositionControl, type PromotionTrackingData, PromotionTrigger, type PromotionTriggerRef, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UnstableSizeField, UrlControl, type UseTypingBufferOptions, type V4PromotionData, type V4PromotionKey, VideoMediaControl, createControl, createControlReplacementsRegistry, enqueueFont, getControlReplacements, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, isUnitExtendedOption, registerControlReplacement, trackUpgradePromotionClick, trackViewPromotion, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useControlReplacement, useFontFamilies, useSyncExternalState, useTypingBuffer };

package/dist/index.d.ts

@@ -413,6 +413,15 @@ declare const DisplayConditionsControl: ControlComponent$1<() => React$1.JSX.Ele
 
 declare const AttributesControl: ControlComponent$1<() => React$1.JSX.Element>;
 
+type PromotionTrackingData = {
+    target_name: string;
+    target_location?: 'widget_panel' | 'variables_manager';
+    location_l1?: string;
+    location_l2?: 'style' | 'general' | 'interactions';
+};
+declare const trackViewPromotion: (data: PromotionTrackingData) => void;
+declare const trackUpgradePromotionClick: (data: PromotionTrackingData) => void;
+
 type V4PromotionData = {
     title: string;
     content: string;
@@ -424,6 +433,7 @@ type V4PromotionKey = 'displayConditions' | 'customCss' | 'attributes';
 type PromotionTriggerProps = {
     promotionKey: V4PromotionKey;
     children?: ReactNode;
+    trackingData: PromotionTrackingData;
 };
 type PromotionTriggerRef = {
     toggle: () => void;
@@ -727,4 +737,4 @@ declare function useTypingBuffer(options?: UseTypingBufferOptions): {
     startsWith: (haystack: string, needle: string) => boolean;
 };
 
-export { type AdornmentComponent, type AngleUnit, AspectRatioControl, AttributesControl, BackgroundControl, BoxShadowRepeaterControl, ChipsControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, type ControlReplacement, ControlReplacementsProvider, ControlToggleButtonGroup, DateTimeControl, DisplayConditionsControl, EmailFormActionControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, type InlineEditorToolbarProps, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, NumberInput, PopoverContent, PopoverGridContainer, PositionControl, PromotionTrigger, type PromotionTriggerRef, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UnstableSizeField, UrlControl, type UseTypingBufferOptions, type V4PromotionData, type V4PromotionKey, VideoMediaControl, createControl, createControlReplacementsRegistry, enqueueFont, getControlReplacements, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, isUnitExtendedOption, registerControlReplacement, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useControlReplacement, useFontFamilies, useSyncExternalState, useTypingBuffer };
+export { type AdornmentComponent, type AngleUnit, AspectRatioControl, AttributesControl, BackgroundControl, BoxShadowRepeaterControl, ChipsControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, type ControlReplacement, ControlReplacementsProvider, ControlToggleButtonGroup, DateTimeControl, DisplayConditionsControl, EmailFormActionControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, type InlineEditorToolbarProps, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, NumberInput, PopoverContent, PopoverGridContainer, PositionControl, type PromotionTrackingData, PromotionTrigger, type PromotionTriggerRef, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UnstableSizeField, UrlControl, type UseTypingBufferOptions, type V4PromotionData, type V4PromotionKey, VideoMediaControl, createControl, createControlReplacementsRegistry, enqueueFont, getControlReplacements, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, isUnitExtendedOption, registerControlReplacement, trackUpgradePromotionClick, trackViewPromotion, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useControlReplacement, useFontFamilies, useSyncExternalState, useTypingBuffer };

package/dist/index.js

@@ -95,6 +95,8 @@ __export(index_exports, {
   injectIntoRepeaterItemLabel: () => injectIntoRepeaterItemLabel,
   isUnitExtendedOption: () => isUnitExtendedOption,
   registerControlReplacement: () => registerControlReplacement,
+  trackUpgradePromotionClick: () => trackUpgradePromotionClick,
+  trackViewPromotion: () => trackViewPromotion,
   transitionProperties: () => transitionProperties,
   transitionsItemsList: () => transitionsItemsList,
   useBoundProp: () => useBoundProp,
@@ -2329,7 +2331,7 @@ var ChipsControl = createControl(({ options }) => {
   const selectedOptions = selectedValues.map((val) => options.find((opt) => opt.value === val)).filter((opt) => opt !== void 0);
   const handleChange = (_, newValue) => {
     const values = newValue.map((option) => import_editor_props16.stringPropTypeUtil.create(option.value));
-    setValue(values.length > 0 ? values : null);
+    setValue(values);
   };
   return /* @__PURE__ */ React50.createElement(ControlActions, null, /* @__PURE__ */ React50.createElement(
     import_ui37.Autocomplete,
@@ -2678,7 +2680,7 @@ var import_ui40 = require("@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(import_ui40.InputAdornment, { position: "end" }, propType.meta.suffix);
+    return /* @__PURE__ */ React55.createElement(import_ui40.InputAdornment, { position: "end" }, /* @__PURE__ */ React55.createElement(import_ui40.Typography, { variant: "caption", color: "text.secondary" }, propType.meta.suffix));
   }
   return /* @__PURE__ */ React55.createElement(React55.Fragment, null);
 };
@@ -5990,6 +5992,47 @@ var import_editor_ui12 = require("@elementor/editor-ui");
 var import_icons32 = require("@elementor/icons");
 var import_ui83 = require("@elementor/ui");
 var import_i18n49 = require("@wordpress/i18n");
+
+// src/utils/tracking.ts
+var import_editor_elements5 = require("@elementor/editor-elements");
+var import_events2 = require("@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 ?? (0, import_editor_elements5.getSelectedElements)()[0]?.type ?? "",
+  ...data.location_l2 && { location_l2: data.location_l2 }
+});
+var dispatchPromotionEvent = (data, resolveOptions) => {
+  const { dispatchEvent, config } = (0, import_events2.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/controls/transition-control/transition-selector.tsx
 var toTransitionSelectorValue = (label) => {
   for (const category of transitionProperties) {
     const property = category.properties.find((prop) => prop.label === label);
@@ -6127,7 +6170,11 @@ var TransitionSelector = ({
               "Upgrade to customize transition properties and control effects.",
               "elementor"
             ),
-            upgradeUrl: PRO_UPGRADE_URL
+            upgradeUrl: PRO_UPGRADE_URL,
+            onCtaClick: () => trackUpgradePromotionClick({
+              target_name: "transition_property",
+              location_l2: "style"
+            })
           }
         ) : null
       }
@@ -6732,11 +6779,18 @@ function getV4Promotion(key) {
   return window.elementor?.config?.v4Promotions?.[key];
 }
 var PromotionTrigger = (0, import_react54.forwardRef)(
-  ({ promotionKey, children }, ref) => {
+  ({ promotionKey, children, trackingData }, ref) => {
     const [isOpen, setIsOpen] = (0, import_react54.useState)(false);
     const promotion = getV4Promotion(promotionKey);
-    const toggle = () => setIsOpen((prev) => !prev);
-    (0, import_react54.useImperativeHandle)(ref, () => ({ toggle }), []);
+    const toggle = (0, import_react54.useCallback)(() => {
+      setIsOpen((prev) => {
+        if (!prev) {
+          trackViewPromotion(trackingData);
+        }
+        return !prev;
+      });
+    }, [trackingData]);
+    (0, import_react54.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
     return /* @__PURE__ */ React103.createElement(React103.Fragment, null, promotion && /* @__PURE__ */ React103.createElement(
       import_editor_ui14.PromotionInfotip,
       {
@@ -6748,7 +6802,8 @@ var PromotionTrigger = (0, import_react54.forwardRef)(
         onClose: (e) => {
           e.stopPropagation();
           setIsOpen(false);
-        }
+        },
+        onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
       /* @__PURE__ */ React103.createElement(
         import_ui89.Box,
@@ -6767,6 +6822,7 @@ var PromotionTrigger = (0, import_react54.forwardRef)(
 
 // src/components/promotions/display-conditions-control.tsx
 var ARIA_LABEL = (0, import_i18n52.__)("Display Conditions", "elementor");
+var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
   const triggerRef = (0, import_react55.useRef)(null);
   return /* @__PURE__ */ React104.createElement(
@@ -6779,7 +6835,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(import_ui90.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React104.createElement(
       import_ui90.IconButton,
       {
@@ -6805,6 +6861,7 @@ var import_icons35 = require("@elementor/icons");
 var import_ui91 = require("@elementor/ui");
 var import_i18n53 = require("@wordpress/i18n");
 var ARIA_LABEL2 = (0, import_i18n53.__)("Attributes", "elementor");
+var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
   const triggerRef = (0, import_react56.useRef)(null);
   return /* @__PURE__ */ React105.createElement(
@@ -6817,7 +6874,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(import_ui91.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React105.createElement(
       import_icons35.PlusIcon,
       {
@@ -7040,7 +7097,7 @@ var usePopover = (openOnMount, onOpen) => {
 // src/components/inline-editor-toolbar.tsx
 var React109 = __toESM(require("react"));
 var import_react59 = require("react");
-var import_editor_elements5 = require("@elementor/editor-elements");
+var import_editor_elements6 = require("@elementor/editor-elements");
 var import_icons39 = require("@elementor/icons");
 var import_ui95 = require("@elementor/ui");
 var import_react60 = require("@tiptap/react");
@@ -7234,10 +7291,10 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
   );
 };
 var checkIfElementIsClickable = (elementId) => {
-  const container = (0, import_editor_elements5.getContainer)(elementId);
+  const container = (0, import_editor_elements6.getContainer)(elementId);
   const type = container?.model.get("widgetType");
   const isButton = type === "e-button";
-  const hasLink = !!(0, import_editor_elements5.getElementSetting)(elementId, "link")?.value?.destination;
+  const hasLink = !!(0, import_editor_elements6.getElementSetting)(elementId, "link")?.value?.destination;
   return isButton || hasLink;
 };
 var toolbarButtons = {
@@ -7470,39 +7527,33 @@ var hasValue = (value) => {
 // src/hooks/use-font-families.ts
 var import_react63 = require("react");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
-var import_i18n57 = require("@wordpress/i18n");
-var supportedCategories = {
-  system: (0, import_i18n57.__)("System", "elementor"),
-  custom: (0, import_i18n57.__)("Custom Fonts", "elementor"),
-  googlefonts: (0, import_i18n57.__)("Google Fonts", "elementor")
-};
-var getFontFamilies = () => {
+var getFontControlConfig = () => {
   const { controls } = (0, import_editor_v1_adapters.getElementorConfig)();
-  const options = controls?.font?.options;
-  if (!options) {
-    return null;
-  }
-  return options;
+  return controls?.font ?? {};
 };
 var useFontFamilies = () => {
-  const fontFamilies = getFontFamilies();
+  const { groups, options } = getFontControlConfig();
   return (0, import_react63.useMemo)(() => {
-    const categoriesOrder = ["system", "custom", "googlefonts"];
-    return Object.entries(fontFamilies || {}).reduce((acc, [font, category]) => {
-      if (!supportedCategories[category]) {
+    if (!groups || !options) {
+      return [];
+    }
+    const groupKeys = Object.keys(groups);
+    const groupIndexMap = new Map(groupKeys.map((key, index) => [key, index]));
+    return Object.entries(options).reduce((acc, [font, category]) => {
+      const groupIndex = groupIndexMap.get(category);
+      if (groupIndex === void 0) {
         return acc;
       }
-      const categoryIndex = categoriesOrder.indexOf(category);
-      if (!acc[categoryIndex]) {
-        acc[categoryIndex] = {
-          label: supportedCategories[category],
+      if (!acc[groupIndex]) {
+        acc[groupIndex] = {
+          label: groups[category],
           fonts: []
         };
       }
-      acc[categoryIndex].fonts.push(font);
+      acc[groupIndex].fonts.push(font);
       return acc;
     }, []).filter(Boolean);
-  }, [fontFamilies]);
+  }, [groups, options]);
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -7571,6 +7622,8 @@ var useFontFamilies = () => {
   injectIntoRepeaterItemLabel,
   isUnitExtendedOption,
   registerControlReplacement,
+  trackUpgradePromotionClick,
+  trackViewPromotion,
   transitionProperties,
   transitionsItemsList,
   useBoundProp,