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

package/dist/index.js

@@ -94,7 +94,7 @@ var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
 var import_editor_elements_panel = require("@elementor/editor-elements-panel");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
-var import_store36 = require("@elementor/store");
+var import_store34 = require("@elementor/store");
 var import_i18n16 = require("@wordpress/i18n");
 
 // src/component-instance-transformer.ts
@@ -1598,13 +1598,14 @@ var import_ui14 = require("@elementor/ui");
 
 // src/components/instance-editing-panel/override-props-group.tsx
 var React20 = __toESM(require("react"));
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_ui13 = require("@elementor/ui");
 
 // src/components/instance-editing-panel/override-prop-control.tsx
 var React19 = __toESM(require("react"));
+var import_react7 = require("react");
 var import_editor_controls2 = require("@elementor/editor-controls");
 var import_editor_editing_panel = require("@elementor/editor-editing-panel");
 var import_editor_elements7 = require("@elementor/editor-elements");
@@ -1810,26 +1811,8 @@ function updateOverridableProp(componentId, propValue, originPropFields) {
   componentsActions.setOverridableProps(componentId, newOverridableProps);
 }
 
-// src/utils/get-container-by-origin-id.ts
-var import_editor_elements5 = require("@elementor/editor-elements");
-function getContainerByOriginId(originElementId, instanceElementId) {
-  if (!instanceElementId) {
-    return (0, import_editor_elements5.getContainer)(originElementId);
-  }
-  const instanceContainer = (0, import_editor_elements5.getContainer)(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
-var import_editor_elements6 = require("@elementor/editor-elements");
+var import_editor_elements5 = require("@elementor/editor-elements");
 var getPropTypeForComponentOverride = (overridableProp) => {
   if (overridableProp.originPropFields) {
     return getPropType(overridableProp.originPropFields);
@@ -1841,7 +1824,7 @@ var getPropTypeForComponentOverride = (overridableProp) => {
   });
 };
 function getPropType({ widgetType, propKey }) {
-  const widgetPropsSchema = (0, import_editor_elements6.getWidgetsCache)()?.[widgetType]?.atomic_props_schema;
+  const widgetPropsSchema = (0, import_editor_elements5.getWidgetsCache)()?.[widgetType]?.atomic_props_schema;
   return widgetPropsSchema?.[propKey];
 }
 
@@ -1856,45 +1839,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
+var import_editor_elements6 = require("@elementor/editor-elements");
+function getContainerByOriginId(originElementId, instanceElementId) {
+  if (!instanceElementId) {
+    return (0, import_editor_elements6.getContainer)(originElementId);
   }
-  const {
-    schema_source: schemaSource,
-    override_key: innerOverrideKey,
-    override_value: overrideValue
-  } = innerOverride;
-  const componentId = schemaSource?.id;
-  if (!componentId || !innerOverrideKey) {
+  const instanceContainer = (0, import_editor_elements6.getContainer)(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
-var React18 = __toESM(require("react"));
-var import_editor_controls = require("@elementor/editor-controls");
-var import_ui11 = require("@elementor/ui");
-var ControlLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ React18.createElement(import_ui11.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React18.createElement(import_editor_controls.ControlFormLabel, { ...props }, children), /* @__PURE__ */ React18.createElement(import_editor_controls.ControlAdornments, null));
-};
-
-// src/components/errors.ts
-var import_utils3 = require("@elementor/utils");
-var OverrideControlInnerElementNotFoundError = (0, import_utils3.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
-var import_store18 = require("@elementor/store");
-
 // src/utils/get-overridable-prop.ts
 var import_store16 = require("@elementor/store");
 function getOverridableProp({
@@ -1908,82 +1871,124 @@ function getOverridableProp({
   return overridableProps.props[overrideKey];
 }
 
-// src/components/instance-editing-panel/use-resolved-origin-value.tsx
-function useResolvedOriginValue(override, overridableProp) {
-  const components = (0, import_store18.__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;
+// 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);
-  }
-  return null;
-}
-function getOriginFromOverride(components, override) {
-  const innerOverrideInfo = extractInnerOverrideInfo(override);
-  if (!innerOverrideInfo) {
-    return null;
+  const currentInstance = getContainerByOriginId(outerOverridableProp.elementId, outerInstanceId);
+  if (!currentInstance) {
+    return { isChainBroken: true };
   }
-  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
+var React18 = __toESM(require("react"));
+var import_editor_controls = require("@elementor/editor-controls");
+var import_ui11 = require("@elementor/ui");
+var ControlLabel = ({ children, ...props }) => {
+  return /* @__PURE__ */ React18.createElement(import_ui11.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React18.createElement(import_editor_controls.ControlFormLabel, { ...props }, children), /* @__PURE__ */ React18.createElement(import_editor_controls.ControlAdornments, null));
+};
+
+// src/components/errors.ts
+var import_utils3 = require("@elementor/utils");
+var OverrideControlInnerElementNotFoundError = (0, import_utils3.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);
@@ -1997,6 +2002,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();
@@ -2018,19 +2062,54 @@ function OverrideControl({ overridableProp }) {
   );
   const controlReplacements = (0, import_editor_controls2.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 = (0, import_editor_elements7.getElementType)(type);
+  const { elementId, overridesMapping } = (0, import_react7.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 = (0, import_react7.useMemo)(() => {
+    const settings = (0, import_editor_elements7.getElementSettings)(
+      elementId,
+      Object.keys(elementType?.propsSchema ?? {})
+    );
+    return applyOverridesToSettings(settings, overridesMapping);
+  }, [elementId, elementType?.propsSchema, overridesMapping]);
+  const resolvedElementSettings = (0, import_react7.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
   };
@@ -2068,8 +2147,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(
@@ -2077,23 +2161,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 = (0, import_editor_elements7.getElementType)(type);
-  if (!elementType) {
-    return null;
-  }
-  const settings = (0, import_editor_elements7.getElementSettings)(elementId, Object.keys(elementType.propsSchema));
   const propTypeSchema = (0, import_editor_editing_panel.createTopLevelObjectType)({
     schema: {
       [overridableProp.overrideKey]: propType
@@ -2105,18 +2172,26 @@ function OverrideControl({ overridableProp }) {
       value: componentOverridablePropTypeUtil.extract(matchingOverride) ?? void 0,
       componentInstanceElement
     },
-    /* @__PURE__ */ React19.createElement(import_editor_editing_panel.ElementProvider, { element: { id: elementId, type }, elementType, settings }, /* @__PURE__ */ React19.createElement(import_editor_editing_panel.SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React19.createElement(
-      import_editor_controls2.PropProvider,
+    /* @__PURE__ */ React19.createElement(
+      import_editor_editing_panel.ElementProvider,
       {
-        propType: propTypeSchema,
-        value,
-        setValue,
-        isDisabled: () => {
-          return false;
-        }
+        element: { id: elementId, type },
+        elementType,
+        settings: resolvedElementSettings
       },
-      /* @__PURE__ */ React19.createElement(import_editor_controls2.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React19.createElement(import_editor_controls2.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React19.createElement(import_ui12.Box, { mb: 1.5 }, /* @__PURE__ */ React19.createElement(import_editor_editing_panel.ControlTypeContainer, { layout }, layout !== "custom" && /* @__PURE__ */ React19.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React19.createElement(OriginalControl, { control, controlProps })))))
-    )))
+      /* @__PURE__ */ React19.createElement(import_editor_editing_panel.SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React19.createElement(
+        import_editor_controls2.PropProvider,
+        {
+          propType: propTypeSchema,
+          value,
+          setValue,
+          isDisabled: () => {
+            return false;
+          }
+        },
+        /* @__PURE__ */ React19.createElement(import_editor_controls2.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React19.createElement(import_editor_controls2.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React19.createElement(import_ui12.Box, { mb: 1.5 }, /* @__PURE__ */ React19.createElement(import_editor_editing_panel.ControlTypeContainer, { layout }, layout !== "custom" && /* @__PURE__ */ React19.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React19.createElement(OriginalControl, { control, controlProps })))))
+      ))
+    )
   );
 }
 function getTempNewValueForDynamicProp(propType, propValue, newPropValue) {
@@ -2198,6 +2273,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 }) {
@@ -2205,7 +2301,7 @@ function OverridePropsGroup({ group }) {
   const handleClick = () => {
     setIsOpen(!isOpen);
   };
-  const id = (0, import_react7.useId)();
+  const id = (0, import_react8.useId)();
   const labelId = `label-${id}`;
   const contentId = `content-${id}`;
   const title = group.label;
@@ -2260,42 +2356,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
@@ -2381,7 +2446,7 @@ function InstanceEditingPanel() {
 
 // src/components/load-template-components.tsx
 var React23 = __toESM(require("react"));
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_editor_templates = require("@elementor/editor-templates");
 
 // src/store/actions/load-components-assets.ts
@@ -2431,7 +2496,7 @@ async function getDocumentsMap(ids, cache) {
 }
 
 // src/store/actions/load-components-overridable-props.ts
-var import_store23 = require("@elementor/store");
+var import_store21 = require("@elementor/store");
 function loadComponentsOverridableProps(componentIds) {
   if (!componentIds.length) {
     return;
@@ -2439,7 +2504,7 @@ function loadComponentsOverridableProps(componentIds) {
   return Promise.all(componentIds.map(loadComponentOverrides));
 }
 async function loadComponentOverrides(componentId) {
-  const isOverridablePropsLoaded = selectIsOverridablePropsLoaded((0, import_store23.__getState)(), componentId);
+  const isOverridablePropsLoaded = selectIsOverridablePropsLoaded((0, import_store21.__getState)(), componentId);
   if (isOverridablePropsLoaded) {
     return;
   }
@@ -2447,7 +2512,7 @@ async function loadComponentOverrides(componentId) {
   if (!overridableProps) {
     return;
   }
-  (0, import_store23.__dispatch)(
+  (0, import_store21.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps
@@ -2456,12 +2521,12 @@ async function loadComponentOverrides(componentId) {
 }
 
 // src/store/actions/load-components-styles.ts
-var import_store25 = require("@elementor/store");
+var import_store23 = require("@elementor/store");
 function loadComponentsStyles(documents) {
   if (!documents.size) {
     return;
   }
-  const knownComponents = selectStyles((0, import_store25.__getState)());
+  const knownComponents = selectStyles((0, import_store23.__getState)());
   const unknownDocuments = new Map([...documents.entries()].filter(([id]) => !knownComponents[id]));
   if (!unknownDocuments.size) {
     return;
@@ -2472,7 +2537,7 @@ function addStyles(documents) {
   const styles = Object.fromEntries(
     [...documents.entries()].map(([id, document2]) => [id, extractStylesFromDocument(document2)])
   );
-  (0, import_store25.__dispatch)(slice.actions.addStyles(styles));
+  (0, import_store23.__dispatch)(slice.actions.addStyles(styles));
 }
 function extractStylesFromDocument(document2) {
   if (!document2.elements?.length) {
@@ -2510,7 +2575,7 @@ var LoadTemplateComponents = () => {
 };
 function LoadTemplateComponentsInternal() {
   const templates = (0, import_editor_templates.useLoadedTemplates)();
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     loadComponentsAssets(templates.flatMap((elements) => elements ?? []));
   }, [templates]);
   return null;
@@ -2520,7 +2585,7 @@ function LoadTemplateComponentsInternal() {
 var import_editor_canvas4 = require("@elementor/editor-canvas");
 var import_editor_documents4 = require("@elementor/editor-documents");
 var import_editor_notifications2 = require("@elementor/editor-notifications");
-var import_store27 = require("@elementor/store");
+var import_store25 = require("@elementor/store");
 var import_utils5 = require("@elementor/utils");
 var import_i18n13 = require("@wordpress/i18n");
 
@@ -2903,7 +2968,7 @@ function createComponentModel() {
       }
       const componentUid = editorSettings?.component_uid;
       if (componentUid) {
-        const component = selectComponentByUid((0, import_store27.__getState)(), componentUid);
+        const component = selectComponentByUid((0, import_store25.__getState)(), componentUid);
         if (component?.name) {
           return component.name;
         }
@@ -2924,11 +2989,11 @@ function createComponentModel() {
 }
 
 // src/populate-store.ts
-var import_react9 = require("react");
-var import_store29 = require("@elementor/store");
+var import_react10 = require("react");
+var import_store27 = require("@elementor/store");
 function PopulateStore() {
-  (0, import_react9.useEffect)(() => {
-    (0, import_store29.__dispatch)(loadComponents());
+  (0, import_react10.useEffect)(() => {
+    (0, import_store27.__dispatch)(loadComponents());
   }, []);
   return null;
 }
@@ -2937,7 +3002,7 @@ function PopulateStore() {
 var import_editor_elements9 = require("@elementor/editor-elements");
 var import_editor_notifications3 = require("@elementor/editor-notifications");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
-var import_store30 = require("@elementor/store");
+var import_store28 = require("@elementor/store");
 var import_i18n14 = require("@wordpress/i18n");
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
@@ -2963,7 +3028,7 @@ function wouldCreateCircularNesting(componentIdToAdd) {
   if (componentIdToAdd === void 0) {
     return false;
   }
-  const state = (0, import_store30.__getState)();
+  const state = (0, import_store28.__getState)();
   const currentComponentId = selectCurrentComponentId(state);
   const path = selectPath(state);
   if (currentComponentId === null) {
@@ -3061,19 +3126,19 @@ function blockCircularPaste(args) {
 }
 
 // src/store/actions/remove-component-styles.ts
-var import_store32 = require("@elementor/store");
+var import_store30 = require("@elementor/store");
 function removeComponentStyles(id) {
   apiClient.invalidateComponentConfigCache(id);
-  (0, import_store32.__dispatch)(slice.actions.removeStyles({ id }));
+  (0, import_store30.__dispatch)(slice.actions.removeStyles({ id }));
 }
 
 // src/store/components-styles-provider.ts
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_store34 = require("@elementor/store");
+var import_store32 = require("@elementor/store");
 var componentsStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
   key: "components-styles",
   priority: 100,
-  subscribe: (cb) => (0, import_store34.__subscribeWithSelector)(
+  subscribe: (cb) => (0, import_store32.__subscribeWithSelector)(
     (state) => state[SLICE_NAME],
     () => {
       cb();
@@ -3081,10 +3146,10 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
   ),
   actions: {
     all: () => {
-      return selectFlatStyles((0, import_store34.__getState)());
+      return selectFlatStyles((0, import_store32.__getState)());
     },
     get: (id) => {
-      return selectFlatStyles((0, import_store34.__getState)()).find((style) => style.id === id) ?? null;
+      return selectFlatStyles((0, import_store32.__getState)()).find((style) => style.id === id) ?? null;
     }
   }
 });
@@ -3165,7 +3230,7 @@ function load(result) {
 // src/init.ts
 function init() {
   import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
-  (0, import_store36.__registerSlice)(slice);
+  (0, import_store34.__registerSlice)(slice);
   (0, import_editor_canvas5.registerElementType)(
     COMPONENT_WIDGET_TYPE2,
     (options) => createComponentType({