@elementor/editor-components 4.0.0-506 → 4.0.0-509

package/dist/index.js

@@ -48,7 +48,7 @@ var import_i18n31 = require("@wordpress/i18n");
 
 // src/component-instance-transformer.ts
 var import_editor_canvas = require("@elementor/editor-canvas");
-var import_store5 = require("@elementor/store");
+var import_store3 = require("@elementor/store");
 
 // src/store/store.ts
 var import_store2 = require("@elementor/store");
@@ -188,12 +188,6 @@ var slice = (0, import_store2.__createSlice)({
       }
       component.overridableProps = payload.overridableProps;
     },
-    clearOverridableProps: (state, { payload }) => {
-      const component = state.data.find((comp) => comp.id === payload.componentId);
-      if (component) {
-        component.overridableProps = void 0;
-      }
-    },
     rename: (state, { payload }) => {
       const component = state.data.find((comp) => comp.uid === payload.componentUid);
       if (!component) {
@@ -311,7 +305,6 @@ var selectUpdatedComponentNames = (0, import_store2.__createSelector)(
 
 // src/utils/component-document-data.ts
 var import_editor_documents = require("@elementor/editor-documents");
-var import_store3 = require("@elementor/store");
 var getComponentDocumentData = async (id2) => {
   const documentManager = (0, import_editor_documents.getV1DocumentsManager)();
   try {
@@ -320,11 +313,9 @@ var getComponentDocumentData = async (id2) => {
     return null;
   }
 };
-var invalidateComponentCache = (id2) => {
+var invalidateComponentDocumentData = (id2) => {
   const documentManager = (0, import_editor_documents.getV1DocumentsManager)();
   documentManager.invalidateCache(id2);
-  (0, import_store3.__dispatch)(slice.actions.removeStyles({ id: id2 }));
-  (0, import_store3.__dispatch)(slice.actions.clearOverridableProps({ componentId: id2 }));
 };
 
 // src/component-instance-transformer.ts
@@ -333,7 +324,7 @@ var componentInstanceTransformer = (0, import_editor_canvas.createTransformer)(
     component_id: id2,
     overrides: overridesValue
   }) => {
-    const unpublishedComponents = selectUnpublishedComponents((0, import_store5.__getState)());
+    const unpublishedComponents = selectUnpublishedComponents((0, import_store3.__getState)());
     const unpublishedComponent = unpublishedComponents.find(({ uid }) => uid === id2);
     const overrides = overridesValue?.reduce((acc, override) => ({ ...acc, ...override }), {});
     if (unpublishedComponent) {
@@ -401,14 +392,14 @@ var import_editor_documents6 = require("@elementor/editor-documents");
 var import_editor_panels3 = require("@elementor/editor-panels");
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons7 = require("@elementor/icons");
-var import_store31 = require("@elementor/store");
+var import_store29 = require("@elementor/store");
 var import_ui10 = require("@elementor/ui");
 var import_i18n13 = require("@wordpress/i18n");
 
 // src/hooks/use-navigate-back.ts
 var import_react = require("react");
 var import_editor_documents2 = require("@elementor/editor-documents");
-var import_store7 = require("@elementor/store");
+var import_store5 = require("@elementor/store");
 
 // src/utils/switch-to-component.ts
 var import_editor_elements = require("@elementor/editor-elements");
@@ -423,7 +414,6 @@ async function expandNavigator() {
 // src/utils/switch-to-component.ts
 async function switchToComponent(componentId, componentInstanceId, element) {
   const selector = getSelector(element, componentInstanceId);
-  invalidateComponentCache(componentId);
   await (0, import_editor_v1_adapters3.__privateRunCommand)("editor/documents/switch", {
     id: componentId,
     selector,
@@ -469,7 +459,7 @@ function buildUniqueSelector(element) {
 
 // src/hooks/use-navigate-back.ts
 function useNavigateBack() {
-  const path = (0, import_store7.__useSelector)(selectPath);
+  const path = (0, import_store5.__useSelector)(selectPath);
   const documentsManager = (0, import_editor_documents2.getV1DocumentsManager)();
   return (0, import_react.useCallback)(() => {
     const { componentId: prevComponentId, instanceId: prevComponentInstanceId } = path.at(-2) ?? {};
@@ -483,7 +473,7 @@ function useNavigateBack() {
 
 // src/utils/tracking.ts
 var import_mixpanel = require("@elementor/mixpanel");
-var import_store9 = require("@elementor/store");
+var import_store7 = require("@elementor/store");
 var FEATURE_NAME = "Components";
 var trackComponentEvent = ({ action, source, ...data }) => {
   const { dispatchEvent, config } = (0, import_mixpanel.getMixpanel)();
@@ -501,7 +491,7 @@ var onElementDrop = (_args, element) => {
   const componentName = editorSettings?.title;
   const componentUID = editorSettings?.component_uid;
   const instanceId = element.id;
-  const createdThisSession = selectCreatedThisSession((0, import_store9.__getState)());
+  const createdThisSession = selectCreatedThisSession((0, import_store7.__getState)());
   const isSameSessionReuse = componentUID && createdThisSession.includes(componentUID);
   const eventsManagerConfig = window.elementorCommon.eventsManager.config;
   const { locations, secondaryLocations } = eventsManagerConfig;
@@ -537,15 +527,15 @@ var import_utils2 = require("@elementor/utils");
 var import_i18n10 = require("@wordpress/i18n");
 
 // src/store/actions/add-overridable-group.ts
-var import_store11 = require("@elementor/store");
+var import_store9 = require("@elementor/store");
 function addOverridableGroup({
   componentId,
   groupId,
   label,
   source
 }) {
-  const currentComponent = selectCurrentComponent((0, import_store11.__getState)());
-  const overridableProps = selectOverridableProps((0, import_store11.__getState)(), componentId);
+  const currentComponent = selectCurrentComponent((0, import_store9.__getState)());
+  const overridableProps = selectOverridableProps((0, import_store9.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -554,7 +544,7 @@ function addOverridableGroup({
     label,
     props: []
   };
-  (0, import_store11.__dispatch)(
+  (0, import_store9.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -580,7 +570,7 @@ function addOverridableGroup({
 }
 
 // src/store/actions/delete-overridable-group.ts
-var import_store13 = require("@elementor/store");
+var import_store11 = require("@elementor/store");
 
 // src/store/utils/groups-transformers.ts
 var import_utils = require("@elementor/utils");
@@ -728,7 +718,7 @@ function renameGroup(groups, groupId, newLabel) {
 
 // src/store/actions/delete-overridable-group.ts
 function deleteOverridableGroup({ componentId, groupId }) {
-  const overridableProps = selectOverridableProps((0, import_store13.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store11.__getState)(), componentId);
   if (!overridableProps) {
     return false;
   }
@@ -737,7 +727,7 @@ function deleteOverridableGroup({ componentId, groupId }) {
     return false;
   }
   const updatedGroups = deleteGroup(overridableProps.groups, groupId);
-  (0, import_store13.__dispatch)(
+  (0, import_store11.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -750,7 +740,7 @@ function deleteOverridableGroup({ componentId, groupId }) {
 }
 
 // src/store/actions/delete-overridable-prop.ts
-var import_store17 = require("@elementor/store");
+var import_store15 = require("@elementor/store");
 
 // src/utils/revert-overridable-settings.ts
 var import_editor_elements2 = require("@elementor/editor-elements");
@@ -758,7 +748,7 @@ var import_editor_elements2 = require("@elementor/editor-elements");
 // src/create-component-type.ts
 var import_editor_canvas4 = require("@elementor/editor-canvas");
 var import_editor_documents3 = require("@elementor/editor-documents");
-var import_store15 = require("@elementor/store");
+var import_store13 = require("@elementor/store");
 var import_i18n2 = require("@wordpress/i18n");
 var COMPONENT_WIDGET_TYPE = "e-component";
 var updateGroups = (groups, config) => {
@@ -977,7 +967,7 @@ function createComponentModel() {
       }
       const componentUid = editorSettings?.component_uid;
       if (componentUid) {
-        const component = selectComponentByUid((0, import_store15.__getState)(), componentUid);
+        const component = selectComponentByUid((0, import_store13.__getState)(), componentUid);
         if (component?.name) {
           return component.name;
         }
@@ -1186,7 +1176,7 @@ function revertElementSettings(element) {
 
 // src/store/actions/delete-overridable-prop.ts
 function deleteOverridableProp({ componentId, propKey, source }) {
-  const overridableProps = selectOverridableProps((0, import_store17.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store15.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -1197,7 +1187,7 @@ function deleteOverridableProp({ componentId, propKey, source }) {
   revertElementOverridableSetting(prop.elementId, prop.propKey, prop.originValue, propKey);
   const { [propKey]: removedProp, ...remainingProps } = overridableProps.props;
   const updatedGroups = removePropFromAllGroups(overridableProps.groups, propKey);
-  (0, import_store17.__dispatch)(
+  (0, import_store15.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -1207,7 +1197,7 @@ function deleteOverridableProp({ componentId, propKey, source }) {
       }
     })
   );
-  const currentComponent = selectCurrentComponent((0, import_store17.__getState)());
+  const currentComponent = selectCurrentComponent((0, import_store15.__getState)());
   trackComponentEvent({
     action: "propertyRemoved",
     source,
@@ -1220,9 +1210,9 @@ function deleteOverridableProp({ componentId, propKey, source }) {
 }
 
 // src/store/actions/reorder-group-props.ts
-var import_store19 = require("@elementor/store");
+var import_store17 = require("@elementor/store");
 function reorderGroupProps({ componentId, groupId, newPropsOrder }) {
-  const overridableProps = selectOverridableProps((0, import_store19.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store17.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -1230,7 +1220,7 @@ function reorderGroupProps({ componentId, groupId, newPropsOrder }) {
   if (!group) {
     return;
   }
-  (0, import_store19.__dispatch)(
+  (0, import_store17.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -1251,13 +1241,13 @@ function reorderGroupProps({ componentId, groupId, newPropsOrder }) {
 }
 
 // src/store/actions/reorder-overridable-groups.ts
-var import_store21 = require("@elementor/store");
+var import_store19 = require("@elementor/store");
 function reorderOverridableGroups({ componentId, newOrder }) {
-  const overridableProps = selectOverridableProps((0, import_store21.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store19.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
-  (0, import_store21.__dispatch)(
+  (0, import_store19.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -1272,14 +1262,14 @@ function reorderOverridableGroups({ componentId, newOrder }) {
 }
 
 // src/store/actions/update-overridable-prop-params.ts
-var import_store23 = require("@elementor/store");
+var import_store21 = require("@elementor/store");
 function updateOverridablePropParams({
   componentId,
   overrideKey,
   label,
   groupId
 }) {
-  const overridableProps = selectOverridableProps((0, import_store23.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store21.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -1295,7 +1285,7 @@ function updateOverridablePropParams({
     groupId: newGroupId
   };
   const updatedGroups = movePropBetweenGroups(overridableProps.groups, overrideKey, oldGroupId, newGroupId);
-  (0, import_store23.__dispatch)(
+  (0, import_store21.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -1312,9 +1302,9 @@ function updateOverridablePropParams({
 }
 
 // src/components/component-panel-header/use-overridable-props.ts
-var import_store25 = require("@elementor/store");
+var import_store23 = require("@elementor/store");
 function useOverridableProps2(componentId) {
-  return (0, import_store25.__useSelector)((state) => {
+  return (0, import_store23.__useSelector)((state) => {
     if (!componentId) {
       return void 0;
     }
@@ -1863,9 +1853,9 @@ var import_editor_ui4 = require("@elementor/editor-ui");
 var import_i18n9 = require("@wordpress/i18n");
 
 // src/store/actions/rename-overridable-group.ts
-var import_store27 = require("@elementor/store");
+var import_store25 = require("@elementor/store");
 function renameOverridableGroup({ componentId, groupId, label }) {
-  const overridableProps = selectOverridableProps((0, import_store27.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store25.__getState)(), componentId);
   if (!overridableProps) {
     return false;
   }
@@ -1874,7 +1864,7 @@ function renameOverridableGroup({ componentId, groupId, label }) {
     return false;
   }
   const updatedGroups = renameGroup(overridableProps.groups, groupId, label);
-  (0, import_store27.__dispatch)(
+  (0, import_store25.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -2207,7 +2197,7 @@ var ComponentPanelHeader = () => {
   ));
 };
 function getComponentName() {
-  const state = (0, import_store31.__getState)();
+  const state = (0, import_store29.__getState)();
   const path = state[SLICE_NAME].path;
   const { instanceTitle } = path.at(-1) ?? {};
   if (instanceTitle) {
@@ -2223,10 +2213,10 @@ var React18 = __toESM(require("react"));
 var import_editor_ui10 = require("@elementor/editor-ui");
 
 // src/hooks/use-components.ts
-var import_store33 = require("@elementor/store");
+var import_store31 = require("@elementor/store");
 var useComponents = () => {
-  const components = (0, import_store33.__useSelector)(selectComponents);
-  const isLoading = (0, import_store33.__useSelector)(selectLoadIsPending);
+  const components = (0, import_store31.__useSelector)(selectComponents);
+  const isLoading = (0, import_store31.__useSelector)(selectLoadIsPending);
   return { components, isLoading };
 };
 
@@ -2310,10 +2300,10 @@ var useComponentsPermissions = () => {
 // src/store/actions/rename-component.ts
 var import_editor_documents7 = require("@elementor/editor-documents");
 var import_editor_elements5 = require("@elementor/editor-elements");
-var import_store35 = require("@elementor/store");
+var import_store33 = require("@elementor/store");
 var TITLE_EXTERNAL_CHANGE_COMMAND = "title_external_change";
 var renameComponent = (componentUid, newName) => {
-  (0, import_store35.__dispatch)(slice.actions.rename({ componentUid, name: newName }));
+  (0, import_store33.__dispatch)(slice.actions.rename({ componentUid, name: newName }));
   (0, import_editor_documents7.setDocumentModifiedStatus)(true);
   refreshComponentInstanceTitles(componentUid);
 };
@@ -2354,7 +2344,7 @@ var import_i18n18 = require("@wordpress/i18n");
 // src/store/actions/archive-component.ts
 var import_editor_documents8 = require("@elementor/editor-documents");
 var import_editor_notifications = require("@elementor/editor-notifications");
-var import_store37 = require("@elementor/store");
+var import_store35 = require("@elementor/store");
 var import_i18n15 = require("@wordpress/i18n");
 var successNotification = (componentId, componentName) => ({
   type: "success",
@@ -2363,7 +2353,7 @@ var successNotification = (componentId, componentName) => ({
   id: `success-archived-components-notification-${componentId}`
 });
 var archiveComponent = (componentId, componentName) => {
-  (0, import_store37.__dispatch)(slice.actions.archive(componentId));
+  (0, import_store35.__dispatch)(slice.actions.archive(componentId));
   (0, import_editor_documents8.setDocumentModifiedStatus)(true);
   (0, import_editor_notifications.notify)(successNotification(componentId, componentName));
 };
@@ -2415,7 +2405,7 @@ async function getDocumentsMap(ids, cache) {
 }
 
 // src/store/actions/load-components-overridable-props.ts
-var import_store39 = require("@elementor/store");
+var import_store37 = require("@elementor/store");
 function loadComponentsOverridableProps(componentIds) {
   if (!componentIds.length) {
     return;
@@ -2423,7 +2413,7 @@ function loadComponentsOverridableProps(componentIds) {
   return Promise.all(componentIds.map(loadComponentOverrides));
 }
 async function loadComponentOverrides(componentId) {
-  const isOverridablePropsLoaded = selectIsOverridablePropsLoaded((0, import_store39.__getState)(), componentId);
+  const isOverridablePropsLoaded = selectIsOverridablePropsLoaded((0, import_store37.__getState)(), componentId);
   if (isOverridablePropsLoaded) {
     return;
   }
@@ -2431,7 +2421,7 @@ async function loadComponentOverrides(componentId) {
   if (!overridableProps) {
     return;
   }
-  (0, import_store39.__dispatch)(
+  (0, import_store37.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps
@@ -2440,12 +2430,12 @@ async function loadComponentOverrides(componentId) {
 }
 
 // src/store/actions/load-components-styles.ts
-var import_store41 = require("@elementor/store");
+var import_store39 = require("@elementor/store");
 function loadComponentsStyles(documents) {
   if (!documents.size) {
     return;
   }
-  const knownComponents = selectStyles((0, import_store41.__getState)());
+  const knownComponents = selectStyles((0, import_store39.__getState)());
   const unknownDocuments = new Map([...documents.entries()].filter(([id2]) => !knownComponents[id2]));
   if (!unknownDocuments.size) {
     return;
@@ -2456,7 +2446,7 @@ function addStyles(documents) {
   const styles = Object.fromEntries(
     [...documents.entries()].map(([id2, document]) => [id2, extractStylesFromDocument(document)])
   );
-  (0, import_store41.__dispatch)(slice.actions.addStyles(styles));
+  (0, import_store39.__dispatch)(slice.actions.addStyles(styles));
 }
 function extractStylesFromDocument(document) {
   if (!document.elements?.length) {
@@ -2486,7 +2476,7 @@ function updateDocumentState(documents) {
 }
 
 // src/utils/component-name-validation.ts
-var import_store43 = require("@elementor/store");
+var import_store41 = require("@elementor/store");
 
 // src/components/create-component-form/utils/component-form-schema.ts
 var import_schema5 = require("@elementor/schema");
@@ -2514,7 +2504,7 @@ var createSubmitComponentSchema = (existingNames) => {
 
 // src/utils/component-name-validation.ts
 function validateComponentName(label) {
-  const existingComponentTitles = selectComponents((0, import_store43.__getState)())?.map(({ name }) => name) ?? [];
+  const existingComponentTitles = selectComponents((0, import_store41.__getState)())?.map(({ name }) => name) ?? [];
   const schema = createSubmitComponentSchema(existingComponentTitles);
   const result = schema.safeParse({ componentName: label.toLowerCase() });
   if (result.success) {
@@ -3001,7 +2991,7 @@ var import_editor_elements11 = require("@elementor/editor-elements");
 var import_editor_notifications3 = require("@elementor/editor-notifications");
 var import_editor_ui11 = require("@elementor/editor-ui");
 var import_icons11 = require("@elementor/icons");
-var import_store49 = require("@elementor/store");
+var import_store47 = require("@elementor/store");
 var import_ui16 = require("@elementor/ui");
 var import_i18n23 = require("@wordpress/i18n");
 
@@ -3013,9 +3003,9 @@ var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var import_i18n21 = require("@wordpress/i18n");
 
 // src/utils/is-editing-component.ts
-var import_store45 = require("@elementor/store");
+var import_store43 = require("@elementor/store");
 function isEditingComponent() {
-  const state = (0, import_store45.__getStore)()?.getState();
+  const state = (0, import_store43.__getStore)()?.getState();
   if (!state) {
     return false;
   }
@@ -3126,7 +3116,7 @@ function findNonAtomicElementsInElement(element) {
 // src/store/actions/create-unpublished-component.ts
 var import_editor_elements10 = require("@elementor/editor-elements");
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
-var import_store47 = require("@elementor/store");
+var import_store45 = require("@elementor/store");
 var import_utils4 = require("@elementor/utils");
 var import_i18n22 = require("@wordpress/i18n");
 async function createUnpublishedComponent({
@@ -3147,14 +3137,14 @@ async function createUnpublishedComponent({
     parentId: container?.parent?.id ?? "",
     index: container?.view?._index ?? 0
   };
-  (0, import_store47.__dispatch)(
+  (0, import_store45.__dispatch)(
     slice.actions.addUnpublished({
       ...componentBase,
       elements: [elementDataWithOverridablesReverted],
       overridableProps
     })
   );
-  (0, import_store47.__dispatch)(slice.actions.addCreatedThisSession(generatedUid));
+  (0, import_store45.__dispatch)(slice.actions.addCreatedThisSession(generatedUid));
   const componentInstance = await replaceElementWithComponent(element, componentBase);
   trackComponentEvent({
     action: "created",
@@ -3167,8 +3157,8 @@ async function createUnpublishedComponent({
     await (0, import_editor_v1_adapters5.__privateRunCommand)("document/save/auto");
   } catch (error) {
     restoreOriginalElement(originalElement, componentInstance.id);
-    (0, import_store47.__dispatch)(slice.actions.removeUnpublished(generatedUid));
-    (0, import_store47.__dispatch)(slice.actions.removeCreatedThisSession(generatedUid));
+    (0, import_store45.__dispatch)(slice.actions.removeUnpublished(generatedUid));
+    (0, import_store45.__dispatch)(slice.actions.removeCreatedThisSession(generatedUid));
     throw error;
   }
   return { uid: generatedUid, instanceId: componentInstance.id };
@@ -3306,7 +3296,7 @@ function CreateComponentForm() {
         eventData: eventData.current,
         source: "user"
       });
-      const publishedComponentId = selectComponentByUid((0, import_store49.__getState)(), uid)?.id;
+      const publishedComponentId = selectComponentByUid((0, import_store47.__getState)(), uid)?.id;
       if (publishedComponentId) {
         switchToComponent(publishedComponentId, instanceId);
       } else {
@@ -3452,22 +3442,22 @@ var React21 = __toESM(require("react"));
 var import_react13 = require("react");
 var import_editor_documents11 = require("@elementor/editor-documents");
 var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
-var import_store53 = require("@elementor/store");
+var import_store51 = require("@elementor/store");
 var import_utils6 = require("@elementor/utils");
 
 // src/store/actions/update-current-component.ts
 var import_editor_documents10 = require("@elementor/editor-documents");
-var import_store51 = require("@elementor/store");
+var import_store49 = require("@elementor/store");
 function updateCurrentComponent({
   path,
   currentComponentId
 }) {
-  const dispatch21 = (0, import_store51.__getStore)()?.dispatch;
-  if (!dispatch21) {
+  const dispatch20 = (0, import_store49.__getStore)()?.dispatch;
+  if (!dispatch20) {
     return;
   }
-  dispatch21(slice.actions.setPath(path));
-  dispatch21(slice.actions.setCurrentComponentId(currentComponentId));
+  dispatch20(slice.actions.setPath(path));
+  dispatch20(slice.actions.setCurrentComponentId(currentComponentId));
 }
 
 // src/components/edit-component/component-modal.tsx
@@ -3658,7 +3648,7 @@ function EditComponent() {
 function useHandleDocumentSwitches() {
   const documentsManager = (0, import_editor_documents11.getV1DocumentsManager)();
   const currentComponentId = useCurrentComponentId();
-  const path = (0, import_store53.__useSelector)(selectPath);
+  const path = (0, import_store51.__useSelector)(selectPath);
   (0, import_react13.useEffect)(() => {
     return (0, import_editor_v1_adapters7.__privateListenTo)((0, import_editor_v1_adapters7.commandEndEvent)("editor/documents/open"), () => {
       const nextDocument = documentsManager.getCurrent();
@@ -3869,7 +3859,7 @@ var useOverridablePropValue = () => (0, import_react14.useContext)(OverridablePr
 var useComponentInstanceElement = () => (0, import_react14.useContext)(OverridablePropContext)?.componentInstanceElement;
 
 // src/store/actions/update-overridable-prop.ts
-var import_store55 = require("@elementor/store");
+var import_store53 = require("@elementor/store");
 
 // src/utils/resolve-override-prop-value.ts
 var resolveOverridePropValue = (originalPropValue) => {
@@ -3904,7 +3894,7 @@ function getOverrideValue(overrideProp) {
 
 // src/store/actions/update-overridable-prop.ts
 function updateOverridableProp(componentId, propValue, originPropFields) {
-  const overridableProps = selectOverridableProps((0, import_store55.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store53.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -3929,7 +3919,7 @@ function updateOverridableProp(componentId, propValue, originPropFields) {
       }
     }
   };
-  (0, import_store55.__dispatch)(
+  (0, import_store53.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: newOverridableProps
@@ -3971,6 +3961,92 @@ var OverrideControlInnerElementNotFoundError = (0, import_utils7.createError)({
   message: `Component inner element not found for override control. The element may have been deleted without updating the overridable props, or the component has not finished rendering yet.`
 });
 
+// src/components/instance-editing-panel/use-resolved-origin-value.tsx
+var import_store55 = require("@elementor/store");
+function useResolvedOriginValue(override, overridableProp) {
+  const components = (0, import_store55.__useSelector)(selectData);
+  return resolveOriginValue(components, override, overridableProp);
+}
+function resolveOriginValue(components, matchingOverride, overridableProp) {
+  const { originValue: fallbackOriginValue, originPropFields } = overridableProp;
+  if (hasValue(fallbackOriginValue)) {
+    return fallbackOriginValue;
+  }
+  if (matchingOverride) {
+    const result = getOriginFromOverride(components, matchingOverride);
+    if (hasValue(result)) {
+      return result;
+    }
+  }
+  const { elementId, propKey } = originPropFields ?? {};
+  if (elementId && propKey) {
+    return findOriginValueByElementId(components, elementId, propKey);
+  }
+  return null;
+}
+function getOriginFromOverride(components, override) {
+  const overridableValue = componentOverridablePropTypeUtil.extract(override);
+  const innerOverride = overridableValue ? componentInstanceOverridePropTypeUtil.extract(overridableValue.origin_value) : componentInstanceOverridePropTypeUtil.extract(override);
+  if (!innerOverride) {
+    return null;
+  }
+  const { schema_source: schemaSource, override_key: overrideKey, override_value: overrideValue } = innerOverride;
+  const componentId = schemaSource?.id;
+  if (!componentId || !overrideKey) {
+    return null;
+  }
+  const prop = getOverridableProp(components, componentId, overrideKey);
+  if (hasValue(prop?.originValue)) {
+    return prop.originValue;
+  }
+  if (prop?.originPropFields?.elementId) {
+    const targetPropKey = prop.originPropFields.propKey ?? prop.propKey;
+    const result = findOriginValueByElementId(components, prop.originPropFields.elementId, targetPropKey);
+    if (hasValue(result)) {
+      return result;
+    }
+  }
+  const nestedOverridable = componentOverridablePropTypeUtil.extract(overrideValue);
+  if (nestedOverridable) {
+    return getOriginFromOverride(components, componentOverridablePropTypeUtil.create(nestedOverridable));
+  }
+  return null;
+}
+function findOriginValueByElementId(components, targetElementId, targetPropKey, visited = /* @__PURE__ */ new Set()) {
+  for (const component of components) {
+    if (visited.has(component.id)) {
+      continue;
+    }
+    visited.add(component.id);
+    const matchingProp = Object.values(component.overridableProps?.props ?? {}).find(
+      ({ elementId, propKey }) => elementId === targetElementId && propKey === targetPropKey
+    );
+    if (!matchingProp) {
+      continue;
+    }
+    if (hasValue(matchingProp.originValue)) {
+      return matchingProp.originValue;
+    }
+    if (matchingProp.originPropFields?.elementId) {
+      const innerPropKey = matchingProp.originPropFields.propKey ?? targetPropKey;
+      return findOriginValueByElementId(
+        components,
+        matchingProp.originPropFields.elementId,
+        innerPropKey,
+        visited
+      );
+    }
+  }
+  return null;
+}
+function hasValue(value) {
+  return value !== null && value !== void 0;
+}
+function getOverridableProp(components, componentId, overrideKey) {
+  const component = components.find(({ id: id2 }) => id2 === componentId);
+  return component?.overridableProps?.props?.[overrideKey];
+}
+
 // src/components/instance-editing-panel/override-prop-control.tsx
 function OverridePropControl({ overridableProp, overrides }) {
   return /* @__PURE__ */ React26.createElement(import_editor_editing_panel3.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React26.createElement(OverrideControl, { overridableProp, overrides }));
@@ -3983,6 +4059,8 @@ function OverrideControl({ overridableProp, overrides }) {
     overridableProp?.originPropFields?.widgetType ?? overridableProp.widgetType
   );
   const controlReplacements = (0, import_editor_editing_panel3.getControlReplacements)();
+  const matchingOverride = getMatchingOverride(overrides, overridableProp.overrideKey);
+  const recursiveOriginValue = useResolvedOriginValue(matchingOverride, overridableProp);
   const propType = getPropTypeForComponentOverride(overridableProp);
   if (!propType) {
     return null;
@@ -3996,8 +4074,8 @@ function OverrideControl({ overridableProp, overrides }) {
   if (!componentInstanceId) {
     throw new Error("Component ID is required");
   }
-  const matchingOverride = getMatchingOverride(overrides, overridableProp.overrideKey);
-  const propValue = matchingOverride ? resolveOverridePropValue(matchingOverride) : overridableProp.originValue;
+  const resolvedOverrideValue = matchingOverride ? resolveOverridePropValue(matchingOverride) : null;
+  const propValue = resolvedOverrideValue ?? recursiveOriginValue ?? overridableProp.originValue;
   const value = {
     [overridableProp.overrideKey]: propValue
   };
@@ -4065,7 +4143,7 @@ function OverrideControl({ overridableProp, overrides }) {
   );
 }
 function getMatchingOverride(overrides, overrideKey) {
-  return overrides?.find((override) => {
+  const result = overrides?.find((override) => {
     const overridableValue = componentOverridablePropTypeUtil.extract(override);
     let comparedOverrideKey = null;
     if (overridableValue) {
@@ -4075,6 +4153,7 @@ function getMatchingOverride(overrides, overrideKey) {
     }
     return comparedOverrideKey === overrideKey;
   }) ?? null;
+  return result;
 }
 function createOverrideValue({
   matchingOverride,
@@ -4201,7 +4280,7 @@ function InstanceEditingPanel() {
   const isNonEmptyGroup = (group) => group !== null && group.props.length > 0;
   const groups = overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(isNonEmptyGroup);
   const isEmpty = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
-  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(import_editor_panels4.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React28.createElement(import_icons14.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React28.createElement(import_editor_ui14.EllipsisWithTooltip, { title: component.name, as: import_editor_panels4.PanelHeaderTitle, sx: { flexGrow: 1 } }), canEdit && /* @__PURE__ */ React28.createElement(import_ui22.Tooltip, { title: panelTitle }, /* @__PURE__ */ React28.createElement(import_ui22.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React28.createElement(import_icons14.PencilIcon, { fontSize: "tiny" }))))), /* @__PURE__ */ React28.createElement(import_editor_panels4.PanelBody, null, /* @__PURE__ */ React28.createElement(import_editor_controls4.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel5.getFieldIndicators)("settings") }, isEmpty ? /* @__PURE__ */ React28.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React28.createElement(React28.Fragment, { key: group.id }, /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(import_editor_panels4.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React28.createElement(import_icons14.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React28.createElement(import_editor_ui14.EllipsisWithTooltip, { title: component.name, as: import_editor_panels4.PanelHeaderTitle, sx: { flexGrow: 1 } }), canEdit && /* @__PURE__ */ React28.createElement(import_ui22.Tooltip, { title: panelTitle }, /* @__PURE__ */ React28.createElement(import_ui22.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React28.createElement(import_icons14.PencilIcon, { fontSize: "tiny" }))))), /* @__PURE__ */ React28.createElement(import_editor_panels4.PanelBody, null, /* @__PURE__ */ React28.createElement(import_editor_controls4.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel5.getFieldIndicators)("settings") }, isEmpty ? /* @__PURE__ */ React28.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React28.createElement(React28.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React28.createElement(
     OverridePropsGroup,
     {
       group,
@@ -4441,7 +4520,7 @@ var Indicator2 = (0, import_react16.forwardRef)(({ isOpen, isOverridable, ...pro
 
 // src/components/overridable-props/utils/get-overridable-prop.ts
 var import_store62 = require("@elementor/store");
-function getOverridableProp({
+function getOverridableProp2({
   componentId,
   overrideKey
 }) {
@@ -4505,7 +4584,7 @@ function Content2({ componentId, overridableProps }) {
     }
     popupState.close();
   };
-  const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
+  const overridableConfig = overridableValue ? getOverridableProp2({ componentId, overrideKey: overridableValue.override_key }) : void 0;
   return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(import_ui24.Tooltip, { placement: "top", title: (0, import_i18n29.__)("Override Property", "elementor") }, /* @__PURE__ */ React31.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React31.createElement(
     import_ui24.Popover,
     {
@@ -5170,7 +5249,7 @@ async function publishDraftComponentsInPageBeforeSave({ status, elements }) {
     return;
   }
   await apiClient.updateStatuses(draftIds, "publish");
-  draftIds.forEach((id2) => invalidateComponentCache(id2));
+  draftIds.forEach((id2) => invalidateComponentDocumentData(id2));
 }
 
 // src/sync/set-component-overridable-props-settings-before-save.ts