@elementor/editor-components 4.4.0-1136 → 4.4.0-1138

package/dist/index.mjs

@@ -396,8 +396,8 @@ var componentOverridableTransformer = createTransformer2(
   }
 );
 function normalizeOriginValue(originValue) {
-  const isEmpty = !!originValue && Object.keys(originValue).length === 0;
-  return isEmpty ? null : originValue;
+  const isEmpty2 = !!originValue && Object.keys(originValue).length === 0;
+  return isEmpty2 ? null : originValue;
 }
 function transformOverride(originValue, options, overrideValue) {
   const transformer = settingsTransformersRegistry.get("override");
@@ -654,8 +654,8 @@ function ComponentsList() {
   if (isLoading) {
     return /* @__PURE__ */ React5.createElement(LoadingComponents, null);
   }
-  const isEmpty = !components?.length;
-  if (isEmpty) {
+  const isEmpty2 = !components?.length;
+  if (isEmpty2) {
     if (searchValue.length) {
       return /* @__PURE__ */ React5.createElement(EmptySearchResult, null);
     }
@@ -1580,6 +1580,9 @@ import {
   SettingsField,
   useElement as useElement2
 } from "@elementor/editor-editing-panel";
+import {
+  isEmpty
+} from "@elementor/editor-props";
 import { Box as Box8 } from "@elementor/ui";
 
 // src/hooks/use-controls-by-widget-type.ts
@@ -2188,6 +2191,7 @@ function OverrideControl({ overridableProp }) {
     overridableProp.originPropFields ?? overridableProp,
     overridableProp.label
   );
+  const effectiveControlProps = hasInheritedValue(resolvedBaseValue) ? omitPlaceholder(controlProps) : controlProps;
   const propTypeSchema = createTopLevelObjectType({
     schema: { [overridableProp.overrideKey]: propType }
   });
@@ -2253,7 +2257,7 @@ function OverrideControl({ overridableProp }) {
           baseValue,
           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 })))))
+        /* @__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: effectiveControlProps })))))
       )
     )
   );
@@ -2267,6 +2271,13 @@ function resolveOverrideValues(overrideValue, resolvedOriginValues, propKey) {
   const baseValue = overrideValue || isInheritedDynamic ? null : inheritedValue;
   return { propValue, baseValue };
 }
+function hasInheritedValue(baseValue) {
+  return !!baseValue && !isEmpty(baseValue);
+}
+function omitPlaceholder(controlProps) {
+  const { placeholder: _placeholder, ...rest } = controlProps;
+  return rest;
+}
 function getTempNewValueForDynamicProp(propType, propValue, newPropValue) {
   const isRemovingOverride = newPropValue === null;
   if (isRemovingOverride && isDynamicPropValue(propValue)) {
@@ -2347,6 +2358,9 @@ function isValidOverride(overridableProps, override) {
   return !!overridableProps.props[overridableKey];
 }
 
+// src/components/instance-editing-panel/override-props-group-constants.ts
+var OVERRIDE_PROPS_GROUP_CONTENT_CLASS = "e-override-props-group__content";
+
 // src/components/instance-editing-panel/override-props-group.tsx
 function OverridePropsGroup({ group }) {
   const [isOpen, setIsOpen] = useStateByElement(group.id, true);
@@ -2357,31 +2371,39 @@ function OverridePropsGroup({ group }) {
   const labelId = `label-${id}`;
   const contentId = `content-${id}`;
   const title = group.label;
-  return /* @__PURE__ */ React20.createElement(Box9, { "aria-label": `${title} section` }, /* @__PURE__ */ React20.createElement(
-    ListItemButton2,
+  return /* @__PURE__ */ React20.createElement(
+    Box9,
     {
-      id: labelId,
-      "aria-controls": contentId,
       "aria-label": `${title} section`,
-      onClick: handleClick,
-      p: 0,
-      sx: { "&:hover": { backgroundColor: "transparent" } }
+      sx: { [`&:has(.${OVERRIDE_PROPS_GROUP_CONTENT_CLASS}:empty)`]: { display: "none" } }
     },
-    /* @__PURE__ */ React20.createElement(Stack9, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React20.createElement(
-      ListItemText,
+    /* @__PURE__ */ React20.createElement(
+      ListItemButton2,
       {
-        secondary: title,
-        secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
-        sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
-      }
-    )),
-    /* @__PURE__ */ React20.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
-  ), /* @__PURE__ */ React20.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React20.createElement(Stack9, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React20.createElement(OverridePropControl, { key: overrideKey, overrideKey })))));
+        id: labelId,
+        "aria-controls": contentId,
+        "aria-label": `${title} section`,
+        onClick: handleClick,
+        p: 0,
+        sx: { "&:hover": { backgroundColor: "transparent" } }
+      },
+      /* @__PURE__ */ React20.createElement(Stack9, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React20.createElement(
+        ListItemText,
+        {
+          secondary: title,
+          secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
+          sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
+        }
+      )),
+      /* @__PURE__ */ React20.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+    ),
+    /* @__PURE__ */ React20.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React20.createElement(Stack9, { className: OVERRIDE_PROPS_GROUP_CONTENT_CLASS, direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React20.createElement(OverridePropControl, { key: overrideKey, overrideKey }))))
+  );
 }
 
 // src/components/instance-editing-panel/instance-panel-body.tsx
