@elementor/editor-editing-panel 1.41.0 → 1.42.0

package/dist/index.mjs

@@ -1179,7 +1179,7 @@ function EditorPanelErrorFallback() {
 
 // src/components/editing-panel-tabs.tsx
 import * as React79 from "react";
-import { Fragment as Fragment9 } from "react";
+import { Fragment as Fragment10 } from "react";
 import { isExperimentActive as isExperimentActive11 } from "@elementor/editor-v1-adapters";
 import { Divider as Divider6, Stack as Stack18, Tab, TabPanel, Tabs, useTabs } from "@elementor/ui";
 import { __ as __53 } from "@wordpress/i18n";
@@ -1932,7 +1932,7 @@ import { useBoundProp } from "@elementor/editor-controls";
 import { isEmpty as isEmpty2 } from "@elementor/editor-props";
 import { ELEMENTS_BASE_STYLES_PROVIDER_KEY as ELEMENTS_BASE_STYLES_PROVIDER_KEY3, isElementsStylesProvider as isElementsStylesProvider3 } from "@elementor/editor-styles-repository";
 import { isExperimentActive as isExperimentActive5 } from "@elementor/editor-v1-adapters";
-import { Tooltip as Tooltip5 } from "@elementor/ui";
+import { Tooltip as Tooltip6 } from "@elementor/ui";
 import { __ as __9 } from "@wordpress/i18n";
 
 // src/styles-inheritance/consts.ts
@@ -1949,13 +1949,25 @@ var excludePropTypeTransformers = /* @__PURE__ */ new Set([
   "image",
   "background-overlay"
 ]);
-var isUsingIndicatorPopover = () => isExperimentActive4("e_indications_popover");
+var isUsingIndicatorPopover = () => isExperimentActive4("e_v_3_30");
 
 // src/styles-inheritance/styles-inheritance-infotip.tsx
 import * as React25 from "react";
 import { useMemo as useMemo4, useState as useState8 } from "react";
 import { createPropsResolver } from "@elementor/editor-canvas";
-import { Box as Box6, Card, CardContent, CloseButton, IconButton as IconButton3, Infotip, Stack as Stack7, Typography as Typography6 } from "@elementor/ui";
+import {
+  Backdrop,
+  Box as Box6,
+  Card,
+  CardContent,
+  ClickAwayListener,
+  CloseButton,
+  IconButton as IconButton3,
+  Infotip,
+  Stack as Stack7,
+  Tooltip as Tooltip5,
+  Typography as Typography6
+} from "@elementor/ui";
 import { __ as __8 } from "@wordpress/i18n";
 
 // src/components/section-content.tsx
@@ -2031,16 +2043,18 @@ import { InfoCircleIcon } from "@elementor/icons";
 import { Chip as Chip4, Tooltip as Tooltip4 } from "@elementor/ui";
 import { __ as __6 } from "@wordpress/i18n";
 var SIZE4 = "tiny";
-var LabelChip = ({ displayLabel, provider }) => {
+var LabelChip = ({ displayLabel, provider, chipColor }) => {
+  const isBaseStyle = provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY;
+  const chipIcon = isBaseStyle ? /* @__PURE__ */ React22.createElement(Tooltip4, { title: __6("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React22.createElement(InfoCircleIcon, { fontSize: SIZE4 })) : void 0;
   return /* @__PURE__ */ React22.createElement(
     Chip4,
     {
       label: displayLabel,
       size: SIZE4,
-      color: "global",
+      color: chipColor,
       variant: "standard",
       state: "enabled",
-      icon: provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY ? /* @__PURE__ */ React22.createElement(Tooltip4, { title: __6("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React22.createElement(InfoCircleIcon, { fontSize: SIZE4 })) : void 0,
+      icon: chipIcon,
       sx: (theme) => ({
         lineHeight: 1,
         flexWrap: "nowrap",
@@ -2118,7 +2132,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) => {
@@ -2140,6 +2155,16 @@ var getTransformedValue = async (item, bind, resolve) => {
     return "";
   }
 };
+var getChipColor = (item) => {
+  const { provider = "", style } = item;
+  if (provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY2) {
+    return "default";
+  }
+  if (style?.label === "local") {
+    return "accent";
+  }
+  return "global";
+};
 
 // src/styles-inheritance/styles-inheritance-transformers-registry.tsx
 import { createTransformersRegistry } from "@elementor/editor-canvas";
@@ -2148,8 +2173,9 @@ var stylesInheritanceTransformersRegistry = createTransformersRegistry();
 // src/styles-inheritance/styles-inheritance-infotip.tsx
 var SIZE5 = "tiny";
 var StyleIndicatorInfotip = ({ inheritanceChain, propType, path, label, children }) => {
-  const [open, setOpen] = useState8(false);
-  const { isSiteRtl } = useDirection();
+  const [showInfotip, setShowInfotip] = useState8(false);
+  const toggleInfotip = () => setShowInfotip((prev) => !prev);
+  const closeInfotip = () => setShowInfotip(false);
   const key = path.join(".");
   const sectionContentRef = useSectionContentRef();
   const sectionContentWidth = sectionContentRef?.current?.offsetWidth ?? 320;
@@ -2160,12 +2186,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(ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ React25.createElement(
     Card,
     {
       elevation: 0,
@@ -2196,54 +2217,90 @@ var StyleIndicatorInfotip = ({ inheritanceChain, propType, path, label, children
           onClick: closeInfotip
         }
       )),
-      /* @__PURE__ */ React25.createElement(Stack7, { gap: 1.5, sx: { pl: 2, pr: 1, pb: 2, overflowX: "hidden", overflowY: "auto" }, role: "list" }, items3.map((item, index) => {
-        return /* @__PURE__ */ React25.createElement(
-          Box6,
-          {
-            key: item.id,
-            display: "flex",
-            gap: 0.5,
-            role: "listitem",
-            "aria-label": __8("Inheritance item: %s", "elementor").replace(
-              "%s",
-              item.displayLabel
-            )
-          },
-          /* @__PURE__ */ React25.createElement(Box6, { 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(
+        Stack7,
+        {
+          gap: 1.5,
+          sx: { pl: 2, pr: 1, pb: 2, overflowX: "hidden", overflowY: "auto" },
+          role: "list"
+        },
+        items3.map((item, index) => {
+          return /* @__PURE__ */ React25.createElement(
+            Box6,
+            {
+              key: item.id,
+              display: "flex",
+              gap: 0.5,
+              role: "listitem",
+              "aria-label": __8("Inheritance item: %s", "elementor").replace(
+                "%s",
+                item.displayLabel
+              )
+            },
+            /* @__PURE__ */ React25.createElement(Box6, { 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(
-    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(IconButton3, { 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(
+      Backdrop,
+      {
+        open: showInfotip,
+        onClick: onClose,
+        sx: {
+          backgroundColor: "transparent",
+          zIndex: (theme) => theme.zIndex.modal - 1
+        }
+      }
+    ), /* @__PURE__ */ React25.createElement(
+      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(IconButton3, { onClick: toggleOpen, "aria-label": label, sx: { my: "-1px" } }, children)
-  );
-};
+      children
+    ));
+  }
+  return /* @__PURE__ */ React25.createElement(Tooltip5, { title: __8("Style origin", "elementor"), placement: "top" }, children);
+}
 
 // src/styles-inheritance/styles-inheritance-indicator.tsx
 var StylesInheritanceIndicator = () => {
@@ -2272,7 +2329,7 @@ var StylesInheritanceIndicator = () => {
   const label = getLabel({ isFinalValue, hasValue });
   const variantType = getVariant({ isFinalValue, hasValue, currentStyleProvider });
   if (!isUsingIndicatorPopover()) {
-    return /* @__PURE__ */ React26.createElement(Tooltip5, { title: __9("Style origin", "elementor"), placement: "top" }, /* @__PURE__ */ React26.createElement(StyleIndicator, { variant: variantType, "aria-label": label }));
+    return /* @__PURE__ */ React26.createElement(Tooltip6, { title: __9("Style origin", "elementor"), placement: "top" }, /* @__PURE__ */ React26.createElement(StyleIndicator, { variant: variantType, "aria-label": label }));
   }
   return /* @__PURE__ */ React26.createElement(
     StyleIndicatorInfotip,
@@ -3383,8 +3440,8 @@ var positionOptions2 = [
   { label: __31("None", "elementor"), value: "none" },
   { label: __31("Scale down", "elementor"), value: "scale-down" }
 ];
-var ObjectFitField = ({ onChange }) => {
-  return /* @__PURE__ */ React57.createElement(StylesField, { bind: "object-fit" }, /* @__PURE__ */ React57.createElement(Grid13, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(ControlLabel, null, __31("Object fit", "elementor"))), /* @__PURE__ */ React57.createElement(Grid13, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React57.createElement(SelectControl4, { options: positionOptions2, onChange }))));
+var ObjectFitField = () => {
+  return /* @__PURE__ */ React57.createElement(StylesField, { bind: "object-fit" }, /* @__PURE__ */ React57.createElement(Grid13, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(ControlLabel, null, __31("Object fit", "elementor"))), /* @__PURE__ */ React57.createElement(Grid13, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React57.createElement(SelectControl4, { options: positionOptions2 }))));
 };
 
 // src/components/style-sections/size-section/object-position-field.tsx
@@ -3403,8 +3460,8 @@ var positionOptions3 = [
   { label: __32("Bottom left", "elementor"), value: "bottom left" },
   { label: __32("Bottom right", "elementor"), value: "bottom right" }
 ];
-var ObjectPositionField = ({ onChange }) => {
-  return /* @__PURE__ */ React58.createElement(StylesField, { bind: "object-position" }, /* @__PURE__ */ React58.createElement(Grid14, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React58.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(ControlLabel, null, __32("Object position", "elementor"))), /* @__PURE__ */ React58.createElement(Grid14, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React58.createElement(SelectControl5, { options: positionOptions3, onChange }))));
+var ObjectPositionField = () => {
+  return /* @__PURE__ */ React58.createElement(StylesField, { bind: "object-position" }, /* @__PURE__ */ React58.createElement(Grid14, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React58.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(ControlLabel, null, __32("Object position", "elementor"))), /* @__PURE__ */ React58.createElement(Grid14, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React58.createElement(SelectControl5, { options: positionOptions3 }))));
 };
 
 // src/components/style-sections/size-section/overflow-field.tsx
@@ -3439,16 +3496,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 = isExperimentActive8("e_v_3_30");
   return /* @__PURE__ */ React60.createElement(SectionContent, null, /* @__PURE__ */ React60.createElement(Grid16, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "width", label: __34("Width", "elementor"), extendedValues: ["auto"] })), /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "height", label: __34("Height", "elementor"), extendedValues: ["auto"] }))), /* @__PURE__ */ React60.createElement(Grid16, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(
     SizeField,
@@ -3464,7 +3513,7 @@ var SizeSection = () => {
       label: __34("Min height", "elementor"),
       extendedValues: ["auto"]
     }
-  ))), /* @__PURE__ */ React60.createElement(Grid16, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "max-width", label: __34("Max width", "elementor") })), /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "max-height", label: __34("Max height", "elementor") }))), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(Stack16, null, /* @__PURE__ */ React60.createElement(OverflowField, null)), isVersion330Active && /* @__PURE__ */ React60.createElement(CollapsibleContent, null, /* @__PURE__ */ React60.createElement(Stack16, { gap: 2 }, /* @__PURE__ */ React60.createElement(StylesField, { bind: "aspect-ratio" }, /* @__PURE__ */ React60.createElement(AspectRatioControl, { label: __34("Aspect Ratio", "elementor") })), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(ObjectFitField, { onChange: onFitChange }), isNotFill && /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(ObjectPositionField, null)))));
+  ))), /* @__PURE__ */ React60.createElement(Grid16, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "max-width", label: __34("Max width", "elementor") })), /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "max-height", label: __34("Max height", "elementor") }))), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(Stack16, null, /* @__PURE__ */ React60.createElement(OverflowField, null)), isVersion330Active && /* @__PURE__ */ React60.createElement(CollapsibleContent, null, /* @__PURE__ */ React60.createElement(Stack16, { gap: 2 }, /* @__PURE__ */ React60.createElement(StylesField, { bind: "aspect-ratio" }, /* @__PURE__ */ React60.createElement(AspectRatioControl, { label: __34("Aspect Ratio", "elementor") })), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(ObjectFitField, null), isNotFill && /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(ObjectPositionField, null)))));
 };
 var SizeField = ({ label, bind, extendedValues }) => {
   return /* @__PURE__ */ React60.createElement(StylesField, { bind }, /* @__PURE__ */ React60.createElement(Grid16, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 12 }, /* @__PURE__ */ React60.createElement(ControlLabel, null, label)), /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 12 }, /* @__PURE__ */ React60.createElement(SizeControl5, { extendedValues }))));
