@elementor/editor-components 4.0.0-508 → 4.0.0-509

package/dist/index.js

@@ -43,7 +43,7 @@ var import_editor_elements_panel = require("@elementor/editor-elements-panel");
 var import_editor_panels5 = require("@elementor/editor-panels");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters14 = require("@elementor/editor-v1-adapters");
-var import_store80 = require("@elementor/store");
+var import_store82 = require("@elementor/store");
 var import_i18n31 = require("@wordpress/i18n");
 
 // src/component-instance-transformer.ts
@@ -3961,6 +3961,92 @@ var OverrideControlInnerElementNotFoundError = (0, import_utils7.createError)({
   message: `Component inner element not found for override control. The element may have been deleted without updating the overridable props, or the component has not finished rendering yet.`
 });
 
+// src/components/instance-editing-panel/use-resolved-origin-value.tsx
+var import_store55 = require("@elementor/store");
+function useResolvedOriginValue(override, overridableProp) {
+  const components = (0, import_store55.__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;
+    }
+  }
+  const { elementId, propKey } = originPropFields ?? {};
+  if (elementId && propKey) {
+    return findOriginValueByElementId(components, elementId, propKey);
+  }
+  return null;
+}
+function getOriginFromOverride(components, override) {
+  const overridableValue = componentOverridablePropTypeUtil.extract(override);
+  const innerOverride = overridableValue ? componentInstanceOverridePropTypeUtil.extract(overridableValue.origin_value) : componentInstanceOverridePropTypeUtil.extract(override);
+  if (!innerOverride) {
+    return null;
+  }
+  const { schema_source: schemaSource, override_key: overrideKey, override_value: overrideValue } = innerOverride;
+  const componentId = schemaSource?.id;
+  if (!componentId || !overrideKey) {
+    return null;
+  }
+  const prop = getOverridableProp(components, componentId, overrideKey);
+  if (hasValue(prop?.originValue)) {
+    return prop.originValue;
+  }
+  if (prop?.originPropFields?.elementId) {
+    const targetPropKey = prop.originPropFields.propKey ?? prop.propKey;
+    const result = findOriginValueByElementId(components, prop.originPropFields.elementId, targetPropKey);
+    if (hasValue(result)) {
+      return result;
+    }
+  }
+  const nestedOverridable = componentOverridablePropTypeUtil.extract(overrideValue);
+  if (nestedOverridable) {
+    return getOriginFromOverride(components, componentOverridablePropTypeUtil.create(nestedOverridable));
+  }
+  return null;
+}
+function findOriginValueByElementId(components, targetElementId, targetPropKey, visited = /* @__PURE__ */ new Set()) {
+  for (const component of components) {
+    if (visited.has(component.id)) {
+      continue;
+    }
+    visited.add(component.id);
+    const matchingProp = Object.values(component.overridableProps?.props ?? {}).find(
+      ({ elementId, propKey }) => elementId === targetElementId && propKey === targetPropKey
+    );
+    if (!matchingProp) {
+      continue;
+    }
+    if (hasValue(matchingProp.originValue)) {
+      return matchingProp.originValue;
+    }
+    if (matchingProp.originPropFields?.elementId) {
+      const innerPropKey = matchingProp.originPropFields.propKey ?? targetPropKey;
+      return findOriginValueByElementId(
+        components,
+        matchingProp.originPropFields.elementId,
+        innerPropKey,
+        visited
+      );
+    }
+  }
+  return null;
+}
+function hasValue(value) {
+  return value !== null && value !== void 0;
+}
+function getOverridableProp(components, componentId, overrideKey) {
+  const component = components.find(({ id: id2 }) => id2 === componentId);
+  return component?.overridableProps?.props?.[overrideKey];
+}
+
 // src/components/instance-editing-panel/override-prop-control.tsx
 function OverridePropControl({ overridableProp, overrides }) {
   return /* @__PURE__ */ React26.createElement(import_editor_editing_panel3.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React26.createElement(OverrideControl, { overridableProp, overrides }));
@@ -3973,6 +4059,8 @@ function OverrideControl({ overridableProp, overrides }) {
     overridableProp?.originPropFields?.widgetType ?? overridableProp.widgetType
   );
   const controlReplacements = (0, import_editor_editing_panel3.getControlReplacements)();
+  const matchingOverride = getMatchingOverride(overrides, overridableProp.overrideKey);
+  const recursiveOriginValue = useResolvedOriginValue(matchingOverride, overridableProp);
   const propType = getPropTypeForComponentOverride(overridableProp);
   if (!propType) {
     return null;
@@ -3986,8 +4074,8 @@ function OverrideControl({ overridableProp, overrides }) {
   if (!componentInstanceId) {
     throw new Error("Component ID is required");
   }
-  const matchingOverride = getMatchingOverride(overrides, overridableProp.overrideKey);
-  const propValue = matchingOverride ? resolveOverridePropValue(matchingOverride) : overridableProp.originValue;
+  const resolvedOverrideValue = matchingOverride ? resolveOverridePropValue(matchingOverride) : null;
+  const propValue = resolvedOverrideValue ?? recursiveOriginValue ?? overridableProp.originValue;
   const value = {
     [overridableProp.overrideKey]: propValue
   };
@@ -4055,7 +4143,7 @@ function OverrideControl({ overridableProp, overrides }) {
   );
 }
 function getMatchingOverride(overrides, overrideKey) {
-  return overrides?.find((override) => {
+  const result = overrides?.find((override) => {
     const overridableValue = componentOverridablePropTypeUtil.extract(override);
     let comparedOverrideKey = null;
     if (overridableValue) {
@@ -4065,6 +4153,7 @@ function getMatchingOverride(overrides, overrideKey) {
     }
     return comparedOverrideKey === overrideKey;
   }) ?? null;
+  return result;
 }
 function createOverrideValue({
   matchingOverride,
@@ -4191,7 +4280,7 @@ function InstanceEditingPanel() {
   const isNonEmptyGroup = (group) => group !== null && group.props.length > 0;
   const groups = overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(isNonEmptyGroup);
   const isEmpty = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
-  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(import_editor_panels4.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React28.createElement(import_icons14.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React28.createElement(import_editor_ui14.EllipsisWithTooltip, { title: component.name, as: import_editor_panels4.PanelHeaderTitle, sx: { flexGrow: 1 } }), canEdit && /* @__PURE__ */ React28.createElement(import_ui22.Tooltip, { title: panelTitle }, /* @__PURE__ */ React28.createElement(import_ui22.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React28.createElement(import_icons14.PencilIcon, { fontSize: "tiny" }))))), /* @__PURE__ */ React28.createElement(import_editor_panels4.PanelBody, null, /* @__PURE__ */ React28.createElement(import_editor_controls4.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel5.getFieldIndicators)("settings") }, isEmpty ? /* @__PURE__ */ React28.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React28.createElement(React28.Fragment, { key: group.id }, /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(import_editor_panels4.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React28.createElement(import_icons14.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React28.createElement(import_editor_ui14.EllipsisWithTooltip, { title: component.name, as: import_editor_panels4.PanelHeaderTitle, sx: { flexGrow: 1 } }), canEdit && /* @__PURE__ */ React28.createElement(import_ui22.Tooltip, { title: panelTitle }, /* @__PURE__ */ React28.createElement(import_ui22.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React28.createElement(import_icons14.PencilIcon, { fontSize: "tiny" }))))), /* @__PURE__ */ React28.createElement(import_editor_panels4.PanelBody, null, /* @__PURE__ */ React28.createElement(import_editor_controls4.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel5.getFieldIndicators)("settings") }, isEmpty ? /* @__PURE__ */ React28.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React28.createElement(React28.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React28.createElement(
     OverridePropsGroup,
     {
       group,
@@ -4282,7 +4371,7 @@ var import_ui24 = require("@elementor/ui");
 var import_i18n29 = require("@wordpress/i18n");
 
 // src/store/actions/set-overridable-prop.ts
-var import_store58 = require("@elementor/store");
+var import_store60 = require("@elementor/store");
 var import_utils8 = require("@elementor/utils");
 function setOverridableProp({
   componentId,
@@ -4297,7 +4386,7 @@ function setOverridableProp({
   originPropFields,
   source
 }) {
-  const overridableProps = selectOverridableProps((0, import_store58.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store60.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -4334,7 +4423,7 @@ function setOverridableProp({
   if (isChangingGroups) {
     groups = removePropFromGroup(groups, existingOverridableProp.groupId, overridableProp.overrideKey);
   }
-  (0, import_store58.__dispatch)(
+  (0, import_store60.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -4345,7 +4434,7 @@ function setOverridableProp({
   );
   const isNewProperty = !existingOverridableProp;
   if (isNewProperty) {
-    const currentComponent = selectCurrentComponent((0, import_store58.__getState)());
+    const currentComponent = selectCurrentComponent((0, import_store60.__getState)());
     trackComponentEvent({
       action: "propertyExposed",
       source,
@@ -4430,12 +4519,12 @@ var Indicator2 = (0, import_react16.forwardRef)(({ isOpen, isOverridable, ...pro
 )));
 
 // src/components/overridable-props/utils/get-overridable-prop.ts
-var import_store60 = require("@elementor/store");
-function getOverridableProp({
+var import_store62 = require("@elementor/store");
+function getOverridableProp2({
   componentId,
   overrideKey
 }) {
-  const overridableProps = selectOverridableProps((0, import_store60.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store62.__getState)(), componentId);
   if (!overridableProps) {
     return void 0;
   }
@@ -4495,7 +4584,7 @@ function Content2({ componentId, overridableProps }) {
     }
     popupState.close();
   };
-  const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
+  const overridableConfig = overridableValue ? getOverridableProp2({ componentId, overrideKey: overridableValue.override_key }) : void 0;
   return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(import_ui24.Tooltip, { placement: "top", title: (0, import_i18n29.__)("Override Property", "elementor") }, /* @__PURE__ */ React31.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React31.createElement(
     import_ui24.Popover,
     {
@@ -4899,10 +4988,10 @@ function initMcp() {
 
 // src/populate-store.ts
 var import_react17 = require("react");
-var import_store63 = require("@elementor/store");
+var import_store65 = require("@elementor/store");
 function PopulateStore() {
   (0, import_react17.useEffect)(() => {
-    (0, import_store63.__dispatch)(loadComponents());
+    (0, import_store65.__dispatch)(loadComponents());
   }, []);
   return null;
 }
@@ -4911,7 +5000,7 @@ function PopulateStore() {
 var import_editor_elements19 = require("@elementor/editor-elements");
 var import_editor_notifications4 = require("@elementor/editor-notifications");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
-var import_store64 = require("@elementor/store");
+var import_store66 = require("@elementor/store");
 var import_i18n30 = require("@wordpress/i18n");
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
@@ -4937,7 +5026,7 @@ function wouldCreateCircularNesting(componentIdToAdd) {
   if (componentIdToAdd === void 0) {
     return false;
   }
-  const state = (0, import_store64.__getState)();
+  const state = (0, import_store66.__getState)();
   const currentComponentId = selectCurrentComponentId(state);
   const path = selectPath(state);
   if (currentComponentId === null) {
@@ -5035,19 +5124,19 @@ function blockCircularPaste(args) {
 }
 
 // src/store/actions/remove-component-styles.ts
-var import_store66 = require("@elementor/store");
+var import_store68 = require("@elementor/store");
 function removeComponentStyles(id2) {
   apiClient.invalidateComponentConfigCache(id2);
-  (0, import_store66.__dispatch)(slice.actions.removeStyles({ id: id2 }));
+  (0, import_store68.__dispatch)(slice.actions.removeStyles({ id: id2 }));
 }
 
 // src/store/components-styles-provider.ts
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_store68 = require("@elementor/store");
+var import_store70 = require("@elementor/store");
 var componentsStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
   key: "components-styles",
   priority: 100,
-  subscribe: (cb) => (0, import_store68.__subscribeWithSelector)(
+  subscribe: (cb) => (0, import_store70.__subscribeWithSelector)(
     (state) => state[SLICE_NAME],
     () => {
       cb();
@@ -5055,29 +5144,29 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
   ),
   actions: {
     all: () => {
-      return selectFlatStyles((0, import_store68.__getState)());
+      return selectFlatStyles((0, import_store70.__getState)());
     },
     get: (id2) => {
-      return selectFlatStyles((0, import_store68.__getState)()).find((style) => style.id === id2) ?? null;
+      return selectFlatStyles((0, import_store70.__getState)()).find((style) => style.id === id2) ?? null;
     }
   }
 });
 
 // src/sync/create-components-before-save.ts
 var import_editor_elements20 = require("@elementor/editor-elements");
-var import_store70 = require("@elementor/store");
+var import_store72 = require("@elementor/store");
 async function createComponentsBeforeSave({
   elements,
   status
 }) {
-  const unpublishedComponents = selectUnpublishedComponents((0, import_store70.__getState)());
+  const unpublishedComponents = selectUnpublishedComponents((0, import_store72.__getState)());
   if (!unpublishedComponents.length) {
     return;
   }
   try {
     const uidToComponentId = await createComponents(unpublishedComponents, status);
     updateComponentInstances(elements, uidToComponentId);
-    (0, import_store70.__dispatch)(
+    (0, import_store72.__dispatch)(
       slice.actions.add(
         unpublishedComponents.map((component) => ({
           id: uidToComponentId.get(component.uid),
@@ -5087,10 +5176,10 @@ async function createComponentsBeforeSave({
         }))
       )
     );
-    (0, import_store70.__dispatch)(slice.actions.resetUnpublished());
+    (0, import_store72.__dispatch)(slice.actions.resetUnpublished());
   } catch (error) {
     const failedUids = unpublishedComponents.map((component) => component.uid);
-    (0, import_store70.__dispatch)(slice.actions.removeUnpublished(failedUids));
+    (0, import_store72.__dispatch)(slice.actions.removeUnpublished(failedUids));
     throw new Error(`Failed to publish components: ${error}`);
   }
 }
@@ -5164,7 +5253,7 @@ async function publishDraftComponentsInPageBeforeSave({ status, elements }) {
 }
 
 // src/sync/set-component-overridable-props-settings-before-save.ts
-var import_store72 = require("@elementor/store");
+var import_store74 = require("@elementor/store");
 var setComponentOverridablePropsSettingsBeforeSave = ({
   container
 }) => {
@@ -5172,7 +5261,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
   if (!currentDocument || currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE) {
     return;
   }
-  const overridableProps = selectOverridableProps((0, import_store72.__getState)(), currentDocument.id);
+  const overridableProps = selectOverridableProps((0, import_store74.__getState)(), currentDocument.id);
   if (overridableProps) {
     container.settings.set("overridable_props", overridableProps);
   }
@@ -5180,7 +5269,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
 
 // src/sync/update-archived-component-before-save.ts
 var import_editor_notifications5 = require("@elementor/editor-notifications");
-var import_store74 = require("@elementor/store");
+var import_store76 = require("@elementor/store");
 var failedNotification = (message) => ({
   type: "error",
   message: `Failed to archive components: ${message}`,
@@ -5188,7 +5277,7 @@ var failedNotification = (message) => ({
 });
 var updateArchivedComponentBeforeSave = async (status) => {
   try {
-    const archivedComponents = selectArchivedThisSession((0, import_store74.__getState)());
+    const archivedComponents = selectArchivedThisSession((0, import_store76.__getState)());
     if (!archivedComponents.length) {
       return;
     }
@@ -5203,15 +5292,15 @@ var updateArchivedComponentBeforeSave = async (status) => {
 };
 
 // src/sync/update-component-title-before-save.ts
-var import_store76 = require("@elementor/store");
+var import_store78 = require("@elementor/store");
 var updateComponentTitleBeforeSave = async (status) => {
-  const updatedComponentNames = selectUpdatedComponentNames((0, import_store76.__getState)());
+  const updatedComponentNames = selectUpdatedComponentNames((0, import_store78.__getState)());
   if (!updatedComponentNames.length) {
     return;
   }
   const result = await apiClient.updateComponentTitle(updatedComponentNames, status);
   if (result.failedIds.length === 0) {
-    (0, import_store76.__dispatch)(slice.actions.cleanUpdatedComponentNames());
+    (0, import_store78.__dispatch)(slice.actions.cleanUpdatedComponentNames());
   }
 };
 
@@ -5239,10 +5328,10 @@ var updateExistingComponentsBeforeSave = async ({
 // src/sync/cleanup-overridable-props-on-delete.ts
 var import_editor_elements21 = require("@elementor/editor-elements");
 var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
-var import_store78 = require("@elementor/store");
+var import_store80 = require("@elementor/store");
 function initCleanupOverridablePropsOnDelete() {
   (0, import_editor_v1_adapters9.registerDataHook)("dependency", "document/elements/delete", (args) => {
-    const state = (0, import_store78.__getState)();
+    const state = (0, import_store80.__getState)();
     if (!state) {
       return true;
     }
@@ -5273,7 +5362,7 @@ function initCleanupOverridablePropsOnDelete() {
     for (const propKey of propKeysToDelete) {
       updatedGroups = removePropFromAllGroups(updatedGroups, propKey);
     }
-    (0, import_store78.__dispatch)(
+    (0, import_store80.__dispatch)(
       slice.actions.setOverridableProps({
         componentId: currentComponentId,
         overridableProps: {
@@ -5498,7 +5587,7 @@ function revertOverridablesInStorage(storageKey) {
 // src/init.ts
 function init() {
   import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
-  (0, import_store80.__registerSlice)(slice);
+  (0, import_store82.__registerSlice)(slice);
   (0, import_editor_panels5.__registerPanel)(panel);
   (0, import_editor_canvas8.registerElementType)(
     COMPONENT_WIDGET_TYPE,