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

package/dist/index.js

@@ -479,8 +479,8 @@ var componentOverridableTransformer = (0, import_editor_canvas2.createTransforme
   }
 );
 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 = import_editor_canvas2.settingsTransformersRegistry.get("override");
@@ -737,8 +737,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);
     }
@@ -1644,6 +1644,7 @@ var import_ui13 = require("@elementor/ui");
 var React19 = __toESM(require("react"));
 var import_editor_controls2 = require("@elementor/editor-controls");
 var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
+var import_editor_props6 = require("@elementor/editor-props");
 var import_ui12 = require("@elementor/ui");
 
 // src/hooks/use-controls-by-widget-type.ts
@@ -2247,6 +2248,7 @@ function OverrideControl({ overridableProp }) {
     overridableProp.originPropFields ?? overridableProp,
     overridableProp.label
   );
+  const effectiveControlProps = hasInheritedValue(resolvedBaseValue) ? omitPlaceholder(controlProps) : controlProps;
   const propTypeSchema = (0, import_editor_editing_panel3.createTopLevelObjectType)({
     schema: { [overridableProp.overrideKey]: propType }
   });
@@ -2312,7 +2314,7 @@ function OverrideControl({ overridableProp }) {
           baseValue,
           isDisabled
         },
-        /* @__PURE__ */ React19.createElement(import_editor_controls2.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React19.createElement(import_editor_controls2.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React19.createElement(import_ui12.Box, { mb: 1.5 }, /* @__PURE__ */ React19.createElement(import_editor_editing_panel3.ControlTypeContainer, { layout }, layout !== "custom" && /* @__PURE__ */ React19.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React19.createElement(OriginalControl, { control, controlProps })))))
+        /* @__PURE__ */ React19.createElement(import_editor_controls2.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React19.createElement(import_editor_controls2.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React19.createElement(import_ui12.Box, { mb: 1.5 }, /* @__PURE__ */ React19.createElement(import_editor_editing_panel3.ControlTypeContainer, { layout }, layout !== "custom" && /* @__PURE__ */ React19.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React19.createElement(OriginalControl, { control, controlProps: effectiveControlProps })))))
       )
     )
   );
@@ -2326,6 +2328,13 @@ function resolveOverrideValues(overrideValue, resolvedOriginValues, propKey) {
   const baseValue = overrideValue || isInheritedDynamic ? null : inheritedValue;
   return { propValue, baseValue };
 }
+function hasInheritedValue(baseValue) {
+  return !!baseValue && !(0, import_editor_props6.isEmpty)(baseValue);
+}
+function omitPlaceholder(controlProps) {
+  const { placeholder: _placeholder, ...rest } = controlProps;
+  return rest;
+}
 function getTempNewValueForDynamicProp(propType, propValue, newPropValue) {
   const isRemovingOverride = newPropValue === null;
   if (isRemovingOverride && (0, import_editor_editing_panel3.isDynamicPropValue)(propValue)) {
@@ -2406,6 +2415,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] = (0, import_editor_editing_panel4.useStateByElement)(group.id, true);
@@ -2416,31 +2428,39 @@ function OverridePropsGroup({ group }) {
   const labelId = `label-${id}`;
   const contentId = `content-${id}`;
   const title = group.label;
-  return /* @__PURE__ */ React20.createElement(import_ui13.Box, { "aria-label": `${title} section` }, /* @__PURE__ */ React20.createElement(
-    import_ui13.ListItemButton,
+  return /* @__PURE__ */ React20.createElement(
+    import_ui13.Box,
     {
-      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(import_ui13.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React20.createElement(
-      import_ui13.ListItemText,
+    /* @__PURE__ */ React20.createElement(
+      import_ui13.ListItemButton,
       {
-        secondary: title,
-        secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
-        sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
-      }
-    )),
-    /* @__PURE__ */ React20.createElement(import_editor_ui6.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
-  ), /* @__PURE__ */ React20.createElement(import_ui13.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React20.createElement(import_ui13.Stack, { 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(import_ui13.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React20.createElement(
+        import_ui13.ListItemText,
+        {
+          secondary: title,
+          secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
+          sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
+        }
+      )),
+      /* @__PURE__ */ React20.createElement(import_editor_ui6.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+    ),
+    /* @__PURE__ */ React20.createElement(import_ui13.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React20.createElement(import_ui13.Stack, { 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(import_editor_panels2.PanelBody, null, /* @__PURE__ */ React21.createElement(import_editor_controls3.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel5.getFieldIndicators)("settings") }, isEmpty ? emptyState : /* @__PURE__ */ React21.createElement(import_ui14.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React21.createElement(React21.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React21.createElement(OverridePropsGroup, { group }), /* @__PURE__ */ React21.createElement(import_ui14.Divider, null))))));
+function InstancePanelBody({ groups, isEmpty: isEmpty2, emptyState, componentInstanceId }) {
+  return /* @__PURE__ */ React21.createElement(import_editor_panels2.PanelBody, null, /* @__PURE__ */ React21.createElement(import_editor_controls3.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel5.getFieldIndicators)("settings") }, isEmpty2 ? emptyState : /* @__PURE__ */ React21.createElement(import_ui14.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React21.createElement(React21.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React21.createElement(OverridePropsGroup, { group }), /* @__PURE__ */ React21.createElement(import_ui14.Divider, null))))));
 }
 
 // src/components/instance-editing-panel/use-instance-panel-data.ts
@@ -2500,8 +2520,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 } = (0, import_editor_editing_panel6.useElement)();
@@ -2516,7 +2536,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 = (0, import_i18n12.__)("Edit %s", "elementor").replace("%s", component.name);
   const actions = /* @__PURE__ */ React22.createElement(import_ui15.Stack, { direction: "row", gap: 0.5 }, /* @__PURE__ */ React22.createElement(DetachAction, { componentInstanceId, componentId }), canEdit && /* @__PURE__ */ React22.createElement(EditComponentAction, { disabled: true, label: panelTitle, icon: import_icons11.PencilIcon }));
   return /* @__PURE__ */ React22.createElement(import_ui15.Box, { "data-testid": "instance-editing-panel", sx: { display: "flex", flexDirection: "column", height: "100%" } }, /* @__PURE__ */ React22.createElement(
@@ -2531,7 +2551,7 @@ function InstanceEditingPanel() {
       InstancePanelBody,
       {
         groups,
-        isEmpty,
+        isEmpty: isEmpty2,
         emptyState: /* @__PURE__ */ React22.createElement(EmptyState2, null),
         componentInstanceId
       }