@elementor/editor-editing-panel 1.38.0 → 1.38.1

package/dist/index.mjs

@@ -1253,6 +1253,9 @@ var useStylesRerender = () => {
   useEffect2(() => provider?.subscribe(reRender), [provider]);
 };
 
+// src/styles-inheritance/create-styles-inheritance.ts
+import { isEmpty, isTransformable } from "@elementor/editor-props";
+
 // src/styles-inheritance/create-snapshots-manager.ts
 import { filterEmptyValues } from "@elementor/editor-props";
 
@@ -1382,7 +1385,20 @@ function mergeSnapshots(snapshots) {
 function createStylesInheritance(styleDefs, breakpointsRoot) {
   const styleVariantsByMeta = buildStyleVariantsByMetaMapping(styleDefs);
   const getStyles = ({ breakpoint, state }) => styleVariantsByMeta?.[getBreakpointKey(breakpoint)]?.[getStateKey(state)] ?? [];
-  return createSnapshotsManager(getStyles, breakpointsRoot);
+  return {
+    getSnapshot: createSnapshotsManager(getStyles, breakpointsRoot),
+    getInheritanceChain: (snapshot, path) => {
+      const [field, ...nextFields] = path;
+      let inheritanceChain = snapshot[field] ?? [];
+      if (nextFields.length > 0) {
+        inheritanceChain = inheritanceChain.map(({ value: styleValue, ...rest }) => ({
+          ...rest,
+          value: getValueByPath(styleValue, nextFields)
+        })).filter(({ value: styleValue }) => !isEmpty(styleValue));
+      }
+      return inheritanceChain;
+    }
+  };
 }
 function buildStyleVariantsByMetaMapping(styleDefs) {
   const breakpointStateSlots = {};
@@ -1409,32 +1425,53 @@ function buildStyleVariantsByMetaMapping(styleDefs) {
   });
   return breakpointStateSlots;
 }
+function getValueByPath(value, path) {
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+  return path.reduce((currentScope, key) => {
+    if (!currentScope) {
+      return null;
+    }
+    if (isTransformable(currentScope)) {
+      return currentScope.value?.[key];
+    }
+    if (typeof currentScope === "object") {
+      return currentScope[key];
+    }
+    return null;
+  }, value);
+}
 
 // src/contexts/styles-inheritance-context.tsx
 var Context4 = createContext5(null);
 function StyleInheritanceProvider({ children }) {
   const styleDefs = useAppliedStyles();
   const breakpointsTree = getBreakpointsTree();
-  const getSnapshot = createStylesInheritance(styleDefs, breakpointsTree);
-  return /* @__PURE__ */ React17.createElement(Context4.Provider, { value: { getSnapshot } }, children);
+  const { getSnapshot, getInheritanceChain } = createStylesInheritance(styleDefs, breakpointsTree);
+  return /* @__PURE__ */ React17.createElement(Context4.Provider, { value: { getSnapshot, getInheritanceChain } }, children);
 }
