@elementor/editor-components 3.35.0-411 → 3.35.0-412

package/dist/index.mjs

@@ -76,6 +76,12 @@ var apiClient = {
       componentIds
     }
   ).then((res) => res.data.data),
+  updateComponentTitle: (updatedComponentNames) => httpService().post(
+    `${BASE_URL}/update-titles`,
+    {
+      components: updatedComponentNames
+    }
+  ).then((res) => res.data.data),
   validate: async (payload) => await httpService().post(`${BASE_URL}/create-validate`, payload).then((res) => res.data)
 };
 
@@ -94,7 +100,8 @@ var initialState = {
   createdThisSession: [],
   archivedData: [],
   path: [],
-  currentComponentId: null
+  currentComponentId: null,
+  updatedComponentNames: {}
 };
 var SLICE_NAME = "components";
 var slice = createSlice({
@@ -148,6 +155,19 @@ var slice = createSlice({
         return;
       }
       component.overridableProps = payload.overridableProps;
+    },
+    rename: (state, { payload }) => {
+      const component = state.data.find((comp) => comp.uid === payload.componentUid);
+      if (!component) {
+        return;
+      }
+      if (component.id) {
+        state.updatedComponentNames[component.id] = payload.name;
+      }
+      component.name = payload.name;
+    },
+    cleanUpdatedComponentNames: (state) => {
+      state.updatedComponentNames = {};
     }
   },
   extraReducers: (builder) => {
@@ -175,6 +195,7 @@ var selectComponent = (state, componentId) => state[SLICE_NAME].data.find((compo
 var useComponent = (componentId) => {
   return useSelector((state) => componentId ? selectComponent(state, componentId) : null);
 };
+var selectComponentByUid = (state, componentUid) => state[SLICE_NAME].data.find((component) => component.uid === componentUid) ?? state[SLICE_NAME].unpublishedData.find((component) => component.uid === componentUid);
 var selectComponents = createSelector(
   selectData,
   selectUnpublishedData,
@@ -238,6 +259,13 @@ var selectArchivedComponents = createSelector(
   selectArchivedData,
   (archivedData) => archivedData
 );
+var selectUpdatedComponentNames = createSelector(
+  (state) => state[SLICE_NAME].updatedComponentNames,
+  (updatedComponentNames) => Object.entries(updatedComponentNames).map(([componentId, title]) => ({
+    componentId: Number(componentId),
+    title
+  }))
+);
 
 // src/utils/component-document-data.ts
 import { getV1DocumentsManager } from "@elementor/editor-documents";
@@ -329,6 +357,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 { Box as Box7, Divider as Divider2, IconButton as IconButton4, Stack as Stack6, Tooltip as Tooltip3, Typography as Typography6 } from "@elementor/ui";
 import { __ as __11 } from "@wordpress/i18n";
 
@@ -1575,6 +1604,12 @@ var ComponentPanelHeader = () => {
   ));
 };
 function getComponentName() {
+  const state = getState9();
+  const path = state[SLICE_NAME].path;
+  const { instanceTitle } = path.at(-1) ?? {};
+  if (instanceTitle) {
+    return instanceTitle;
+  }
   const documentsManager = getV1DocumentsManager3();
   const currentDocument = documentsManager.getCurrent();
   return currentDocument?.container?.settings?.get("post_title") ?? "";
@@ -1636,7 +1671,7 @@ var ComponentSearch = () => {
 import * as React15 from "react";
 import { ComponentsIcon as ComponentsIcon2, EyeIcon } from "@elementor/icons";
 import { Box as Box11, Divider as Divider3, Icon, Link as Link3, List as List3, Stack as Stack10, Typography as Typography8 } from "@elementor/ui";
-import { __ as __15 } from "@wordpress/i18n";
+import { __ as __16 } from "@wordpress/i18n";
 
 // src/hooks/use-components.ts
 import { __useSelector as useSelector4 } from "@elementor/store";
@@ -1646,11 +1681,18 @@ var useComponents = () => {
   return { components, isLoading };
 };
 
+// src/store/actions/rename-component.ts
+import { __dispatch as dispatch8 } from "@elementor/store";
+var renameComponent = (componentUid, newName) => {
+  dispatch8(slice.actions.rename({ componentUid, name: newName }));
+};
+
 // src/components/components-tab/components-item.tsx
 import * as React13 from "react";
+import { useRef as useRef4 } from "react";
 import { endDragElementFromPanel, startDragElementFromPanel } from "@elementor/editor-canvas";
 import { dropElement } from "@elementor/editor-elements";
-import { EllipsisWithTooltip, MenuListItem as MenuListItem3 } from "@elementor/editor-ui";
+import { EditableField as EditableField2, EllipsisWithTooltip, MenuListItem as MenuListItem3, useEditable as useEditable2, WarningInfotip } from "@elementor/editor-ui";
 import { ComponentsIcon, DotsVerticalIcon as DotsVerticalIcon2 } from "@elementor/icons";
 import {
   bindMenu as bindMenu2,
@@ -1661,21 +1703,22 @@ import {
   ListItemIcon,
   Menu as Menu2,
   Stack as Stack8,
+  styled as styled3,
   Typography as Typography7,
   usePopupState as usePopupState3
 } from "@elementor/ui";
-import { __ as __14 } from "@wordpress/i18n";
+import { __ as __15 } from "@wordpress/i18n";
 
 // src/store/actions/archive-component.ts
 import { setDocumentModifiedStatus as setDocumentModifiedStatus3 } from "@elementor/editor-documents";
 import { __getStore as getStore } from "@elementor/store";
 var archiveComponent = (componentId) => {
   const store = getStore();
-  const dispatch16 = store?.dispatch;
-  if (!dispatch16) {
+  const dispatch18 = store?.dispatch;
+  if (!dispatch18) {
     return;
   }
-  dispatch16(slice.actions.archive(componentId));
+  dispatch18(slice.actions.archive(componentId));
   setDocumentModifiedStatus3(true);
 };
 
@@ -1687,11 +1730,12 @@ import {
   createTemplatedElementView
 } from "@elementor/editor-canvas";
 import { getCurrentDocument } from "@elementor/editor-documents";
+import { __getState as getState11 } from "@elementor/store";
 import { __ as __13 } from "@wordpress/i18n";
 
 // src/utils/tracking.ts
 import { getMixpanel } from "@elementor/mixpanel";
-import { __getState as getState9 } from "@elementor/store";
+import { __getState as getState10 } from "@elementor/store";
 var trackComponentEvent = ({ action, ...data }) => {
   const { dispatchEvent, config } = getMixpanel();
   if (!config?.names?.components?.[action]) {
@@ -1708,7 +1752,7 @@ var onElementDrop = (_args, element) => {
   const componentName = editorSettings?.title;
   const componentUID = editorSettings?.component_uid;
   const instanceId = element.id;
-  const createdThisSession = selectCreatedThisSession(getState9());
+  const createdThisSession = selectCreatedThisSession(getState10());
   const isSameSessionReuse = componentUID && createdThisSession.includes(componentUID);
   const eventsManagerConfig = window.elementorCommon.eventsManager.config;
   const { locations, secondaryLocations } = eventsManagerConfig;
@@ -1742,13 +1786,17 @@ var updateGroups = (groups, config) => {
 };
 function createComponentType(options) {
   const legacyWindow = window;
-  return class extends legacyWindow.elementor.modules.elements.types.Widget {
+  const WidgetType = legacyWindow.elementor.modules.elements.types.Widget;
+  return class extends WidgetType {
     getType() {
       return options.type;
     }
     getView() {
       return createComponentView({ ...options });
     }
+    getModel() {
+      return createComponentModel();
+    }
   };
 }
 function createComponentView(options) {
@@ -1878,6 +1926,49 @@ function setInactiveRecursively(model) {
     });
   }
 }
+function createComponentModel() {
+  const legacyWindow = window;
+  const WidgetType = legacyWindow.elementor.modules.elements.types.Widget;
+  const widgetTypeInstance = new WidgetType();
+  const BaseWidgetModel = widgetTypeInstance.getModel();
+  return BaseWidgetModel.extend({
+    initialize(attributes, options) {
+      BaseWidgetModel.prototype.initialize.call(this, attributes, options);
+      const componentInstance = this.get("settings")?.get("component_instance");
+      if (componentInstance?.value) {
+        const componentId = componentInstance.value.component_id?.value;
+        if (componentId && typeof componentId === "number") {
+          this.set("componentId", componentId);
+        }
+      }
+    },
+    getTitle() {
+      const editorSettings = this.get("editor_settings");
+      const instanceTitle = editorSettings?.title;
+      if (instanceTitle) {
+        return instanceTitle;
+      }
+      const componentUid = editorSettings?.component_uid;
+      if (componentUid) {
+        const component = selectComponentByUid(getState11(), componentUid);
+        if (component?.name) {
+          return component.name;
+        }
+      }
+      return window.elementor.getElementData(this).title;
+    },
+    getComponentId() {
+      return this.get("componentId") || null;
+    },
+    getComponentName() {
+      return this.getTitle();
+    },
+    getComponentUid() {
+      const editorSettings = this.get("editor_settings");
+      return editorSettings?.component_uid || null;
+    }
+  });
+}
 
 // src/utils/is-component-instance.ts
 function isComponentInstance(elementModel) {
@@ -1911,7 +2002,7 @@ var getComponentIds = async (elements) => {
 };
 
 // src/store/actions/load-components-overridable-props.ts
-import { __dispatch as dispatch8, __getState as getState10 } from "@elementor/store";
+import { __dispatch as dispatch9, __getState as getState12 } from "@elementor/store";
 function loadComponentsOverridableProps(componentIds) {
   if (!componentIds.length) {
     return;
@@ -1919,7 +2010,7 @@ function loadComponentsOverridableProps(componentIds) {
   componentIds.forEach(loadComponentOverrides);
 }
 async function loadComponentOverrides(componentId) {
-  const isOverridablePropsLoaded = selectIsOverridablePropsLoaded(getState10(), componentId);
+  const isOverridablePropsLoaded = selectIsOverridablePropsLoaded(getState12(), componentId);
   if (isOverridablePropsLoaded) {
     return;
   }
@@ -1927,7 +2018,7 @@ async function loadComponentOverrides(componentId) {
   if (!overridableProps) {
     return;
   }
-  dispatch8(
+  dispatch9(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps
@@ -1936,12 +2027,12 @@ async function loadComponentOverrides(componentId) {
 }
 
 // src/store/actions/load-components-styles.ts
-import { __dispatch as dispatch9, __getState as getState11 } from "@elementor/store";
+import { __dispatch as dispatch10, __getState as getState13 } from "@elementor/store";
 async function loadComponentsStyles(componentIds) {
   if (!componentIds.length) {
     return;
   }
-  const knownComponents = selectStyles(getState11());
+  const knownComponents = selectStyles(getState13());
   const unknownComponentIds = componentIds.filter((id2) => !knownComponents[id2]);
   if (!unknownComponentIds.length) {
     return;
@@ -1959,7 +2050,7 @@ function addStyles(data) {
   const styles = Object.fromEntries(
     data.map(([componentId, componentData]) => [componentId, extractStyles(componentData)])
   );
-  dispatch9(slice.actions.addStyles(styles));
+  dispatch10(slice.actions.addStyles(styles));
 }
 function extractStyles(element) {
   return [...Object.values(element.styles ?? {}), ...(element.elements ?? []).flatMap(extractStyles)];
@@ -1984,6 +2075,52 @@ async function updateDocumentState(componentIds) {
   }
 }
 
+// src/utils/component-name-validation.ts
+import { __getState as getState14 } from "@elementor/store";
+
+// src/components/create-component-form/utils/component-form-schema.ts
+import { z } from "@elementor/schema";
+import { __ as __14 } from "@wordpress/i18n";
+var MIN_NAME_LENGTH = 2;
+var MAX_NAME_LENGTH = 50;
+var baseComponentSchema = z.string().trim().max(MAX_NAME_LENGTH, __14("Component name is too long. Please keep it under 50 characters.", "elementor"));
+var createBaseComponentSchema = (existingNames) => {
+  return z.object({
+    componentName: baseComponentSchema.refine((value) => !existingNames.includes(value), {
+      message: __14("Component name already exists", "elementor")
+    })
+  });
+};
+var createSubmitComponentSchema = (existingNames) => {
+  const baseSchema = createBaseComponentSchema(existingNames);
+  return baseSchema.extend({
+    componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
+      message: __14("Component name is required.", "elementor")
+    }).refine((value) => value.length >= MIN_NAME_LENGTH, {
+      message: __14("Component name is too short. Please enter at least 2 characters.", "elementor")
+    })
+  });
+};
+
+// src/utils/component-name-validation.ts
+function validateComponentName(label) {
+  const existingComponentTitles = selectComponents(getState14())?.map(({ name }) => name) ?? [];
+  const schema = createSubmitComponentSchema(existingComponentTitles);
+  const result = schema.safeParse({ componentName: label.toLowerCase() });
+  if (result.success) {
+    return {
+      isValid: true,
+      errorMessage: null
+    };
+  }
+  const formattedErrors = result.error.format();
+  const errorMessage = formattedErrors.componentName?._errors[0] ?? formattedErrors._errors[0];
+  return {
+    isValid: false,
+    errorMessage
+  };
+}
+
 // src/utils/get-container-for-new-element.ts
 import {
   getContainer as getContainer2,
@@ -2029,11 +2166,11 @@ import { replaceElement } from "@elementor/editor-elements";
 var replaceElementWithComponent = (element, component) => {
   replaceElement({
     currentElement: element,
-    newElement: createComponentModel(component),
+    newElement: createComponentModel2(component),
     withHistory: false
   });
 };
-var createComponentModel = (component) => {
+var createComponentModel2 = (component) => {
   return {
     elType: "widget",
     widgetType: "e-component",
@@ -2050,15 +2187,26 @@ var createComponentModel = (component) => {
       overridable_props: component.overridableProps
     },
     editor_settings: {
-      title: component.name,
       component_uid: component.uid
     }
   };
 };
 
 // src/components/components-tab/components-item.tsx
-var ComponentItem = ({ component }) => {
-  const componentModel = createComponentModel(component);
+var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
+  const itemRef = useRef4(null);
+  const {
+    ref: editableRef,
+    isEditing,
+    openEditMode,
+    error,
+    getProps: getEditableProps
+  } = useEditable2({
+    value: component.name,
+    onSubmit: renameComponent2,
+    validation: validateComponentTitle
+  });
+  const componentModel = createComponentModel2(component);
   const popupState = usePopupState3({
     variant: "popover",
     disableAutoFocus: true
@@ -2078,47 +2226,64 @@ var ComponentItem = ({ component }) => {
     archiveComponent(component.id);
   };
   return /* @__PURE__ */ React13.createElement(Stack8, null, /* @__PURE__ */ React13.createElement(
-    ListItemButton,
+    WarningInfotip,
     {
-      draggable: true,
-      onDragStart: (event) => startDragElementFromPanel(componentModel, event),
-      onDragEnd: handleDragEnd,
-      shape: "rounded",
-      sx: {
-        border: "solid 1px",
-        borderColor: "divider",
-        py: 0.5,
-        px: 1,
-        display: "flex",
-        width: "100%",
-        alignItems: "center",
-        gap: 1
-      }
+      open: Boolean(error),
+      text: error ?? "",
+      placement: "bottom",
+      width: itemRef.current?.getBoundingClientRect().width,
+      offset: [0, -15]
     },
     /* @__PURE__ */ React13.createElement(
-      Box9,
+      ListItemButton,
       {
-        onClick: handleClick,
+        draggable: true,
+        onDragStart: (event) => startDragElementFromPanel(componentModel, event),
+        onDragEnd: handleDragEnd,
+        shape: "rounded",
+        ref: itemRef,
         sx: {
+          border: "solid 1px",
+          borderColor: "divider",
+          py: 0.5,
+          px: 1,
           display: "flex",
+          width: "100%",
           alignItems: "center",
-          gap: 1,
-          minWidth: 0,
-          flexGrow: 1
+          gap: 1
         }
       },
-      /* @__PURE__ */ React13.createElement(ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React13.createElement(ComponentsIcon, { fontSize: "tiny" })),
-      /* @__PURE__ */ React13.createElement(Box9, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, /* @__PURE__ */ React13.createElement(
-        EllipsisWithTooltip,
+      /* @__PURE__ */ React13.createElement(
+        Box9,
         {
-          title: component.name,
-          as: Typography7,
-          variant: "caption",
-          color: "text.primary"
-        }
-      ))
-    ),
-    /* @__PURE__ */ React13.createElement(IconButton5, { size: "tiny", ...bindTrigger3(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React13.createElement(DotsVerticalIcon2, { fontSize: "tiny" }))
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
+          minWidth: 0,
+          flexGrow: 1,
+          onClick: handleClick
+        },
+        /* @__PURE__ */ React13.createElement(ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React13.createElement(ComponentsIcon, { fontSize: "tiny" })),
+        /* @__PURE__ */ React13.createElement(Indicator, { isActive: isEditing, isError: !!error }, /* @__PURE__ */ React13.createElement(Box9, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, isEditing ? /* @__PURE__ */ React13.createElement(
+          EditableField2,
+          {
+            ref: editableRef,
+            as: Typography7,
+            variant: "caption",
+            ...getEditableProps()
+          }
+        ) : /* @__PURE__ */ React13.createElement(
+          EllipsisWithTooltip,
+          {
+            title: component.name,
+            as: Typography7,
+            variant: "caption",
+            color: "text.primary"
+          }
+        )))
+      ),
+      /* @__PURE__ */ React13.createElement(IconButton5, { size: "tiny", ...bindTrigger3(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React13.createElement(DotsVerticalIcon2, { fontSize: "tiny" }))
+    )
   ), /* @__PURE__ */ React13.createElement(
     Menu2,
     {
@@ -2132,7 +2297,18 @@ var ComponentItem = ({ component }) => {
         horizontal: "right"
       }
     },
-    /* @__PURE__ */ React13.createElement(MenuListItem3, { sx: { minWidth: "160px" }, onClick: handleArchiveClick }, __14("Archive", "elementor"))
+    /* @__PURE__ */ React13.createElement(
+      MenuListItem3,
+      {
+        sx: { minWidth: "160px" },
+        onClick: () => {
+          popupState.close();
+          openEditMode();
+        }
+      },
+      __15("Rename", "elementor")
+    ),
+    /* @__PURE__ */ React13.createElement(MenuListItem3, { sx: { minWidth: "160px" }, onClick: handleArchiveClick }, /* @__PURE__ */ React13.createElement(Typography7, { variant: "caption", sx: { color: "error.light" } }, __15("Archive", "elementor")))
   ));
 };
 var addComponentToPage = (model) => {
@@ -2147,6 +2323,34 @@ var addComponentToPage = (model) => {
     options: { ...options, useHistory: false, scrollIntoView: true }
   });
 };
+var validateComponentTitle = (newTitle) => {
+  const result = validateComponentName(newTitle);
+  if (!result.errorMessage) {
+    return null;
+  }
+  return result.errorMessage;
+};
+var Indicator = styled3(Box9, {
+  shouldForwardProp: (prop) => prop !== "isActive" && prop !== "isError"
+})(({ theme, isActive, isError }) => ({
+  display: "flex",
+  width: "100%",
+  flexGrow: 1,
+  borderRadius: theme.spacing(0.5),
+  border: getIndicatorBorder({ isActive, isError, theme }),
+  padding: `0 ${theme.spacing(1)}`,
+  marginLeft: isActive ? theme.spacing(1) : 0,
+  minWidth: 0
+}));
+var getIndicatorBorder = ({ isActive, isError, theme }) => {
+  if (isError) {
+    return `2px solid ${theme.palette.error.main}`;
+  }
+  if (isActive) {
+    return `2px solid ${theme.palette.secondary.main}`;
+  }
+  return "none";
+};
 
 // src/components/components-tab/loading-components.tsx
 import * as React14 from "react";
@@ -2201,7 +2405,16 @@ function ComponentsList() {
     }
     return /* @__PURE__ */ React15.createElement(EmptyState, null);
   }
-  return /* @__PURE__ */ React15.createElement(List3, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React15.createElement(ComponentItem, { key: component.uid, component })));
+  return /* @__PURE__ */ React15.createElement(List3, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React15.createElement(
+    ComponentItem,
+    {
+      key: component.uid,
+      component,
+      renameComponent: (newName) => {
+        renameComponent(component.uid, newName);
+      }
+    }
+  )));
 }
 var EmptyState = () => {
   return /* @__PURE__ */ React15.createElement(
@@ -2215,13 +2428,13 @@ var EmptyState = () => {
       overflow: "hidden"
     },
     /* @__PURE__ */ React15.createElement(Icon, { fontSize: "large" }, /* @__PURE__ */ React15.createElement(EyeIcon, { fontSize: "large" })),
-    /* @__PURE__ */ React15.createElement(Typography8, { align: "center", variant: "subtitle2", color: "text.secondary", fontWeight: "bold" }, __15("Text that explains that there are no Components yet.", "elementor")),
-    /* @__PURE__ */ React15.createElement(Typography8, { variant: "caption", align: "center", color: "text.secondary" }, __15(
+    /* @__PURE__ */ React15.createElement(Typography8, { align: "center", variant: "subtitle2", color: "text.secondary", fontWeight: "bold" }, __16("Text that explains that there are no Components yet.", "elementor")),
+    /* @__PURE__ */ React15.createElement(Typography8, { variant: "caption", align: "center", color: "text.secondary" }, __16(
       "Once you have Components, this is where you can manage them\u2014rearrange, duplicate, rename and delete irrelevant classes.",
       "elementor"
     )),
     /* @__PURE__ */ React15.createElement(Divider3, { sx: { width: "100%" }, color: "text.secondary" }),
-    /* @__PURE__ */ React15.createElement(Typography8, { align: "left", variant: "caption", color: "text.secondary" }, __15("To create a component, first design it, then choose one of three options:", "elementor")),
+    /* @__PURE__ */ React15.createElement(Typography8, { align: "left", variant: "caption", color: "text.secondary" }, __16("To create a component, first design it, then choose one of three options:", "elementor")),
     /* @__PURE__ */ React15.createElement(
       Typography8,
       {
@@ -2230,9 +2443,9 @@ var EmptyState = () => {
         color: "text.secondary",
         sx: { display: "flex", flexDirection: "column" }
       },
-      /* @__PURE__ */ React15.createElement("span", null, __15("1. Right-click and select Create Component", "elementor")),
-      /* @__PURE__ */ React15.createElement("span", null, __15("2. Use the component icon in the Structure panel", "elementor")),
-      /* @__PURE__ */ React15.createElement("span", null, __15("3. Use the component icon in the Edit panel header", "elementor"))
+      /* @__PURE__ */ React15.createElement("span", null, __16("1. Right-click and select Create Component", "elementor")),
+      /* @__PURE__ */ React15.createElement("span", null, __16("2. Use the component icon in the Structure panel", "elementor")),
+      /* @__PURE__ */ React15.createElement("span", null, __16("3. Use the component icon in the Edit panel header", "elementor"))
     )
   );
 };
@@ -2256,7 +2469,7 @@ var EmptySearchResult = () => {
           width: "100%"
         }
       },
-      /* @__PURE__ */ React15.createElement(Typography8, { align: "center", variant: "subtitle2", color: "inherit" }, __15("Sorry, nothing matched", "elementor")),
+      /* @__PURE__ */ React15.createElement(Typography8, { align: "center", variant: "subtitle2", color: "inherit" }, __16("Sorry, nothing matched", "elementor")),
       searchValue && /* @__PURE__ */ React15.createElement(
         Typography8,
         {
@@ -2283,8 +2496,8 @@ var EmptySearchResult = () => {
         /* @__PURE__ */ React15.createElement("span", null, "\u201D.")
       )
     ),
-    /* @__PURE__ */ React15.createElement(Typography8, { align: "center", variant: "caption", color: "inherit" }, __15("Try something else.", "elementor")),
-    /* @__PURE__ */ React15.createElement(Typography8, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React15.createElement(Link3, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, __15("Clear & try again", "elementor")))
+    /* @__PURE__ */ React15.createElement(Typography8, { align: "center", variant: "caption", color: "inherit" }, __16("Try something else.", "elementor")),
+    /* @__PURE__ */ React15.createElement(Typography8, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React15.createElement(Link3, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, __16("Clear & try again", "elementor")))
   );
 };
 var useFilteredComponents = () => {
@@ -2309,7 +2522,7 @@ var COMPONENT_DOCUMENT_TYPE = "elementor_component";
 
 // src/components/create-component-form/create-component-form.tsx
 import * as React17 from "react";
-import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef4, useState as useState7 } from "react";
+import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef5, useState as useState7 } from "react";
 import { getElementLabel } from "@elementor/editor-elements";
 import { notify as notify2 } from "@elementor/editor-notifications";
 import { Form as FormElement, ThemeProvider as ThemeProvider3 } from "@elementor/editor-ui";
@@ -2323,10 +2536,10 @@ import { getAllDescendants, getElementType } from "@elementor/editor-elements";
 import { notify } from "@elementor/editor-notifications";
 import { blockCommand } from "@elementor/editor-v1-adapters";
 import { __getStore as getStore2 } from "@elementor/store";
-import { __ as __16 } from "@wordpress/i18n";
+import { __ as __17 } from "@wordpress/i18n";
 var NON_ATOMIC_ELEMENT_ALERT = {
   type: "default",
-  message: __16("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
+  message: __17("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
   id: "non-atomic-element-blocked"
 };
 function initNonAtomicNestingPrevention() {
@@ -2433,18 +2646,18 @@ function findNonAtomicElementsInElement(element) {
 
 // src/store/actions/create-unpublished-component.ts
 import { __privateRunCommand as runCommand2 } from "@elementor/editor-v1-adapters";
-import { __dispatch as dispatch10 } from "@elementor/store";
+import { __dispatch as dispatch11 } from "@elementor/store";
 import { generateUniqueId as generateUniqueId3 } from "@elementor/utils";
 function createUnpublishedComponent(name, element, eventData, overridableProps, uid) {
   const generatedUid = uid ?? generateUniqueId3("component");
   const componentBase = { uid: generatedUid, name, overridableProps };
-  dispatch10(
+  dispatch11(
     slice.actions.addUnpublished({
       ...componentBase,
       elements: [element]
     })
   );
-  dispatch10(slice.actions.addCreatedThisSession(generatedUid));
+  dispatch11(slice.actions.addCreatedThisSession(generatedUid));
   replaceElementWithComponent(element, componentBase);
   trackComponentEvent({
     action: "created",
@@ -2505,32 +2718,6 @@ var validateForm = (values, schema) => {
   return { success: false, errors };
 };
 
-// src/components/create-component-form/utils/component-form-schema.ts
-import { z } from "@elementor/schema";
-import { __ as __17 } from "@wordpress/i18n";
-var MIN_NAME_LENGTH = 2;
-var MAX_NAME_LENGTH = 50;
-var createBaseComponentSchema = (existingNames) => {
-  return z.object({
-    componentName: z.string().trim().max(
-      MAX_NAME_LENGTH,
-      __17("Component name is too long. Please keep it under 50 characters.", "elementor")
-    ).refine((value) => !existingNames.includes(value), {
-      message: __17("Component name already exists", "elementor")
-    })
-  });
-};
-var createSubmitComponentSchema = (existingNames) => {
-  const baseSchema = createBaseComponentSchema(existingNames);
-  return baseSchema.extend({
-    componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
-      message: __17("Component name is required.", "elementor")
-    }).refine((value) => value.length >= MIN_NAME_LENGTH, {
-      message: __17("Component name is too short. Please enter at least 2 characters.", "elementor")
-    })
-  });
-};
-
 // src/components/create-component-form/utils/get-component-event-data.ts
 var getComponentEventData = (containerElement, options) => {
   const { elementsCount, componentsCount } = countNestedElements(containerElement);
@@ -2565,7 +2752,7 @@ function CreateComponentForm() {
   const [element, setElement] = useState7(null);
   const [anchorPosition, setAnchorPosition] = useState7();
   const [resultNotification, setResultNotification] = useState7(null);
-  const eventData = useRef4(null);
+  const eventData = useRef5(null);
   useEffect2(() => {
     const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
     const openPopup = (event) => {
@@ -2726,12 +2913,12 @@ function updateCurrentComponent({
   path,
   currentComponentId
 }) {
-  const dispatch16 = getStore3()?.dispatch;
-  if (!dispatch16) {
+  const dispatch18 = getStore3()?.dispatch;
+  if (!dispatch18) {
     return;
   }
-  dispatch16(slice.actions.setPath(path));
-  dispatch16(slice.actions.setCurrentComponentId(currentComponentId));
+  dispatch18(slice.actions.setPath(path));
+  dispatch18(slice.actions.setCurrentComponentId(currentComponentId));
 }
 
 // src/components/edit-component/component-modal.tsx
@@ -2955,14 +3142,31 @@ function getUpdatedComponentPath(path, nextDocument) {
   if (componentIndex >= 0) {
     return path.slice(0, componentIndex + 1);
   }
+  const instanceId = nextDocument?.container.view?.el?.dataset.id;
+  const instanceTitle = getInstanceTitle(instanceId, path);
   return [
     ...path,
     {
-      instanceId: nextDocument?.container.view?.el?.dataset.id,
+      instanceId,
+      instanceTitle,
       componentId: nextDocument.id
     }
   ];
 }
+function getInstanceTitle(instanceId, path) {
+  if (!instanceId) {
+    return void 0;
+  }
+  const documentsManager = getV1DocumentsManager4();
+  const parentDocId = path.at(-1)?.componentId ?? documentsManager.getInitialId();
+  const parentDoc = documentsManager.get(parentDocId);
+  const parentContainer = parentDoc?.container;
+  const widget = parentContainer?.children?.findRecursive?.(
+    (container) => container.id === instanceId
+  );
+  const editorSettings = widget?.model?.get?.("editor_settings");
+  return editorSettings?.title;
+}
 function getComponentDOMElement(id2) {
   if (!id2) {
     return null;
@@ -3142,9 +3346,9 @@ function getControlsByBind(controls) {
 }
 
 // src/store/actions/update-overridable-prop.ts
-import { __dispatch as dispatch11, __getState as getState12 } from "@elementor/store";
+import { __dispatch as dispatch12, __getState as getState15 } from "@elementor/store";
 function updateOverridableProp(componentId, propValue, originPropFields) {
-  const overridableProps = selectOverridableProps(getState12(), componentId);
+  const overridableProps = selectOverridableProps(getState15(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -3168,7 +3372,7 @@ function updateOverridableProp(componentId, propValue, originPropFields) {
       }
     }
   };
-  dispatch11(
+  dispatch12(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: newOverridableProps
@@ -3453,7 +3657,7 @@ import { bindPopover as bindPopover2, bindTrigger as bindTrigger4, Popover as Po
 import { __ as __24 } from "@wordpress/i18n";
 
 // src/store/actions/set-overridable-prop.ts
-import { __dispatch as dispatch12, __getState as getState13 } from "@elementor/store";
+import { __dispatch as dispatch13, __getState as getState16 } from "@elementor/store";
 import { generateUniqueId as generateUniqueId4 } from "@elementor/utils";
 function setOverridableProp({
   componentId,
@@ -3467,7 +3671,7 @@ function setOverridableProp({
   originValue,
   originPropFields
 }) {
-  const overridableProps = selectOverridableProps(getState13(), componentId);
+  const overridableProps = selectOverridableProps(getState16(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -3504,7 +3708,7 @@ function setOverridableProp({
   if (isChangingGroups) {
     groups = removePropFromGroup(groups, existingOverridableProp.groupId, overridableProp.overrideKey);
   }
-  dispatch12(
+  dispatch13(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -3520,10 +3724,10 @@ function setOverridableProp({
 import * as React28 from "react";
 import { forwardRef as forwardRef2 } from "react";
 import { CheckIcon, PlusIcon } from "@elementor/icons";
-import { Box as Box14, styled as styled3 } from "@elementor/ui";
+import { Box as Box14, styled as styled4 } from "@elementor/ui";
 import { __ as __23 } from "@wordpress/i18n";
 var SIZE2 = "tiny";
-var IconContainer = styled3(Box14)`
+var IconContainer = styled4(Box14)`
 	pointer-events: none;
 	opacity: 0;
 	transition: opacity 0.2s ease-in-out;
@@ -3540,7 +3744,7 @@ var IconContainer = styled3(Box14)`
 		stroke-width: 2px;
 	}
 `;
-var Content = styled3(Box14)`
+var Content = styled4(Box14)`
 	position: relative;
 	display: flex;
 	align-items: center;
@@ -3577,7 +3781,7 @@ var Content = styled3(Box14)`
 		}
 	}
 `;
-var Indicator = forwardRef2(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React28.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React28.createElement(
+var Indicator2 = forwardRef2(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React28.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React28.createElement(
   IconContainer,
   {
     className: "icon",
@@ -3587,12 +3791,12 @@ var Indicator = forwardRef2(({ isOpen, isOverridable, ...props }, ref) => /* @__
 )));
 
 // src/components/overridable-props/utils/get-overridable-prop.ts
-import { __getState as getState14 } from "@elementor/store";
+import { __getState as getState17 } from "@elementor/store";
 function getOverridableProp({
   componentId,
   overrideKey
 }) {
-  const overridableProps = selectOverridableProps(getState14(), componentId);
+  const overridableProps = selectOverridableProps(getState17(), componentId);
   if (!overridableProps) {
     return void 0;
   }
@@ -3652,7 +3856,7 @@ function Content2({ componentId, overridableProps }) {
     popupState.close();
   };
   const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
-  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(Tooltip5, { placement: "top", title: __24("Override Property", "elementor") }, /* @__PURE__ */ React29.createElement(Indicator, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(Tooltip5, { placement: "top", title: __24("Override Property", "elementor") }, /* @__PURE__ */ React29.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React29.createElement(
     Popover4,
     {
       disableScrollLock: true,
@@ -4102,10 +4306,10 @@ function initMcp() {
 
 // src/populate-store.ts
 import { useEffect as useEffect6 } from "react";
-import { __dispatch as dispatch13 } from "@elementor/store";
+import { __dispatch as dispatch14 } from "@elementor/store";
 function PopulateStore() {
   useEffect6(() => {
-    dispatch13(loadComponents());
+    dispatch14(loadComponents());
   }, []);
   return null;
 }
@@ -4114,7 +4318,7 @@ function PopulateStore() {
 import { getAllDescendants as getAllDescendants3 } from "@elementor/editor-elements";
 import { notify as notify3 } from "@elementor/editor-notifications";
 import { blockCommand as blockCommand2 } from "@elementor/editor-v1-adapters";
-import { __getState as getState15 } from "@elementor/store";
+import { __getState as getState18 } from "@elementor/store";
 import { __ as __25 } from "@wordpress/i18n";
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
@@ -4140,7 +4344,7 @@ function wouldCreateCircularNesting(componentIdToAdd) {
   if (componentIdToAdd === void 0) {
     return false;
   }
-  const state = getState15();
+  const state = getState18();
   const currentComponentId = selectCurrentComponentId(state);
   const path = selectPath(state);
   if (currentComponentId === null) {
@@ -4238,15 +4442,15 @@ function blockCircularPaste(args) {
 }
 
 // src/store/actions/remove-component-styles.ts
-import { __dispatch as dispatch14 } from "@elementor/store";
+import { __dispatch as dispatch15 } from "@elementor/store";
 function removeComponentStyles(id2) {
   apiClient.invalidateComponentConfigCache(id2);
-  dispatch14(slice.actions.removeStyles({ id: id2 }));
+  dispatch15(slice.actions.removeStyles({ id: id2 }));
 }
 
 // src/store/components-styles-provider.ts
 import { createStylesProvider } from "@elementor/editor-styles-repository";
-import { __getState as getState16, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
+import { __getState as getState19, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
 var componentsStylesProvider = createStylesProvider({
   key: "components-styles",
   priority: 100,
@@ -4258,29 +4462,29 @@ var componentsStylesProvider = createStylesProvider({
   ),
   actions: {
     all: () => {
-      return selectFlatStyles(getState16());
+      return selectFlatStyles(getState19());
     },
     get: (id2) => {
-      return selectFlatStyles(getState16()).find((style) => style.id === id2) ?? null;
+      return selectFlatStyles(getState19()).find((style) => style.id === id2) ?? null;
     }
   }
 });
 
 // src/sync/create-components-before-save.ts
 import { updateElementSettings as updateElementSettings3 } from "@elementor/editor-elements";
-import { __dispatch as dispatch15, __getState as getState17 } from "@elementor/store";
+import { __dispatch as dispatch16, __getState as getState20 } from "@elementor/store";
 async function createComponentsBeforeSave({
   elements,
   status
 }) {
-  const unpublishedComponents = selectUnpublishedComponents(getState17());
+  const unpublishedComponents = selectUnpublishedComponents(getState20());
   if (!unpublishedComponents.length) {
     return;
   }
   try {
     const uidToComponentId = await createComponents(unpublishedComponents, status);
     updateComponentInstances(elements, uidToComponentId);
-    dispatch15(
+    dispatch16(
       slice.actions.add(
         unpublishedComponents.map((component) => ({
           id: uidToComponentId.get(component.uid),
@@ -4290,7 +4494,7 @@ async function createComponentsBeforeSave({
         }))
       )
     );
-    dispatch15(slice.actions.resetUnpublished());
+    dispatch16(slice.actions.resetUnpublished());
   } catch (error) {
     throw new Error(`Failed to publish components and update component instances: ${error}`);
   }
@@ -4350,7 +4554,7 @@ function updateElementComponentId(elementId, componentId) {
 }
 
 // src/sync/set-component-overridable-props-settings-before-save.ts
-import { __getState as getState18 } from "@elementor/store";
+import { __getState as getState21 } from "@elementor/store";
 var setComponentOverridablePropsSettingsBeforeSave = ({
   container
 }) => {
@@ -4358,7 +4562,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
   if (!currentDocument || currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE) {
     return;
   }
-  const overridableProps = selectOverridableProps(getState18(), currentDocument.id);
+  const overridableProps = selectOverridableProps(getState21(), currentDocument.id);
   if (overridableProps) {
     container.settings.set("overridable_props", overridableProps);
   }
@@ -4366,7 +4570,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
 
 // src/sync/update-archived-component-before-save.ts
 import { notify as notify4 } from "@elementor/editor-notifications";
-import { __getState as getState19 } from "@elementor/store";
+import { __getState as getState22 } from "@elementor/store";
 var failedNotification = (message) => ({
   type: "error",
   message: `Failed to archive components: ${message}`,
@@ -4379,7 +4583,7 @@ var successNotification = (message) => ({
 });
 var updateArchivedComponentBeforeSave = async () => {
   try {
-    const archivedComponents = selectArchivedComponents(getState19());
+    const archivedComponents = selectArchivedComponents(getState22());
     if (!archivedComponents.length) {
       return;
     }
@@ -4399,6 +4603,19 @@ var updateArchivedComponentBeforeSave = async () => {
   }
 };
 
+// src/sync/update-component-title-before-save.ts
+import { __dispatch as dispatch17, __getState as getState23 } from "@elementor/store";
+var updateComponentTitleBeforeSave = async () => {
+  const updatedComponentNames = selectUpdatedComponentNames(getState23());
+  if (!updatedComponentNames.length) {
+    return;
+  }
+  const result = await apiClient.updateComponentTitle(updatedComponentNames);
+  if (result.failedIds.length === 0) {
+    dispatch17(slice.actions.cleanUpdatedComponentNames());
+  }
+};
+
 // src/sync/update-components-before-save.ts
 import { isDocumentDirty as isDocumentDirty2 } from "@elementor/editor-documents";
 async function updateComponentsBeforeSave({ status, elements }) {
@@ -4422,7 +4639,8 @@ var beforeSave = ({ container, status }) => {
     updateArchivedComponentBeforeSave(),
     createComponentsBeforeSave({ elements, status }),
     updateComponentsBeforeSave({ elements, status }),
-    setComponentOverridablePropsSettingsBeforeSave({ container })
+    setComponentOverridablePropsSettingsBeforeSave({ container }),
+    updateComponentTitleBeforeSave()
   ]);
 };