@elementor/editor-editing-panel 3.32.0-69 → 3.32.0-70

package/dist/index.js

@@ -3289,29 +3289,30 @@ var import_editor_elements10 = require("@elementor/editor-elements");
 var import_i18n21 = require("@wordpress/i18n");
 
 // src/utils/get-recently-used-styles.ts
+var import_editor_canvas3 = require("@elementor/editor-canvas");
 var import_editor_elements9 = require("@elementor/editor-elements");
-var quickTransform = (props) => {
-  return Object.entries(props).map(([key, value]) => {
-    if (value && typeof value === "object" && "$$type" in value) {
-      if (value?.$$type === "dimensions") {
-        return Object.keys(value?.value ?? {}).map((nestedKey) => `${key}-${nestedKey}`);
-      }
-      if (Array.isArray(value?.value) && !value?.value?.length) {
-        return [];
-      }
-    }
-    return [key];
-  });
-};
-var getRecentlyUsedList = (elementId) => {
+var import_editor_styles5 = require("@elementor/editor-styles");
+var getRecentlyUsedList = async (elementId) => {
   if (!elementId) {
     return [];
   }
-  const styles = (0, import_editor_elements9.getElementStyles)(elementId);
+  const resolver = (0, import_editor_canvas3.createPropsResolver)({
+    transformers: import_editor_canvas3.styleTransformersRegistry,
+    schema: (0, import_editor_styles5.getStylesSchema)()
+  });
+  const styles = (0, import_editor_elements9.getElementStyles)(elementId) ?? {};
   const styleKeys = Object.keys(styles ?? {});
   const variants = styleKeys.map((key) => styles?.[key]?.variants ?? []);
-  const propList = variants.flat().filter((variant) => variant !== void 0).map((variant) => variant.props);
-  const propSet = new Set(propList.map(quickTransform).flat(2));
+  const resolved = await Promise.all(
+    variants.flat().map(async (variant) => {
+      const result = await resolver({
+        props: variant.props ?? {},
+        schema: (0, import_editor_styles5.getStylesSchema)()
+      });
+      return Object.entries(result).filter(([, value]) => value !== null).map(([key]) => key);
+    })
+  );
+  const propSet = new Set(resolved.flat());
   return Array.from(propSet);
 };
 
@@ -3339,7 +3340,7 @@ var EffectsSection = () => {
     import_editor_controls18.TransitionRepeaterControl,
     {
       currentStyleState: meta.state,
-      recentlyUsedList: getRecentlyUsedList(element?.id)
+      recentlyUsedListGetter: () => getRecentlyUsedList(element?.id ?? "")
     }
   )), /* @__PURE__ */ React46.createElement(PanelDivider, null), /* @__PURE__ */ React46.createElement(StylesField, { bind: "filter", propDisplayName: FILTER_LABEL }, /* @__PURE__ */ React46.createElement(import_editor_controls18.FilterRepeaterControl, null)), /* @__PURE__ */ React46.createElement(PanelDivider, null), /* @__PURE__ */ React46.createElement(StylesField, { bind: "backdrop-filter", propDisplayName: BACKDROP_FILTER_LABEL }, /* @__PURE__ */ React46.createElement(import_editor_controls18.FilterRepeaterControl, { filterPropName: "backdrop-filter" })));
 };
@@ -4982,7 +4983,7 @@ var EditingPanelHooks = () => {
 };
 
 // src/dynamics/init.ts
-var import_editor_canvas4 = require("@elementor/editor-canvas");
+var import_editor_canvas5 = require("@elementor/editor-canvas");
 var import_editor_controls60 = require("@elementor/editor-controls");
 
 // src/dynamics/components/background-control-dynamic-tag.tsx
@@ -5346,7 +5347,7 @@ var Control3 = ({ control }) => {
 };
 
 // src/dynamics/dynamic-transformer.ts
-var import_editor_canvas3 = require("@elementor/editor-canvas");
+var import_editor_canvas4 = require("@elementor/editor-canvas");
 var import_editor_props18 = require("@elementor/editor-props");
 
 // src/dynamics/errors.ts
@@ -5357,7 +5358,7 @@ var DynamicTagsManagerNotFoundError = (0, import_utils10.createError)({
 });
 
 // src/dynamics/dynamic-transformer.ts