-function InstancePanelBody({ groups, isEmpty, emptyState, componentInstanceId }) {
-  return /* @__PURE__ */ React21.createElement(PanelBody, null, /* @__PURE__ */ React21.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? emptyState : /* @__PURE__ */ React21.createElement(Stack10, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React21.createElement(React21.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React21.createElement(OverridePropsGroup, { group }), /* @__PURE__ */ React21.createElement(Divider2, null))))));
+function InstancePanelBody({ groups, isEmpty: isEmpty2, emptyState, componentInstanceId }) {
+  return /* @__PURE__ */ React21.createElement(PanelBody, null, /* @__PURE__ */ React21.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty2 ? emptyState : /* @__PURE__ */ React21.createElement(Stack10, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React21.createElement(React21.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React21.createElement(OverridePropsGroup, { group }), /* @__PURE__ */ React21.createElement(Divider2, null))))));
 }
 
 // src/components/instance-editing-panel/use-instance-panel-data.ts
@@ -2441,8 +2463,8 @@ function useInstancePanelData() {
   }
   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 { componentId, component, overrides, overridableProps, groups, isEmpty, componentInstanceId };
+  const isEmpty2 = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
+  return { componentId, component, overrides, overridableProps, groups, isEmpty: isEmpty2, componentInstanceId };
 }
 function useComponentInstanceSettings() {
   const { element, settings } = useElement3();
@@ -2457,7 +2479,7 @@ function InstanceEditingPanel() {
   if (!data) {
     return null;
   }
-  const { componentId, component, overrides, overridableProps, groups, isEmpty, componentInstanceId } = data;
+  const { componentId, component, overrides, overridableProps, groups, isEmpty: isEmpty2, componentInstanceId } = data;
   const panelTitle = __12("Edit %s", "elementor").replace("%s", component.name);
   const actions = /* @__PURE__ */ React22.createElement(Stack11, { direction: "row", gap: 0.5 }, /* @__PURE__ */ React22.createElement(DetachAction, { componentInstanceId, componentId }), canEdit && /* @__PURE__ */ React22.createElement(EditComponentAction, { disabled: true, label: panelTitle, icon: PencilIcon2 }));
   return /* @__PURE__ */ React22.createElement(Box10, { "data-testid": "instance-editing-panel", sx: { display: "flex", flexDirection: "column", height: "100%" } }, /* @__PURE__ */ React22.createElement(
@@ -2472,7 +2494,7 @@ function InstanceEditingPanel() {
       InstancePanelBody,
       {
         groups,
-        isEmpty,
+        isEmpty: isEmpty2,
         emptyState: /* @__PURE__ */ React22.createElement(EmptyState2, null),
         componentInstanceId
       }