@elementor/editor-editing-panel 4.1.0-712 → 4.1.0-714

package/dist/index.js

@@ -2406,7 +2406,7 @@ function isControl(control) {
 // src/components/style-tab.tsx
 var React79 = __toESM(require("react"));
 var import_react32 = require("react");
-var import_editor_props14 = require("@elementor/editor-props");
+var import_editor_props15 = require("@elementor/editor-props");
 var import_editor_responsive3 = require("@elementor/editor-responsive");
 var import_locations3 = require("@elementor/locations");
 var import_session7 = require("@elementor/session");
@@ -2723,6 +2723,7 @@ var import_i18n8 = require("@wordpress/i18n");
 // src/controls-registry/styles-field.tsx
 var React24 = __toESM(require("react"));
 var import_editor_controls6 = require("@elementor/editor-controls");
+var import_editor_props11 = require("@elementor/editor-props");
 var import_editor_styles6 = require("@elementor/editor-styles");
 
 // src/hooks/use-styles-field.ts
@@ -2753,14 +2754,62 @@ function getDependencies(propType) {
 }
 
 // src/controls-registry/styles-field.tsx
+var DIMENSION_SIDES = ["block-start", "block-end", "inline-start", "inline-end"];
+function buildResolvedPlaceholder(chain, startIndex) {
+  const firstEntry = chain[startIndex];
+  if (!firstEntry) {
+    return void 0;
+  }
+  const firstValue = firstEntry.value;
+  if (!import_editor_props11.dimensionsPropTypeUtil.isValid(firstValue)) {
+    return firstValue;
+  }
+  const firstDims = import_editor_props11.dimensionsPropTypeUtil.extract(firstValue);
+  if (DIMENSION_SIDES.every((side) => firstDims?.[side] !== null && firstDims?.[side] !== void 0)) {
+    return firstValue;
+  }
+  const merged = {};
+  DIMENSION_SIDES.forEach((side) => {
+    if (firstDims?.[side] !== null && firstDims?.[side] !== void 0) {
+      merged[side] = firstDims[side];
+    }
+  });
+  for (let i = startIndex + 1; i < chain.length; i++) {
+    const val = chain[i].value;
+    if (import_editor_props11.sizePropTypeUtil.isValid(val)) {
+      DIMENSION_SIDES.forEach((side) => {
+        if (merged[side] === null || merged[side] === void 0) {
+          merged[side] = val;
+        }
+      });
+      break;
+    } else if (import_editor_props11.dimensionsPropTypeUtil.isValid(val)) {
+      const dims = import_editor_props11.dimensionsPropTypeUtil.extract(val);
+      DIMENSION_SIDES.forEach((side) => {
+        if ((merged[side] === null || merged[side] === void 0) && dims?.[side] !== null && dims?.[side] !== void 0) {
+          merged[side] = dims[side];
+        }
+      });
+    }
+    if (DIMENSION_SIDES.every((side) => merged[side] !== null && merged[side] !== void 0)) {
+      break;
+    }
+  }
+  return import_editor_props11.dimensionsPropTypeUtil.create({
+    "block-start": merged["block-start"] ?? null,
+    "block-end": merged["block-end"] ?? null,
+    "inline-start": merged["inline-start"] ?? null,
+    "inline-end": merged["inline-end"] ?? null
+  });
+}
 var StylesField = ({ bind, propDisplayName, children }) => {
   const stylesSchema = (0, import_editor_styles6.getStylesSchema)();
   const stylesInheritanceChain = useStylesInheritanceChain([bind]);
   const { value, canEdit, ...fields } = useStylesField(bind, { history: { propDisplayName } });
   const propType = createTopLevelObjectType({ schema: stylesSchema });
-  const [actualValue] = stylesInheritanceChain;
+  const placeholderStartIndex = value ? 1 : 0;
   const placeholderValues = {
-    [bind]: actualValue?.value
+    [bind]: buildResolvedPlaceholder(stylesInheritanceChain, placeholderStartIndex)
   };
   const setValue = (newValue) => {
     fields.setValue(newValue[bind]);
@@ -2845,7 +2894,7 @@ var BorderColorField = () => /* @__PURE__ */ React28.createElement(StylesField,
 // src/components/style-sections/border-section/border-radius-field.tsx
 var React30 = __toESM(require("react"));
 var import_editor_controls9 = require("@elementor/editor-controls");
-var import_editor_props11 = require("@elementor/editor-props");
+var import_editor_props12 = require("@elementor/editor-props");
 var import_icons3 = require("@elementor/icons");
 var import_ui19 = require("@elementor/ui");
 var import_i18n10 = require("@wordpress/i18n");
@@ -2916,7 +2965,7 @@ var BorderRadiusField = () => {
       label: BORDER_RADIUS_LABEL,
       icon: /* @__PURE__ */ React30.createElement(import_icons3.BorderCornersIcon, { fontSize: "tiny" }),
       tooltipLabel: (0, import_i18n10.__)("Adjust corners", "elementor"),
-      multiSizePropTypeUtil: import_editor_props11.borderRadiusPropTypeUtil
+      multiSizePropTypeUtil: import_editor_props12.borderRadiusPropTypeUtil
     }
   )));
 };
