@elementor/editor-components 4.1.0-747 → 4.1.0-749

package/dist/index.mjs

@@ -1020,9 +1020,16 @@ var ComponentInstanceContext = createContext2(null);
 function ComponentInstanceProvider({ children, ...props }) {
   return /* @__PURE__ */ React13.createElement(ComponentInstanceContext.Provider, { value: props }, children);
 }
-var useComponentId = () => useContext2(ComponentInstanceContext)?.componentId;
-var useComponentInstanceOverrides = () => useContext2(ComponentInstanceContext)?.overrides;
-var useComponentOverridableProps = () => useContext2(ComponentInstanceContext)?.overridableProps;
+function useComponentInstanceContext() {
+  const context = useContext2(ComponentInstanceContext);
+  if (!context) {
+    throw new Error("useComponentInstanceContext must be used within a ComponentInstanceProvider");
+  }
+  return context;
+}
+var useComponentId = () => useComponentInstanceContext().componentId;
+var useComponentInstanceOverrides = () => useComponentInstanceContext().overrides;
+var useComponentOverridableProps = () => useComponentInstanceContext().overridableProps;
 
 // src/components/instance-editing-panel/detach-action.tsx
 import * as React15 from "react";
@@ -1524,7 +1531,6 @@ import { Box as Box9, Collapse, ListItemButton as ListItemButton2, ListItemText,
 
 // src/components/instance-editing-panel/override-prop-control.tsx
 import * as React19 from "react";
-import { useMemo } from "react";
 import {
   ControlReplacementsProvider,
   getControlReplacements,
@@ -1540,9 +1546,8 @@ import {
   ElementProvider,
   isDynamicPropValue,
   SettingsField,
-  useElement
+  useElement as useElement2
 } from "@elementor/editor-editing-panel";
-import { getElementSettings, getElementType as getElementType2 } from "@elementor/editor-elements";
 import { Box as Box8 } from "@elementor/ui";
 
 // src/hooks/use-controls-by-widget-type.ts
@@ -1774,6 +1779,133 @@ function getMatchingOverride(overrides, overrideKey) {
   }) ?? null;
 }
 
