@elementor/editor-components 3.35.0-493 → 3.35.0

package/dist/index.mjs

@@ -15,7 +15,7 @@ import {
 import { injectTab } from "@elementor/editor-elements-panel";
 import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 import { stylesRepository } from "@elementor/editor-styles-repository";
-import { registerDataHook as registerDataHook6 } from "@elementor/editor-v1-adapters";
+import { registerDataHook as registerDataHook5 } from "@elementor/editor-v1-adapters";
 import { __registerSlice as registerSlice } from "@elementor/store";
 import { __ as __31 } from "@wordpress/i18n";
 
@@ -290,10 +290,6 @@ var getComponentDocumentData = async (id2) => {
     return null;
   }
 };
-var invalidateComponentDocumentData = (id2) => {
-  const documentManager = getV1DocumentsManager();
-  documentManager.invalidateCache(id2);
-};
 
 // src/component-instance-transformer.ts
 var componentInstanceTransformer = createTransformer(
@@ -379,8 +375,8 @@ import { getV1DocumentsManager as getV1DocumentsManager2 } from "@elementor/edit
 import { __useSelector as useSelector2 } from "@elementor/store";
 
 // src/utils/switch-to-component.ts
+import { invalidateDocumentData, switchToDocument } from "@elementor/editor-documents";
 import { getCurrentDocumentContainer, selectElement } from "@elementor/editor-elements";
-import { __privateRunCommand as runCommand2 } from "@elementor/editor-v1-adapters";
 
 // src/utils/expand-navigator.ts
 import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
@@ -391,8 +387,8 @@ async function expandNavigator() {
 // src/utils/switch-to-component.ts
 async function switchToComponent(componentId, componentInstanceId, element) {
   const selector = getSelector(element, componentInstanceId);
-  await runCommand2("editor/documents/switch", {
-    id: componentId,
+  invalidateDocumentData(componentId);
+  await switchToDocument(componentId, {
     selector,
     mode: "autosave",
     setAsInitial: false,
@@ -3131,7 +3127,7 @@ function findNonAtomicElementsInElement(element) {
 
 // src/store/actions/create-unpublished-component.ts
 import { createElements, deleteElement, getContainer as getContainer3 } from "@elementor/editor-elements";
-import { __privateRunCommand as runCommand3 } from "@elementor/editor-v1-adapters";
+import { __privateRunCommand as runCommand2 } from "@elementor/editor-v1-adapters";
 import { __dispatch as dispatch12 } from "@elementor/store";
 import { generateUniqueId as generateUniqueId3 } from "@elementor/utils";
 import { __ as __22 } from "@wordpress/i18n";
@@ -3170,7 +3166,7 @@ async function createUnpublishedComponent({
     ...eventData
   });
   try {
-    await runCommand3("document/save/auto");
+    await runCommand2("document/save/auto");
   } catch (error) {
     restoreOriginalElement(originalElement, componentInstance.id);
     dispatch12(slice.actions.removeUnpublished(generatedUid));
@@ -3839,6 +3835,7 @@ import {
   createTopLevelObjectType,
   ElementProvider as ElementProvider2,
   getControlReplacements,
+  isDynamicPropValue,
   SettingsField,
   useElement as useElement2
 } from "@elementor/editor-editing-panel";
@@ -3961,12 +3958,10 @@ var getPropTypeForComponentOverride = (overridableProp) => {
   if (overridableProp.originPropFields) {
     return getPropType(overridableProp.originPropFields);
   }
-  const { elType, widgetType, propKey, elementId } = overridableProp;
+  const { widgetType, propKey } = overridableProp;
   return getPropType({
-    elType,
     widgetType,
-    propKey,
-    elementId
+    propKey
   });
 };
 function getPropType({ widgetType, propKey }) {
@@ -3989,6 +3984,92 @@ var OverrideControlInnerElementNotFoundError = 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
+import { __useSelector as useSelector6 } from "@elementor/store";
+function useResolvedOriginValue(override, overridableProp) {
+  const components = useSelector6(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(SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React26.createElement(OverrideControl, { overridableProp, overrides }));
@@ -4001,26 +4082,27 @@ function OverrideControl({ overridableProp, overrides }) {
     overridableProp?.originPropFields?.widgetType ?? overridableProp.widgetType
   );
   const controlReplacements = getControlReplacements();
+  const matchingOverride = getMatchingOverride(overrides, overridableProp.overrideKey);
+  const recursiveOriginValue = useResolvedOriginValue(matchingOverride, overridableProp);
   const propType = getPropTypeForComponentOverride(overridableProp);
   if (!propType) {
     return null;
   }
-  const propTypeSchema = createTopLevelObjectType({
-    schema: {
-      [overridableProp.overrideKey]: propType
-    }
-  });
   const componentInstanceId = instanceValue.component_id?.value;
   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
   };
   const setValue = (newValue) => {
-    const newPropValue = newValue[overridableProp.overrideKey];
+    const newPropValue = getTempNewValueForDynamicProp(
+      propType,
+      propValue,
+      newValue[overridableProp.overrideKey]
+    );
     const newOverrideValue = createOverrideValue({
       matchingOverride,
       overrideKey: overridableProp.overrideKey,
@@ -4062,6 +4144,11 @@ function OverrideControl({ overridableProp, overrides }) {
   if (!elementType) {
     return null;
   }
+  const propTypeSchema = createTopLevelObjectType({
+    schema: {
+      [overridableProp.overrideKey]: propType
+    }
+  });
   return /* @__PURE__ */ React26.createElement(
     OverridablePropProvider,
     {
@@ -4082,8 +4169,15 @@ function OverrideControl({ overridableProp, overrides }) {
     )))
   );
 }
+function getTempNewValueForDynamicProp(propType, propValue, newPropValue) {
+  const isRemovingOverride = newPropValue === null;
+  if (isRemovingOverride && isDynamicPropValue(propValue)) {
+    return propType.default ?? null;
+  }
+  return newPropValue;
+}
 function getMatchingOverride(overrides, overrideKey) {
-  return overrides?.find((override) => {
+  const result = overrides?.find((override) => {
     const overridableValue = componentOverridablePropTypeUtil.extract(override);
     let comparedOverrideKey = null;
     if (overridableValue) {
@@ -4093,6 +4187,7 @@ function getMatchingOverride(overrides, overrideKey) {
     }
     return comparedOverrideKey === overrideKey;
   }) ?? null;
+  return result;
 }
 function createOverrideValue({
   matchingOverride,
@@ -4219,7 +4314,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(PanelHeader3, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React28.createElement(Stack16, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React28.createElement(ComponentsIcon4, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React28.createElement(EllipsisWithTooltip4, { title: component.name, as: PanelHeaderTitle2, sx: { flexGrow: 1 } }), canEdit && /* @__PURE__ */ React28.createElement(Tooltip5, { title: panelTitle }, /* @__PURE__ */ React28.createElement(IconButton6, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React28.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React28.createElement(PanelBody2, null, /* @__PURE__ */ React28.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? /* @__PURE__ */ React28.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React28.createElement(Stack16, { 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(PanelHeader3, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React28.createElement(Stack16, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React28.createElement(ComponentsIcon4, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React28.createElement(EllipsisWithTooltip4, { title: component.name, as: PanelHeaderTitle2, sx: { flexGrow: 1 } }), canEdit && /* @__PURE__ */ React28.createElement(Tooltip5, { title: panelTitle }, /* @__PURE__ */ React28.createElement(IconButton6, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React28.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React28.createElement(PanelBody2, null, /* @__PURE__ */ React28.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? /* @__PURE__ */ React28.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React28.createElement(Stack16, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React28.createElement(React28.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React28.createElement(
     OverridePropsGroup,
     {
       group,
@@ -4465,7 +4560,7 @@ var Indicator2 = forwardRef2(({ isOpen, isOverridable, ...props }, ref) => /* @_
 
 // src/components/overridable-props/utils/get-overridable-prop.ts
 import { __getState as getState18 } from "@elementor/store";
-function getOverridableProp({
+function getOverridableProp2({
   componentId,
   overrideKey
 }) {
@@ -4529,7 +4624,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(Tooltip6, { placement: "top", title: __29("Override Property", "elementor") }, /* @__PURE__ */ React31.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React31.createElement(
     Popover4,
     {
@@ -5159,7 +5254,7 @@ function updateElementComponentId(elementId, componentId) {
 }
 
 // src/sync/publish-draft-components-in-page-before-save.ts
-import { isDocumentDirty as isDocumentDirty2 } from "@elementor/editor-documents";
+import { invalidateDocumentData as invalidateDocumentData2, isDocumentDirty as isDocumentDirty2 } from "@elementor/editor-documents";
 async function publishDraftComponentsInPageBeforeSave({ status, elements }) {
   if (status !== "publish") {
     return;
@@ -5170,7 +5265,7 @@ async function publishDraftComponentsInPageBeforeSave({ status, elements }) {
     return;
   }
   await apiClient.updateStatuses(draftIds, "publish");
-  draftIds.forEach((id2) => invalidateComponentDocumentData(id2));
+  draftIds.forEach((id2) => invalidateDocumentData2(id2));
 }
 
 // src/sync/set-component-overridable-props-settings-before-save.ts
@@ -5388,95 +5483,16 @@ function load(result) {
   loadComponentsAssets(containers.map((container) => container.model.toJSON()));
 }
 
-// src/sync/regenerate-override-keys.ts
-import { getAllDescendants as getAllDescendants6, getContainer as getContainer6, updateElementSettings as updateElementSettings3 } from "@elementor/editor-elements";
-import { registerDataHook as registerDataHook4 } from "@elementor/editor-v1-adapters";
-import { generateUniqueId as generateUniqueId6 } from "@elementor/utils";
-function initRegenerateOverrideKeys() {
-  registerDataHook4("after", "document/elements/duplicate", (_args, result) => {
-    regenerateOverrideKeysForContainers(result);
-  });
-  registerDataHook4("after", "document/elements/paste", (_args, result) => {
-    regenerateOverrideKeysForContainers(result);
-  });
-  registerDataHook4("after", "document/elements/import", (_args, result) => {
-    regenerateOverrideKeysForContainers(result);
-  });
-}
-function regenerateOverrideKeysForContainers(result) {
-  const containers = Array.isArray(result) ? result : [result];
-  containers.forEach((container) => {
-    regenerateOverrideKeysRecursive(container.id);
-  });
-}
-function regenerateOverrideKeysRecursive(elementId) {
-  const container = getContainer6(elementId);
-  if (!container) {
-    return;
-  }
-  getAllDescendants6(container).forEach(regenerateOverrideKeys);
-}
-function regenerateOverrideKeys(element) {
-  if (!isComponentInstance(element.model.toJSON())) {
-    return;
-  }
-  const settings = element.settings?.toJSON() ?? {};
-  if (!hasOverrides(settings)) {
-    return;
-  }
-  const componentInstance = settings.component_instance;
-  const overrides = componentInstance.value.overrides;
-  const newOverrides = overrides.value.map((override) => {
-    if (!componentInstanceOverridePropTypeUtil.isValid(override)) {
-      return override;
-    }
-    return {
-      ...override,
-      value: {
-        ...override.value,
-        override_key: generateUniqueId6("prop")
-      }
-    };
-  });
-  const newComponentInstance = {
-    ...componentInstance,
-    value: {
-      ...componentInstance.value,
-      overrides: {
-        ...overrides,
-        value: newOverrides
-      }
-    }
-  };
-  updateElementSettings3({
-    id: element.id,
-    props: { component_instance: newComponentInstance },
-    withHistory: false
-  });
-}
-function hasOverrides(settings) {
-  if (!componentInstancePropTypeUtil.isValid(settings?.component_instance)) {
-    return false;
-  }
-  const componentInstance = componentInstancePropTypeUtil.extract(settings?.component_instance);
-  const overrides = componentInstance?.overrides;
-  if (!componentInstanceOverridesPropTypeUtil.isValid(overrides)) {
-    return false;
-  }
-  const overridesValue = overrides?.value;
-  return !!overridesValue?.length;
-}
-
 // src/sync/revert-overridables-on-copy-or-duplicate.ts
-import { registerDataHook as registerDataHook5 } from "@elementor/editor-v1-adapters";
+import { registerDataHook as registerDataHook4 } from "@elementor/editor-v1-adapters";
 function initRevertOverridablesOnCopyOrDuplicate() {
-  registerDataHook5("after", "document/elements/duplicate", (_args, result) => {
+  registerDataHook4("after", "document/elements/duplicate", (_args, result) => {
     if (!isEditingComponent()) {
       return;
     }
     revertOverridablesForDuplicatedElements(result);
   });
-  registerDataHook5("after", "document/elements/copy", (args) => {
+  registerDataHook4("after", "document/elements/copy", (args) => {
     if (!isEditingComponent()) {
       return;
     }
@@ -5514,14 +5530,14 @@ function init() {
     COMPONENT_WIDGET_TYPE,
     (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
   );
-  registerDataHook6("dependency", "editor/documents/close", (args) => {
+  registerDataHook5("dependency", "editor/documents/close", (args) => {
     const document = getV1CurrentDocument();
     if (document.config.type === COMPONENT_DOCUMENT_TYPE) {
       args.mode = "autosave";
     }
     return true;
   });
-  registerDataHook6("after", "preview/drop", onElementDrop);
+  registerDataHook5("after", "preview/drop", onElementDrop);
   window.elementorCommon.__beforeSave = beforeSave;
   injectTab({
     id: "components",
@@ -5545,7 +5561,7 @@ function init() {
     id: "component-panel-header",
     component: ComponentPanelHeader
   });
-  registerDataHook6("after", "editor/documents/attach-preview", async () => {
+  registerDataHook5("after", "editor/documents/attach-preview", async () => {
     const { id: id2, config } = getV1CurrentDocument();
     if (id2) {
       removeComponentStyles(id2);
@@ -5571,7 +5587,6 @@ function init() {
   settingsTransformersRegistry2.register("component-instance", componentInstanceTransformer);
   settingsTransformersRegistry2.register("overridable", componentOverridableTransformer);
   settingsTransformersRegistry2.register("override", componentOverrideTransformer);
-  initRegenerateOverrideKeys();
   initCleanupOverridablePropsOnDelete();
   initMcp();
   initCircularNestingPrevention();