-function useStylesInheritanceFields(fields) {
+function useStylesInheritanceSnapshot() {
   const context = useContext5(Context4);
   const { meta } = useStyle();
   if (!context) {
-    throw new Error("useStylesInheritanceFields must be used within a StyleInheritanceProvider");
+    throw new Error("useStylesInheritanceSnapshot must be used within a StyleInheritanceProvider");
   }
   if (!meta) {
     return null;
   }
-  const snapshot = context.getSnapshot(meta);
-  return fields.reduce(
-    (acc, key) => ({ ...acc, [key]: snapshot?.[key] ?? [] }),
-    {}
-  );
+  return context.getSnapshot(meta) ?? null;
 }
-function useStylesInheritanceField(field) {
-  return useStylesInheritanceFields([field])?.[field] ?? [];
+function useStylesInheritanceChain(path) {
+  const context = useContext5(Context4);
+  if (!context) {
+    throw new Error("useStylesInheritanceChain must be used within a StyleInheritanceProvider");
+  }
+  const snapshot = useStylesInheritanceSnapshot();
+  if (!snapshot) {
+    return [];
+  }
+  return context.getInheritanceChain(snapshot, path);
 }
 var useAppliedStyles = () => {
   const { element } = useElement();
@@ -1483,7 +1520,7 @@ import { BackgroundControl } from "@elementor/editor-controls";
 // src/controls-registry/styles-field.tsx
 import * as React20 from "react";
 import { ControlAdornmentsProvider, PropKeyProvider as PropKeyProvider2, PropProvider as PropProvider2 } from "@elementor/editor-controls";
-import { getStylesSchema as getStylesSchema2 } from "@elementor/editor-styles";
+import { getStylesSchema } from "@elementor/editor-styles";
 
 // src/hooks/use-styles-fields.ts
 import { useMemo as useMemo2 } from "react";
@@ -1629,6 +1666,7 @@ function useStylesField(propName) {
 import * as React19 from "react";
 import { useState as useState9 } from "react";
 import { useBoundProp } from "@elementor/editor-controls";
+import { isEmpty as isEmpty2 } from "@elementor/editor-props";
 import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, isElementsStylesProvider as isElementsStylesProvider3 } from "@elementor/editor-styles-repository";
 import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
 import { IconButton as IconButton2, Infotip } from "@elementor/ui";
@@ -1638,7 +1676,6 @@ import { __ as __5 } from "@wordpress/i18n";
 import * as React18 from "react";
 import { useMemo as useMemo3 } from "react";
 import { createPropsResolver, styleTransformersRegistry } from "@elementor/editor-canvas";
-import { getStylesSchema } from "@elementor/editor-styles";
 import { Card, CardContent, List as List2, ListItem, ListItemText as ListItemText2 } from "@elementor/ui";
 
 // src/hooks/use-normalized-inheritance-chain-items.tsx
@@ -1682,15 +1719,15 @@ var getTransformedValue = async (item, bind, resolve) => {
 };
 
 // src/styles-inheritance/styles-inheritance-infotip.tsx
-var StyleIndicatorInfotip = ({ inheritanceChain, bind }) => {
+var StyleIndicatorInfotip = ({ inheritanceChain, propType, path }) => {
+  const key = path.join(".");
   const resolve = useMemo3(() => {
-    const stylesSchema = getStylesSchema();
     return createPropsResolver({
       transformers: styleTransformersRegistry,
-      schema: { [bind]: stylesSchema[bind] }
+      schema: { [key]: propType }
     });
-  }, [bind]);
-  const items3 = useNormalizedInheritanceChainItems(inheritanceChain, bind, resolve);
+  }, [key, propType]);
+  const items3 = useNormalizedInheritanceChainItems(inheritanceChain, key, resolve);
   return /* @__PURE__ */ React18.createElement(Card, { elevation: 0, sx: { maxWidth: 320 } }, /* @__PURE__ */ React18.createElement(CardContent, { sx: { p: 1.5, pb: 2.5 } }, /* @__PURE__ */ React18.createElement(List2, null, items3.map((item) => /* @__PURE__ */ React18.createElement(ListItem, { key: item.id }, /* @__PURE__ */ React18.createElement(
     ListItemText2,
     {
@@ -1702,10 +1739,11 @@ var StyleIndicatorInfotip = ({ inheritanceChain, bind }) => {
 // src/styles-inheritance/styles-inheritance-indicator.tsx
 var StylesInheritanceIndicator = () => {
   const [open, setOpen] = useState9(false);
-  const { value, path } = useBoundProp();
+  const { value, path, propType } = useBoundProp();
   const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
-  const [bind] = path;
-  const inheritanceChain = useStylesInheritanceField(bind);
+  const isUsingNestedProps = isExperimentActive2("e_v_3_30");
+  const finalPath = isUsingNestedProps ? path : path.slice(0, 1);
+  const inheritanceChain = useStylesInheritanceChain(finalPath);
   if (!inheritanceChain.length) {
     return null;
   }
@@ -1715,7 +1753,7 @@ var StylesInheritanceIndicator = () => {
   }
   const { breakpoint, state } = variant.meta;
   const isFinalValue = style.id === currentStyleId && breakpoint === currentStyleMeta.breakpoint && state === currentStyleMeta.state;
-  const hasValue = value !== null && value !== void 0;
+  const hasValue = !isEmpty2(value);
   const label = getLabel({ isFinalValue, hasValue });
   const variantType = getVariant({ isFinalValue, hasValue, currentStyleProvider });
   const eIndicationsPopover = isExperimentActive2("e_indications_popover");
@@ -1727,7 +1765,7 @@ var StylesInheritanceIndicator = () => {
     Infotip,
     {
       placement: "top",
-      content: /* @__PURE__ */ React19.createElement(StyleIndicatorInfotip, { inheritanceChain, bind }),
+      content: /* @__PURE__ */ React19.createElement(StyleIndicatorInfotip, { inheritanceChain, path: finalPath, propType }),
       open,
       onClose: () => setOpen(false),
       trigger: "manual"
@@ -1761,7 +1799,7 @@ var getVariant = ({
 // src/controls-registry/styles-field.tsx
 var StylesField = ({ bind, placeholder, children }) => {
   const [value, setValue] = useStylesField(bind);
-  const stylesSchema = getStylesSchema2();
+  const stylesSchema = getStylesSchema();
   const propType = createTopLevelOjectType({ schema: stylesSchema });
   const values = { [bind]: value };
   const placeholderValues = { [bind]: placeholder };
@@ -2358,7 +2396,7 @@ var DisplayField = () => {
   const placeholder = useDisplayPlaceholderValue();
   return /* @__PURE__ */ React37.createElement(StylesField, { bind: "display", placeholder }, /* @__PURE__ */ React37.createElement(Stack10, { gap: 0.75 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, __14("Display", "elementor")), /* @__PURE__ */ React37.createElement(ToggleControl4, { options: items3, maxItems: 4, fullWidth: true })));
 };
-var useDisplayPlaceholderValue = () => useStylesInheritanceField("display")[0]?.value ?? void 0;
+var useDisplayPlaceholderValue = () => useStylesInheritanceChain(["display"])[0]?.value ?? void 0;
 
 // src/components/style-sections/layout-section/flex-direction-field.tsx
 import * as React38 from "react";
@@ -3491,7 +3529,7 @@ var getAtomicDynamicTags = () => {
 // src/dynamics/utils.ts
 import {
   createPropUtils,
-  isTransformable
+  isTransformable as isTransformable2
 } from "@elementor/editor-props";
 import { z } from "@elementor/schema";
 var DYNAMIC_PROP_TYPE_KEY = "dynamic";
@@ -3501,7 +3539,7 @@ var getDynamicPropType = (propType) => {
   return dynamicPropType && isDynamicPropType(dynamicPropType) ? dynamicPropType : null;
 };
 var isDynamicPropValue = (prop) => {
-  return isTransformable(prop) && prop.$$type === DYNAMIC_PROP_TYPE_KEY;
+  return isTransformable2(prop) && prop.$$type === DYNAMIC_PROP_TYPE_KEY;
 };
 var supportsDynamic = (propType) => {
   return !!getDynamicPropType(propType);
@@ -3767,7 +3805,7 @@ var Control3 = ({ control }) => {
 
 // src/dynamics/dynamic-transformer.ts
 import { createTransformer } from "@elementor/editor-canvas";
-import { isTransformable as isTransformable2 } from "@elementor/editor-props";
+import { isTransformable as isTransformable3 } from "@elementor/editor-props";
 
 // src/dynamics/errors.ts
 import { createError as createError2 } from "@elementor/utils";
@@ -3785,7 +3823,7 @@ var dynamicTransformer = createTransformer((value) => {
 });
 function simpleTransform(props) {
   const transformed = Object.entries(props).map(([settingKey, settingValue]) => {
-    const value = isTransformable2(settingValue) ? settingValue.value : settingValue;
+    const value = isTransformable3(settingValue) ? settingValue.value : settingValue;
     return [settingKey, value];
   });
   return Object.fromEntries(transformed);