@elementor/editor-components 4.1.0-741 → 4.1.0-742

package/dist/index.mjs

@@ -1524,6 +1524,7 @@ import { Box as Box9, Collapse, ListItemButton as ListItemButton2, ListItemText,
 
 // src/components/instance-editing-panel/override-prop-control.tsx
 import * as React19 from "react";
+import { useMemo } from "react";
 import {
   ControlReplacementsProvider,
   getControlReplacements,
@@ -1744,24 +1745,6 @@ function updateOverridableProp(componentId, propValue, originPropFields) {
   componentsActions.setOverridableProps(componentId, newOverridableProps);
 }
 
-// src/utils/get-container-by-origin-id.ts
-import { getContainer as getContainer2 } from "@elementor/editor-elements";
-function getContainerByOriginId(originElementId, instanceElementId) {
-  if (!instanceElementId) {
-    return getContainer2(originElementId);
-  }
-  const instanceContainer = getContainer2(instanceElementId);
-  if (!instanceContainer) {
-    return null;
-  }
-  const legacyWindow = window;
-  return legacyWindow.elementor?.getContainerByKeyValue?.({
-    key: "originId",
-    value: originElementId,
-    parent: instanceContainer.view
-  }) ?? null;
-}
-
 // src/utils/get-prop-type-for-component-override.ts
 import { getWidgetsCache } from "@elementor/editor-elements";
 var getPropTypeForComponentOverride = (overridableProp) => {
@@ -1790,45 +1773,25 @@ function getMatchingOverride(overrides, overrideKey) {
     return override.value.override_key === overrideKey;
   }) ?? null;
 }
-function extractInnerOverrideInfo(override) {
-  if (!override) {
-    return null;
-  }
-  const overridableValue = componentOverridablePropTypeUtil.extract(override);
-  const innerOverride = overridableValue ? componentInstanceOverridePropTypeUtil.extract(overridableValue.origin_value) : componentInstanceOverridePropTypeUtil.extract(override);
-  if (!innerOverride) {
-    return null;
+
+// src/utils/get-container-by-origin-id.ts
+import { getContainer as getContainer2 } from "@elementor/editor-elements";
+function getContainerByOriginId(originElementId, instanceElementId) {
+  if (!instanceElementId) {
+    return getContainer2(originElementId);
   }
-  const {
-    schema_source: schemaSource,
-    override_key: innerOverrideKey,
-    override_value: overrideValue
-  } = innerOverride;
-  const componentId = schemaSource?.id;
-  if (!componentId || !innerOverrideKey) {
+  const instanceContainer = getContainer2(instanceElementId);
+  if (!instanceContainer) {
     return null;
   }
-  return { componentId, innerOverrideKey, overrideValue };
+  const legacyWindow = window;
+  return legacyWindow.elementor?.getContainerByKeyValue?.({
+    key: "originId",
+    value: originElementId,
+    parent: instanceContainer.view
+  }) ?? null;
 }
 
-// src/components/control-label.tsx
-import * as React18 from "react";
-import { ControlAdornments, ControlFormLabel } from "@elementor/editor-controls";
-import { Stack as Stack8 } from "@elementor/ui";
-var ControlLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ React18.createElement(Stack8, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React18.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React18.createElement(ControlAdornments, null));
-};
-
-// src/components/errors.ts
-import { createError } from "@elementor/utils";
-var OverrideControlInnerElementNotFoundError = createError({
-  code: "override_control_inner_element_not_found",
-  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 useSelector3 } from "@elementor/store";
-
 // src/utils/get-overridable-prop.ts
 import { __getState as getState5 } from "@elementor/store";
 function getOverridableProp({
@@ -1842,82 +1805,124 @@ function getOverridableProp({
   return overridableProps.props[overrideKey];
 }
 
-// src/components/instance-editing-panel/use-resolved-origin-value.tsx
-function useResolvedOriginValue(override, overridableProp) {
-  const components = useSelector3(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;
+// src/utils/resolve-overrides-chain.ts
+function resolveOverridesChain({
+  outerOverridableProp,
+  outerInstanceId,
+  overridesMapping = {}
+}) {
+  if (!outerOverridableProp.originPropFields) {
+    const innerElement = getContainerByOriginId(outerOverridableProp.elementId, outerInstanceId);
+    if (!innerElement) {
+      throw new Error(
+        `Inner element not found inside instance. elementId: ${outerOverridableProp.elementId}, instanceId: ${outerInstanceId}`
+      );
     }
+    return { isChainBroken: false, innerElement, overridesMapping };
   }
-  const { elementId, propKey } = originPropFields ?? {};
-  if (elementId && propKey) {
-    return findOriginValueByElementId(components, elementId, propKey);
+  const currentInstance = getContainerByOriginId(outerOverridableProp.elementId, outerInstanceId);
+  if (!currentInstance) {
+    return { isChainBroken: true };
   }
-  return null;
-}
-function getOriginFromOverride(components, override) {
-  const innerOverrideInfo = extractInnerOverrideInfo(override);
-  if (!innerOverrideInfo) {
-    return null;
-  }
-  const { componentId, innerOverrideKey, overrideValue } = innerOverrideInfo;
-  const prop = getOverridableProp({ componentId, overrideKey: innerOverrideKey });
-  if (hasValue(prop?.originValue)) {
-    return prop.originValue;
+  const { componentId, overrides } = extractComponentInstanceSettings(currentInstance);
+  if (!componentId) {
+    throw new Error(
+      `Component ID not found for current instance. currentInstanceId: ${currentInstance.id}. outerInstanceId: ${outerInstanceId}`
+    );
   }
-  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 mergedOverrides = buildOverridesMap(overridesMapping, overrides ?? []);
+  const override = findOverrideByOuterKey(overrides, outerOverridableProp.overrideKey);
+  const overrideKey = componentInstanceOverridePropTypeUtil.extract(override)?.override_key;
+  if (!override || !overrideKey) {
+    return { isChainBroken: true };
   }
-  const nestedOverridable = componentOverridablePropTypeUtil.extract(overrideValue);
-  if (nestedOverridable) {
-    return getOriginFromOverride(components, componentOverridablePropTypeUtil.create(nestedOverridable));
+  const overridableProp = getOverridableProp({ componentId, overrideKey });
+  if (!overridableProp) {
+    throw new Error(`Overridable prop not found. componentId: ${componentId}, overrideKey: ${overrideKey}`);
   }
-  return null;
+  return resolveOverridesChain({
+    outerOverridableProp: overridableProp,
+    outerInstanceId: currentInstance.id,
+    overridesMapping: mergedOverrides
+  });
 }
-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
-      );
+function buildOverridesMap(existing, levelOverrides) {
+  const result = { ...existing };
+  for (const item of levelOverrides) {
+    const overridableValue = componentOverridablePropTypeUtil.extract(item);
+    if (overridableValue) {
+      const override = componentInstanceOverridePropTypeUtil.extract(overridableValue.origin_value);
+      if (!override) {
+        continue;
+      }
+      const outerKey = overridableValue.override_key;
+      const innerKey = override.override_key;
+      const innerValue = override.override_value;
+      const higherLevelOverride = existing[outerKey];
+      if (higherLevelOverride) {
+        const outerValue = higherLevelOverride.value;
+        result[innerKey] = {
+          value: outerValue ?? innerValue,
+          outermostKey: higherLevelOverride.outermostKey ?? outerKey
+        };
+        continue;
+      }
+      result[innerKey] = {
+        value: innerValue,
+        outermostKey: outerKey
+      };
+    } else {
+      const override = componentInstanceOverridePropTypeUtil.extract(item);
+      if (!override) {
+        continue;
+      }
+      const key = override.override_key;
+      const value = override.override_value;
+      result[key] = { value };
     }
   }
-  return null;
+  return result;
+}
+function extractComponentInstanceSettings(element) {
+  const instanceSetting = element.settings?.get("component_instance");
+  const instanceValue = componentInstancePropTypeUtil.extract(instanceSetting);
+  const componentId = instanceValue?.component_id?.value;
+  const overrides = componentInstanceOverridesPropTypeUtil.extract(instanceValue?.overrides);
+  return { componentId, overrides };
 }
-function hasValue(value) {
-  return value !== null && value !== void 0;
+function findOverrideByOuterKey(overrides, outerKey) {
+  if (!overrides) {
+    return null;
+  }
+  const overridableOverride = overrides.find((item) => {
+    const overridableValue = componentOverridablePropTypeUtil.extract(item);
+    if (!overridableValue) {
+      return false;
+    }
+    return overridableValue.override_key === outerKey;
+  });
+  const override = componentOverridablePropTypeUtil.extract(overridableOverride)?.origin_value;
+  if (!override || !componentInstanceOverridePropTypeUtil.isValid(override)) {
+    return null;
+  }
+  return override;
 }
 
+// src/components/control-label.tsx
+import * as React18 from "react";
+import { ControlAdornments, ControlFormLabel } from "@elementor/editor-controls";
+import { Stack as Stack8 } from "@elementor/ui";
+var ControlLabel = ({ children, ...props }) => {
+  return /* @__PURE__ */ React18.createElement(Stack8, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React18.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React18.createElement(ControlAdornments, null));
+};
+
+// src/components/errors.ts
+import { createError } from "@elementor/utils";
+var OverrideControlInnerElementNotFoundError = createError({
+  code: "override_control_inner_element_not_found",
+  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/utils/correct-exposed-empty-override.ts
 function correctExposedEmptyOverride(newPropValue, matchingOverride) {
   const newOverridableValue = componentOverridablePropTypeUtil.extract(newPropValue);
@@ -1931,6 +1936,45 @@ function correctExposedEmptyOverride(newPropValue, matchingOverride) {
   });
 }
 
+// src/components/instance-editing-panel/utils/resolve-element-settings.ts
+function applyOverridesToSettings(elementSettings, overrides) {
+  const result = {};
+  for (const [propKey, propValue] of Object.entries(elementSettings)) {
+    const overridable = componentOverridablePropTypeUtil.extract(propValue);
+    if (!overridable) {
+      result[propKey] = propValue;
+      continue;
+    }
+    const override = overrides[overridable.override_key];
+    if (!override) {
+      result[propKey] = propValue;
+      continue;
+    }
+    if (override.outermostKey && override.outermostKey !== overridable.override_key) {
+      const originValue = overridable.origin_value;
+      result[propKey] = componentOverridablePropTypeUtil.create({
+        override_key: override.outermostKey,
+        origin_value: override.value ?? originValue
+      });
+    } else {
+      result[propKey] = override.value ?? propValue;
+    }
+  }
+  return result;
+}
+function unwrapOverridableSettings(elementSettings) {
+  const result = {};
+  for (const [propKey, propValue] of Object.entries(elementSettings)) {
+    const overridable = componentOverridablePropTypeUtil.extract(propValue);
+    if (!overridable) {
+      result[propKey] = propValue;
+      continue;
+    }
+    result[propKey] = overridable.origin_value;
+  }
+  return result;
+}
+
 // src/components/instance-editing-panel/override-prop-control.tsx
 function OverridePropControl({ overrideKey }) {
   const overridableProps = useComponentOverridableProps();
@@ -1952,19 +1996,54 @@ function OverrideControl({ overridableProp }) {
   );
   const controlReplacements = getControlReplacements();
   const matchingOverride = getMatchingOverride(overrides, overridableProp.overrideKey);
-  const recursiveOriginValue = useResolvedOriginValue(matchingOverride, overridableProp);
   if (!componentId) {
     throw new Error("Component ID is required");
   }
   if (!overridableProps) {
     throw new Error("Component has no overridable props");
   }
+  const {
+    elementId: originElementId,
+    widgetType,
+    elType,
+    propKey
+  } = overridableProp.originPropFields ?? overridableProp;
+  const type = elType === "widget" ? widgetType : elType;
+  const elementType = getElementType2(type);
+  const { elementId, overridesMapping } = useMemo(() => {
+    const overridesChainResult = resolveOverridesChain({
+      outerOverridableProp: overridableProp,
+      outerInstanceId: componentInstanceElement.element.id
+    });
+    if (overridesChainResult.isChainBroken) {
+      throw new OverrideControlInnerElementNotFoundError({
+        context: { componentId, elementId: originElementId }
+      });
+    }
+    return {
+      elementId: overridesChainResult.innerElement.id,
+      overridesMapping: overridesChainResult.overridesMapping
+    };
+  }, [overridableProp, componentInstanceElement.element.id, componentId, originElementId]);
+  const settingsWithInnerOverrides = useMemo(() => {
+    const settings = getElementSettings(
+      elementId,
+      Object.keys(elementType?.propsSchema ?? {})
+    );
+    return applyOverridesToSettings(settings, overridesMapping);
+  }, [elementId, elementType?.propsSchema, overridesMapping]);
+  const resolvedElementSettings = useMemo(() => {
+    const withAllOverrides = applyOverridesToSettings(
+      settingsWithInnerOverrides,
+      formatOverridesToApply(overrides)
+    );
+    return unwrapOverridableSettings(withAllOverrides);
+  }, [settingsWithInnerOverrides, overrides]);
   const propType = getPropTypeForComponentOverride(overridableProp);
-  if (!propType) {
+  if (!propType || !elementType) {
     return null;
   }
-  const resolvedOverrideValue = matchingOverride ? resolveOverridePropValue(matchingOverride) : null;
-  const propValue = resolvedOverrideValue ?? recursiveOriginValue ?? overridableProp.originValue;
+  const propValue = resolvedElementSettings[propKey];
   const value = {
     [overridableProp.overrideKey]: propValue
   };
@@ -2002,8 +2081,13 @@ function OverrideControl({ overridableProp }) {
         updateOverridableProp(wrappingComponentId, overridableValue, overridableProp.originPropFields);
         return;
       }
-      const { elType: elType2, widgetType: widgetType2, propKey: propKey2, elementId: elementId2 } = overridableProp;
-      updateOverridableProp(wrappingComponentId, overridableValue, { elType: elType2, widgetType: widgetType2, propKey: propKey2, elementId: elementId2 });
+      const originPropFields = {
+        elType: overridableProp.elType,
+        widgetType: overridableProp.widgetType,
+        propKey: overridableProp.propKey,
+        elementId: overridableProp.elementId
+      };
+      updateOverridableProp(wrappingComponentId, overridableValue, originPropFields);
     }
   };
   const { control, controlProps, layout } = getControlParams(
@@ -2011,23 +2095,6 @@ function OverrideControl({ overridableProp }) {
     overridableProp?.originPropFields ?? overridableProp,
     overridableProp.label
   );
-  const {
-    elementId: originElementId,
-    widgetType,
-    elType,
-    propKey
-  } = overridableProp.originPropFields ?? overridableProp;
-  const element = getContainerByOriginId(originElementId, componentInstanceElement.element.id);
-  if (!element) {
-    throw new OverrideControlInnerElementNotFoundError({ context: { componentId, elementId: originElementId } });
-  }
-  const elementId = element.id;
-  const type = elType === "widget" ? widgetType : elType;
-  const elementType = getElementType2(type);
-  if (!elementType) {
-    return null;
-  }
-  const settings = getElementSettings(elementId, Object.keys(elementType.propsSchema));
   const propTypeSchema = createTopLevelObjectType({
     schema: {
       [overridableProp.overrideKey]: propType
@@ -2039,18 +2106,26 @@ function OverrideControl({ overridableProp }) {
       value: componentOverridablePropTypeUtil.extract(matchingOverride) ?? void 0,
       componentInstanceElement
     },
-    /* @__PURE__ */ React19.createElement(ElementProvider, { element: { id: elementId, type }, elementType, settings }, /* @__PURE__ */ React19.createElement(SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React19.createElement(
-      PropProvider,
+    /* @__PURE__ */ React19.createElement(
+      ElementProvider,
       {
-        propType: propTypeSchema,
-        value,
-        setValue,
-        isDisabled: () => {
-          return false;
-        }
+        element: { id: elementId, type },
+        elementType,
+        settings: resolvedElementSettings
       },
-      /* @__PURE__ */ React19.createElement(PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React19.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React19.createElement(Box8, { mb: 1.5 }, /* @__PURE__ */ React19.createElement(ControlTypeContainer, { layout }, layout !== "custom" && /* @__PURE__ */ React19.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React19.createElement(OriginalControl, { control, controlProps })))))
-    )))
+      /* @__PURE__ */ React19.createElement(SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React19.createElement(
+        PropProvider,
+        {
+          propType: propTypeSchema,
+          value,
+          setValue,
+          isDisabled: () => {
+            return false;
+          }
+        },
+        /* @__PURE__ */ React19.createElement(PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React19.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React19.createElement(Box8, { mb: 1.5 }, /* @__PURE__ */ React19.createElement(ControlTypeContainer, { layout }, layout !== "custom" && /* @__PURE__ */ React19.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React19.createElement(OriginalControl, { control, controlProps })))))
+      ))
+    )
   );
 }
 function getTempNewValueForDynamicProp(propType, propValue, newPropValue) {
@@ -2132,6 +2207,27 @@ function isValidOverride(overridableProps, override) {
   const overridableKey = componentOverridablePropTypeUtil.isValid(override) ? override.value.origin_value?.value.override_key : override.value.override_key;
   return !!overridableProps.props[overridableKey];
 }
+function formatOverridesToApply(overrides) {
+  if (!overrides) {
+    return {};
+  }
+  const result = {};
+  for (const item of overrides) {
+    const overridable = componentOverridablePropTypeUtil.extract(item);
+    let override = item;
+    if (overridable) {
+      override = overridable.origin_value;
+    }
+    const extractedOverride = componentInstanceOverridePropTypeUtil.extract(override);
+    if (!extractedOverride) {
+      continue;
+    }
+    result[extractedOverride.override_key] = {
+      value: extractedOverride.override_value
+    };
+  }
+  return result;
+}
 
 // src/components/instance-editing-panel/override-props-group.tsx
 function OverridePropsGroup({ group }) {
@@ -2194,42 +2290,11 @@ function filterValidOverridableProps(overridableProps, instanceElementId) {
   return { props: validProps, groups: filteredGroups };
 }
 function isExposedPropValid(prop, instanceElementId) {
-  if (!prop.originPropFields) {
-    return true;
-  }
-  const innerComponentInstanceElement = getContainerByOriginId(prop.elementId, instanceElementId);
-  if (!innerComponentInstanceElement) {
-    return false;
-  }
-  const setting = innerComponentInstanceElement.settings?.get("component_instance") ?? null;
-  const componentInstance = componentInstancePropTypeUtil.extract(setting);
-  if (!componentInstance?.component_id?.value) {
-    return false;
-  }
-  const overrides = componentInstanceOverridesPropTypeUtil.extract(componentInstance.overrides) ?? void 0;
-  const matchingOverride = findOverrideByOuterKey(overrides, prop.overrideKey);
-  const innerOverrideInfo = extractInnerOverrideInfo(matchingOverride);
-  if (!innerOverrideInfo) {
-    return false;
-  }
-  const { componentId, innerOverrideKey } = innerOverrideInfo;
-  const innerOverridableProp = getOverridableProp({ componentId, overrideKey: innerOverrideKey });
-  if (!innerOverridableProp) {
-    return false;
-  }
-  return isExposedPropValid(innerOverridableProp, innerComponentInstanceElement.id);
-}
-function findOverrideByOuterKey(overrides, outerKey) {
-  if (!overrides) {
-    return null;
-  }
-  return overrides.find((override) => {
-    const overridableValue = componentOverridablePropTypeUtil.extract(override);
-    if (overridableValue) {
-      return overridableValue.override_key === outerKey;
-    }
-    return override.value.override_key === outerKey;
-  }) ?? null;
+  const { isChainBroken } = resolveOverridesChain({
+    outerOverridableProp: prop,
+    outerInstanceId: instanceElementId
+  });
+  return !isChainBroken;
 }
 
 // src/hooks/use-sanitize-overridable-props.ts