@elementor/editor-editing-panel 3.33.0-162 → 3.33.0-163

package/dist/index.js

@@ -2314,7 +2314,7 @@ function populateChildControlProps(props) {
 var React88 = __toESM(require("react"));
 var import_react37 = require("react");
 var import_editor_props15 = require("@elementor/editor-props");
-var import_editor_responsive3 = require("@elementor/editor-responsive");
+var import_editor_responsive4 = require("@elementor/editor-responsive");
 var import_locations3 = require("@elementor/locations");
 var import_session7 = require("@elementor/session");
 var import_ui43 = require("@elementor/ui");
@@ -4320,13 +4320,62 @@ var import_i18n40 = require("@wordpress/i18n");
 
 // src/components/custom-css-indicator.tsx
 var React64 = __toESM(require("react"));
+var import_editor_responsive3 = require("@elementor/editor-responsive");
+var import_editor_styles6 = require("@elementor/editor-styles");
 var CustomCssIndicator = () => {
   const { customCss } = useCustomCss();
+  const { id: styleId, provider, meta } = useStyle();
+  const {
+    element: { id: elementId }
+  } = useElement();
+  const style = React64.useMemo(
+    () => styleId && provider ? provider.actions.get(styleId, { elementId }) : null,
+    [styleId, provider, elementId]
+  );
   const hasContent = Boolean(customCss?.raw?.trim());
+  const hasInheritedContent = React64.useMemo(() => {
+    if (hasContent) {
+      return false;
+    }
+    return hasInheritedCustomCss(style, meta);
+  }, [hasContent, style, meta]);
   if (!hasContent) {
+    if (hasInheritedContent) {
+      return /* @__PURE__ */ React64.createElement(StyleIndicator, null);
+    }
     return null;
   }
-  return /* @__PURE__ */ React64.createElement(StyleIndicator, { getColor: (theme) => theme.palette.accent.main });
+  return /* @__PURE__ */ React64.createElement(StyleIndicator, { getColor: provider ? getStylesProviderThemeColor(provider.getKey()) : void 0 });
+};
+var hasInheritedCustomCss = (style, meta) => {
+  if (!style || !meta) {
+    return false;
+  }
+  const target = meta.breakpoint ?? "desktop";
+  const root = (0, import_editor_responsive3.getBreakpointsTree)();
+  const state = meta.state;
+  function search(node, ancestorHasCss) {
+    if (!style) {
+      return void 0;
+    }
+    const hasHere = Boolean(
+      (0, import_editor_styles6.getVariantByMeta)(style, {
+        breakpoint: node.id,
+        state
+      })?.custom_css?.raw?.trim()
+    );
+    if (node.id === target) {
+      return ancestorHasCss;
+    }
+    for (const child of node.children ?? []) {
+      const res = search(child, ancestorHasCss || hasHere);
+      if (res !== void 0) {
+        return res;
+      }
+    }
+    return void 0;
+  }
+  return Boolean(search(root, false));
 };
 
 // src/styles-inheritance/components/styles-inheritance-section-indicators.tsx
@@ -4874,7 +4923,7 @@ var StyleTab = () => {
   const currentClassesProp = useCurrentClassesProp();
   const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp);
   const [activeStyleState, setActiveStyleState] = (0, import_react37.useState)(null);
-  const breakpoint = (0, import_editor_responsive3.useActiveBreakpoint)();
+  const breakpoint = (0, import_editor_responsive4.useActiveBreakpoint)();
   return /* @__PURE__ */ React88.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React88.createElement(
     StyleProvider,
     {