@@ -3957,7 +4006,7 @@ var EditingPanelTabs = () => {
   return (
     // When switching between elements, the local states should be reset. We are using key to rerender the tabs.
     // Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
-    /* @__PURE__ */ React79.createElement(Fragment9, { key: element.id }, /* @__PURE__ */ React79.createElement(PanelTabContent, null))
+    /* @__PURE__ */ React79.createElement(Fragment10, { key: element.id }, /* @__PURE__ */ React79.createElement(PanelTabContent, null))
   );
 };
 var PanelTabContent = () => {
@@ -4188,7 +4237,7 @@ var DynamicControl = ({ bind, children }) => {
 
 // src/dynamics/components/dynamic-selection.tsx
 import * as React83 from "react";
-import { Fragment as Fragment10, useState as useState13 } from "react";
+import { Fragment as Fragment11, useState as useState13 } from "react";
 import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
 import { DatabaseIcon, SearchIcon } from "@elementor/icons";
 import {
@@ -4224,7 +4273,7 @@ var DynamicSelection = ({ onSelect }) => {
     setValue({ name: value, settings: { label } });
     onSelect?.();
   };
-  return /* @__PURE__ */ React83.createElement(Stack20, null, hasNoDynamicTags ? /* @__PURE__ */ React83.createElement(NoDynamicTags, null) : /* @__PURE__ */ React83.createElement(Fragment10, null, /* @__PURE__ */ React83.createElement(Box7, { px: 1.5, pb: 1 }, /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React83.createElement(Stack20, null, hasNoDynamicTags ? /* @__PURE__ */ React83.createElement(NoDynamicTags, null) : /* @__PURE__ */ React83.createElement(Fragment11, null, /* @__PURE__ */ React83.createElement(Box7, { px: 1.5, pb: 1 }, /* @__PURE__ */ React83.createElement(
     TextField2,
     {
       fullWidth: true,
@@ -4236,7 +4285,7 @@ var DynamicSelection = ({ onSelect }) => {
         startAdornment: /* @__PURE__ */ React83.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React83.createElement(SearchIcon, { fontSize: SIZE7 }))
       }
     }
-  )), /* @__PURE__ */ React83.createElement(Divider7, null), /* @__PURE__ */ React83.createElement(Box7, { sx: { overflowY: "auto", height: 260, width: 220 } }, options12.length > 0 ? /* @__PURE__ */ React83.createElement(MenuList, { role: "listbox", tabIndex: 0 }, options12.map(([category, items3], index) => /* @__PURE__ */ React83.createElement(Fragment10, { key: index }, /* @__PURE__ */ React83.createElement(
+  )), /* @__PURE__ */ React83.createElement(Divider7, null), /* @__PURE__ */ React83.createElement(Box7, { sx: { overflowY: "auto", height: 260, width: 220 } }, options12.length > 0 ? /* @__PURE__ */ React83.createElement(MenuList, { role: "listbox", tabIndex: 0 }, options12.map(([category, items3], index) => /* @__PURE__ */ React83.createElement(Fragment11, { key: index }, /* @__PURE__ */ React83.createElement(
     MenuSubheader2,
     {
       sx: { px: 1.5, typography: "caption", color: "text.tertiary" }