@elementor/editor-editing-panel 1.41.0 → 1.42.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 1.42.0
+
+### Minor Changes
+
+- e732d81: Show Tooltip on hover and Infotip on click for style indicator.
+- 8dca168: Prevent scrolling when the Indication Popover has been opened.
+
+### Patch Changes
+
+- cd4c3fe: Remove duplicated object fit set value.
+- b7369f2: Update the chip color inside the Indication Popover.
+- Updated dependencies [8f3a61b]
+  - @elementor/editor-controls@0.34.1
+
 ## 1.41.0
 
 ### Minor Changes

package/dist/index.js

@@ -1948,7 +1948,7 @@ var excludePropTypeTransformers = /* @__PURE__ */ new Set([
   "image",
   "background-overlay"
 ]);
-var isUsingIndicatorPopover = () => (0, import_editor_v1_adapters5.isExperimentActive)("e_indications_popover");
+var isUsingIndicatorPopover = () => (0, import_editor_v1_adapters5.isExperimentActive)("e_v_3_30");
 
 // src/styles-inheritance/styles-inheritance-infotip.tsx
 var React25 = __toESM(require("react"));
@@ -2022,16 +2022,18 @@ var import_icons6 = require("@elementor/icons");
 var import_ui19 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
 var SIZE4 = "tiny";
