@elementor/editor-components 3.35.0-463 → 3.35.0-465

package/dist/index.mjs

@@ -250,9 +250,17 @@ var selectCurrentComponentId = createSelector(
   getCurrentComponentId,
   (currentComponentId) => currentComponentId
 );
+var selectCurrentComponent = createSelector(
+  selectData,
+  getCurrentComponentId,
+  (data, currentComponentId) => data.find((component) => component.id === currentComponentId)
+);
 var useCurrentComponentId = () => {
   return useSelector(selectCurrentComponentId);
 };
+var useCurrentComponent = () => {
+  return useSelector(selectCurrentComponent);
+};
 var selectUpdatedComponentNames = createSelector(
   (state) => state[SLICE_NAME].updatedComponentNames,
   (updatedComponentNames) => Object.entries(updatedComponentNames).map(([componentId, title]) => ({
@@ -348,7 +356,7 @@ import * as React10 from "react";
 import { useSuppressedMessage } from "@elementor/editor-current-user";
 import { getV1DocumentsManager as getV1DocumentsManager3 } from "@elementor/editor-documents";
 import { ArrowLeftIcon, ComponentsFilledIcon } from "@elementor/icons";
-import { __getState as getState9 } from "@elementor/store";
+import { __getState as getState10 } from "@elementor/store";
 import { Box as Box7, Divider as Divider2, IconButton as IconButton4, Stack as Stack6, Tooltip as Tooltip3, Typography as Typography6 } from "@elementor/ui";
 import { __ as __12 } from "@wordpress/i18n";
 
@@ -427,6 +435,42 @@ function useNavigateBack() {
   }, [path, documentsManager]);
 }
 
+// src/utils/tracking.ts
+import { getMixpanel } from "@elementor/mixpanel";
+import { __getState as getState2 } from "@elementor/store";
+var FEATURE_NAME = "Components";
+var trackComponentEvent = ({ action, source, ...data }) => {
+  const { dispatchEvent, config } = getMixpanel();
+  if (!config?.names?.components?.[action]) {
+    return;
+  }
+  const name = config.names.components[action];
+  dispatchEvent?.(name, { ...data, source, "Feature name": FEATURE_NAME });
+};
+var onElementDrop = (_args, element) => {
+  if (!(element?.model?.get("widgetType") === "e-component")) {
+    return;
+  }
+  const editorSettings = element.model.get("editor_settings");
+  const componentName = editorSettings?.title;
+  const componentUID = editorSettings?.component_uid;
+  const instanceId = element.id;
+  const createdThisSession = selectCreatedThisSession(getState2());
+  const isSameSessionReuse = componentUID && createdThisSession.includes(componentUID);
+  const eventsManagerConfig = window.elementorCommon.eventsManager.config;
+  const { locations, secondaryLocations } = eventsManagerConfig;
+  trackComponentEvent({
+    action: "instanceAdded",
+    source: "user",
+    instance_id: instanceId,
+    component_uid: componentUID,
+    component_name: componentName,
+    is_same_session_reuse: isSameSessionReuse,
+    location: locations.widgetPanel,
+    secondary_location: secondaryLocations.componentsTab
+  });
+};
+
 // src/components/component-properties-panel/component-properties-panel.tsx
 import * as React8 from "react";
 import { ElementProvider, usePanelActions as useEditingPanelActions } from "@elementor/editor-editing-panel";
@@ -447,13 +491,15 @@ import { generateUniqueId as generateUniqueId2 } from "@elementor/utils";
 import { __ as __9 } from "@wordpress/i18n";
 
 // src/store/actions/add-overridable-group.ts
-import { __dispatch as dispatch, __getState as getState2 } from "@elementor/store";
+import { __dispatch as dispatch, __getState as getState3 } from "@elementor/store";
 function addOverridableGroup({
   componentId,
   groupId,
-  label
+  label,
+  source
 }) {
-  const overridableProps = selectOverridableProps(getState2(), componentId);
+  const currentComponent = selectCurrentComponent(getState3());
+  const overridableProps = selectOverridableProps(getState3(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -478,11 +524,17 @@ function addOverridableGroup({
       }
     })
   );
+  trackComponentEvent({
+    action: "propertiesGroupCreated",
+    source,
+    component_uid: currentComponent?.uid,
+    group_name: label
+  });
   return newGroup;
 }
 
 // src/store/actions/delete-overridable-group.ts
-import { __dispatch as dispatch2, __getState as getState3 } from "@elementor/store";
+import { __dispatch as dispatch2, __getState as getState4 } from "@elementor/store";
 
 // src/store/utils/groups-transformers.ts
 import { generateUniqueId } from "@elementor/utils";
@@ -630,7 +682,7 @@ function renameGroup(groups, groupId, newLabel) {
 
 // src/store/actions/delete-overridable-group.ts
 function deleteOverridableGroup({ componentId, groupId }) {
-  const overridableProps = selectOverridableProps(getState3(), componentId);
+  const overridableProps = selectOverridableProps(getState4(), componentId);
   if (!overridableProps) {
     return false;
   }
@@ -653,9 +705,9 @@ function deleteOverridableGroup({ componentId, groupId }) {
 
 // src/store/actions/delete-overridable-prop.ts
 import { getContainer, updateElementSettings } from "@elementor/editor-elements";
-import { __dispatch as dispatch3, __getState as getState4 } from "@elementor/store";
-function deleteOverridableProp({ componentId, propKey }) {
-  const overridableProps = selectOverridableProps(getState4(), componentId);
+import { __dispatch as dispatch3, __getState as getState5 } from "@elementor/store";
+function deleteOverridableProp({ componentId, propKey, source }) {
+  const overridableProps = selectOverridableProps(getState5(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -676,6 +728,16 @@ function deleteOverridableProp({ componentId, propKey }) {
       }
     })
   );
+  const currentComponent = selectCurrentComponent(getState5());
+  trackComponentEvent({
+    action: "propertyRemoved",
+    source,
+    component_uid: currentComponent?.uid,
+    property_id: removedProp.overrideKey,
+    property_path: removedProp.propKey,
+    property_name: removedProp.label,
+    element_type: removedProp.widgetType ?? removedProp.elType
+  });
 }
 function revertElementSetting(elementId, settingKey, originValue) {
   const container = getContainer(elementId);
@@ -690,9 +752,9 @@ function revertElementSetting(elementId, settingKey, originValue) {
 }
 
 // src/store/actions/reorder-group-props.ts
-import { __dispatch as dispatch4, __getState as getState5 } from "@elementor/store";
+import { __dispatch as dispatch4, __getState as getState6 } from "@elementor/store";
 function reorderGroupProps({ componentId, groupId, newPropsOrder }) {
-  const overridableProps = selectOverridableProps(getState5(), componentId);
+  const overridableProps = selectOverridableProps(getState6(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -721,9 +783,9 @@ function reorderGroupProps({ componentId, groupId, newPropsOrder }) {
 }
 
 // src/store/actions/reorder-overridable-groups.ts
-import { __dispatch as dispatch5, __getState as getState6 } from "@elementor/store";
+import { __dispatch as dispatch5, __getState as getState7 } from "@elementor/store";
 function reorderOverridableGroups({ componentId, newOrder }) {
-  const overridableProps = selectOverridableProps(getState6(), componentId);
+  const overridableProps = selectOverridableProps(getState7(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -742,14 +804,14 @@ function reorderOverridableGroups({ componentId, newOrder }) {
 }
 
 // src/store/actions/update-overridable-prop-params.ts
-import { __dispatch as dispatch6, __getState as getState7 } from "@elementor/store";
+import { __dispatch as dispatch6, __getState as getState8 } from "@elementor/store";
 function updateOverridablePropParams({
   componentId,
   overrideKey,
   label,
   groupId
 }) {
-  const overridableProps = selectOverridableProps(getState7(), componentId);
+  const overridableProps = selectOverridableProps(getState8(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -1344,9 +1406,9 @@ import { useEditable } from "@elementor/editor-ui";
 import { __ as __8 } from "@wordpress/i18n";
 
 // src/store/actions/rename-overridable-group.ts
-import { __dispatch as dispatch7, __getState as getState8 } from "@elementor/store";
+import { __dispatch as dispatch7, __getState as getState9 } from "@elementor/store";
 function renameOverridableGroup({ componentId, groupId, label }) {
-  const overridableProps = selectOverridableProps(getState8(), componentId);
+  const overridableProps = selectOverridableProps(getState9(), componentId);
   if (!overridableProps) {
     return false;
   }
@@ -1478,7 +1540,12 @@ function ComponentPropertiesPanelContent({ onClose }) {
     }
     const newGroupId = generateUniqueId2("group");
     const newLabel = generateUniqueLabel(groups);
-    addOverridableGroup({ componentId: currentComponentId, groupId: newGroupId, label: newLabel });
+    addOverridableGroup({
+      componentId: currentComponentId,
+      groupId: newGroupId,
+      label: newLabel,
+      source: "user"
+    });
     setDocumentModifiedStatus2(true);
     setIsAddingGroup(false);
     groupLabelEditable.setEditingGroupId(newGroupId);
@@ -1492,7 +1559,7 @@ function ComponentPropertiesPanelContent({ onClose }) {
     setDocumentModifiedStatus2(true);
   };
   const handlePropertyDelete = (propKey) => {
-    deleteOverridableProp({ componentId: currentComponentId, propKey });
+    deleteOverridableProp({ componentId: currentComponentId, propKey, source: "user" });
     setDocumentModifiedStatus2(true);
   };
   const handlePropertyUpdate = (overrideKey, data) => {
@@ -1575,34 +1642,32 @@ import { useEffect, useRef as useRef2 } from "react";
 import { ComponentPropListIcon as ComponentPropListIcon3 } from "@elementor/icons";
 import { Badge, Box as Box6, keyframes, styled as styled2, ToggleButton } from "@elementor/ui";
 import { __ as __11 } from "@wordpress/i18n";
-var ComponentsBadge = React9.forwardRef(
-  ({ overridesCount, onClick }, ref) => {
-    const prevCount = usePrevious(overridesCount);
-    const isFirstOverride = prevCount === 0 && overridesCount === 1;
-    return /* @__PURE__ */ React9.createElement(
-      StyledBadge,
+var ComponentsBadge = React9.forwardRef(({ overridablePropsCount, onClick }, ref) => {
+  const prevCount = usePrevious(overridablePropsCount);
+  const isFirstExposedProperty = prevCount === 0 && overridablePropsCount === 1;
+  return /* @__PURE__ */ React9.createElement(
+    StyledBadge,
+    {
+      ref,
+      color: "primary",
+      key: overridablePropsCount,
+      invisible: overridablePropsCount === 0,
+      animate: isFirstExposedProperty,
+      anchorOrigin: { vertical: "top", horizontal: "right" },
+      badgeContent: /* @__PURE__ */ React9.createElement(Box6, { sx: { animation: !isFirstExposedProperty ? `${slideUp} 300ms ease-out` : "none" } }, overridablePropsCount)
+    },
+    /* @__PURE__ */ React9.createElement(
+      ToggleButton,
       {
-        ref,
-        color: "primary",
-        key: overridesCount,
-        invisible: overridesCount === 0,
-        animate: isFirstOverride,
-        anchorOrigin: { vertical: "top", horizontal: "right" },
-        badgeContent: /* @__PURE__ */ React9.createElement(Box6, { sx: { animation: !isFirstOverride ? `${slideUp} 300ms ease-out` : "none" } }, overridesCount)
+        value: "exposed properties",
+        size: "tiny",
+        onClick,
+        "aria-label": __11("View exposed properties", "elementor")
       },
-      /* @__PURE__ */ React9.createElement(
-        ToggleButton,
-        {
-          value: "overrides",
-          size: "tiny",
-          onClick,
-          "aria-label": __11("View overrides", "elementor")
-        },
-        /* @__PURE__ */ React9.createElement(ComponentPropListIcon3, { fontSize: "tiny" })
-      )
-    );
-  }
-);
+      /* @__PURE__ */ React9.createElement(ComponentPropListIcon3, { fontSize: "tiny" })
+    )
+  );
+});
 var StyledBadge = styled2(Badge, { shouldForwardProp: (prop) => prop !== "animate" })(
   ({ theme, animate }) => ({
     "& .MuiBadge-badge": {
@@ -1635,14 +1700,14 @@ var slideUp = keyframes`
 // src/components/component-panel-header/component-panel-header.tsx
 var MESSAGE_KEY = "components-properties-introduction";
 var ComponentPanelHeader = () => {
-  const currentComponentId = useCurrentComponentId();
+  const { id: currentComponentId, uid: componentUid } = useCurrentComponent() ?? { id: null, uid: null };
   const overridableProps = useOverridableProps2(currentComponentId);
   const onBack = useNavigateBack();
   const componentName = getComponentName();
   const [isMessageSuppressed, suppressMessage] = useSuppressedMessage(MESSAGE_KEY);
   const [shouldShowIntroduction, setShouldShowIntroduction] = React10.useState(!isMessageSuppressed);
   const { open: openPropertiesPanel } = usePanelActions();
-  const overridesCount = overridableProps ? Object.keys(overridableProps.props).length : 0;
+  const overridablePropsCount = overridableProps ? Object.keys(overridableProps.props).length : 0;
   const anchorRef = React10.useRef(null);
   if (!currentComponentId) {
     return null;
@@ -1651,6 +1716,15 @@ var ComponentPanelHeader = () => {
     suppressMessage();
     setShouldShowIntroduction(false);
   };
+  const handleOpenPropertiesPanel = () => {
+    openPropertiesPanel();
+    trackComponentEvent({
+      action: "propertiesPanelOpened",
+      source: "user",
+      component_uid: componentUid,
+      properties_count: overridablePropsCount
+    });
+  };
   return /* @__PURE__ */ React10.createElement(Box7, null, /* @__PURE__ */ React10.createElement(
     Stack6,
     {
@@ -1660,7 +1734,14 @@ var ComponentPanelHeader = () => {
       sx: { height: 48, pl: 1.5, pr: 2, py: 1 }
     },
     /* @__PURE__ */ React10.createElement(Stack6, { direction: "row", alignItems: "center" }, /* @__PURE__ */ React10.createElement(Tooltip3, { title: __12("Back", "elementor") }, /* @__PURE__ */ React10.createElement(IconButton4, { size: "tiny", onClick: onBack, "aria-label": __12("Back", "elementor") }, /* @__PURE__ */ React10.createElement(ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React10.createElement(Stack6, { direction: "row", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ React10.createElement(ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React10.createElement(Typography6, { variant: "caption", sx: { fontWeight: 500 } }, componentName))),
-    /* @__PURE__ */ React10.createElement(ComponentsBadge, { overridesCount, ref: anchorRef, onClick: openPropertiesPanel })
+    /* @__PURE__ */ React10.createElement(
+      ComponentsBadge,
+      {
+        overridablePropsCount,
+        ref: anchorRef,
+        onClick: handleOpenPropertiesPanel
+      }
+    )
   ), /* @__PURE__ */ React10.createElement(Divider2, null), /* @__PURE__ */ React10.createElement(
     ComponentIntroduction,
     {
@@ -1671,7 +1752,7 @@ var ComponentPanelHeader = () => {
   ));
 };
 function getComponentName() {
-  const state = getState9();
+  const state = getState10();
   const path = state[SLICE_NAME].path;
   const { instanceTitle } = path.at(-1) ?? {};
   if (instanceTitle) {
@@ -1785,42 +1866,6 @@ import {
 import { getCurrentDocument } from "@elementor/editor-documents";
 import { __getState as getState11 } from "@elementor/store";
 import { __ as __14 } from "@wordpress/i18n";
-
-// src/utils/tracking.ts
-import { getMixpanel } from "@elementor/mixpanel";
-import { __getState as getState10 } from "@elementor/store";
-var trackComponentEvent = ({ action, ...data }) => {
-  const { dispatchEvent, config } = getMixpanel();
-  if (!config?.names?.components?.[action]) {
-    return;
-  }
-  const name = config.names.components[action];
-  dispatchEvent?.(name, data);
-};
-var onElementDrop = (_args, element) => {
-  if (!(element?.model?.get("widgetType") === "e-component")) {
-    return;
-  }
-  const editorSettings = element.model.get("editor_settings");
-  const componentName = editorSettings?.title;
-  const componentUID = editorSettings?.component_uid;
-  const instanceId = element.id;
-  const createdThisSession = selectCreatedThisSession(getState10());
-  const isSameSessionReuse = componentUID && createdThisSession.includes(componentUID);
-  const eventsManagerConfig = window.elementorCommon.eventsManager.config;
-  const { locations, secondaryLocations } = eventsManagerConfig;
-  trackComponentEvent({
-    action: "instanceAdded",
-    instance_id: instanceId,
-    component_uid: componentUID,
-    component_name: componentName,
-    is_same_session_reuse: isSameSessionReuse,
-    location: locations.widgetPanel,
-    secondary_location: secondaryLocations.componentsTab
-  });
-};
-
-// src/create-component-type.ts
 var COMPONENT_WIDGET_TYPE = "e-component";
 var updateGroups = (groups, config) => {
   const disableMap = new Map(Object.entries(config.disable ?? {}));
@@ -1962,6 +2007,7 @@ function createComponentView(options) {
       const editorSettings = this.model.get("editor_settings");
       trackComponentEvent({
         action: "edited",
+        source: "user",
         component_uid: editorSettings?.component_uid,
         component_name: editorSettings?.title,
         location,
@@ -2389,8 +2435,7 @@ var createComponentModel2 = (component) => {
             value: component.id ?? component.uid
           }
         }
-      },
-      overridable_props: component.overridableProps
+      }
     },
     editor_settings: {
       component_uid: component.uid
@@ -2949,19 +2994,28 @@ function findNonAtomicElementsInElement(element) {
 import { __privateRunCommand as runCommand3 } from "@elementor/editor-v1-adapters";
 import { __dispatch as dispatch12 } from "@elementor/store";
 import { generateUniqueId as generateUniqueId3 } from "@elementor/utils";
-async function createUnpublishedComponent(name, element, eventData, overridableProps, uid) {
+async function createUnpublishedComponent({
+  name,
+  element,
+  eventData,
+  uid,
+  overridableProps,
+  source
+}) {
   const generatedUid = uid ?? generateUniqueId3("component");
-  const componentBase = { uid: generatedUid, name, overridableProps };
+  const componentBase = { uid: generatedUid, name };
   dispatch12(
     slice.actions.addUnpublished({
       ...componentBase,
-      elements: [element]
+      elements: [element],
+      overridableProps
     })
   );
   dispatch12(slice.actions.addCreatedThisSession(generatedUid));
   const componentInstance = await replaceElementWithComponent(element, componentBase);
   trackComponentEvent({
     action: "created",
+    source,
     component_uid: generatedUid,
     component_name: name,
     ...eventData
@@ -3073,6 +3127,7 @@ function CreateComponentForm() {
       eventData.current = getComponentEventData(event.detail.element, event.detail.options);
       trackComponentEvent({
         action: "createClicked",
+        source: "user",
         ...eventData.current
       });
     };
@@ -3086,11 +3141,12 @@ function CreateComponentForm() {
       if (!element) {
         throw new Error(`Can't save element as component: element not found`);
       }
-      const { uid, instanceId } = await createUnpublishedComponent(
-        values.componentName,
-        element.element,
-        eventData.current
-      );
+      const { uid, instanceId } = await createUnpublishedComponent({
+        name: values.componentName,
+        element: element.element,
+        eventData: eventData.current,
+        source: "user"
+      });
       const publishedComponentId = selectComponentByUid(getState15(), uid)?.id;
       if (publishedComponentId) {
         switchToComponent(publishedComponentId, instanceId);
@@ -3120,6 +3176,7 @@ function CreateComponentForm() {
     resetAndClosePopup();
     trackComponentEvent({
       action: "createCancelled",
+      source: "user",
       ...eventData.current
     });
   };
@@ -4011,10 +4068,10 @@ function InstanceEditingPanel() {
 import * as React30 from "react";
 import {
   ControlReplacementsProvider as ControlReplacementsProvider2,
-  createControl,
   PropKeyProvider as PropKeyProvider2,
   PropProvider as PropProvider2,
-  useBoundProp as useBoundProp2
+  useBoundProp as useBoundProp2,
+  useControlReplacement
 } from "@elementor/editor-controls";
 import { createTopLevelObjectType as createTopLevelObjectType2, getControlReplacements as getControlReplacements2, useElement as useElement3 } from "@elementor/editor-editing-panel";
 function OverridablePropControl({
@@ -4022,7 +4079,6 @@ function OverridablePropControl({
   ...props
 }) {
   const { elementType } = useElement3();
-  const Control = createControl(OriginalControl2);
   const { value, bind, setValue, placeholder, ...propContext } = useBoundProp2(componentOverridablePropTypeUtil);
   const componentId = useCurrentComponentId();
   const overridableProps = useOverridableProps(componentId);
@@ -4071,9 +4127,20 @@ function OverridablePropControl({
       },
       placeholder: objectPlaceholder
     },
-    /* @__PURE__ */ React30.createElement(PropKeyProvider2, { bind }, /* @__PURE__ */ React30.createElement(ControlReplacementsProvider2, { replacements: filteredReplacements }, /* @__PURE__ */ React30.createElement(Control, { ...props })))
+    /* @__PURE__ */ React30.createElement(PropKeyProvider2, { bind }, /* @__PURE__ */ React30.createElement(ControlReplacementsProvider2, { replacements: filteredReplacements }, /* @__PURE__ */ React30.createElement(ControlWithReplacements, { OriginalControl: OriginalControl2, props })))
   ));
 }
+function ControlWithReplacements({
+  OriginalControl: OriginalControl2,
+  props
+}) {
+  const { ControlToRender, isReplaced } = useControlReplacement(OriginalControl2);
+  if (isReplaced) {
+    const ReplacementControl = ControlToRender;
+    return /* @__PURE__ */ React30.createElement(ReplacementControl, { ...props, OriginalControl: OriginalControl2 });
+  }
+  return /* @__PURE__ */ React30.createElement(OriginalControl2, { ...props });
+}
 
 // src/components/overridable-props/overridable-prop-indicator.tsx
 import * as React32 from "react";
@@ -4096,7 +4163,8 @@ function setOverridableProp({
   elType,
   widgetType,
   originValue,
-  originPropFields
+  originPropFields,
+  source
 }) {
   const overridableProps = selectOverridableProps(getState17(), componentId);
   if (!overridableProps) {
@@ -4144,6 +4212,19 @@ function setOverridableProp({
       }
     })
   );
+  const isNewProperty = !existingOverridableProp;
+  if (isNewProperty) {
+    const currentComponent = selectCurrentComponent(getState17());
+    trackComponentEvent({
+      action: "propertyExposed",
+      source,
+      component_uid: currentComponent?.uid,
+      property_id: overridableProp.overrideKey,
+      property_path: propKey,
+      property_name: label,
+      element_type: widgetType ?? elType
+    });
+  }
   return overridableProp;
 }
 
@@ -4272,7 +4353,8 @@ function Content2({ componentId, overridableProps }) {
       elType: elType ?? "widget",
       widgetType: componentInstanceElement?.elementType.key ?? elementType.key,
       originValue,
-      originPropFields: matchingOverridableProp?.originPropFields
+      originPropFields: matchingOverridableProp?.originPropFields,
+      source: "user"
     });
     if (!overridableValue && overridablePropConfig) {
       setOverridableValue({
@@ -4390,7 +4472,14 @@ var handleSaveAsComponent = async (params) => {
     }
     throw new Error("Unknown error");
   }
-  createUnpublishedComponent(componentName, element, null, overridableProps, uid);
+  await createUnpublishedComponent({
+    name: componentName,
+    element,
+    eventData: null,
+    uid,
+    overridableProps,
+    source: "mcp_tool"
+  });
   return {
     status: "ok",
     message: `Component "${componentName}" created successfully.`,