@elementor/editor-editing-panel 3.33.0-200 → 3.33.0-201

package/dist/index.d.mts

@@ -17,6 +17,7 @@ import * as _elementor_menus from '@elementor/menus';
 import * as _mui_material from '@mui/material';
 import * as zod from 'zod';
 import * as _elementor_utils from '@elementor/utils';
+import * as _elementor_editor_canvas from '@elementor/editor-canvas';
 
 type ValidationResult = {
     isValid: true;
@@ -1172,31 +1173,11 @@ type Colors = {
 declare const registerStyleProviderToColors: (provider: string, colors: Colors) => void;
 
 declare const stylesInheritanceTransformersRegistry: {
-    register(type: _elementor_editor_props.PropTypeKey, transformer: ((value: any, options: {
-        key: string;
-        signal?: AbortSignal;
-    }) => unknown) & {
-        __transformer: true;
-    }): any;
-    registerFallback(transformer: ((value: any, options: {
-        key: string;
-        signal?: AbortSignal;
-    }) => unknown) & {
-        __transformer: true;
-    }): any;
-    get(type: _elementor_editor_props.PropTypeKey): (((value: any, options: {
-        key: string;
-        signal?: AbortSignal;
-    }) => unknown) & {
-        __transformer: true;
-    }) | null;
+    register(type: _elementor_editor_props.PropTypeKey, transformer: _elementor_editor_canvas.AnyTransformer): any;
+    registerFallback(transformer: _elementor_editor_canvas.AnyTransformer): any;
+    get(type: _elementor_editor_props.PropTypeKey): _elementor_editor_canvas.AnyTransformer | null;
     all(): {
-        [x: string]: ((value: any, options: {
-            key: string;
-            signal?: AbortSignal;
-        }) => unknown) & {
-            __transformer: true;
-        };
+        [x: string]: _elementor_editor_canvas.AnyTransformer;
     };
 };
 

package/dist/index.d.ts

@@ -17,6 +17,7 @@ import * as _elementor_menus from '@elementor/menus';
 import * as _mui_material from '@mui/material';
 import * as zod from 'zod';
 import * as _elementor_utils from '@elementor/utils';
+import * as _elementor_editor_canvas from '@elementor/editor-canvas';
 
 type ValidationResult = {
     isValid: true;
@@ -1172,31 +1173,11 @@ type Colors = {
 declare const registerStyleProviderToColors: (provider: string, colors: Colors) => void;
 
 declare const stylesInheritanceTransformersRegistry: {
-    register(type: _elementor_editor_props.PropTypeKey, transformer: ((value: any, options: {
-        key: string;
-        signal?: AbortSignal;
-    }) => unknown) & {
-        __transformer: true;
-    }): any;
-    registerFallback(transformer: ((value: any, options: {
-        key: string;
-        signal?: AbortSignal;
-    }) => unknown) & {
-        __transformer: true;
-    }): any;
-    get(type: _elementor_editor_props.PropTypeKey): (((value: any, options: {
-        key: string;
-        signal?: AbortSignal;
-    }) => unknown) & {
-        __transformer: true;
-    }) | null;
+    register(type: _elementor_editor_props.PropTypeKey, transformer: _elementor_editor_canvas.AnyTransformer): any;
+    registerFallback(transformer: _elementor_editor_canvas.AnyTransformer): any;
+    get(type: _elementor_editor_props.PropTypeKey): _elementor_editor_canvas.AnyTransformer | null;
     all(): {
-        [x: string]: ((value: any, options: {
-            key: string;
-            signal?: AbortSignal;
-        }) => unknown) & {
-            __transformer: true;
-        };
+        [x: string]: _elementor_editor_canvas.AnyTransformer;
     };
 };
 

package/dist/index.js

@@ -2262,7 +2262,9 @@ var ValueComponent = ({ index, value }) => {
         overflow: "hidden",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap",
-        pl: 2.5
+        pl: 2.5,
+        minWidth: 0,
+        maxWidth: "100%"
       }
     },
     value
@@ -2358,7 +2360,17 @@ var StylesInheritanceInfotip = ({
               item.displayLabel
             )
           },
-          /* @__PURE__ */ React21.createElement(import_ui16.Box, { display: "flex", gap: 0.5, sx: { flexWrap: "wrap", width: "100%" } }, /* @__PURE__ */ React21.createElement(BreakpointIcon, { breakpoint: item.breakpoint }), /* @__PURE__ */ React21.createElement(LabelChip, { displayLabel: item.displayLabel, provider: item.provider }), /* @__PURE__ */ React21.createElement(ValueComponent, { index, value: item.value })),
+          /* @__PURE__ */ React21.createElement(
+            import_ui16.Box,
+            {
+              display: "flex",
+              gap: 0.5,
+              sx: { flexWrap: "wrap", width: "100%", alignItems: "flex-start" }
+            },
+            /* @__PURE__ */ React21.createElement(BreakpointIcon, { breakpoint: item.breakpoint }),
+            /* @__PURE__ */ React21.createElement(LabelChip, { displayLabel: item.displayLabel, provider: item.provider }),
+            /* @__PURE__ */ React21.createElement(ValueComponent, { index, value: item.value })
+          ),
           /* @__PURE__ */ React21.createElement(ActionIcons, null)
         );
       }))
