@elementor/editor-editing-panel 4.1.0-818 → 4.1.0-820

package/dist/index.mjs

@@ -1817,7 +1817,7 @@ function EditorPanelErrorFallback() {
 }
 
 // src/components/editing-panel-tabs.tsx
-import { Fragment as Fragment9 } from "react";
+import { Fragment as Fragment10 } from "react";
 import * as React86 from "react";
 import { getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
 import { isExperimentActive as isExperimentActive3 } from "@elementor/editor-v1-adapters";
@@ -2488,7 +2488,7 @@ import { CLASSES_PROP_KEY } from "@elementor/editor-props";
 import { useActiveBreakpoint } from "@elementor/editor-responsive";
 import { createLocation as createLocation3 } from "@elementor/locations";
 import { SessionStorageProvider as SessionStorageProvider2 } from "@elementor/session";
-import { Box as Box5, Divider as Divider5, Stack as Stack12 } from "@elementor/ui";
+import { Box as Box6, Divider as Divider5, Stack as Stack12 } from "@elementor/ui";
 import { __ as __59 } from "@wordpress/i18n";
 
 // src/contexts/styles-inheritance-context.tsx
@@ -4421,10 +4421,26 @@ var PositionField = ({ onChange }) => {
 // src/components/style-sections/position-section/z-index-field.tsx
 import * as React59 from "react";
 import { NumberControl as NumberControl4 } from "@elementor/editor-controls";
+import { InfoCircleFilledIcon } from "@elementor/icons";
+import { Alert as Alert2, AlertTitle, Box as Box5, Infotip } from "@elementor/ui";
 import { __ as __37 } from "@wordpress/i18n";
 var Z_INDEX_LABEL = __37("Z-index", "elementor");
-var ZIndexField = () => {
-  return /* @__PURE__ */ React59.createElement(StylesField, { bind: "z-index", propDisplayName: Z_INDEX_LABEL }, /* @__PURE__ */ React59.createElement(StylesFieldLayout, { label: Z_INDEX_LABEL }, /* @__PURE__ */ React59.createElement(NumberControl4, null)));
+var ZIndexField = ({ disabled }) => {
+  const StyleField = /* @__PURE__ */ React59.createElement(StylesField, { bind: "z-index", propDisplayName: Z_INDEX_LABEL }, /* @__PURE__ */ React59.createElement(StylesFieldLayout, { label: Z_INDEX_LABEL }, /* @__PURE__ */ React59.createElement(NumberControl4, { disabled })));
+  const content = /* @__PURE__ */ React59.createElement(Alert2, { color: "secondary", icon: /* @__PURE__ */ React59.createElement(InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React59.createElement(AlertTitle, null, __37("Z-index", "elementor")), /* @__PURE__ */ React59.createElement(Box5, { component: "span" }, __37(
+    "z-index only works on positioned elements. Change position to relative, absolute, or fixed to enable layering.",
+    "elementor"
+  )));
+  return disabled ? /* @__PURE__ */ React59.createElement(
+    Infotip,
+    {
+      placement: "right",
+      content,
+      color: "secondary",
+      slotProps: { popper: { sx: { width: 300 } } }
+    },
+    /* @__PURE__ */ React59.createElement(Box5, null, StyleField)
+  ) : /* @__PURE__ */ React59.createElement(React59.Fragment, null, StyleField);
 };
 
 // src/components/style-sections/position-section/position-section.tsx
@@ -4487,7 +4503,7 @@ var PositionSection = () => {
     }
   };
   const isNotStatic = positionValue && positionValue?.value !== POSITION_STATIC;
-  return /* @__PURE__ */ React60.createElement(SectionContent, null, /* @__PURE__ */ React60.createElement(PositionField, { onChange: onPositionChange }), isNotStatic ? /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(DimensionsField, null), /* @__PURE__ */ React60.createElement(ZIndexField, null)) : null, /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(OffsetField, null));
+  return /* @__PURE__ */ React60.createElement(SectionContent, null, /* @__PURE__ */ React60.createElement(PositionField, { onChange: onPositionChange }), isNotStatic ? /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(DimensionsField, null)) : null, /* @__PURE__ */ React60.createElement(ZIndexField, { disabled: !isNotStatic }), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(OffsetField, null));
 };
 var usePersistDimensions = () => {
   const { id: styleDefID, meta } = useStyle();
@@ -5235,7 +5251,7 @@ var StyleTab = () => {
           "transition"
         ]
       }
-    ), /* @__PURE__ */ React85.createElement(StyleTabSlot, null)), /* @__PURE__ */ React85.createElement(Box5, { sx: { height: "150px" } })))
+    ), /* @__PURE__ */ React85.createElement(StyleTabSlot, null)), /* @__PURE__ */ React85.createElement(Box6, { sx: { height: "150px" } })))
   ));
 };
 function ClassesHeader({ children }) {
@@ -5259,7 +5275,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__ */ React86.createElement(Fragment9, { key: element.id }, /* @__PURE__ */ React86.createElement(PanelTabContent, null))
+    /* @__PURE__ */ React86.createElement(Fragment10, { key: element.id }, /* @__PURE__ */ React86.createElement(PanelTabContent, null))
   );
 };
 var PanelTabContent = () => {
@@ -5405,8 +5421,8 @@ import {
   useElementEditorSettings
 } from "@elementor/editor-elements";
 import { numberPropTypeUtil as numberPropTypeUtil4 } from "@elementor/editor-props";
-import { InfoCircleFilledIcon } from "@elementor/icons";
-import { Alert as Alert2, Chip as Chip4, Infotip, Stack as Stack14, Switch, TextField as TextField2, Typography as Typography4 } from "@elementor/ui";
+import { InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
+import { Alert as Alert3, Chip as Chip4, Infotip as Infotip2, Stack as Stack14, Switch, TextField as TextField2, Typography as Typography4 } from "@elementor/ui";
 import { __ as __64 } from "@wordpress/i18n";
 
 // src/controls-registry/element-controls/get-element-by-type.ts
@@ -5753,14 +5769,14 @@ var ConditionalTooltip = ({
     return children;
   }
   return /* @__PURE__ */ React89.createElement(
-    Infotip,
+    Infotip2,
     {
       arrow: false,
       content: /* @__PURE__ */ React89.createElement(
-        Alert2,
+        Alert3,
         {
           color: "secondary",
-          icon: /* @__PURE__ */ React89.createElement(InfoCircleFilledIcon, { fontSize: "tiny" }),
+          icon: /* @__PURE__ */ React89.createElement(InfoCircleFilledIcon2, { fontSize: "tiny" }),
           size: "small",
           sx: { width: 288 }
         },
@@ -5965,7 +5981,7 @@ import { DatabaseIcon as DatabaseIcon3, SettingsIcon, XIcon } from "@elementor/i
 import {
   bindPopover,
   bindTrigger as bindTrigger2,
-  Box as Box6,
+  Box as Box7,
   Divider as Divider8,
   Grid as Grid8,
   IconButton as IconButton2,
@@ -6076,7 +6092,7 @@ var DynamicControl = ({ bind, children }) => {
 
 // src/dynamics/components/dynamic-selection.tsx
 import * as React93 from "react";
-import { Fragment as Fragment14, useEffect as useEffect9, useState as useState10 } from "react";
+import { Fragment as Fragment15, useEffect as useEffect9, useState as useState10 } from "react";
 import { trackUpgradePromotionClick, trackViewPromotion, useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
 import { CtaButton, PopoverHeader, PopoverMenuList, SearchField, SectionPopoverBody } from "@elementor/editor-ui";
 import { DatabaseIcon as DatabaseIcon2 } from "@elementor/icons";
@@ -6133,7 +6149,7 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
     if (expired) {
       return /* @__PURE__ */ React93.createElement(ExpiredDynamicTags, null);
     }
-    return /* @__PURE__ */ React93.createElement(Fragment14, null, /* @__PURE__ */ React93.createElement(
+    return /* @__PURE__ */ React93.createElement(Fragment15, null, /* @__PURE__ */ React93.createElement(
       SearchField,
       {
         value: searchValue,
@@ -6264,7 +6280,7 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
   if (!dynamicTag) {
     throw new Error(`Dynamic tag ${tagName} not found`);
   }
-  return /* @__PURE__ */ React94.createElement(Box6, null, /* @__PURE__ */ React94.createElement(
+  return /* @__PURE__ */ React94.createElement(Box7, null, /* @__PURE__ */ React94.createElement(
     Tag,
     {
       fullWidth: true,
@@ -6607,12 +6623,12 @@ import {
 import { PopoverHeader as PopoverHeader3, useSectionWidth as useSectionWidth2 } from "@elementor/editor-ui";
 import {
   Backdrop,
-  Box as Box8,
+  Box as Box9,
   Card,
   CardContent,
   ClickAwayListener,
   IconButton as IconButton3,
-  Infotip as Infotip2,
+  Infotip as Infotip3,
   Stack as Stack17,
   Tooltip as Tooltip6
 } from "@elementor/ui";
@@ -6790,8 +6806,8 @@ var ValueComponent = ({ index, value }) => {
 
 // src/styles-inheritance/components/infotip/action-icons.tsx
 import * as React99 from "react";
-import { Box as Box7 } from "@elementor/ui";
-var ActionIcons = () => /* @__PURE__ */ React99.createElement(Box7, { display: "flex", gap: 0.5, alignItems: "center" });
+import { Box as Box8 } from "@elementor/ui";
+var ActionIcons = () => /* @__PURE__ */ React99.createElement(Box8, { display: "flex", gap: 0.5, alignItems: "center" });
 
 // src/styles-inheritance/components/styles-inheritance-infotip.tsx
 var SECTION_PADDING_INLINE = 32;
@@ -6841,7 +6857,7 @@ var StylesInheritanceInfotip = ({
       }
     },
     /* @__PURE__ */ React100.createElement(
-      Box8,
+      Box9,
       {
         sx: {
           position: "sticky",
@@ -6868,7 +6884,7 @@ var StylesInheritanceInfotip = ({
       },
       /* @__PURE__ */ React100.createElement(Stack17, { gap: 1.5, sx: { pl: 2, pr: 1, pt: 1.5, pb: 1.5 }, role: "list" }, items3.map((item, index) => {
         return /* @__PURE__ */ React100.createElement(
-          Box8,
+          Box9,
           {
             key: item.id,
             display: "flex",
@@ -6880,7 +6896,7 @@ var StylesInheritanceInfotip = ({
             )
           },
           /* @__PURE__ */ React100.createElement(
-            Box8,
+            Box9,
             {
               display: "flex",
               gap: 0.5,
@@ -6896,9 +6912,9 @@ var StylesInheritanceInfotip = ({
     )
   ));
   if (isDisabled) {
-    return /* @__PURE__ */ React100.createElement(Box8, { sx: { display: "inline-flex" } }, children);
+    return /* @__PURE__ */ React100.createElement(Box9, { sx: { display: "inline-flex" } }, children);
   }
-  return /* @__PURE__ */ React100.createElement(Box8, { ref: triggerRef, sx: { display: "inline-flex" } }, /* @__PURE__ */ React100.createElement(
+  return /* @__PURE__ */ React100.createElement(Box9, { ref: triggerRef, sx: { display: "inline-flex" } }, /* @__PURE__ */ React100.createElement(
     TooltipOrInfotip,
     {
       showInfotip,
@@ -6926,7 +6942,7 @@ function TooltipOrInfotip({
   isDisabled
 }) {
   if (isDisabled) {
-    return /* @__PURE__ */ React100.createElement(Box8, { sx: { display: "inline-flex" } }, children);
+    return /* @__PURE__ */ React100.createElement(Box9, { sx: { display: "inline-flex" } }, children);
   }
   if (showInfotip) {
     return /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement(
@@ -6940,7 +6956,7 @@ function TooltipOrInfotip({
         }
       }
     ), /* @__PURE__ */ React100.createElement(
-      Infotip2,
+      Infotip3,
       {
         placement: "top-end",
         content: infotipContent,