@@ -2942,7 +2991,7 @@ var BorderStyleField = () => /* @__PURE__ */ React31.createElement(StylesField,
 // src/components/style-sections/border-section/border-width-field.tsx
 var React32 = __toESM(require("react"));
 var import_editor_controls11 = require("@elementor/editor-controls");
-var import_editor_props12 = require("@elementor/editor-props");
+var import_editor_props13 = require("@elementor/editor-props");
 var import_icons4 = require("@elementor/icons");
 var import_ui20 = require("@elementor/ui");
 var import_i18n12 = require("@wordpress/i18n");
@@ -2984,7 +3033,7 @@ var BorderWidthField = () => {
       label: BORDER_WIDTH_LABEL,
       icon: /* @__PURE__ */ React32.createElement(import_icons4.SideAllIcon, { fontSize: "tiny" }),
       tooltipLabel: (0, import_i18n12.__)("Adjust borders", "elementor"),
-      multiSizePropTypeUtil: import_editor_props12.borderWidthPropTypeUtil
+      multiSizePropTypeUtil: import_editor_props13.borderWidthPropTypeUtil
     }
   ));
 };
@@ -3557,7 +3606,7 @@ var getGroupControlValue = (order) => {
 var React45 = __toESM(require("react"));
 var import_react23 = require("react");
 var import_editor_controls21 = require("@elementor/editor-controls");
-var import_editor_props13 = require("@elementor/editor-props");
+var import_editor_props14 = require("@elementor/editor-props");
 var import_icons10 = require("@elementor/icons");
 var import_i18n23 = require("@wordpress/i18n");
 var FLEX_SIZE_LABEL = (0, import_i18n23.__)("Flex Size", "elementor");
@@ -3636,24 +3685,24 @@ var createFlexValueForGroup = (group, flexValue) => {
     return null;
   }
   if (group === "flex-grow") {
-    return import_editor_props13.flexPropTypeUtil.create({
-      flexGrow: import_editor_props13.numberPropTypeUtil.create(DEFAULT),
-      flexShrink: import_editor_props13.numberPropTypeUtil.create(0),
-      flexBasis: import_editor_props13.sizePropTypeUtil.create({ unit: "auto", size: "" })
+    return import_editor_props14.flexPropTypeUtil.create({
+      flexGrow: import_editor_props14.numberPropTypeUtil.create(DEFAULT),
+      flexShrink: import_editor_props14.numberPropTypeUtil.create(0),
+      flexBasis: import_editor_props14.sizePropTypeUtil.create({ unit: "auto", size: "" })
     });
   }
   if (group === "flex-shrink") {
-    return import_editor_props13.flexPropTypeUtil.create({
-      flexGrow: import_editor_props13.numberPropTypeUtil.create(0),
-      flexShrink: import_editor_props13.numberPropTypeUtil.create(DEFAULT),
-      flexBasis: import_editor_props13.sizePropTypeUtil.create({ unit: "auto", size: "" })
+    return import_editor_props14.flexPropTypeUtil.create({
+      flexGrow: import_editor_props14.numberPropTypeUtil.create(0),
+      flexShrink: import_editor_props14.numberPropTypeUtil.create(DEFAULT),
+      flexBasis: import_editor_props14.sizePropTypeUtil.create({ unit: "auto", size: "" })
     });
   }
   if (group === "custom") {
     if (flexValue) {
       return flexValue;
     }
-    return import_editor_props13.flexPropTypeUtil.create({
+    return import_editor_props14.flexPropTypeUtil.create({
       flexGrow: null,
       flexShrink: null,
       flexBasis: null
@@ -3663,7 +3712,7 @@ var createFlexValueForGroup = (group, flexValue) => {
 };
 var FlexCustomField = () => {
   const flexBasisRowRef = (0, import_react23.useRef)(null);
-  const context = (0, import_editor_controls21.useBoundProp)(import_editor_props13.flexPropTypeUtil);
+  const context = (0, import_editor_controls21.useBoundProp)(import_editor_props14.flexPropTypeUtil);
   return /* @__PURE__ */ React45.createElement(import_editor_controls21.PropProvider, { ...context }, /* @__PURE__ */ React45.createElement(React45.Fragment, null, /* @__PURE__ */ React45.createElement(StylesFieldLayout, { label: (0, import_i18n23.__)("Grow", "elementor") }, /* @__PURE__ */ React45.createElement(import_editor_controls21.PropKeyProvider, { bind: "flexGrow" }, /* @__PURE__ */ React45.createElement(import_editor_controls21.NumberControl, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React45.createElement(StylesFieldLayout, { label: (0, import_i18n23.__)("Shrink", "elementor") }, /* @__PURE__ */ React45.createElement(import_editor_controls21.PropKeyProvider, { bind: "flexShrink" }, /* @__PURE__ */ React45.createElement(import_editor_controls21.NumberControl, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React45.createElement(StylesFieldLayout, { label: (0, import_i18n23.__)("Basis", "elementor"), ref: flexBasisRowRef }, /* @__PURE__ */ React45.createElement(import_editor_controls21.PropKeyProvider, { bind: "flexBasis" }, /* @__PURE__ */ React45.createElement(import_editor_controls21.SizeControl, { extendedOptions: ["auto"], anchorRef: flexBasisRowRef })))));
 };
 var getActiveGroup = ({
@@ -4694,7 +4743,7 @@ function ClassesHeader({ children }) {
 function useCurrentClassesProp() {
   const { elementType } = useElement();
   const prop = Object.entries(elementType.propsSchema).find(
-    ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props14.CLASSES_PROP_KEY
+    ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props15.CLASSES_PROP_KEY
   );
   if (!prop) {
     return null;
@@ -4842,7 +4891,7 @@ var init = () => {
 var React83 = __toESM(require("react"));
 var import_editor_controls53 = require("@elementor/editor-controls");
 var import_editor_elements16 = require("@elementor/editor-elements");
-var import_editor_props16 = require("@elementor/editor-props");
+var import_editor_props17 = require("@elementor/editor-props");
 var import_icons22 = require("@elementor/icons");
 var import_ui37 = require("@elementor/ui");
 var import_i18n58 = require("@wordpress/i18n");
@@ -4863,12 +4912,12 @@ var getElementByType = (elementId, type) => {
 // src/controls-registry/element-controls/tabs-control/use-actions.ts
 var import_editor_controls52 = require("@elementor/editor-controls");
 var import_editor_elements15 = require("@elementor/editor-elements");
-var import_editor_props15 = require("@elementor/editor-props");
+var import_editor_props16 = require("@elementor/editor-props");
 var import_i18n57 = require("@wordpress/i18n");
 var TAB_ELEMENT_TYPE = "e-tab";
 var TAB_CONTENT_ELEMENT_TYPE = "e-tab-content";
 var useActions = () => {
-  const { value, setValue: setDefaultActiveTab } = (0, import_editor_controls52.useBoundProp)(import_editor_props15.numberPropTypeUtil);
+  const { value, setValue: setDefaultActiveTab } = (0, import_editor_controls52.useBoundProp)(import_editor_props16.numberPropTypeUtil);
   const defaultActiveTab = value ?? 0;
   const duplicateItem = ({
     items: items3,
@@ -5129,7 +5178,7 @@ var ItemLabel = ({ value, index }) => {
   return /* @__PURE__ */ React83.createElement(import_ui37.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React83.createElement("span", null, elementTitle), /* @__PURE__ */ React83.createElement(ItemDefaultTab, { index }));
 };
 var ItemDefaultTab = ({ index }) => {
-  const { value: defaultItem } = (0, import_editor_controls53.useBoundProp)(import_editor_props16.numberPropTypeUtil);
+  const { value: defaultItem } = (0, import_editor_controls53.useBoundProp)(import_editor_props17.numberPropTypeUtil);
   const isDefault = defaultItem === index;
   if (!isDefault) {
     return null;
@@ -5143,7 +5192,7 @@ var ItemContent = ({ value, index }) => {
   return /* @__PURE__ */ React83.createElement(import_ui37.Stack, { p: 2, gap: 1.5 }, /* @__PURE__ */ React83.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React83.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n58.__)("Tabs", "elementor") }, /* @__PURE__ */ React83.createElement(DefaultTabControl, { tabIndex: index })));
 };
 var DefaultTabControl = ({ tabIndex }) => {
-  const { value, setValue } = (0, import_editor_controls53.useBoundProp)(import_editor_props16.numberPropTypeUtil);
+  const { value, setValue } = (0, import_editor_controls53.useBoundProp)(import_editor_props17.numberPropTypeUtil);
   const isDefault = value === tabIndex;
   return /* @__PURE__ */ React83.createElement(import_ui37.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React83.createElement(import_editor_controls53.ControlFormLabel, null, (0, import_i18n58.__)("Set as default tab", "elementor")), /* @__PURE__ */ React83.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React83.createElement(
     import_ui37.Switch,
@@ -5223,7 +5272,7 @@ var import_menus2 = require("@elementor/menus");
 // src/dynamics/components/background-control-dynamic-tag.tsx
 var React84 = __toESM(require("react"));
 var import_editor_controls55 = require("@elementor/editor-controls");
-var import_editor_props18 = require("@elementor/editor-props");
+var import_editor_props19 = require("@elementor/editor-props");
 var import_icons23 = require("@elementor/icons");
 
 // src/dynamics/hooks/use-dynamic-tag.ts
@@ -5279,11 +5328,11 @@ var filterByLicense = (tags) => {
 };
 
 // src/dynamics/utils.ts
-var import_editor_props17 = require("@elementor/editor-props");
+var import_editor_props18 = require("@elementor/editor-props");
 var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
 var import_schema = require("@elementor/schema");
 var DYNAMIC_PROP_TYPE_KEY = "dynamic";
-var dynamicPropTypeUtil = (0, import_editor_props17.createPropUtils)(
+var dynamicPropTypeUtil = (0, import_editor_props18.createPropUtils)(
   DYNAMIC_PROP_TYPE_KEY,
   import_schema.z.strictObject({
     name: import_schema.z.string(),
@@ -5300,7 +5349,7 @@ var getDynamicPropType = (propType) => {
   return dynamicPropType && isDynamicPropType(dynamicPropType) ? dynamicPropType : null;
 };
 var isDynamicPropValue = (prop) => {
-  return (0, import_editor_props17.isTransformable)(prop) && prop.$$type === DYNAMIC_PROP_TYPE_KEY;
+  return (0, import_editor_props18.isTransformable)(prop) && prop.$$type === DYNAMIC_PROP_TYPE_KEY;
 };
 var supportsDynamic = (propType) => {
   return !!getDynamicPropType(propType);
@@ -5361,7 +5410,7 @@ var useDynamicTag = (tagName) => {
 // src/dynamics/components/background-control-dynamic-tag.tsx
 var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React84.createElement(import_icons23.DatabaseIcon, { fontSize: "tiny" });
 var BackgroundControlDynamicTagLabel = ({ value }) => {
-  const context = (0, import_editor_controls55.useBoundProp)(import_editor_props18.backgroundImageOverlayPropTypeUtil);
+  const context = (0, import_editor_controls55.useBoundProp)(import_editor_props19.backgroundImageOverlayPropTypeUtil);
   return /* @__PURE__ */ React84.createElement(import_editor_controls55.PropProvider, { ...context, value: value.value }, /* @__PURE__ */ React84.createElement(import_editor_controls55.PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React84.createElement(Wrapper2, { rawValue: value.value })));
 };
 var Wrapper2 = ({ rawValue }) => {
@@ -5397,7 +5446,7 @@ var import_editor_controls56 = require("@elementor/editor-controls");
 
 // src/dynamics/components/dynamic-conditional-control.tsx
 var React85 = __toESM(require("react"));
-var import_editor_props19 = require("@elementor/editor-props");
+var import_editor_props20 = require("@elementor/editor-props");
 var DynamicConditionalControl = ({
   children,
   propType,
@@ -5439,7 +5488,7 @@ var DynamicConditionalControl = ({
   if (!propType?.dependencies?.terms.length) {
     return /* @__PURE__ */ React85.createElement(React85.Fragment, null, children);
   }
-  const isHidden = !(0, import_editor_props19.isDependencyMet)(propType?.dependencies, effectiveSettings).isMet;
+  const isHidden = !(0, import_editor_props20.isDependencyMet)(propType?.dependencies, effectiveSettings).isMet;
   return isHidden ? null : /* @__PURE__ */ React85.createElement(React85.Fragment, null, children);
 };
 
@@ -5817,7 +5866,7 @@ function ControlsItemsStack({ items: items3 }) {
 
 // src/dynamics/dynamic-transformer.ts
 var import_editor_canvas2 = require("@elementor/editor-canvas");
-var import_editor_props20 = require("@elementor/editor-props");
+var import_editor_props21 = require("@elementor/editor-props");
 
 // src/dynamics/errors.ts
 var import_utils9 = require("@elementor/utils");
@@ -5835,7 +5884,7 @@ var dynamicTransformer = (0, import_editor_canvas2.createTransformer)((value, {
 });
 function simpleTransform(props) {
   const transformed = Object.entries(props).map(([settingKey, settingValue]) => {
-    const value = (0, import_editor_props20.isTransformable)(settingValue) ? settingValue.value : settingValue;
+    const value = (0, import_editor_props21.isTransformable)(settingValue) ? settingValue.value : settingValue;
     return [settingKey, value];
   });
   return Object.fromEntries(transformed);
@@ -5995,7 +6044,7 @@ function useResetStyleValueProps() {
 // src/styles-inheritance/components/styles-inheritance-indicator.tsx
 var React95 = __toESM(require("react"));
 var import_editor_controls62 = require("@elementor/editor-controls");
-var import_editor_props21 = require("@elementor/editor-props");
+var import_editor_props22 = require("@elementor/editor-props");
 var import_editor_styles_repository16 = require("@elementor/editor-styles-repository");
 var import_i18n66 = require("@wordpress/i18n");
 
@@ -6377,7 +6426,7 @@ var StylesInheritanceIndicator = ({
 var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
   const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
   const currentItem = currentStyleId ? getValueFromInheritanceChain(inheritanceChain, currentStyleId, currentStyleMeta) : null;
-  const hasValue = !(0, import_editor_props21.isEmpty)(currentItem?.value);
+  const hasValue = !(0, import_editor_props22.isEmpty)(currentItem?.value);
   const [actualStyle] = inheritanceChain;
   if (actualStyle.provider === import_editor_styles_repository16.ELEMENTS_BASE_STYLES_PROVIDER_KEY) {
     return null;