@elementor/editor-components 3.35.0-389 → 3.35.0-390

package/dist/index.mjs

@@ -172,6 +172,9 @@ var getCreatedThisSession = (state) => state[SLICE_NAME].createdThisSession;
 var getPath = (state) => state[SLICE_NAME].path;
 var getCurrentComponentId = (state) => state[SLICE_NAME].currentComponentId;
 var selectComponent = (state, componentId) => state[SLICE_NAME].data.find((component) => component.id === componentId);
+var useComponent = (componentId) => {
+  return useSelector((state) => componentId ? selectComponent(state, componentId) : null);
+};
 var selectComponents = createSelector(
   selectData,
   selectUnpublishedData,
@@ -212,6 +215,11 @@ var selectOverridableProps = createSelector(
     return component.overridableProps ?? DEFAULT_OVERRIDABLE_PROPS;
   }
 );
+var useOverridableProps = (componentId) => {
+  return useSelector(
+    (state) => componentId ? selectOverridableProps(state, componentId) : null
+  );
+};
 var selectIsOverridablePropsLoaded = createSelector(
   selectComponent,
   (component) => {
@@ -669,11 +677,11 @@ function reorderOverridableGroups({ componentId, newOrder }) {
   );
 }
 
-// src/store/actions/update-overridable-prop.ts
+// src/store/actions/update-overridable-prop-params.ts
 import { __dispatch as dispatch6, __getState as getState7 } from "@elementor/store";
-function updateOverridableProp({
+function updateOverridablePropParams({
   componentId,
-  propKey,
+  overrideKey,
   label,
   groupId
 }) {
@@ -681,7 +689,7 @@ function updateOverridableProp({
   if (!overridableProps) {
     return;
   }
-  const prop = overridableProps.props[propKey];
+  const prop = overridableProps.props[overrideKey];
   if (!prop) {
     return;
   }
@@ -692,7 +700,7 @@ function updateOverridableProp({
     label,
     groupId: newGroupId
   };
-  const updatedGroups = movePropBetweenGroups(overridableProps.groups, propKey, oldGroupId, newGroupId);
+  const updatedGroups = movePropBetweenGroups(overridableProps.groups, overrideKey, oldGroupId, newGroupId);
   dispatch6(
     slice.actions.setOverridableProps({
       componentId,
@@ -700,7 +708,7 @@ function updateOverridableProp({
         ...overridableProps,
         props: {
           ...overridableProps.props,
-          [propKey]: updatedProp
+          [overrideKey]: updatedProp
         },
         groups: updatedGroups
       }
@@ -711,7 +719,7 @@ function updateOverridableProp({
 
 // src/components/component-panel-header/use-overridable-props.ts
 import { __useSelector as useSelector3 } from "@elementor/store";
-function useOverridableProps(componentId) {
+function useOverridableProps2(componentId) {
   return useSelector3((state) => {
     if (!componentId) {
       return void 0;
@@ -1246,7 +1254,7 @@ function validateGroupLabel(label, existingGroups) {
 function useCurrentEditableItem() {
   const [editingGroupId, setEditingGroupId] = useState3(null);
   const currentComponentId = useCurrentComponentId();
-  const overridableProps = useOverridableProps(currentComponentId);
+  const overridableProps = useOverridableProps2(currentComponentId);
   const allGroupsRecord = overridableProps?.groups?.items ?? {};
   const currentGroup = editingGroupId ? allGroupsRecord[editingGroupId] : null;
   const validateLabel = (newLabel) => {
@@ -1309,7 +1317,7 @@ function generateUniqueLabel(groups) {
 // src/components/component-properties-panel/component-properties-panel-content.tsx
 function ComponentPropertiesPanelContent({ onClose }) {
   const currentComponentId = useCurrentComponentId();
-  const overridableProps = useOverridableProps(currentComponentId);
+  const overridableProps = useOverridableProps2(currentComponentId);
   const [isAddingGroup, setIsAddingGroup] = useState4(false);
   const introductionRef = useRef(null);
   const groupLabelEditable = useCurrentEditableItem();
@@ -1352,10 +1360,10 @@ function ComponentPropertiesPanelContent({ onClose }) {
     deleteOverridableProp({ componentId: currentComponentId, propKey });
     setDocumentModifiedStatus2(true);
   };
-  const handlePropertyUpdate = (propKey, data) => {
-    updateOverridableProp({
+  const handlePropertyUpdate = (overrideKey, data) => {
+    updateOverridablePropParams({
       componentId: currentComponentId,
-      propKey,
+      overrideKey,
       label: data.label,
       groupId: data.group
     });
@@ -1493,7 +1501,7 @@ var slideUp = keyframes`
 var MESSAGE_KEY = "components-properties-introduction";
 var ComponentPanelHeader = () => {
   const currentComponentId = useCurrentComponentId();
-  const overridableProps = useOverridableProps(currentComponentId);
+  const overridableProps = useOverridableProps2(currentComponentId);
   const onBack = useNavigateBack();
   const componentName = getComponentName();
   const [isMessageSuppressed, suppressMessage] = useSuppressedMessage(MESSAGE_KEY);
@@ -1844,6 +1852,9 @@ var getComponentIds = async (elements) => {
     const isComponent = isComponentInstance({ widgetType, elType });
     if (isComponent) {
       const componentId = settings?.component_instance?.value?.component_id.value;
+      if (!componentId) {
+        return;
+      }
       const document = await getComponentDocumentData(componentId);
       childElements = document?.elements;
       if (Boolean(componentId)) {
@@ -1851,12 +1862,13 @@ var getComponentIds = async (elements) => {
       }
     }
     if (!!childElements?.length) {
-      ids.push(...await getComponentIds(childElements));
+      const newIds = await getComponentIds(childElements);
+      ids.push(...Array.from(new Set(newIds)));
     }
     return ids;
   });
   const result = (await Promise.all(components)).flat();
-  return Array.from(new Set(result));
+  return Array.from(new Set(result)).filter((value) => value !== void 0);
 };
 
 // src/store/actions/load-components-overridable-props.ts
@@ -2817,22 +2829,26 @@ var EditModeDialog = ({ lockedBy }) => {
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
-import * as React23 from "react";
-import { useElement } from "@elementor/editor-editing-panel";
-import { useElementSetting, useSelectedElement as useSelectedElement2 } from "@elementor/editor-elements";
+import * as React25 from "react";
+import { ControlAdornmentsProvider } from "@elementor/editor-controls";
+import { getFieldIndicators } from "@elementor/editor-editing-panel";
+import { useSelectedElement as useSelectedElement2 } from "@elementor/editor-elements";
 import { PanelBody as PanelBody2, PanelHeader as PanelHeader2, PanelHeaderTitle as PanelHeaderTitle2 } from "@elementor/editor-panels";
 import { ComponentsIcon as ComponentsIcon3, PencilIcon as PencilIcon2 } from "@elementor/icons";
-import { __getState as getState12 } from "@elementor/store";
-import { IconButton as IconButton6, Stack as Stack15, Tooltip as Tooltip4 } from "@elementor/ui";
+import { IconButton as IconButton6, Stack as Stack17, Tooltip as Tooltip4 } from "@elementor/ui";
 import { __ as __21 } from "@wordpress/i18n";
 
+// src/hooks/use-component-instance-settings.ts
+import { useElement } from "@elementor/editor-editing-panel";
+import { useElementSetting } from "@elementor/editor-elements";
+
 // src/prop-types/component-instance-prop-type.ts
-import { createPropUtils as createPropUtils3, numberPropTypeUtil } from "@elementor/editor-props";
-import { z as z4 } from "@elementor/schema";
+import { createPropUtils as createPropUtils4, numberPropTypeUtil } from "@elementor/editor-props";
+import { z as z5 } from "@elementor/schema";
 
 // src/prop-types/component-instance-overrides-prop-type.ts
-import { createPropUtils as createPropUtils2 } from "@elementor/editor-props";
-import { z as z3 } from "@elementor/schema";
+import { createPropUtils as createPropUtils3 } from "@elementor/editor-props";
+import { z as z4 } from "@elementor/schema";
 
 // src/prop-types/component-instance-override-prop-type.ts
 import { createPropUtils } from "@elementor/editor-props";
@@ -2849,21 +2865,42 @@ var componentInstanceOverridePropTypeUtil = createPropUtils(
   })
 );
 
+// src/prop-types/component-overridable-prop-type.ts
+import { createPropUtils as createPropUtils2 } from "@elementor/editor-props";
+import { z as z3 } from "@elementor/schema";
+var componentOverridablePropTypeUtil = createPropUtils2(
+  "overridable",
+  z3.object({
+    override_key: z3.string(),
+    origin_value: z3.object({
+      $$type: z3.string(),
+      value: z3.unknown()
+    }).nullable()
+  })
+);
+
 // src/prop-types/component-instance-overrides-prop-type.ts
-var componentInstanceOverridesPropTypeUtil = createPropUtils2(
+var componentInstanceOverridesPropTypeUtil = createPropUtils3(
   "overrides",
-  z3.array(componentInstanceOverridePropTypeUtil.schema).optional().default([])
+  z4.array(z4.union([componentInstanceOverridePropTypeUtil.schema, componentOverridablePropTypeUtil.schema])).optional().default([])
 );
 
 // src/prop-types/component-instance-prop-type.ts
-var componentInstancePropTypeUtil = createPropUtils3(
+var componentInstancePropTypeUtil = createPropUtils4(
   "component-instance",
-  z4.object({
+  z5.object({
     component_id: numberPropTypeUtil.schema,
-    overrides: z4.optional(componentInstanceOverridesPropTypeUtil.schema)
+    overrides: z5.optional(componentInstanceOverridesPropTypeUtil.schema)
   })
 );
 
+// src/hooks/use-component-instance-settings.ts
+function useComponentInstanceSettings() {
+  const { element } = useElement();
+  const settings = useElementSetting(element.id, "component_instance");
+  return componentInstancePropTypeUtil.extract(settings);
+}
+
 // src/components/instance-editing-panel/empty-state.tsx
 import * as React21 from "react";
 import { ComponentPropListIcon as ComponentPropListIcon4, PencilIcon } from "@elementor/icons";
@@ -2891,12 +2928,231 @@ var EmptyState2 = ({ onEditComponent }) => {
 };
 
 // src/components/instance-editing-panel/override-props-group.tsx
-import * as React22 from "react";
+import * as React24 from "react";
 import { useId } from "react";
 import { useStateByElement } from "@elementor/editor-editing-panel";
 import { CollapseIcon } from "@elementor/editor-ui";
-import { Collapse, ListItemButton as ListItemButton3, ListItemText, Stack as Stack14 } from "@elementor/ui";
-function OverridePropsGroup({ group, props }) {
+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 React23 from "react";
+import { PropKeyProvider, PropProvider, useBoundProp } from "@elementor/editor-controls";
+import {
+  controlsRegistry,
+  createTopLevelObjectType,
+  SettingsField
+} from "@elementor/editor-editing-panel";
+import { Stack as Stack15 } from "@elementor/ui";
+
+// src/hooks/use-controls-by-widget-type.ts
+import { getElementType } from "@elementor/editor-elements";
+function useControlsByWidgetType(type) {
+  const elementType = getElementType(type);
+  if (!elementType) {
+    return {};
+  }
+  const controls = iterateControls(elementType.controls);
+  return getControlsByBind(controls);
+}
+function iterateControls(controls) {
+  return controls.map((control) => {
+    if (control.type === "control" && "bind" in control.value) {
+      return control;
+    }
+    if (control.type === "section") {
+      return iterateControls(control.value.items);
+    }
+    return null;
+  }).filter(Boolean).flat();
+}
+function getControlsByBind(controls) {
+  return controls.reduce(
+    (controlsByBind, control) => ({
+      ...controlsByBind,
+      [control.value.bind]: control
+    }),
+    {}
+  );
+}
+
+// src/store/actions/update-overridable-prop.ts
+import { __dispatch as dispatch11, __getState as getState12 } from "@elementor/store";
+function updateOverridableProp(componentId, propValue, originPropFields) {
+  const overridableProps = selectOverridableProps(getState12(), componentId);
+  if (!overridableProps) {
+    return;
+  }
+  const existingOverridableProp = overridableProps.props[propValue.override_key];
+  if (!existingOverridableProp) {
+    return;
+  }
+  const newOverridableProp = originPropFields ? {
+    originValue: propValue.origin_value,
+    originPropFields
+  } : {
+    originValue: propValue.origin_value
+  };
+  const newOverridableProps = {
+    ...overridableProps,
+    props: {
+      ...overridableProps.props,
+      [existingOverridableProp.overrideKey]: {
+        ...existingOverridableProp,
+        ...newOverridableProp
+      }
+    }
+  };
+  dispatch11(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: newOverridableProps
+    })
+  );
+}
+
+// src/utils/get-prop-type-for-component-override.ts
+import { getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
+var getPropTypeForComponentOverride = (overridableProp) => {
+  if (overridableProp.originPropFields) {
+    return getPropType(overridableProp.originPropFields);
+  }
+  const { elType, widgetType, propKey } = overridableProp;
+  return getPropType({
+    elType,
+    widgetType,
+    propKey
+  });
+};
+function getPropType({ widgetType, propKey }) {
+  const widgetPropsSchema = getWidgetsCache2()?.[widgetType]?.atomic_props_schema;
+  return widgetPropsSchema?.[propKey];
+}
+
+// src/components/control-label.tsx
+import * as React22 from "react";
+import { ControlAdornments, ControlFormLabel } from "@elementor/editor-controls";
+import { Stack as Stack14 } from "@elementor/ui";
+var ControlLabel = ({ children, ...props }) => {
+  return /* @__PURE__ */ React22.createElement(Stack14, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React22.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React22.createElement(ControlAdornments, null));
+};
+
+// src/components/instance-editing-panel/override-prop-control.tsx
+function OverridePropControl({ overridableProp, overrides }) {
+  return /* @__PURE__ */ React23.createElement(SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React23.createElement(OverrideControl, { overridableProp, overrides }));
+}
+function OverrideControl({ overridableProp, overrides }) {
+  const componentId = useCurrentComponentId();
+  const { value: instanceValue, setValue: setInstanceValue } = useBoundProp(componentInstancePropTypeUtil);
+  const controls = useControlsByWidgetType(
+    overridableProp?.originPropFields?.widgetType ?? overridableProp.widgetType
+  );
+  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 ? getPropValue(matchingOverride) : overridableProp.originValue;
+  const value = {
+    [overridableProp.overrideKey]: propValue
+  };
+  const setValue = (newValue) => {
+    const newPropValue = newValue[overridableProp.overrideKey];
+    const newOverrideValue = createOverrideValue(overridableProp.overrideKey, newPropValue, componentInstanceId);
+    let newOverrides = overrides?.map((override) => override === matchingOverride ? newOverrideValue : override) ?? [];
+    if (!matchingOverride) {
+      newOverrides = [...newOverrides, newOverrideValue];
+    }
+    setInstanceValue({
+      ...instanceValue,
+      overrides: componentInstanceOverridesPropTypeUtil.create(newOverrides)
+    });
+    const overridableValue = componentOverridablePropTypeUtil.extract(newOverrideValue);
+    if (overridableValue && componentId) {
+      if (overridableProp.originPropFields) {
+        updateOverridableProp(componentId, overridableValue, overridableProp.originPropFields);
+        return;
+      }
+      const { elType, widgetType, propKey } = overridableProp;
+      updateOverridableProp(componentId, overridableValue, { elType, widgetType, propKey });
+    }
+  };
+  return /* @__PURE__ */ React23.createElement(
+    PropProvider,
+    {
+      propType: propTypeSchema,
+      value,
+      setValue,
+      isDisabled: () => {
+        return false;
+      }
+    },
+    /* @__PURE__ */ React23.createElement(PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React23.createElement(Stack15, { direction: "column", gap: 1, mb: 1.5 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, overridableProp.label), getControl(controls, overridableProp?.originPropFields ?? overridableProp)))
+  );
+}
+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);
+    let comparedOverrideKey = null;
+    if (overridableValue) {
+      comparedOverrideKey = overridableValue.origin_value?.value?.override_key;
+    } else {
+      comparedOverrideKey = override.value.override_key;
+    }
+    return comparedOverrideKey === overrideKey;
+  }) ?? null;
+}
+function createOverrideValue(overrideKey, overrideValue, componentId) {
+  const overridableValue = componentOverridablePropTypeUtil.extract(overrideValue);
+  if (overridableValue) {
+    const innerOverride = componentInstanceOverridePropTypeUtil.create({
+      override_key: overrideKey,
+      override_value: overridableValue.origin_value,
+      schema_source: {
+        type: "component",
+        id: componentId
+      }
+    });
+    return componentOverridablePropTypeUtil.create({
+      override_key: overridableValue.override_key,
+      origin_value: innerOverride
+    });
+  }
+  return componentInstanceOverridePropTypeUtil.create({
+    override_key: overrideKey,
+    override_value: overrideValue,
+    schema_source: {
+      type: "component",
+      id: componentId
+    }
+  });
+}
+function getControl(controls, originPropFields) {
+  const ControlComponent = controlsRegistry.get(controls[originPropFields.propKey].value.type);
+  const controlProps = controls[originPropFields.propKey].value.props;
+  return /* @__PURE__ */ React23.createElement(ControlComponent, { ...controlProps });
+}
+
+// src/components/instance-editing-panel/override-props-group.tsx
+function OverridePropsGroup({ group, props, overrides }) {
   const [isOpen, setIsOpen] = useStateByElement(group.id, true);
   const handleClick = () => {
     setIsOpen(!isOpen);
@@ -2905,7 +3161,7 @@ function OverridePropsGroup({ group, props }) {
   const labelId = `label-${id2}`;
   const contentId = `content-${id2}`;
   const title = group.label;
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React24.createElement(Box13, { "aria-label": `${title} section` }, /* @__PURE__ */ React24.createElement(
     ListItemButton3,
     {
       id: labelId,
@@ -2915,7 +3171,7 @@ function OverridePropsGroup({ group, props }) {
       p: 0,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React22.createElement(Stack14, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React24.createElement(Stack16, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React24.createElement(
       ListItemText,
       {
         secondary: title,
@@ -2923,20 +3179,24 @@ function OverridePropsGroup({ group, props }) {
         sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
       }
     )),
-    /* @__PURE__ */ React22.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
-  ), /* @__PURE__ */ React22.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React22.createElement(Stack14, { direction: "column", gap: 1, p: 2 }, group.props.map((propId) => (
-    // TODO: Render actual controls
-    /* @__PURE__ */ React22.createElement("pre", { key: propId }, JSON.stringify(props[propId], null, 2))
+    /* @__PURE__ */ React24.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+  ), /* @__PURE__ */ React24.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React24.createElement(Stack16, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React24.createElement(
+    OverridePropControl,
+    {
+      key: overrideKey,
+      overridableProp: props[overrideKey],
+      overrides
+    }
   )))));
 }
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
 function InstanceEditingPanel() {
-  const { element } = useElement();
-  const settings = useElementSetting(element.id, "component_instance");
-  const componentId = componentInstancePropTypeUtil.extract(settings)?.component_id?.value;
-  const component = componentId ? selectComponent(getState12(), componentId) : null;
-  const overridableProps = componentId ? selectOverridableProps(getState12(), componentId) : null;
+  const settings = useComponentInstanceSettings();
+  const componentId = settings?.component_id?.value;
+  const overrides = settings?.overrides?.value;
+  const component = useComponent(componentId ?? null);
+  const overridableProps = useOverridableProps(componentId ?? null);
   const componentInstanceId = useSelectedElement2()?.element?.id ?? null;
   if (!componentId || !overridableProps || !component) {
     return null;
@@ -2947,118 +3207,88 @@ function InstanceEditingPanel() {
     (groupId) => overridableProps.groups.items[groupId] ? overridableProps.groups.items[groupId] : null
   ).filter(Boolean);
   const isEmpty = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(PanelHeader2, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React23.createElement(Stack15, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React23.createElement(Stack15, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React23.createElement(ComponentsIcon3, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React23.createElement(PanelHeaderTitle2, null, component.name)), /* @__PURE__ */ React23.createElement(Tooltip4, { title: panelTitle }, /* @__PURE__ */ React23.createElement(IconButton6, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React23.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React23.createElement(PanelBody2, null, isEmpty ? /* @__PURE__ */ React23.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React23.createElement(Stack15, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React23.createElement(OverridePropsGroup, { key: group.id, group, props: overridableProps.props })))));
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(PanelHeader2, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React25.createElement(Stack17, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React25.createElement(Stack17, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React25.createElement(ComponentsIcon3, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React25.createElement(PanelHeaderTitle2, null, component.name)), /* @__PURE__ */ React25.createElement(Tooltip4, { title: panelTitle }, /* @__PURE__ */ React25.createElement(IconButton6, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React25.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React25.createElement(PanelBody2, null, /* @__PURE__ */ React25.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? /* @__PURE__ */ React25.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React25.createElement(Stack17, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React25.createElement(
+    OverridePropsGroup,
+    {
+      key: group.id,
+      group,
+      props: overridableProps.props,
+      overrides
+    }
+  ))))));
 }
 
 // src/components/overridable-props/overridable-prop-control.tsx
-import * as React25 from "react";
-import { ControlReplacementsProvider, PropKeyProvider, PropProvider, useBoundProp } from "@elementor/editor-controls";
-import { createTopLevelObjectType, useElement as useElement2 } from "@elementor/editor-editing-panel";
-
-// src/prop-types/component-overridable-prop-type.ts
-import { createPropUtils as createPropUtils4 } from "@elementor/editor-props";
-import { z as z5 } from "@elementor/schema";
-var componentOverridablePropTypeUtil = createPropUtils4(
-  "overridable",
-  z5.object({
-    override_key: z5.string(),
-    origin_value: z5.object({
-      $$type: z5.string(),
-      value: z5.unknown()
-    }).nullable()
-  })
-);
+import * as React27 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 React24 from "react";
+import * as React26 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);
+  return /* @__PURE__ */ React26.createElement(OverridablePropContext.Provider, { value: props }, children);
 }
 var useOverridablePropValue = () => useContext2(OverridablePropContext)?.value;
 
-// src/store/actions/update-overridable-prop-origin-value.ts
-import { __dispatch as dispatch11, __getState as getState13 } from "@elementor/store";
-function updateOverridablePropOriginValue(componentId, propValue) {
-  const overridableProps = selectOverridableProps(getState13(), componentId);
-  if (!overridableProps) {
-    return;
-  }
-  const existingOverridableProp = overridableProps.props[propValue.override_key];
-  if (!existingOverridableProp) {
-    return;
-  }
-  const newOverridableProps = {
-    ...overridableProps,
-    props: {
-      ...overridableProps.props,
-      [existingOverridableProp.overrideKey]: {
-        ...existingOverridableProp,
-        originValue: propValue.origin_value
-      }
-    }
-  };
-  dispatch11(
-    slice.actions.setOverridableProps({
-      componentId,
-      overridableProps: newOverridableProps
-    })
-  );
-}
-
 // src/components/overridable-props/overridable-prop-control.tsx
 function OverridablePropControl({
   OriginalControl,
   ...props
 }) {
   const { elementType } = useElement2();
-  const { value, bind, setValue, placeholder, ...propContext } = useBoundProp(componentOverridablePropTypeUtil);
+  const { value, bind, setValue, placeholder, ...propContext } = useBoundProp2(componentOverridablePropTypeUtil);
   const componentId = useCurrentComponentId();
+  const overridableProps = useOverridableProps(componentId);
   if (!componentId) {
     return null;
   }
   if (!value?.override_key) {
     throw new Error("Override key is required");
   }
+  const isComponentInstance2 = elementType.key === "e-component";
   const setOverridableValue = (newValue) => {
-    const propValue = {
+    const propValue2 = {
       ...value,
       origin_value: newValue[bind]
     };
-    setValue(propValue);
-    updateOverridablePropOriginValue(componentId, propValue);
+    setValue(propValue2);
+    updateOverridableProp(componentId, propValue2);
   };
-  const propType = createTopLevelObjectType({
+  const defaultPropType = elementType.propsSchema[bind];
+  const propType = createTopLevelObjectType2({
     schema: {
-      [bind]: elementType.propsSchema[bind]
+      [bind]: isComponentInstance2 && overridableProps ? getPropTypeForComponentOverride(overridableProps.props[value.override_key]) ?? defaultPropType : defaultPropType
     }
   });
+  const propValue = isComponentInstance2 ? (value.origin_value?.value).override_value : value.origin_value;
   const objectPlaceholder = placeholder ? { [bind]: placeholder } : void 0;
-  return /* @__PURE__ */ React25.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React25.createElement(
-    PropProvider,
+  return /* @__PURE__ */ React27.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React27.createElement(
+    PropProvider2,
     {
       ...propContext,
       propType,
       setValue: setOverridableValue,
-      value: { [bind]: value.origin_value },
+      value: {
+        [bind]: propValue
+      },
       placeholder: objectPlaceholder
     },
-    /* @__PURE__ */ React25.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React25.createElement(ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React25.createElement(OriginalControl, { ...props })))
+    /* @__PURE__ */ React27.createElement(PropKeyProvider2, { bind }, /* @__PURE__ */ React27.createElement(ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React27.createElement(OriginalControl, { ...props })))
   ));
 }
 
 // src/components/overridable-props/overridable-prop-indicator.tsx
-import * as React27 from "react";
-import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
+import * as React29 from "react";
+import { useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
 import { useElement as useElement3 } from "@elementor/editor-editing-panel";
-import { getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
-import { __getState as getState16 } from "@elementor/store";
+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 __23 } from "@wordpress/i18n";
 
 // src/store/actions/set-overridable-prop.ts
-import { __dispatch as dispatch12, __getState as getState14 } from "@elementor/store";
+import { __dispatch as dispatch12, __getState as getState13 } from "@elementor/store";
 import { generateUniqueId as generateUniqueId4 } from "@elementor/utils";
 function setOverridableProp({
   componentId,
@@ -3069,9 +3299,10 @@ function setOverridableProp({
   propKey,
   elType,
   widgetType,
-  originValue
+  originValue,
+  originPropFields
 }) {
-  const overridableProps = selectOverridableProps(getState14(), componentId);
+  const overridableProps = selectOverridableProps(getState13(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -3091,7 +3322,8 @@ function setOverridableProp({
     widgetType,
     elType,
     originValue,
-    groupId: currentGroupId
+    groupId: currentGroupId,
+    originPropFields
   };
   const stateAfterRemovingDuplicates = removePropsFromState(
     { ...overridableProps, groups: groupsAfterResolve },
@@ -3120,13 +3352,13 @@ function setOverridableProp({
 }
 
 // src/components/overridable-props/indicator.tsx
-import * as React26 from "react";
+import * as React28 from "react";
 import { forwardRef as forwardRef2 } from "react";
 import { CheckIcon, PlusIcon } from "@elementor/icons";
-import { Box as Box13, styled as styled3 } from "@elementor/ui";
+import { Box as Box14, styled as styled3 } from "@elementor/ui";
 import { __ as __22 } from "@wordpress/i18n";
 var SIZE2 = "tiny";
-var IconContainer = styled3(Box13)`
+var IconContainer = styled3(Box14)`
 	pointer-events: none;
 	opacity: 0;
 	transition: opacity 0.2s ease-in-out;
@@ -3143,7 +3375,7 @@ var IconContainer = styled3(Box13)`
 		stroke-width: 2px;
 	}
 `;
-var Content = styled3(Box13)`
+var Content = styled3(Box14)`
 	position: relative;
 	display: flex;
 	align-items: center;
@@ -3180,22 +3412,22 @@ var Content = styled3(Box13)`
 		}
 	}
 `;
-var Indicator = forwardRef2(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React26.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React26.createElement(
+var Indicator = forwardRef2(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React28.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React28.createElement(
   IconContainer,
   {
     className: "icon",
     "aria-label": isOverridable ? __22("Overridable property", "elementor") : __22("Make prop overridable", "elementor")
   },
-  isOverridable ? /* @__PURE__ */ React26.createElement(CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React26.createElement(PlusIcon, { fontSize: SIZE2 })
+  isOverridable ? /* @__PURE__ */ React28.createElement(CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React28.createElement(PlusIcon, { fontSize: SIZE2 })
 )));
 
 // src/components/overridable-props/utils/get-overridable-prop.ts
-import { __getState as getState15 } from "@elementor/store";
+import { __getState as getState14 } from "@elementor/store";
 function getOverridableProp({
   componentId,
   overrideKey
 }) {
-  const overridableProps = selectOverridableProps(getState15(), componentId);
+  const overridableProps = selectOverridableProps(getState14(), componentId);
   if (!overridableProps) {
     return void 0;
   }
@@ -3205,22 +3437,22 @@ function getOverridableProp({
 // src/components/overridable-props/overridable-prop-indicator.tsx
 var FORBIDDEN_KEYS = ["_cssid", "attributes"];
 function OverridablePropIndicator() {
-  const { bind } = useBoundProp2();
+  const { bind } = useBoundProp3();
   const componentId = useCurrentComponentId();
-  if (!isPropAllowed(bind) || !componentId) {
+  const overridableProps = useOverridableProps(componentId);
+  if (!isPropAllowed(bind) || !componentId || !overridableProps) {
     return null;
   }
-  const overridableProps = selectOverridableProps(getState16(), componentId);
-  return /* @__PURE__ */ React27.createElement(Content2, { componentId, overridableProps });
+  return /* @__PURE__ */ React29.createElement(Content2, { componentId, overridableProps });
 }
 function Content2({ componentId, overridableProps }) {
   const {
     element: { id: elementId },
     elementType
   } = useElement3();
-  const { value, bind, propType } = useBoundProp2();
+  const { value, bind, propType } = useBoundProp3();
   const contextOverridableValue = useOverridablePropValue();
-  const { value: boundPropOverridableValue, setValue: setOverridableValue } = useBoundProp2(
+  const { value: boundPropOverridableValue, setValue: setOverridableValue } = useBoundProp3(
     componentOverridablePropTypeUtil
   );
   const overridableValue = boundPropOverridableValue ?? contextOverridableValue;
@@ -3229,9 +3461,11 @@ function Content2({ componentId, overridableProps }) {
   });
   const triggerProps = bindTrigger4(popupState);
   const popoverProps = bindPopover2(popupState);
-  const { elType } = getWidgetsCache2()?.[elementType.key] ?? { elType: "widget" };
+  const { elType } = getWidgetsCache3()?.[elementType.key] ?? { elType: "widget" };
   const handleSubmit = ({ label, group }) => {
-    const originValue = !overridableValue ? value ?? propType.default : overridableValue?.origin_value ?? {};
+    const propTypeDefault = propType.default ?? {};
+    const originValue = (!overridableValue ? value : overridableValue?.origin_value) ?? propTypeDefault;
+    const matchingOverridableProp = overridableValue ? overridableProps?.props?.[overridableValue.override_key] : void 0;
     const overridablePropConfig = setOverridableProp({
       componentId,
       overrideKey: overridableValue?.override_key ?? null,
@@ -3241,7 +3475,8 @@ function Content2({ componentId, overridableProps }) {
       propKey: bind,
       elType: elType ?? "widget",
       widgetType: elementType.key,
-      originValue
+      originValue,
+      originPropFields: matchingOverridableProp?.originPropFields
     });
     if (!overridableValue && overridablePropConfig) {
       setOverridableValue({
@@ -3252,7 +3487,7 @@ function Content2({ componentId, overridableProps }) {
     popupState.close();
   };
   const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
-  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(Tooltip5, { placement: "top", title: __23("Override Property", "elementor") }, /* @__PURE__ */ React27.createElement(Indicator, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(Tooltip5, { placement: "top", title: __23("Override Property", "elementor") }, /* @__PURE__ */ React29.createElement(Indicator, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React29.createElement(
     Popover4,
     {
       disableScrollLock: true,
@@ -3269,7 +3504,7 @@ function Content2({ componentId, overridableProps }) {
       },
       ...popoverProps
     },
-    /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React29.createElement(
       OverridablePropForm,
       {
         onSubmit: handleSubmit,
@@ -3374,7 +3609,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, getWidgetsCache as getWidgetsCache3 } from "@elementor/editor-elements";
+import { getContainer as getContainer4, getElementType as getElementType2, 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";
@@ -3456,7 +3691,7 @@ function enrichOverridableProps(input, rootElement) {
     }
     const elType = element.elType;
     const widgetType = element.widgetType || element.elType;
-    const elementType = getElementType(widgetType);
+    const elementType = getElementType2(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}".`
@@ -3530,7 +3765,7 @@ function generateLabel(propKey) {
   return `${uniqueId} - ${propKey}`;
 }
 function getValidElementTypes() {
-  const types = getWidgetsCache3();
+  const types = getWidgetsCache4();
   if (!types) {
     return [];
   }
@@ -3720,7 +3955,7 @@ function removeComponentStyles(id2) {
 
 // src/store/components-styles-provider.ts
 import { createStylesProvider } from "@elementor/editor-styles-repository";
-import { __getState as getState17, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
+import { __getState as getState15, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
 var componentsStylesProvider = createStylesProvider({
   key: "components-styles",
   priority: 100,
@@ -3732,22 +3967,22 @@ var componentsStylesProvider = createStylesProvider({
   ),
   actions: {
     all: () => {
-      return selectFlatStyles(getState17());
+      return selectFlatStyles(getState15());
     },
     get: (id2) => {
-      return selectFlatStyles(getState17()).find((style) => style.id === id2) ?? null;
+      return selectFlatStyles(getState15()).find((style) => style.id === id2) ?? null;
     }
   }
 });
 
 // src/sync/create-components-before-save.ts
 import { updateElementSettings as updateElementSettings3 } from "@elementor/editor-elements";
-import { __dispatch as dispatch15, __getState as getState18 } from "@elementor/store";
+import { __dispatch as dispatch15, __getState as getState16 } from "@elementor/store";
 async function createComponentsBeforeSave({
   elements,
   status
 }) {
-  const unpublishedComponents = selectUnpublishedComponents(getState18());
+  const unpublishedComponents = selectUnpublishedComponents(getState16());
   if (!unpublishedComponents.length) {
     return;
   }
@@ -3799,8 +4034,11 @@ function updateComponentInstances(elements, uidToComponentId) {
 function shouldUpdateElement(element, uidToComponentId) {
   if (element.widgetType === "e-component") {
     const currentComponentId = element.settings?.component_instance?.value?.component_id.value;
-    if (currentComponentId && uidToComponentId.has(currentComponentId)) {
-      return { shouldUpdate: true, newComponentId: uidToComponentId.get(currentComponentId) };
+    if (currentComponentId && uidToComponentId.has(currentComponentId.toString())) {
+      return {
+        shouldUpdate: true,
+        newComponentId: uidToComponentId.get(currentComponentId.toString())
+      };
     }
   }
   return { shouldUpdate: false, newComponentId: null };
@@ -3821,7 +4059,7 @@ function updateElementComponentId(elementId, componentId) {
 }
 
 // src/sync/set-component-overridable-props-settings-before-save.ts
-import { __getState as getState19 } from "@elementor/store";
+import { __getState as getState17 } from "@elementor/store";
 var setComponentOverridablePropsSettingsBeforeSave = ({
   container
 }) => {
@@ -3829,7 +4067,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
   if (!currentDocument || currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE) {
     return;
   }
-  const overridableProps = selectOverridableProps(getState19(), currentDocument.id);
+  const overridableProps = selectOverridableProps(getState17(), currentDocument.id);
   if (overridableProps) {
     container.settings.set("overridable_props", overridableProps);
   }
@@ -3837,7 +4075,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
 
 // src/sync/update-archived-component-before-save.ts
 import { notify } from "@elementor/editor-notifications";
-import { __getState as getState20 } from "@elementor/store";
+import { __getState as getState18 } from "@elementor/store";
 var failedNotification = (message) => ({
   type: "error",
   message: `Failed to archive components: ${message}`,
@@ -3850,7 +4088,7 @@ var successNotification = (message) => ({
 });
 var updateArchivedComponentBeforeSave = async () => {
   try {
-    const archivedComponents = selectArchivedComponents(getState20());
+    const archivedComponents = selectArchivedComponents(getState18());
     if (!archivedComponents.length) {
       return;
     }