-var dynamicTransformer = (0, import_editor_canvas3.createTransformer)((value) => {
+var dynamicTransformer = (0, import_editor_canvas4.createTransformer)((value) => {
   if (!value.name) {
     return null;
   }
@@ -5431,8 +5432,8 @@ var init = () => {
     id: "dynamic-tags",
     useProps: usePropDynamicAction
   });
-  import_editor_canvas4.styleTransformersRegistry.register("dynamic", dynamicTransformer);
-  import_editor_canvas4.settingsTransformersRegistry.register("dynamic", dynamicTransformer);
+  import_editor_canvas5.styleTransformersRegistry.register("dynamic", dynamicTransformer);
+  import_editor_canvas5.settingsTransformersRegistry.register("dynamic", dynamicTransformer);
 };
 
 // src/reset-style-props.tsx
@@ -5458,7 +5459,7 @@ function useResetStyleValueProps() {
 }
 
 // src/styles-inheritance/init-styles-inheritance-transformers.ts
-var import_editor_canvas9 = require("@elementor/editor-canvas");
+var import_editor_canvas10 = require("@elementor/editor-canvas");
 
 // src/styles-inheritance/consts.ts
 var excludePropTypeTransformers = /* @__PURE__ */ new Set([
@@ -5476,9 +5477,9 @@ var excludePropTypeTransformers = /* @__PURE__ */ new Set([
 
 // src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
 var React95 = __toESM(require("react"));
-var import_editor_canvas5 = require("@elementor/editor-canvas");
+var import_editor_canvas6 = require("@elementor/editor-canvas");
 var import_ui48 = require("@elementor/ui");
-var backgroundColorOverlayTransformer = (0, import_editor_canvas5.createTransformer)((value) => /* @__PURE__ */ React95.createElement(import_ui48.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React95.createElement(ItemIconColor, { value }), /* @__PURE__ */ React95.createElement(ItemLabelColor, { value })));
+var backgroundColorOverlayTransformer = (0, import_editor_canvas6.createTransformer)((value) => /* @__PURE__ */ React95.createElement(import_ui48.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React95.createElement(ItemIconColor, { value }), /* @__PURE__ */ React95.createElement(ItemLabelColor, { value })));
 var ItemIconColor = ({ value }) => {
   const { color } = value;
   return /* @__PURE__ */ React95.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
@@ -5496,10 +5497,10 @@ var StyledUnstableColorIndicator = (0, import_ui48.styled)(import_ui48.UnstableC
 
 // src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx
 var React96 = __toESM(require("react"));
-var import_editor_canvas6 = require("@elementor/editor-canvas");
+var import_editor_canvas7 = require("@elementor/editor-canvas");
 var import_ui49 = require("@elementor/ui");
 var import_i18n66 = require("@wordpress/i18n");
-var backgroundGradientOverlayTransformer = (0, import_editor_canvas6.createTransformer)((value) => /* @__PURE__ */ React96.createElement(import_ui49.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React96.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React96.createElement(ItemLabelGradient, { value })));
+var backgroundGradientOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React96.createElement(import_ui49.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React96.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React96.createElement(ItemLabelGradient, { value })));
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
   return /* @__PURE__ */ React96.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
@@ -5520,11 +5521,11 @@ var getGradientValue = (gradient) => {
 
 // src/styles-inheritance/transformers/background-image-overlay-transformer.tsx
 var React97 = __toESM(require("react"));
-var import_editor_canvas7 = require("@elementor/editor-canvas");
+var import_editor_canvas8 = require("@elementor/editor-canvas");
 var import_editor_ui9 = require("@elementor/editor-ui");
 var import_ui50 = require("@elementor/ui");
 var import_wp_media = require("@elementor/wp-media");
-var backgroundImageOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React97.createElement(import_ui50.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React97.createElement(ItemIconImage, { value }), /* @__PURE__ */ React97.createElement(ItemLabelImage, { value })));
+var backgroundImageOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React97.createElement(import_ui50.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React97.createElement(ItemIconImage, { value }), /* @__PURE__ */ React97.createElement(ItemLabelImage, { value })));
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
   return /* @__PURE__ */ React97.createElement(
@@ -5569,9 +5570,9 @@ var getFileExtensionFromFilename = (filename) => {
 
 // src/styles-inheritance/transformers/background-overlay-transformer.tsx
 var React98 = __toESM(require("react"));
-var import_editor_canvas8 = require("@elementor/editor-canvas");
+var import_editor_canvas9 = require("@elementor/editor-canvas");
 var import_ui51 = require("@elementor/ui");
-var backgroundOverlayTransformer = (0, import_editor_canvas8.createTransformer)((values) => {
+var backgroundOverlayTransformer = (0, import_editor_canvas9.createTransformer)((values) => {
   if (!values || values.length === 0) {
     return null;
   }
@@ -5580,7 +5581,7 @@ var backgroundOverlayTransformer = (0, import_editor_canvas8.createTransformer)(
 
 // src/styles-inheritance/init-styles-inheritance-transformers.ts
 function initStylesInheritanceTransformers() {
-  const originalStyleTransformers = import_editor_canvas9.styleTransformersRegistry.all();
+  const originalStyleTransformers = import_editor_canvas10.styleTransformersRegistry.all();
   Object.entries(originalStyleTransformers).forEach(([propType, transformer]) => {
     if (excludePropTypeTransformers.has(propType)) {
       return;
@@ -5588,7 +5589,7 @@ function initStylesInheritanceTransformers() {
     stylesInheritanceTransformersRegistry.register(propType, transformer);
   });
   stylesInheritanceTransformersRegistry.registerFallback(
-    (0, import_editor_canvas9.createTransformer)((value) => {
+    (0, import_editor_canvas10.createTransformer)((value) => {
       return value;
     })
   );