@elementor/editor-editing-panel 3.35.0-461 → 3.35.0-463

package/dist/index.js

@@ -6220,6 +6220,14 @@ var ActionIcons = () => /* @__PURE__ */ React97.createElement(import_ui46.Box, {
 
 // src/styles-inheritance/components/styles-inheritance-infotip.tsx
 var SECTION_PADDING_INLINE = 32;
+var INFOTIP_MAX_WIDTH = 496;
+var calculatePopoverOffset = (triggerRect, cardWidth, isSiteRtl) => {
+  if (!triggerRect) {
+    return 0;
+  }
+  const triggerWidth = triggerRect.width;
+  return isSiteRtl ? triggerWidth - cardWidth : -(cardWidth / 2) + triggerWidth / 2;
+};
 var StylesInheritanceInfotip = ({
   inheritanceChain,
   propType,
@@ -6229,6 +6237,7 @@ var StylesInheritanceInfotip = ({
   isDisabled
 }) => {
   const [showInfotip, setShowInfotip] = (0, import_react43.useState)(false);
+  const triggerRef = (0, import_react43.useRef)(null);
   const toggleInfotip = () => {
     if (isDisabled) {
       return;
@@ -6256,7 +6265,7 @@ var StylesInheritanceInfotip = ({
       elevation: 0,
       sx: {
         width: `${sectionWidth - SECTION_PADDING_INLINE}px`,
-        maxWidth: 496,
+        maxWidth: INFOTIP_MAX_WIDTH,
         maxHeight: 268,
         overflowX: "hidden",
         display: "flex",
@@ -6321,31 +6330,46 @@ var StylesInheritanceInfotip = ({
   if (isDisabled) {
     return /* @__PURE__ */ React98.createElement(import_ui47.Box, { sx: { display: "inline-flex" } }, children);
   }
-  return /* @__PURE__ */ React98.createElement(
+  return /* @__PURE__ */ React98.createElement(import_ui47.Box, { ref: triggerRef, sx: { display: "inline-flex" } }, /* @__PURE__ */ React98.createElement(
     TooltipOrInfotip,
     {
       showInfotip,
       onClose: closeInfotip,
       infotipContent,
-      isDisabled
+      isDisabled,
+      triggerRef,
+      sectionWidth
     },
-    /* @__PURE__ */ React98.createElement(import_ui47.IconButton, { onClick: toggleInfotip, "aria-label": label, sx: { my: "-1px" }, disabled: isDisabled }, children)
-  );
+    /* @__PURE__ */ React98.createElement(
+      import_ui47.IconButton,
+      {
+        onClick: toggleInfotip,
+        "aria-label": label,
+        sx: { my: "-1px" },
+        disabled: isDisabled
+      },
+      children
+    )
+  ));
 };
 function TooltipOrInfotip({
   children,
   showInfotip,
   onClose,
   infotipContent,
-  isDisabled
+  isDisabled,
+  triggerRef,
+  sectionWidth
 }) {
   const direction = useDirection();
   const isSiteRtl = direction.isSiteRtl;
-  const forceInfotipAlignLeft = isSiteRtl ? 9999999 : -9999999;
   if (isDisabled) {
     return /* @__PURE__ */ React98.createElement(import_ui47.Box, { sx: { display: "inline-flex" } }, children);
   }
   if (showInfotip) {
+    const triggerRect = triggerRef.current?.getBoundingClientRect();
+    const cardWidth = Math.min(sectionWidth - SECTION_PADDING_INLINE, INFOTIP_MAX_WIDTH);
+    const offsetX = calculatePopoverOffset(triggerRect, cardWidth, isSiteRtl);
     return /* @__PURE__ */ React98.createElement(React98.Fragment, null, /* @__PURE__ */ React98.createElement(
       import_ui47.Backdrop,
       {
@@ -6374,7 +6398,7 @@ function TooltipOrInfotip({
             modifiers: [
               {
                 name: "offset",
-                options: { offset: [forceInfotipAlignLeft, 0] }
+                options: { offset: [offsetX, 0] }
               }
             ]
           }