@elementor/editor-components 3.35.0-432 → 3.35.0-433

package/dist/index.mjs

@@ -2762,6 +2762,7 @@ var Components = () => {
 
 // src/components/consts.ts
 var COMPONENT_DOCUMENT_TYPE = "elementor_component";
+var OVERRIDABLE_PROP_REPLACEMENT_ID = "overridable-prop";
 
 // src/components/create-component-form/create-component-form.tsx
 import * as React19 from "react";
@@ -3437,7 +3438,7 @@ var EditModeDialog = ({ lockedBy }) => {
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
-import * as React27 from "react";
+import * as React28 from "react";
 import { ControlAdornmentsProvider } from "@elementor/editor-controls";
 import { getFieldIndicators } from "@elementor/editor-editing-panel";
 import { useSelectedElement as useSelectedElement2 } from "@elementor/editor-elements";
@@ -3536,20 +3537,25 @@ var EmptyState2 = ({ onEditComponent }) => {
 };
 
 // src/components/instance-editing-panel/override-props-group.tsx
-import * as React26 from "react";
+import * as React27 from "react";
 import { useId } from "react";
 import { useStateByElement } from "@elementor/editor-editing-panel";
 import { CollapseIcon } from "@elementor/editor-ui";
 import { Box as Box13, Collapse, ListItemButton as ListItemButton3, ListItemText, Stack as Stack16 } from "@elementor/ui";
 
 // src/components/instance-editing-panel/override-prop-control.tsx
-import * as React25 from "react";
-import { PropKeyProvider, PropProvider, useBoundProp } from "@elementor/editor-controls";
+import * as React26 from "react";
+import { ControlReplacementsProvider, PropKeyProvider, PropProvider, useBoundProp } from "@elementor/editor-controls";
 import {
+  BaseControl,
   controlsRegistry,
   createTopLevelObjectType,
-  SettingsField
+  ElementProvider as ElementProvider2,
+  getControlReplacements,
+  SettingsField,
+  useElement as useElement2
 } from "@elementor/editor-editing-panel";
+import { getElementType as getElementType3 } from "@elementor/editor-elements";
 import { Stack as Stack15 } from "@elementor/ui";
 
 // src/hooks/use-controls-by-widget-type.ts
@@ -3583,8 +3589,51 @@ function getControlsByBind(controls) {
   );
 }
 
+// src/provider/overridable-prop-context.tsx
+import * as React24 from "react";
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var OverridablePropContext = createContext2(null);
+function OverridablePropProvider({ children, ...props }) {
+  return /* @__PURE__ */ React24.createElement(OverridablePropContext.Provider, { value: props }, children);
+}
+var useOverridablePropValue = () => useContext2(OverridablePropContext)?.value;
+var useComponentInstanceElement = () => useContext2(OverridablePropContext)?.componentInstanceElement;
+
 // src/store/actions/update-overridable-prop.ts
 import { __dispatch as dispatch13, __getState as getState16 } from "@elementor/store";
+
+// src/utils/resolve-override-prop-value.ts
+var resolveOverridePropValue = (originalPropValue) => {
+  const isOverridable = componentOverridablePropTypeUtil.isValid(originalPropValue);
+  if (isOverridable) {
+    return getOverridableValue(originalPropValue);
+  }
+  const isOverride = componentInstanceOverridePropTypeUtil.isValid(originalPropValue);
+  if (isOverride) {
+    return getOverrideValue(originalPropValue);
+  }
+  return originalPropValue;
+};
+function getOverridableValue(overridableProp) {
+  const overridableValue = componentOverridablePropTypeUtil.extract(overridableProp);
+  if (!overridableValue) {
+    return null;
+  }
+  const isOverride = componentInstanceOverridePropTypeUtil.isValid(overridableValue.origin_value);
+  if (isOverride) {
+    return getOverrideValue(overridableValue.origin_value);
+  }
+  return overridableValue.origin_value;
+}
+function getOverrideValue(overrideProp) {
+  const overrideValue = componentInstanceOverridePropTypeUtil.extract(overrideProp);
+  if (!overrideValue) {
+    return null;
+  }
+  return overrideValue.override_value;
+}
+
+// src/store/actions/update-overridable-prop.ts
 function updateOverridableProp(componentId, propValue, originPropFields) {
   const overridableProps = selectOverridableProps(getState16(), componentId);
   if (!overridableProps) {
@@ -3594,11 +3643,12 @@ function updateOverridableProp(componentId, propValue, originPropFields) {
   if (!existingOverridableProp) {
     return;
   }
+  const originValue = resolveOverridePropValue(propValue.origin_value);
   const newOverridableProp = originPropFields ? {
-    originValue: propValue.origin_value,
+    originValue,
     originPropFields
   } : {
-    originValue: propValue.origin_value
+    originValue
   };
   const newOverridableProps = {
     ...overridableProps,
@@ -3624,11 +3674,12 @@ var getPropTypeForComponentOverride = (overridableProp) => {
   if (overridableProp.originPropFields) {
     return getPropType(overridableProp.originPropFields);
   }
-  const { elType, widgetType, propKey } = overridableProp;
+  const { elType, widgetType, propKey, elementId } = overridableProp;
   return getPropType({
     elType,
     widgetType,
-    propKey
+    propKey,
+    elementId
   });
 };
 function getPropType({ widgetType, propKey }) {
@@ -3637,23 +3688,25 @@ function getPropType({ widgetType, propKey }) {
 }
 
 // src/components/control-label.tsx
-import * as React24 from "react";
+import * as React25 from "react";
 import { ControlAdornments, ControlFormLabel } from "@elementor/editor-controls";
 import { Stack as Stack14 } from "@elementor/ui";
 var ControlLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ React24.createElement(Stack14, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React24.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React24.createElement(ControlAdornments, null));
+  return /* @__PURE__ */ React25.createElement(Stack14, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React25.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React25.createElement(ControlAdornments, null));
 };
 
 // src/components/instance-editing-panel/override-prop-control.tsx
 function OverridePropControl({ overridableProp, overrides }) {
-  return /* @__PURE__ */ React25.createElement(SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React25.createElement(OverrideControl, { overridableProp, overrides }));
+  return /* @__PURE__ */ React26.createElement(SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React26.createElement(OverrideControl, { overridableProp, overrides }));
 }
 function OverrideControl({ overridableProp, overrides }) {
+  const componentInstanceElement = useElement2();
   const componentId = useCurrentComponentId();
   const { value: instanceValue, setValue: setInstanceValue } = useBoundProp(componentInstancePropTypeUtil);
   const controls = useControlsByWidgetType(
     overridableProp?.originPropFields?.widgetType ?? overridableProp.widgetType
   );
+  const controlReplacements = getControlReplacements();
   const propType = getPropTypeForComponentOverride(overridableProp);
   if (!propType) {
     return null;
@@ -3668,13 +3721,18 @@ function OverrideControl({ overridableProp, overrides }) {
     throw new Error("Component ID is required");
   }
   const matchingOverride = getMatchingOverride(overrides, overridableProp.overrideKey);
-  const propValue = matchingOverride ? getPropValue(matchingOverride) : overridableProp.originValue;
+  const propValue = matchingOverride ? resolveOverridePropValue(matchingOverride) : overridableProp.originValue;
   const value = {
     [overridableProp.overrideKey]: propValue
   };
   const setValue = (newValue) => {
     const newPropValue = newValue[overridableProp.overrideKey];
-    const newOverrideValue = createOverrideValue(overridableProp.overrideKey, newPropValue, componentInstanceId);
+    const newOverrideValue = createOverrideValue({
+      matchingOverride,
+      overrideKey: overridableProp.overrideKey,
+      overrideValue: newPropValue,
+      componentId: componentInstanceId
+    });
     let newOverrides = overrides?.map((override) => override === matchingOverride ? newOverrideValue : override) ?? [];
     if (!matchingOverride) {
       newOverrides = [...newOverrides, newOverrideValue];
@@ -3689,33 +3747,41 @@ function OverrideControl({ overridableProp, overrides }) {
         updateOverridableProp(componentId, overridableValue, overridableProp.originPropFields);
         return;
       }
-      const { elType, widgetType, propKey } = overridableProp;
-      updateOverridableProp(componentId, overridableValue, { elType, widgetType, propKey });
+      const { elType: elType2, widgetType: widgetType2, propKey: propKey2, elementId: elementId2 } = overridableProp;
+      updateOverridableProp(componentId, overridableValue, { elType: elType2, widgetType: widgetType2, propKey: propKey2, elementId: elementId2 });
     }
   };
-  return /* @__PURE__ */ React25.createElement(
-    PropProvider,
+  const { control, controlProps, layout } = getControlParams(
+    controls,
+    overridableProp?.originPropFields ?? overridableProp,
+    overridableProp.label
+  );
+  const { elementId, widgetType, elType, propKey } = overridableProp.originPropFields ?? overridableProp;
+  const type = elType === "widget" ? widgetType : elType;
+  const elementType = getElementType3(type);
+  if (!elementType) {
+    return null;
+  }
+  return /* @__PURE__ */ React26.createElement(
+    OverridablePropProvider,
     {
-      propType: propTypeSchema,
-      value,
-      setValue,
-      isDisabled: () => {
-        return false;
-      }
+      value: componentOverridablePropTypeUtil.extract(matchingOverride) ?? void 0,
+      componentInstanceElement
     },
-    /* @__PURE__ */ React25.createElement(PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React25.createElement(Stack15, { direction: "column", gap: 1, mb: 1.5 }, /* @__PURE__ */ React25.createElement(ControlLabel, null, overridableProp.label), getControl(controls, overridableProp?.originPropFields ?? overridableProp)))
+    /* @__PURE__ */ React26.createElement(ElementProvider2, { element: { id: elementId, type }, elementType }, /* @__PURE__ */ React26.createElement(SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React26.createElement(
+      PropProvider,
+      {
+        propType: propTypeSchema,
+        value,
+        setValue,
+        isDisabled: () => {
+          return false;
+        }
+      },
+      /* @__PURE__ */ React26.createElement(PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React26.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React26.createElement(Stack15, { direction: "column", gap: 1, mb: 1.5 }, layout !== "custom" && /* @__PURE__ */ React26.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React26.createElement(OriginalControl, { control, controlProps }))))
+    )))
   );
 }
-function getPropValue(value) {
-  const overridableValue = componentOverridablePropTypeUtil.extract(value);
-  if (overridableValue) {
-    return value;
-  }
-  if (componentInstanceOverridePropTypeUtil.isValid(value)) {
-    return value.value.override_value;
-  }
-  return null;
-}
 function getMatchingOverride(overrides, overrideKey) {
   return overrides?.find((override) => {
     const overridableValue = componentOverridablePropTypeUtil.extract(override);
@@ -3728,19 +3794,26 @@ function getMatchingOverride(overrides, overrideKey) {
     return comparedOverrideKey === overrideKey;
   }) ?? null;
 }
-function createOverrideValue(overrideKey, overrideValue, componentId) {
-  const overridableValue = componentOverridablePropTypeUtil.extract(overrideValue);
-  if (overridableValue) {
+function createOverrideValue({
+  matchingOverride,
+  overrideKey,
+  overrideValue,
+  componentId
+}) {
+  const overridableValue = componentOverridablePropTypeUtil.extract(matchingOverride);
+  const newOverridableValue = componentOverridablePropTypeUtil.extract(overrideValue);
+  const anyOverridable = newOverridableValue ?? overridableValue;
+  if (anyOverridable) {
     const innerOverride = componentInstanceOverridePropTypeUtil.create({
       override_key: overrideKey,
-      override_value: overridableValue.origin_value,
+      override_value: resolveOverridePropValue(overrideValue),
       schema_source: {
         type: "component",
         id: componentId
       }
     });
     return componentOverridablePropTypeUtil.create({
-      override_key: overridableValue.override_key,
+      override_key: anyOverridable.override_key,
       origin_value: innerOverride
     });
   }
@@ -3753,10 +3826,41 @@ function createOverrideValue(overrideKey, overrideValue, componentId) {
     }
   });
 }
-function getControl(controls, originPropFields) {
-  const ControlComponent = controlsRegistry.get(controls[originPropFields.propKey].value.type);
-  const controlProps = controls[originPropFields.propKey].value.props;
-  return /* @__PURE__ */ React25.createElement(ControlComponent, { ...controlProps });
+function getControlParams(controls, originPropFields, label) {
+  const control = controls[originPropFields.propKey];
+  const { value } = control;
+  const layout = getControlLayout(control);
+  const controlProps = populateChildControlProps(value.props);
+  if (layout === "custom") {
+    controlProps.label = label ?? value.label;
+  }
+  return {
+    control,
+    controlProps,
+    layout
+  };
+}
+function OriginalControl({ control, controlProps }) {
+  const { value } = control;
+  return /* @__PURE__ */ React26.createElement(BaseControl, { type: value.type, props: controlProps });
+}
+function getControlLayout(control) {
+  return control.value.meta?.layout || controlsRegistry.getLayout(control.value.type);
+}
+function populateChildControlProps(props) {
+  if (props.childControlType) {
+    const childComponent = controlsRegistry.get(props.childControlType);
+    const childPropType = controlsRegistry.getPropTypeUtil(props.childControlType);
+    props = {
+      ...props,
+      childControlConfig: {
+        component: childComponent,
+        props: props.childControlProps || {},
+        propTypeUtil: childPropType
+      }
+    };
+  }
+  return props;
 }
 
 // src/components/instance-editing-panel/override-props-group.tsx
@@ -3769,7 +3873,7 @@ function OverridePropsGroup({ group, props, overrides }) {
   const labelId = `label-${id2}`;
   const contentId = `content-${id2}`;
   const title = group.label;
-  return /* @__PURE__ */ React26.createElement(Box13, { "aria-label": `${title} section` }, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React27.createElement(Box13, { "aria-label": `${title} section` }, /* @__PURE__ */ React27.createElement(
     ListItemButton3,
     {
       id: labelId,
@@ -3779,7 +3883,7 @@ function OverridePropsGroup({ group, props, overrides }) {
       p: 0,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React26.createElement(Stack16, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React27.createElement(Stack16, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React27.createElement(
       ListItemText,
       {
         secondary: title,
@@ -3787,8 +3891,8 @@ function OverridePropsGroup({ group, props, overrides }) {
         sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
       }
     )),
-    /* @__PURE__ */ React26.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
-  ), /* @__PURE__ */ React26.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React26.createElement(Stack16, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React27.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+  ), /* @__PURE__ */ React27.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React27.createElement(Stack16, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React27.createElement(
     OverridePropControl,
     {
       key: overrideKey,
@@ -3814,7 +3918,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__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(PanelHeader2, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React27.createElement(Stack17, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React27.createElement(Stack17, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React27.createElement(ComponentsIcon4, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React27.createElement(PanelHeaderTitle2, null, component.name)), /* @__PURE__ */ React27.createElement(Tooltip4, { title: panelTitle }, /* @__PURE__ */ React27.createElement(IconButton6, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React27.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React27.createElement(PanelBody2, null, /* @__PURE__ */ React27.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? /* @__PURE__ */ React27.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React27.createElement(Stack17, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(PanelHeader2, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React28.createElement(Stack17, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React28.createElement(Stack17, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React28.createElement(ComponentsIcon4, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React28.createElement(PanelHeaderTitle2, null, component.name)), /* @__PURE__ */ React28.createElement(Tooltip4, { 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(Stack17, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React28.createElement(
     OverridePropsGroup,
     {
       key: group.id,
@@ -3827,27 +3931,19 @@ function InstanceEditingPanel() {
 
 // src/components/overridable-props/overridable-prop-control.tsx
 import * as React29 from "react";
-import { ControlReplacementsProvider, PropKeyProvider as PropKeyProvider2, PropProvider as PropProvider2, useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
-import { createTopLevelObjectType as createTopLevelObjectType2, useElement as useElement2 } from "@elementor/editor-editing-panel";
-
-// src/provider/overridable-prop-context.tsx
-import * as React28 from "react";
-import { createContext as createContext2, useContext as useContext2 } from "react";
-var OverridablePropContext = createContext2(null);
-function OverridablePropProvider({ children, ...props }) {
-  return /* @__PURE__ */ React28.createElement(OverridablePropContext.Provider, { value: props }, children);
-}
-var useOverridablePropValue = () => useContext2(OverridablePropContext)?.value;
-
-// src/components/overridable-props/overridable-prop-control.tsx
+import { ControlReplacementsProvider as ControlReplacementsProvider2, PropKeyProvider as PropKeyProvider2, PropProvider as PropProvider2, useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
+import { createTopLevelObjectType as createTopLevelObjectType2, getControlReplacements as getControlReplacements2, useElement as useElement3 } from "@elementor/editor-editing-panel";
 function OverridablePropControl({
-  OriginalControl,
+  OriginalControl: OriginalControl2,
   ...props
 }) {
-  const { elementType } = useElement2();
+  const { elementType } = useElement3();
   const { value, bind, setValue, placeholder, ...propContext } = useBoundProp2(componentOverridablePropTypeUtil);
   const componentId = useCurrentComponentId();
   const overridableProps = useOverridableProps(componentId);
+  const filteredReplacements = getControlReplacements2().filter(
+    (r) => !r.id || r.id !== OVERRIDABLE_PROP_REPLACEMENT_ID
+  );
   if (!componentId) {
     return null;
   }
@@ -3855,6 +3951,7 @@ function OverridablePropControl({
     throw new Error("Override key is required");
   }
   const isComponentInstance2 = elementType.key === "e-component";
+  const overridablePropData = overridableProps?.props?.[value.override_key];
   const setOverridableValue = (newValue) => {
     const propValue2 = {
       ...value,
@@ -3862,14 +3959,18 @@ function OverridablePropControl({
     };
     setValue(propValue2);
     if (!isComponentInstance2) {
-      const existingProp = overridableProps?.props?.[propValue2.override_key];
-      updateOverridableProp(componentId, propValue2, existingProp?.originPropFields);
+      updateOverridableProp(componentId, propValue2, overridablePropData?.originPropFields);
     }
   };
   const defaultPropType = elementType.propsSchema[bind];
+  const overridePropType = overridablePropData ? getPropTypeForComponentOverride(overridablePropData) : void 0;
+  const resolvedPropType = overridePropType ?? defaultPropType;
+  if (!resolvedPropType) {
+    return null;
+  }
   const propType = createTopLevelObjectType2({
     schema: {
-      [bind]: isComponentInstance2 && overridableProps ? getPropTypeForComponentOverride(overridableProps.props[value.override_key]) ?? defaultPropType : defaultPropType
+      [bind]: resolvedPropType
     }
   });
   const propValue = isComponentInstance2 ? (value.origin_value?.value).override_value : value.origin_value;
@@ -3885,14 +3986,14 @@ function OverridablePropControl({
       },
       placeholder: objectPlaceholder
     },
-    /* @__PURE__ */ React29.createElement(PropKeyProvider2, { bind }, /* @__PURE__ */ React29.createElement(ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React29.createElement(OriginalControl, { ...props })))
+    /* @__PURE__ */ React29.createElement(PropKeyProvider2, { bind }, /* @__PURE__ */ React29.createElement(ControlReplacementsProvider2, { replacements: filteredReplacements }, /* @__PURE__ */ React29.createElement(OriginalControl2, { ...props })))
   ));
 }
 
 // src/components/overridable-props/overridable-prop-indicator.tsx
 import * as React31 from "react";
 import { useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
-import { useElement as useElement3 } from "@elementor/editor-editing-panel";
+import { useElement as useElement4 } from "@elementor/editor-editing-panel";
 import { getWidgetsCache as getWidgetsCache3 } from "@elementor/editor-elements";
 import { bindPopover as bindPopover2, bindTrigger as bindTrigger4, Popover as Popover4, Tooltip as Tooltip5, usePopupState as usePopupState4 } from "@elementor/ui";
 import { __ as __28 } from "@wordpress/i18n";
@@ -4059,9 +4160,10 @@ function Content2({ componentId, overridableProps }) {
   const {
     element: { id: elementId },
     elementType
-  } = useElement3();
+  } = useElement4();
   const { value, bind, propType } = useBoundProp3();
   const contextOverridableValue = useOverridablePropValue();
+  const componentInstanceElement = useComponentInstanceElement();
   const { value: boundPropOverridableValue, setValue: setOverridableValue } = useBoundProp3(
     componentOverridablePropTypeUtil
   );
@@ -4074,17 +4176,17 @@ function Content2({ componentId, overridableProps }) {
   const { elType } = getWidgetsCache3()?.[elementType.key] ?? { elType: "widget" };
   const handleSubmit = ({ label, group }) => {
     const propTypeDefault = propType.default ?? {};
-    const originValue = (!overridableValue ? value : overridableValue?.origin_value) ?? propTypeDefault;
+    const originValue = resolveOverridePropValue(overridableValue?.origin_value) ?? value ?? propTypeDefault;
     const matchingOverridableProp = overridableValue ? overridableProps?.props?.[overridableValue.override_key] : void 0;
     const overridablePropConfig = setOverridableProp({
       componentId,
       overrideKey: overridableValue?.override_key ?? null,
-      elementId,
+      elementId: componentInstanceElement?.element.id ?? elementId,
       label,
       groupId: group,
       propKey: bind,
       elType: elType ?? "widget",
-      widgetType: elementType.key,
+      widgetType: componentInstanceElement?.elementType.key ?? elementType.key,
       originValue,
       originPropFields: matchingOverridableProp?.originPropFields
     });
@@ -4216,7 +4318,7 @@ import { getMCPByDomain as getMCPByDomain2 } from "@elementor/editor-mcp";
 
 // src/mcp/save-as-component-tool.ts
 import { DOCUMENT_STRUCTURE_URI, WIDGET_SCHEMA_URI } from "@elementor/editor-canvas";
-import { getContainer as getContainer4, getElementType as getElementType3, getWidgetsCache as getWidgetsCache4 } from "@elementor/editor-elements";
+import { getContainer as getContainer4, getElementType as getElementType4, getWidgetsCache as getWidgetsCache4 } from "@elementor/editor-elements";
 import { getMCPByDomain, toolPrompts } from "@elementor/editor-mcp";
 import { AxiosError } from "@elementor/http-client";
 import { z as z6 } from "@elementor/schema";
@@ -4301,7 +4403,7 @@ function enrichOverridableProps(input, rootElement) {
     }
     const elType = element.elType;
     const widgetType = element.widgetType || element.elType;
-    const elementType = getElementType3(widgetType);
+    const elementType = getElementType4(widgetType);
     if (!elementType) {
       throw new Error(
         `Element type "${widgetType}" is not atomic or does not have a settings schema. Cannot expose property "${propKey}" for element "${elementId}".`
@@ -4931,6 +5033,7 @@ function init() {
     indicator: OverridablePropIndicator
   });
   registerControlReplacement({
+    id: OVERRIDABLE_PROP_REPLACEMENT_ID,
     component: OverridablePropControl,
     condition: ({ value }) => componentOverridablePropTypeUtil.isValid(value)
   });