-var LabelChip = ({ displayLabel, provider }) => {
+var LabelChip = ({ displayLabel, provider, chipColor }) => {
+  const isBaseStyle = provider === import_editor_styles_repository7.ELEMENTS_BASE_STYLES_PROVIDER_KEY;
+  const chipIcon = isBaseStyle ? /* @__PURE__ */ React22.createElement(import_ui19.Tooltip, { title: (0, import_i18n6.__)("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React22.createElement(import_icons6.InfoCircleIcon, { fontSize: SIZE4 })) : void 0;
   return /* @__PURE__ */ React22.createElement(
     import_ui19.Chip,
     {
       label: displayLabel,
       size: SIZE4,
-      color: "global",
+      color: chipColor,
       variant: "standard",
       state: "enabled",
-      icon: provider === import_editor_styles_repository7.ELEMENTS_BASE_STYLES_PROVIDER_KEY ? /* @__PURE__ */ React22.createElement(import_ui19.Tooltip, { title: (0, import_i18n6.__)("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React22.createElement(import_icons6.InfoCircleIcon, { fontSize: SIZE4 })) : void 0,
+      icon: chipIcon,
       sx: (theme) => ({
         lineHeight: 1,
         flexWrap: "nowrap",
@@ -2109,7 +2111,8 @@ var normalizeInheritanceItem = async (item, index, bind, resolve) => {
     provider: item.provider || "",
     breakpoint: breakpoint ?? DEFAULT_BREAKPOINT3,
     displayLabel,
-    value: await getTransformedValue(item, bind, resolve)
+    value: await getTransformedValue(item, bind, resolve),
+    chipColor: getChipColor(item)
   };
 };
 var getTransformedValue = async (item, bind, resolve) => {
@@ -2131,6 +2134,16 @@ var getTransformedValue = async (item, bind, resolve) => {
     return "";
   }
 };
+var getChipColor = (item) => {
+  const { provider = "", style } = item;
+  if (provider === import_editor_styles_repository8.ELEMENTS_BASE_STYLES_PROVIDER_KEY) {
+    return "default";
+  }
+  if (style?.label === "local") {
+    return "accent";
+  }
+  return "global";
+};
 
 // src/styles-inheritance/styles-inheritance-transformers-registry.tsx
 var import_editor_canvas = require("@elementor/editor-canvas");
@@ -2139,8 +2152,9 @@ var stylesInheritanceTransformersRegistry = (0, import_editor_canvas.createTrans
 // src/styles-inheritance/styles-inheritance-infotip.tsx
 var SIZE5 = "tiny";
 var StyleIndicatorInfotip = ({ inheritanceChain, propType, path, label, children }) => {
-  const [open, setOpen] = (0, import_react21.useState)(false);
-  const { isSiteRtl } = useDirection();
+  const [showInfotip, setShowInfotip] = (0, import_react21.useState)(false);
+  const toggleInfotip = () => setShowInfotip((prev) => !prev);
+  const closeInfotip = () => setShowInfotip(false);
   const key = path.join(".");
   const sectionContentRef = useSectionContentRef();
   const sectionContentWidth = sectionContentRef?.current?.offsetWidth ?? 320;
@@ -2151,12 +2165,7 @@ var StyleIndicatorInfotip = ({ inheritanceChain, propType, path, label, children
     });
   }, [key, propType]);
   const items3 = useNormalizedInheritanceChainItems(inheritanceChain, key, resolve);
-  const toggleOpen = () => setOpen((prev) => !prev);
-  const closeInfotip = () => {
-    setOpen(false);
-  };
-  const forceInfotipAlignLeft = isSiteRtl ? 9999999 : -9999999;
-  const infotipContent = /* @__PURE__ */ React25.createElement(
+  const infotipContent = /* @__PURE__ */ React25.createElement(import_ui22.ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ React25.createElement(
     import_ui22.Card,
     {
       elevation: 0,
@@ -2187,54 +2196,90 @@ var StyleIndicatorInfotip = ({ inheritanceChain, propType, path, label, children
           onClick: closeInfotip
         }
       )),
-      /* @__PURE__ */ React25.createElement(import_ui22.Stack, { gap: 1.5, sx: { pl: 2, pr: 1, pb: 2, overflowX: "hidden", overflowY: "auto" }, role: "list" }, items3.map((item, index) => {
-        return /* @__PURE__ */ React25.createElement(
-          import_ui22.Box,
-          {
-            key: item.id,
-            display: "flex",
-            gap: 0.5,
-            role: "listitem",
-            "aria-label": (0, import_i18n8.__)("Inheritance item: %s", "elementor").replace(
-              "%s",
-              item.displayLabel
-            )
-          },
-          /* @__PURE__ */ React25.createElement(import_ui22.Box, { display: "flex", gap: 0.5, sx: { flexWrap: "wrap", width: "100%" } }, /* @__PURE__ */ React25.createElement(BreakpointIcon, { breakpoint: item.breakpoint }), /* @__PURE__ */ React25.createElement(LabelChip, { displayLabel: item.displayLabel, provider: item.provider }), /* @__PURE__ */ React25.createElement(ValueComponent, { index, value: item.value })),
-          /* @__PURE__ */ React25.createElement(ActionIcons, null)
-        );
-      }))
+      /* @__PURE__ */ React25.createElement(
+        import_ui22.Stack,
+        {
+          gap: 1.5,
+          sx: { pl: 2, pr: 1, pb: 2, overflowX: "hidden", overflowY: "auto" },
+          role: "list"
+        },
+        items3.map((item, index) => {
+          return /* @__PURE__ */ React25.createElement(
+            import_ui22.Box,
+            {
+              key: item.id,
+              display: "flex",
+              gap: 0.5,
+              role: "listitem",
+              "aria-label": (0, import_i18n8.__)("Inheritance item: %s", "elementor").replace(
+                "%s",
+                item.displayLabel
+              )
+            },
+            /* @__PURE__ */ React25.createElement(import_ui22.Box, { display: "flex", gap: 0.5, sx: { flexWrap: "wrap", width: "100%" } }, /* @__PURE__ */ React25.createElement(BreakpointIcon, { breakpoint: item.breakpoint }), /* @__PURE__ */ React25.createElement(
+              LabelChip,
+              {
+                displayLabel: item.displayLabel,
+                provider: item.provider,
+                chipColor: item.chipColor
+              }
+            ), /* @__PURE__ */ React25.createElement(ValueComponent, { index, value: item.value })),
+            /* @__PURE__ */ React25.createElement(ActionIcons, null)
+          );
+        })
+      )
     )
-  );
-  return /* @__PURE__ */ React25.createElement(
-    import_ui22.Infotip,
-    {
-      placement: "top",
-      content: infotipContent,
-      open,
-      onClose: closeInfotip,
-      disableHoverListener: true,
-      componentsProps: {
-        tooltip: {
-          sx: {
-            mx: 2
+  ));
+  return /* @__PURE__ */ React25.createElement(TooltipOrInfotip, { showInfotip, onClose: closeInfotip, infotipContent }, /* @__PURE__ */ React25.createElement(import_ui22.IconButton, { onClick: toggleInfotip, "aria-label": label, sx: { my: "-1px" } }, children));
+};
+function TooltipOrInfotip({
+  children,
+  showInfotip,
+  onClose,
+  infotipContent
+}) {
+  const { isSiteRtl } = useDirection();
+  const forceInfotipAlignLeft = isSiteRtl ? 9999999 : -9999999;
+  if (showInfotip) {
+    return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(
+      import_ui22.Backdrop,
+      {
+        open: showInfotip,
+        onClick: onClose,
+        sx: {
+          backgroundColor: "transparent",
+          zIndex: (theme) => theme.zIndex.modal - 1
+        }
+      }
+    ), /* @__PURE__ */ React25.createElement(
+      import_ui22.Infotip,
+      {
+        placement: "top",
+        content: infotipContent,
+        open: showInfotip,
+        onClose,
+        disableHoverListener: true,
+        componentsProps: {
+          tooltip: {
+            sx: { mx: 2 }
+          }
+        },
+        slotProps: {
+          popper: {
+            modifiers: [
+              {
+                name: "offset",
+                options: { offset: [forceInfotipAlignLeft, 0] }
+              }
+            ]
           }
         }
       },
-      slotProps: {
-        popper: {
-          modifiers: [
-            {
-              name: "offset",
-              options: { offset: [forceInfotipAlignLeft, 0] }
-            }
-          ]
-        }
-      }
-    },
-    /* @__PURE__ */ React25.createElement(import_ui22.IconButton, { onClick: toggleOpen, "aria-label": label, sx: { my: "-1px" } }, children)
-  );
-};
+      children
+    ));
+  }
+  return /* @__PURE__ */ React25.createElement(import_ui22.Tooltip, { title: (0, import_i18n8.__)("Style origin", "elementor"), placement: "top" }, children);
+}
 
 // src/styles-inheritance/styles-inheritance-indicator.tsx
 var StylesInheritanceIndicator = () => {
@@ -3340,8 +3385,8 @@ var positionOptions2 = [
   { label: (0, import_i18n31.__)("None", "elementor"), value: "none" },
   { label: (0, import_i18n31.__)("Scale down", "elementor"), value: "scale-down" }
 ];
-var ObjectFitField = ({ onChange }) => {
-  return /* @__PURE__ */ React57.createElement(StylesField, { bind: "object-fit" }, /* @__PURE__ */ React57.createElement(import_ui47.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(import_ui47.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(ControlLabel, null, (0, import_i18n31.__)("Object fit", "elementor"))), /* @__PURE__ */ React57.createElement(import_ui47.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React57.createElement(import_editor_controls29.SelectControl, { options: positionOptions2, onChange }))));
+var ObjectFitField = () => {
+  return /* @__PURE__ */ React57.createElement(StylesField, { bind: "object-fit" }, /* @__PURE__ */ React57.createElement(import_ui47.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(import_ui47.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(ControlLabel, null, (0, import_i18n31.__)("Object fit", "elementor"))), /* @__PURE__ */ React57.createElement(import_ui47.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React57.createElement(import_editor_controls29.SelectControl, { options: positionOptions2 }))));
 };
 
 // src/components/style-sections/size-section/object-position-field.tsx
@@ -3360,8 +3405,8 @@ var positionOptions3 = [
   { label: (0, import_i18n32.__)("Bottom left", "elementor"), value: "bottom left" },
   { label: (0, import_i18n32.__)("Bottom right", "elementor"), value: "bottom right" }
 ];
-var ObjectPositionField = ({ onChange }) => {
-  return /* @__PURE__ */ React58.createElement(StylesField, { bind: "object-position" }, /* @__PURE__ */ React58.createElement(import_ui48.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React58.createElement(import_ui48.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(ControlLabel, null, (0, import_i18n32.__)("Object position", "elementor"))), /* @__PURE__ */ React58.createElement(import_ui48.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React58.createElement(import_editor_controls30.SelectControl, { options: positionOptions3, onChange }))));
+var ObjectPositionField = () => {
+  return /* @__PURE__ */ React58.createElement(StylesField, { bind: "object-position" }, /* @__PURE__ */ React58.createElement(import_ui48.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React58.createElement(import_ui48.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(ControlLabel, null, (0, import_i18n32.__)("Object position", "elementor"))), /* @__PURE__ */ React58.createElement(import_ui48.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React58.createElement(import_editor_controls30.SelectControl, { options: positionOptions3 }))));
 };
 
 // src/components/style-sections/size-section/overflow-field.tsx
@@ -3396,16 +3441,8 @@ var OverflowField = () => {
 
 // src/components/style-sections/size-section/size-section.tsx
 var SizeSection = () => {
-  const [fitValue, setFitValue] = useStylesField("object-fit");
+  const [fitValue] = useStylesField("object-fit");
   const isNotFill = fitValue && fitValue?.value !== "fill";
-  const onFitChange = (newFit, previousValue) => {
-    if (newFit && newFit !== previousValue) {
-      setFitValue({
-        value: newFit,
-        $$type: "string"
-      });
-    }
-  };
   const isVersion330Active = (0, import_editor_v1_adapters10.isExperimentActive)("e_v_3_30");
   return /* @__PURE__ */ React60.createElement(SectionContent, null, /* @__PURE__ */ React60.createElement(import_ui50.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "width", label: (0, import_i18n34.__)("Width", "elementor"), extendedValues: ["auto"] })), /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "height", label: (0, import_i18n34.__)("Height", "elementor"), extendedValues: ["auto"] }))), /* @__PURE__ */ React60.createElement(import_ui50.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(
     SizeField,
@@ -3421,7 +3458,7 @@ var SizeSection = () => {
       label: (0, import_i18n34.__)("Min height", "elementor"),
       extendedValues: ["auto"]
     }
-  ))), /* @__PURE__ */ React60.createElement(import_ui50.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "max-width", label: (0, import_i18n34.__)("Max width", "elementor") })), /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "max-height", label: (0, import_i18n34.__)("Max height", "elementor") }))), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(import_ui50.Stack, null, /* @__PURE__ */ React60.createElement(OverflowField, null)), isVersion330Active && /* @__PURE__ */ React60.createElement(CollapsibleContent, null, /* @__PURE__ */ React60.createElement(import_ui50.Stack, { gap: 2 }, /* @__PURE__ */ React60.createElement(StylesField, { bind: "aspect-ratio" }, /* @__PURE__ */ React60.createElement(import_editor_controls32.AspectRatioControl, { label: (0, import_i18n34.__)("Aspect Ratio", "elementor") })), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(ObjectFitField, { onChange: onFitChange }), isNotFill && /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(ObjectPositionField, null)))));
+  ))), /* @__PURE__ */ React60.createElement(import_ui50.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "max-width", label: (0, import_i18n34.__)("Max width", "elementor") })), /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "max-height", label: (0, import_i18n34.__)("Max height", "elementor") }))), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(import_ui50.Stack, null, /* @__PURE__ */ React60.createElement(OverflowField, null)), isVersion330Active && /* @__PURE__ */ React60.createElement(CollapsibleContent, null, /* @__PURE__ */ React60.createElement(import_ui50.Stack, { gap: 2 }, /* @__PURE__ */ React60.createElement(StylesField, { bind: "aspect-ratio" }, /* @__PURE__ */ React60.createElement(import_editor_controls32.AspectRatioControl, { label: (0, import_i18n34.__)("Aspect Ratio", "elementor") })), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(ObjectFitField, null), isNotFill && /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(ObjectPositionField, null)))));
 };
 var SizeField = ({ label, bind, extendedValues }) => {
   return /* @__PURE__ */ React60.createElement(StylesField, { bind }, /* @__PURE__ */ React60.createElement(import_ui50.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React60.createElement(ControlLabel, null, label)), /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React60.createElement(import_editor_controls32.SizeControl, { extendedValues }))));