@@ -2433,7 +2445,6 @@ function TooltipOrInfotip({
 }
 
 // src/styles-inheritance/components/styles-inheritance-indicator.tsx
-var disabledControls = ["box-shadow", "background-overlay", "filter", "backdrop-filter", "transform", "transition"];
 var StylesInheritanceIndicator = ({
   customContext
 }) => {
@@ -2443,16 +2454,7 @@ var StylesInheritanceIndicator = ({
   if (!path || !inheritanceChain.length) {
     return null;
   }
-  const isDisabled = path.some((pathItem) => disabledControls.includes(pathItem));
-  return /* @__PURE__ */ React22.createElement(
-    Indicator,
-    {
-      inheritanceChain,
-      path,
-      propType,
-      isDisabled
-    }
-  );
+  return /* @__PURE__ */ React22.createElement(Indicator, { inheritanceChain, path, propType });
 };
 var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
   const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
@@ -6125,7 +6127,7 @@ function useResetStyleValueProps() {
 }
 
 // src/styles-inheritance/init-styles-inheritance-transformers.ts
-var import_editor_canvas11 = require("@elementor/editor-canvas");
+var import_editor_canvas13 = require("@elementor/editor-canvas");
 
 // src/styles-inheritance/consts.ts
 var excludePropTypeTransformers = /* @__PURE__ */ new Set([
@@ -6141,19 +6143,26 @@ var excludePropTypeTransformers = /* @__PURE__ */ new Set([
   "background-overlay"
 ]);
 
-// src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
+// src/styles-inheritance/transformers/array-transformer.tsx
 var React98 = __toESM(require("react"));
 var import_editor_canvas6 = require("@elementor/editor-canvas");
 var import_ui49 = require("@elementor/ui");
-var backgroundColorOverlayTransformer = (0, import_editor_canvas6.createTransformer)((value) => /* @__PURE__ */ React98.createElement(import_ui49.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React98.createElement(ItemIconColor, { value }), /* @__PURE__ */ React98.createElement(ItemLabelColor, { value })));
-var ItemIconColor = ({ value }) => {
-  const { color } = value;
-  return /* @__PURE__ */ React98.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
-};
+var arrayTransformer = (0, import_editor_canvas6.createTransformer)((values) => {
+  if (!values || values.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React98.createElement(import_ui49.Stack, { direction: "column" }, values.map((item, index) => /* @__PURE__ */ React98.createElement(import_ui49.Stack, { key: index }, item)));
+});
+
+// src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
+var React99 = __toESM(require("react"));
+var import_editor_canvas7 = require("@elementor/editor-canvas");
+var import_ui50 = require("@elementor/ui");
+var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React99.createElement(import_ui50.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React99.createElement(ItemLabelColor, { value })));
 var ItemLabelColor = ({ value: { color } }) => {
-  return /* @__PURE__ */ React98.createElement("span", null, color);
+  return /* @__PURE__ */ React99.createElement("span", null, color);
 };
-var StyledUnstableColorIndicator = (0, import_ui49.styled)(import_ui49.UnstableColorIndicator)(({ theme }) => ({
+var StyledUnstableColorIndicator = (0, import_ui50.styled)(import_ui50.UnstableColorIndicator)(({ theme }) => ({
   width: "1em",
   height: "1em",
   borderRadius: `${theme.shape.borderRadius / 2}px`,
@@ -6162,20 +6171,20 @@ var StyledUnstableColorIndicator = (0, import_ui49.styled)(import_ui49.UnstableC
 }));
 
 // src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx
-var React99 = __toESM(require("react"));
-var import_editor_canvas7 = require("@elementor/editor-canvas");
-var import_ui50 = require("@elementor/ui");
+var React100 = __toESM(require("react"));
+var import_editor_canvas8 = require("@elementor/editor-canvas");
+var import_ui51 = require("@elementor/ui");
 var import_i18n69 = require("@wordpress/i18n");
-var backgroundGradientOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React99.createElement(import_ui50.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React99.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React99.createElement(ItemLabelGradient, { value })));
+var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React100.createElement(import_ui51.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React100.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React100.createElement(ItemLabelGradient, { value })));
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
-  return /* @__PURE__ */ React99.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
+  return /* @__PURE__ */ React100.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
 };
 var ItemLabelGradient = ({ value }) => {
   if (value.type === "linear") {
-    return /* @__PURE__ */ React99.createElement("span", null, (0, import_i18n69.__)("Linear gradient", "elementor"));
+    return /* @__PURE__ */ React100.createElement("span", null, (0, import_i18n69.__)("Linear gradient", "elementor"));
   }
-  return /* @__PURE__ */ React99.createElement("span", null, (0, import_i18n69.__)("Radial gradient", "elementor"));
+  return /* @__PURE__ */ React100.createElement("span", null, (0, import_i18n69.__)("Radial gradient", "elementor"));
 };
 var getGradientValue = (gradient) => {
   const stops = gradient.stops?.map(({ color, offset }) => `${color} ${offset ?? 0}%`)?.join(",");
@@ -6186,16 +6195,16 @@ var getGradientValue = (gradient) => {
 };
 
 // src/styles-inheritance/transformers/background-image-overlay-transformer.tsx
-var React100 = __toESM(require("react"));
-var import_editor_canvas8 = require("@elementor/editor-canvas");
+var React101 = __toESM(require("react"));
+var import_editor_canvas9 = require("@elementor/editor-canvas");
 var import_editor_ui9 = require("@elementor/editor-ui");
-var import_ui51 = require("@elementor/ui");
+var import_ui52 = require("@elementor/ui");
 var import_wp_media = require("@elementor/wp-media");
-var backgroundImageOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React100.createElement(import_ui51.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React100.createElement(ItemIconImage, { value }), /* @__PURE__ */ React100.createElement(ItemLabelImage, { value })));
+var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React101.createElement(import_ui52.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React101.createElement(ItemIconImage, { value }), /* @__PURE__ */ React101.createElement(ItemLabelImage, { value })));
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
-  return /* @__PURE__ */ React100.createElement(
-    import_ui51.CardMedia,
+  return /* @__PURE__ */ React101.createElement(
+    import_ui52.CardMedia,
     {
       image: imageUrl,
       sx: (theme) => ({
@@ -6210,7 +6219,7 @@ var ItemIconImage = ({ value }) => {
 };
 var ItemLabelImage = ({ value }) => {
   const { imageTitle } = useImage(value);
-  return /* @__PURE__ */ React100.createElement(import_editor_ui9.EllipsisWithTooltip, { title: imageTitle }, /* @__PURE__ */ React100.createElement("span", null, imageTitle));
+  return /* @__PURE__ */ React101.createElement(import_editor_ui9.EllipsisWithTooltip, { title: imageTitle }, /* @__PURE__ */ React101.createElement("span", null, imageTitle));
 };
 var useImage = (image) => {
   let imageTitle, imageUrl = null;
@@ -6234,44 +6243,66 @@ var getFileExtensionFromFilename = (filename) => {
   return `.${extension}`;
 };
 
-// src/styles-inheritance/transformers/background-overlay-transformer.tsx
-var React101 = __toESM(require("react"));
-var import_editor_canvas9 = require("@elementor/editor-canvas");
-var import_ui52 = require("@elementor/ui");
-var backgroundOverlayTransformer = (0, import_editor_canvas9.createTransformer)((values) => {
-  if (!values || values.length === 0) {
+// src/styles-inheritance/transformers/box-shadow-transformer.tsx
+var React102 = __toESM(require("react"));
+var import_editor_canvas10 = require("@elementor/editor-canvas");
+var import_ui53 = require("@elementor/ui");
+var boxShadowTransformer = (0, import_editor_canvas10.createTransformer)((value) => {
+  if (!value) {
     return null;
   }
-  return /* @__PURE__ */ React101.createElement(import_ui52.Stack, { direction: "column" }, values.map((item, index) => /* @__PURE__ */ React101.createElement(import_ui52.Stack, { key: index }, item)));
+  const { color, hOffset, vOffset, blur, spread, position } = value;
+  const colorValue = color || "#000000";
+  const sizes = [hOffset || "0px", vOffset || "0px", blur || "10px", spread || "0px"].join(" ");
+  const positionValue = position || "outset";
+  return /* @__PURE__ */ React102.createElement(import_ui53.Stack, { direction: "column", gap: 0.5, pb: 1 }, /* @__PURE__ */ React102.createElement("span", null, colorValue, " ", positionValue, ", ", sizes));
 });
 
 // src/styles-inheritance/transformers/color-transformer.tsx
-var React102 = __toESM(require("react"));
-var import_editor_canvas10 = require("@elementor/editor-canvas");
-var import_ui53 = require("@elementor/ui");
+var React103 = __toESM(require("react"));
+var import_editor_canvas11 = require("@elementor/editor-canvas");
+var import_ui54 = require("@elementor/ui");
 function isValidCSSColor(value) {
   if (!value.trim()) {
     return false;
   }
   return CSS.supports("color", value.trim());
 }
-var StyledColorIndicator = (0, import_ui53.styled)(import_ui53.UnstableColorIndicator)(({ theme }) => ({
+var StyledColorIndicator = (0, import_ui54.styled)(import_ui54.UnstableColorIndicator)(({ theme }) => ({
   width: "1em",
   height: "1em",
   borderRadius: `${theme.shape.borderRadius / 2}px`,
   outline: `1px solid ${theme.palette.action.disabled}`,
   flexShrink: 0
 }));
-var colorTransformer = (0, import_editor_canvas10.createTransformer)((value) => {
+var colorTransformer = (0, import_editor_canvas11.createTransformer)((value) => {
   if (!isValidCSSColor(value)) {
     return value;
   }
-  return /* @__PURE__ */ React102.createElement(import_ui53.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React102.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React102.createElement("span", null, value));
+  return /* @__PURE__ */ React103.createElement(import_ui54.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React103.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React103.createElement("span", null, value));
 });
 
+// src/styles-inheritance/transformers/repeater-to-items-transformer.tsx
+var React104 = __toESM(require("react"));
+var import_editor_canvas12 = require("@elementor/editor-canvas");
+var import_ui55 = require("@elementor/ui");
+var createRepeaterToItemsTransformer = (originalTransformer, separator = " ") => {
+  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__ */ React104.createElement(import_ui55.Stack, { direction: "column", gap: 0.5 }, parts.map((part, index) => /* @__PURE__ */ React104.createElement(import_ui55.Stack, { key: index }, part.trim())));
+  });
+};
+
 // src/styles-inheritance/init-styles-inheritance-transformers.ts
 function initStylesInheritanceTransformers() {
-  const originalStyleTransformers = import_editor_canvas11.styleTransformersRegistry.all();
+  const originalStyleTransformers = import_editor_canvas13.styleTransformersRegistry.all();
   Object.entries(originalStyleTransformers).forEach(([propType, transformer]) => {
     if (excludePropTypeTransformers.has(propType)) {
       return;
@@ -6279,13 +6310,13 @@ function initStylesInheritanceTransformers() {
     stylesInheritanceTransformersRegistry.register(propType, transformer);
   });
   stylesInheritanceTransformersRegistry.registerFallback(
-    (0, import_editor_canvas11.createTransformer)((value) => {
+    (0, import_editor_canvas13.createTransformer)((value) => {
       return value;
     })
   );
-  registerCustomTransformers();
+  registerCustomTransformers(originalStyleTransformers);
 }
-function registerCustomTransformers() {
+function registerCustomTransformers(originalStyleTransformers) {
   stylesInheritanceTransformersRegistry.register("color", colorTransformer);
   stylesInheritanceTransformersRegistry.register("background-color-overlay", backgroundColorOverlayTransformer);
   stylesInheritanceTransformersRegistry.register(
@@ -6293,7 +6324,22 @@ function registerCustomTransformers() {
     backgroundGradientOverlayTransformer
   );
   stylesInheritanceTransformersRegistry.register("background-image-overlay", backgroundImageOverlayTransformer);
-  stylesInheritanceTransformersRegistry.register("background-overlay", backgroundOverlayTransformer);
+  stylesInheritanceTransformersRegistry.register("shadow", boxShadowTransformer);
+  stylesInheritanceTransformersRegistry.register(
+    "filter",
+    createRepeaterToItemsTransformer(originalStyleTransformers.filter)
+  );
+  stylesInheritanceTransformersRegistry.register(
+    "backdrop-filter",
+    createRepeaterToItemsTransformer(originalStyleTransformers["backdrop-filter"])
+  );
+  stylesInheritanceTransformersRegistry.register(
+    "transition",
+    createRepeaterToItemsTransformer(originalStyleTransformers.transition, ", ")
+  );
+  ["background-overlay", "box-shadow", "transform-functions"].forEach(
+    (propType) => stylesInheritanceTransformersRegistry.register(propType, arrayTransformer)
+  );
 }
 
 // src/styles-inheritance/init.ts