@elementor/editor-editing-panel 4.1.0-723 → 4.1.0-724

package/dist/index.js

@@ -6218,7 +6218,7 @@ var LabelChip = ({ displayLabel, provider }) => {
 var React92 = __toESM(require("react"));
 var import_ui42 = require("@elementor/ui");
 var ValueComponent = ({ index, value }) => {
-  return /* @__PURE__ */ React92.createElement(
+  return /* @__PURE__ */ React92.createElement(import_ui42.Tooltip, { title: value, placement: "top" }, /* @__PURE__ */ React92.createElement(
     import_ui42.Typography,
     {
       variant: "caption",
@@ -6227,15 +6227,16 @@ var ValueComponent = ({ index, value }) => {
         mt: "1px",
         textDecoration: index === 0 ? "none" : "line-through",
         overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
+        display: "-webkit-box",
+        WebkitLineClamp: 1,
+        WebkitBoxOrient: "vertical",
         pl: 2.5,
         minWidth: 0,
         maxWidth: "100%"
       }
     },
     value
-  );
+  ));
 };
 
 // src/styles-inheritance/components/infotip/action-icons.tsx
@@ -6323,7 +6324,7 @@ var StylesInheritanceInfotip = ({
           }
         }
       },
-      /* @__PURE__ */ React94.createElement(import_ui44.Stack, { gap: 1.5, sx: { pl: 3, pr: 1, pb: 2 }, role: "list" }, items3.map((item, index) => {
+      /* @__PURE__ */ React94.createElement(import_ui44.Stack, { gap: 1.5, sx: { pl: 2, pr: 1, pt: 1.5, pb: 1.5 }, role: "list" }, items3.map((item, index) => {
         return /* @__PURE__ */ React94.createElement(
           import_ui44.Box,
           {
@@ -6418,15 +6419,13 @@ function TooltipOrInfotip({
             sx: { mx: 2 }
           }
         },
-        slotProps: {
-          popper: {
-            modifiers: [
-              {
-                name: "offset",
-                options: { offset: [offsetX, 0] }
-              }
-            ]
-          }
+        PopperProps: {
+          modifiers: [
+            {
+              name: "offset",
+              options: { offset: [offsetX, 0] }
+            }
+          ]
         }
       },
       children
@@ -6503,23 +6502,26 @@ var excludePropTypeTransformers = /* @__PURE__ */ new Set([
 // src/styles-inheritance/transformers/array-transformer.tsx
 var React96 = __toESM(require("react"));
 var import_editor_canvas6 = require("@elementor/editor-canvas");
-var import_ui45 = require("@elementor/ui");
 var arrayTransformer = (0, import_editor_canvas6.createTransformer)((values) => {
   if (!values || values.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React96.createElement(import_ui45.Stack, { direction: "column" }, values.map((item, index) => /* @__PURE__ */ React96.createElement(import_ui45.Stack, { key: index }, item)));
+  const allStrings = values.every((item) => typeof item === "string" || typeof item === "number");
+  if (allStrings) {
+    return values.join(" ");
+  }
+  return /* @__PURE__ */ React96.createElement(React96.Fragment, null, values.map((item, index) => /* @__PURE__ */ React96.createElement(React96.Fragment, { key: index }, index > 0 && " ", item)));
 });
 
 // src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
 var React97 = __toESM(require("react"));
 var import_editor_canvas7 = require("@elementor/editor-canvas");
-var import_ui46 = require("@elementor/ui");
-var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React97.createElement(import_ui46.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React97.createElement(ItemLabelColor, { value })));
+var import_ui45 = require("@elementor/ui");
+var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React97.createElement(import_ui45.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React97.createElement(ItemLabelColor, { value })));
 var ItemLabelColor = ({ value: { color } }) => {
   return /* @__PURE__ */ React97.createElement("span", null, color);
 };
-var StyledUnstableColorIndicator = (0, import_ui46.styled)(import_ui46.UnstableColorIndicator)(({ theme }) => ({
+var StyledUnstableColorIndicator = (0, import_ui45.styled)(import_ui45.UnstableColorIndicator)(({ theme }) => ({
   width: "1em",
   height: "1em",
   borderRadius: `${theme.shape.borderRadius / 2}px`,
@@ -6530,9 +6532,9 @@ var StyledUnstableColorIndicator = (0, import_ui46.styled)(import_ui46.UnstableC
 // src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx
 var React98 = __toESM(require("react"));
 var import_editor_canvas8 = require("@elementor/editor-canvas");
-var import_ui47 = require("@elementor/ui");
+var import_ui46 = require("@elementor/ui");
 var import_i18n67 = require("@wordpress/i18n");
-var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React98.createElement(import_ui47.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React98.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React98.createElement(ItemLabelGradient, { value })));
+var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React98.createElement(import_ui46.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React98.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React98.createElement(ItemLabelGradient, { value })));
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
   return /* @__PURE__ */ React98.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
@@ -6555,13 +6557,13 @@ var getGradientValue = (gradient) => {
 var React99 = __toESM(require("react"));
 var import_editor_canvas9 = require("@elementor/editor-canvas");
 var import_editor_ui11 = require("@elementor/editor-ui");
-var import_ui48 = require("@elementor/ui");
+var import_ui47 = require("@elementor/ui");
 var import_wp_media = require("@elementor/wp-media");
-var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React99.createElement(import_ui48.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React99.createElement(ItemIconImage, { value }), /* @__PURE__ */ React99.createElement(ItemLabelImage, { value })));
+var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React99.createElement(import_ui47.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React99.createElement(ItemIconImage, { value }), /* @__PURE__ */ React99.createElement(ItemLabelImage, { value })));
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
   return /* @__PURE__ */ React99.createElement(
-    import_ui48.CardMedia,
+    import_ui47.CardMedia,
     {
       image: imageUrl,
       sx: (theme) => ({
@@ -6603,7 +6605,6 @@ var getFileExtensionFromFilename = (filename) => {
 // src/styles-inheritance/transformers/box-shadow-transformer.tsx
 var React100 = __toESM(require("react"));
 var import_editor_canvas10 = require("@elementor/editor-canvas");
-var import_ui49 = require("@elementor/ui");
 var boxShadowTransformer = (0, import_editor_canvas10.createTransformer)((value) => {
   if (!value) {
     return null;
@@ -6612,20 +6613,20 @@ var boxShadowTransformer = (0, import_editor_canvas10.createTransformer)((value)
   const colorValue = color || "#000000";
   const sizes = [hOffset || "0px", vOffset || "0px", blur || "10px", spread || "0px"].join(" ");
   const positionValue = position || "outset";
-  return /* @__PURE__ */ React100.createElement(import_ui49.Stack, { direction: "column", gap: 0.5, pb: 1 }, /* @__PURE__ */ React100.createElement("span", null, colorValue, " ", positionValue, ", ", sizes));
+  return /* @__PURE__ */ React100.createElement(React100.Fragment, null, colorValue, " ", positionValue, ", ", sizes);
 });
 
 // src/styles-inheritance/transformers/color-transformer.tsx
 var React101 = __toESM(require("react"));
 var import_editor_canvas11 = require("@elementor/editor-canvas");
-var import_ui50 = require("@elementor/ui");
+var import_ui48 = require("@elementor/ui");
 function isValidCSSColor(value) {
   if (!value.trim()) {
     return false;
   }
   return CSS.supports("color", value.trim());
 }
-var StyledColorIndicator = (0, import_ui50.styled)(import_ui50.UnstableColorIndicator)(({ theme }) => ({
+var StyledColorIndicator = (0, import_ui48.styled)(import_ui48.UnstableColorIndicator)(({ theme }) => ({
   width: "1em",
   height: "1em",
   borderRadius: `${theme.shape.borderRadius / 2}px`,
@@ -6636,24 +6637,18 @@ var colorTransformer = (0, import_editor_canvas11.createTransformer)((value) =>
   if (!isValidCSSColor(value)) {
     return value;
   }
-  return /* @__PURE__ */ React101.createElement(import_ui50.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React101.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React101.createElement("span", null, value));
+  return /* @__PURE__ */ React101.createElement(import_ui48.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React101.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React101.createElement("span", null, value));
 });
 
 // src/styles-inheritance/transformers/repeater-to-items-transformer.tsx
-var React102 = __toESM(require("react"));
 var import_editor_canvas12 = require("@elementor/editor-canvas");
-var import_ui51 = require("@elementor/ui");
-var createRepeaterToItemsTransformer = (originalTransformer, separator = " ") => {
+var createRepeaterToItemsTransformer = (originalTransformer) => {
   return (0, import_editor_canvas12.createTransformer)((value, options12) => {
     const stringResult = originalTransformer(value, options12);
     if (!stringResult || typeof stringResult !== "string") {
       return stringResult;
     }
-    const parts = stringResult.split(separator).filter(Boolean);
-    if (parts.length <= 1) {
-      return stringResult;
-    }
-    return /* @__PURE__ */ React102.createElement(import_ui51.Stack, { direction: "column", gap: 0.5 }, parts.map((part, index) => /* @__PURE__ */ React102.createElement(import_ui51.Stack, { key: index }, part.trim())));
+    return stringResult;
   });
 };
 
@@ -6692,7 +6687,7 @@ function registerCustomTransformers(originalStyleTransformers) {
   );
   import_editor_canvas13.stylesInheritanceTransformersRegistry.register(
     "transition",
-    createRepeaterToItemsTransformer(originalStyleTransformers.transition, ", ")
+    createRepeaterToItemsTransformer(originalStyleTransformers.transition)
   );
   ["background-overlay", "box-shadow", "transform-functions"].forEach(
     (propType) => import_editor_canvas13.stylesInheritanceTransformersRegistry.register(propType, arrayTransformer)