+// src/components/control-label.tsx
+import * as React18 from "react";
+import { ControlAdornments, ControlFormLabel } from "@elementor/editor-controls";
+import { Stack as Stack8 } from "@elementor/ui";
+var ControlLabel = ({ children, ...props }) => {
+  return /* @__PURE__ */ React18.createElement(Stack8, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React18.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React18.createElement(ControlAdornments, null));
+};
+
+// src/components/errors.ts
+import { createError } from "@elementor/utils";
+var OverrideControlInnerElementNotFoundError = createError({
+  code: "override_control_inner_element_not_found",
+  message: `Component inner element not found for override control. The element may have been deleted without updating the overridable props, or the component has not finished rendering yet.`
+});
+var OverrideControlPropTypeNotFoundError = createError({
+  code: "override_control_prop_type_not_found",
+  message: "Prop type not found for override control."
+});
+
+// src/components/instance-editing-panel/utils/correct-exposed-empty-override.ts
+function correctExposedEmptyOverride(newPropValue, matchingOverride) {
+  const newOverridableValue = componentOverridablePropTypeUtil.extract(newPropValue);
+  const isExposingEmptyOverride = newOverridableValue && matchingOverride === null;
+  if (!isExposingEmptyOverride) {
+    return newPropValue;
+  }
+  return componentOverridablePropTypeUtil.create({
+    override_key: newOverridableValue.override_key,
+    origin_value: null
+  });
+}
+
+// src/components/instance-editing-panel/utils/resolve-element-settings.ts
+function applyOverridesToSettings(elementSettings, overrides) {
+  const result = {};
+  for (const [propKey, propValue] of Object.entries(elementSettings)) {
+    const overridable = componentOverridablePropTypeUtil.extract(propValue);
+    if (!overridable) {
+      result[propKey] = propValue;
+      continue;
+    }
+    const override = overrides[overridable.override_key];
+    if (!override) {
+      result[propKey] = propValue;
+      continue;
+    }
+    if (override.outermostKey && override.outermostKey !== overridable.override_key) {
+      const originValue = overridable.origin_value;
+      result[propKey] = componentOverridablePropTypeUtil.create({
+        override_key: override.outermostKey,
+        origin_value: override.value ?? originValue
+      });
+    } else {
+      result[propKey] = override.value ?? propValue;
+    }
+  }
+  return result;
+}
+function unwrapOverridableSettings(elementSettings) {
+  const result = {};
+  for (const [propKey, propValue] of Object.entries(elementSettings)) {
+    const overridable = componentOverridablePropTypeUtil.extract(propValue);
+    if (!overridable) {
+      result[propKey] = propValue;
+      continue;
+    }
+    result[propKey] = overridable.origin_value;
+  }
+  return result;
+}
+
+// src/components/instance-editing-panel/utils/use-override-dependencies.ts
+import { useMemo } from "react";
+import {
+  extractDependencyEffect,
+  extractOrderedDependencies,
+  getElementSettingsWithDefaults,
+  getUpdatedValues
+} from "@elementor/editor-editing-panel";
+function useOverrideControlDependencies({
+  existingOverride,
+  resolvedElementSettings,
+  elementId,
+  elementType,
+  propKey
+}) {
+  return useMemo(() => {
+    const { isDisabled, isHidden } = extractDependencyEffect(
+      propKey,
+      elementType.propsSchema,
+      resolvedElementSettings
+    );
+    const existingOverrideValue = existingOverride ? resolveOverridePropValue(existingOverride) : null;
+    const settingsForDepsNewValuesCalculation = { ...resolvedElementSettings, [propKey]: existingOverrideValue };
+    const resolvedSettingsWithDefaults = getElementSettingsWithDefaults(
+      elementType.propsSchema,
+      settingsForDepsNewValuesCalculation
+    );
+    const dependents = extractOrderedDependencies(elementType.dependenciesPerTargetMapping ?? {});
+    const settingsWithDepsNewValues = getUpdatedValues(
+      settingsForDepsNewValuesCalculation,
+      dependents,
+      elementType.propsSchema,
+      resolvedSettingsWithDefaults,
+      elementId
+    );
+    const overrideValue = settingsWithDepsNewValues[propKey];
+    return {
+      overrideValue,
+      isDisabled,
+      isHidden
+    };
+  }, [
+    existingOverride,
+    resolvedElementSettings,
+    propKey,
+    elementType.propsSchema,
+    elementType.dependenciesPerTargetMapping,
+    elementId
+  ]);
+}
+
+// src/components/instance-editing-panel/utils/use-resolved-inner-element.ts
+import { useMemo as useMemo2 } from "react";
+import { useElement } from "@elementor/editor-editing-panel";
+import { getElementSettings, getElementType as getElementType2 } from "@elementor/editor-elements";
+
 // src/utils/get-container-by-origin-id.ts
 import { getContainer as getContainer2 } from "@elementor/editor-elements";
 function getContainerByOriginId(originElementId, instanceElementId) {
@@ -1908,109 +2040,18 @@ function findOverrideByOuterKey(overrides, outerKey) {
   return override;
 }
 
-// src/components/control-label.tsx
-import * as React18 from "react";
-import { ControlAdornments, ControlFormLabel } from "@elementor/editor-controls";
-import { Stack as Stack8 } from "@elementor/ui";
-var ControlLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ React18.createElement(Stack8, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React18.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React18.createElement(ControlAdornments, null));
-};
-
-// src/components/errors.ts
-import { createError } from "@elementor/utils";
-var OverrideControlInnerElementNotFoundError = createError({
-  code: "override_control_inner_element_not_found",
-  message: `Component inner element not found for override control. The element may have been deleted without updating the overridable props, or the component has not finished rendering yet.`
-});
-
-// src/components/instance-editing-panel/utils/correct-exposed-empty-override.ts
-function correctExposedEmptyOverride(newPropValue, matchingOverride) {
-  const newOverridableValue = componentOverridablePropTypeUtil.extract(newPropValue);
-  const isExposingEmptyOverride = newOverridableValue && matchingOverride === null;
-  if (!isExposingEmptyOverride) {
-    return newPropValue;
-  }
-  return componentOverridablePropTypeUtil.create({
-    override_key: newOverridableValue.override_key,
-    origin_value: null
-  });
-}
-
-// src/components/instance-editing-panel/utils/resolve-element-settings.ts
-function applyOverridesToSettings(elementSettings, overrides) {
-  const result = {};
-  for (const [propKey, propValue] of Object.entries(elementSettings)) {
-    const overridable = componentOverridablePropTypeUtil.extract(propValue);
-    if (!overridable) {
-      result[propKey] = propValue;
-      continue;
-    }
-    const override = overrides[overridable.override_key];
-    if (!override) {
-      result[propKey] = propValue;
-      continue;
-    }
-    if (override.outermostKey && override.outermostKey !== overridable.override_key) {
-      const originValue = overridable.origin_value;
-      result[propKey] = componentOverridablePropTypeUtil.create({
-        override_key: override.outermostKey,
-        origin_value: override.value ?? originValue
-      });
-    } else {
-      result[propKey] = override.value ?? propValue;
-    }
-  }
-  return result;
-}
-function unwrapOverridableSettings(elementSettings) {
-  const result = {};
-  for (const [propKey, propValue] of Object.entries(elementSettings)) {
-    const overridable = componentOverridablePropTypeUtil.extract(propValue);
-    if (!overridable) {
-      result[propKey] = propValue;
-      continue;
-    }
-    result[propKey] = overridable.origin_value;
-  }
-  return result;
-}
-
-// src/components/instance-editing-panel/override-prop-control.tsx
-function OverridePropControl({ overrideKey }) {
-  const overridableProps = useComponentOverridableProps();
-  const overridableProp = overridableProps?.props[overrideKey];
-  if (!overridableProp) {
-    return null;
-  }
-  return /* @__PURE__ */ React19.createElement(SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React19.createElement(OverrideControl, { overridableProp }));
-}
-function OverrideControl({ overridableProp }) {
+// src/components/instance-editing-panel/utils/use-resolved-inner-element.ts
+function useResolvedInnerElement(overridableProp) {
   const componentInstanceElement = useElement();
-  const { value: instanceValue, setValue: setInstanceValue } = useBoundProp(componentInstancePropTypeUtil);
-  const wrappingComponentId = useCurrentComponentId();
   const componentId = useComponentId();
-  const overridableProps = useComponentOverridableProps();
   const overrides = useComponentInstanceOverrides();
-  const controls = useControlsByWidgetType(
-    overridableProp?.originPropFields?.widgetType ?? overridableProp.widgetType
-  );
-  const controlReplacements = getControlReplacements();
-  const matchingOverride = getMatchingOverride(overrides, overridableProp.overrideKey);
-  if (!componentId) {
-    throw new Error("Component ID is required");
-  }
-  if (!overridableProps) {
-    throw new Error("Component has no overridable props");
-  }
-  const {
-    elementId: originElementId,
-    widgetType,
-    elType,
-    propKey
-  } = overridableProp.originPropFields ?? overridableProp;
+  const { elementId: originElementId, widgetType, elType } = overridableProp.originPropFields ?? overridableProp;
   const type = elType === "widget" ? widgetType : elType;
   const elementType = getElementType2(type);
-  const { elementId, overridesMapping } = useMemo(() => {
+  if (!elementType) {
+    throw new Error(`Element type not found for ${type}`);
+  }
+  const { elementId, overridesMapping } = useMemo2(() => {
     const overridesChainResult = resolveOverridesChain({
       outerOverridableProp: overridableProp,
       outerInstanceId: componentInstanceElement.element.id
@@ -2025,27 +2066,90 @@ function OverrideControl({ overridableProp }) {
       overridesMapping: overridesChainResult.overridesMapping
     };
   }, [overridableProp, componentInstanceElement.element.id, componentId, originElementId]);
-  const settingsWithInnerOverrides = useMemo(() => {
+  const settingsWithInnerOverrides = useMemo2(() => {
     const settings = getElementSettings(
       elementId,
       Object.keys(elementType?.propsSchema ?? {})
     );
     return applyOverridesToSettings(settings, overridesMapping);
   }, [elementId, elementType?.propsSchema, overridesMapping]);
-  const resolvedElementSettings = useMemo(() => {
+  const resolvedElementSettings = useMemo2(() => {
     const withAllOverrides = applyOverridesToSettings(
       settingsWithInnerOverrides,
       formatOverridesToApply(overrides)
     );
     return unwrapOverridableSettings(withAllOverrides);
   }, [settingsWithInnerOverrides, overrides]);
+  return {
+    elementId,
+    elementType,
+    resolvedOriginValues: settingsWithInnerOverrides,
+    resolvedElementSettings
+  };
+}
+function formatOverridesToApply(overrides) {
+  if (!overrides) {
+    return {};
+  }
+  const result = {};
+  for (const item of overrides) {
+    const overridable = componentOverridablePropTypeUtil.extract(item);
+    let override = item;
+    if (overridable) {
+      override = overridable.origin_value;
+    }
+    const extractedOverride = componentInstanceOverridePropTypeUtil.extract(override);
+    if (!extractedOverride) {
+      continue;
+    }
+    result[extractedOverride.override_key] = {
+      value: extractedOverride.override_value
+    };
+  }
+  return result;
+}
+
+// src/components/instance-editing-panel/override-prop-control.tsx
+function OverridePropControl({ overrideKey }) {
+  const overridableProps = useComponentOverridableProps();
+  const overridableProp = overridableProps.props[overrideKey];
+  if (!overridableProp) {
+    return null;
+  }
+  return /* @__PURE__ */ React19.createElement(SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React19.createElement(OverrideControl, { overridableProp }));
+}
+function OverrideControl({ overridableProp }) {
+  const componentInstanceElement = useElement2();
+  const { value: instanceValue, setValue: setInstanceValue } = useBoundProp(componentInstancePropTypeUtil);
+  const wrappingComponentId = useCurrentComponentId();
+  const componentId = useComponentId();
+  const overridableProps = useComponentOverridableProps();
+  const overrides = useComponentInstanceOverrides();
+  const controls = useControlsByWidgetType(
+    overridableProp.originPropFields?.widgetType ?? overridableProp.widgetType
+  );
+  const controlReplacements = getControlReplacements();
+  const matchingOverride = getMatchingOverride(overrides, overridableProp.overrideKey);
+  const { propKey } = overridableProp.originPropFields ?? overridableProp;
   const propType = getPropTypeForComponentOverride(overridableProp);
-  if (!propType || !elementType) {
+  if (!propType) {
+    throw new OverrideControlPropTypeNotFoundError({ context: { overridableProp } });
+  }
+  const { elementId, elementType, resolvedElementSettings, resolvedOriginValues } = useResolvedInnerElement(overridableProp);
+  const { overrideValue, isDisabled, isHidden } = useOverrideControlDependencies({
+    existingOverride: matchingOverride,
+    resolvedElementSettings,
+    elementType,
+    elementId,
+    propKey
+  });
+  if (isHidden) {
     return null;
   }
   const { propValue, placeholderValue } = resolveValueAndPlaceholder(
     matchingOverride,
-    settingsWithInnerOverrides,
+    overrideValue,
+    resolvedOriginValues,
     propKey
   );
   const value = {
@@ -2054,14 +2158,15 @@ function OverrideControl({ overridableProp }) {
   const placeholder = {
     [overridableProp.overrideKey]: placeholderValue
   };
+  const { control, controlProps, layout } = getControlParams(
+    controls,
+    overridableProp.originPropFields ?? overridableProp,
+    overridableProp.label
+  );
+  const propTypeSchema = createTopLevelObjectType({
+    schema: { [overridableProp.overrideKey]: propType }
+  });
   const setValue = (newValue) => {
-    if (!overridableProps) {
-      setInstanceValue({
-        ...instanceValue,
-        overrides: void 0
-      });
-      return;
-    }
     let newPropValue = getTempNewValueForDynamicProp(
       propType,
       propValue,
@@ -2097,16 +2202,6 @@ function OverrideControl({ overridableProp }) {
       updateOverridableProp(wrappingComponentId, overridableValue, originPropFields);
     }
   };
-  const { control, controlProps, layout } = getControlParams(
-    controls,
-    overridableProp?.originPropFields ?? overridableProp,
-    overridableProp.label
-  );
-  const propTypeSchema = createTopLevelObjectType({
-    schema: {
-      [overridableProp.overrideKey]: propType
-    }
-  });
   return /* @__PURE__ */ React19.createElement(
     OverridablePropProvider,
     {
@@ -2116,32 +2211,30 @@ function OverrideControl({ overridableProp }) {
     /* @__PURE__ */ React19.createElement(
       ElementProvider,
       {
-        element: { id: elementId, type },
+        element: { id: elementId, type: elementType.key },
         elementType,
         settings: resolvedElementSettings
       },
-      /* @__PURE__ */ React19.createElement(SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React19.createElement(
+      /* @__PURE__ */ React19.createElement(
         PropProvider,
         {
           propType: propTypeSchema,
           value,
           setValue,
           placeholder,
-          isDisabled: () => {
-            return false;
-          }
+          isDisabled
         },
         /* @__PURE__ */ React19.createElement(PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React19.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React19.createElement(Box8, { mb: 1.5 }, /* @__PURE__ */ React19.createElement(ControlTypeContainer, { layout }, layout !== "custom" && /* @__PURE__ */ React19.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React19.createElement(OriginalControl, { control, controlProps })))))
-      ))
+      )
     )
   );
 }
-function resolveValueAndPlaceholder(matchingOverride, settingsWithInnerOverrides, propKey) {
-  const overrideValue = matchingOverride ? resolveOverridePropValue(matchingOverride) : null;
-  const placeholderSettings = unwrapOverridableSettings(settingsWithInnerOverrides);
+function resolveValueAndPlaceholder(matchingOverride, overrideValue, resolvedOriginValues, propKey) {
+  const placeholderSettings = unwrapOverridableSettings(resolvedOriginValues);
   const inheritedValue = placeholderSettings[propKey] ?? null;
   const isInheritedDynamic = isDynamicPropValue(inheritedValue);
-  const propValue = isInheritedDynamic && !matchingOverride ? inheritedValue : overrideValue;
+  const shouldUseInheritedAsValue = isInheritedDynamic && !matchingOverride;
+  const propValue = shouldUseInheritedAsValue ? inheritedValue : overrideValue;
   const placeholderValue = matchingOverride || isInheritedDynamic ? null : inheritedValue;
   return { propValue, placeholderValue };
 }
@@ -2224,27 +2317,6 @@ function isValidOverride(overridableProps, override) {
   const overridableKey = componentOverridablePropTypeUtil.isValid(override) ? override.value.origin_value?.value.override_key : override.value.override_key;
   return !!overridableProps.props[overridableKey];
 }
-function formatOverridesToApply(overrides) {
-  if (!overrides) {
-    return {};
-  }
-  const result = {};
-  for (const item of overrides) {
-    const overridable = componentOverridablePropTypeUtil.extract(item);
-    let override = item;
-    if (overridable) {
-      override = overridable.origin_value;
-    }
-    const extractedOverride = componentInstanceOverridePropTypeUtil.extract(override);
-    if (!extractedOverride) {
-      continue;
-    }
-    result[extractedOverride.override_key] = {
-      value: extractedOverride.override_value
-    };
-  }
-  return result;
-}
 
 // src/components/instance-editing-panel/override-props-group.tsx
 function OverridePropsGroup({ group }) {
@@ -2284,7 +2356,7 @@ function InstancePanelBody({ groups, isEmpty, emptyState, componentInstanceId })
 }
 
 // src/components/instance-editing-panel/use-instance-panel-data.ts
-import { useElement as useElement2 } from "@elementor/editor-editing-panel";
+import { useElement as useElement3 } from "@elementor/editor-editing-panel";
 
 // src/utils/filter-valid-overridable-props.ts
 function filterValidOverridableProps(overridableProps, instanceElementId) {
@@ -2344,7 +2416,7 @@ function useInstancePanelData() {
   return { componentId, component, overrides, overridableProps, groups, isEmpty, componentInstanceId };
 }
 function useComponentInstanceSettings() {
-  const { element, settings } = useElement2();
+  const { element, settings } = useElement3();
   return { element, settings: componentInstancePropTypeUtil.extract(settings.component_instance) };
 }