@elementor/editor-editing-panel 4.1.0-717 → 4.1.0-718

package/dist/index.mjs

@@ -3925,6 +3925,7 @@ var shouldDisplayFlexFields = (display, local) => {
 
 // src/components/style-sections/position-section/position-section.tsx
 import * as React54 from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef9 } from "react";
 import { useSessionStorage as useSessionStorage3 } from "@elementor/session";
 import { __ as __32 } from "@wordpress/i18n";
 
@@ -4016,42 +4017,65 @@ var ZIndexField = () => {
 };
 
 // src/components/style-sections/position-section/position-section.tsx
+var POSITION_STATIC = "static";
 var POSITION_LABEL2 = __32("Position", "elementor");
 var DIMENSIONS_LABEL = __32("Dimensions", "elementor");
+var POSITION_DEPENDENT_PROP_NAMES = [
+  "inset-block-start",
+  "inset-block-end",
+  "inset-inline-start",
+  "inset-inline-end",
+  "z-index"
+];
+var CLEARED_POSITION_DEPENDENT_VALUES = {
+  "inset-block-start": void 0,
+  "inset-block-end": void 0,
+  "inset-inline-start": void 0,
+  "inset-inline-end": void 0,
+  "z-index": void 0
+};
 var PositionSection = () => {
   const { value: positionValue } = useStylesField("position", {
     history: { propDisplayName: POSITION_LABEL2 }
   });
-  const { values: dimensions, setValues: setDimensions } = useStylesFields([
-    "inset-block-start",
-    "inset-block-end",
-    "inset-inline-start",
-    "inset-inline-end"
-  ]);
+  const { values: positionDependentValues, setValues: setPositionDependentValues } = useStylesFields([...POSITION_DEPENDENT_PROP_NAMES]);
   const [dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory] = usePersistDimensions();
+  const clearPositionDependentProps = useCallback2(() => {
+    const dimensions = {
+      "inset-block-start": positionDependentValues?.["inset-block-start"],
+      "inset-block-end": positionDependentValues?.["inset-block-end"],
+      "inset-inline-start": positionDependentValues?.["inset-inline-start"],
+      "inset-inline-end": positionDependentValues?.["inset-inline-end"]
+    };
+    const meta = { history: { propDisplayName: DIMENSIONS_LABEL } };
+    const hasValuesToClear = Object.values(dimensions).some((v) => v !== null) || positionDependentValues?.["z-index"] !== null;
+    if (hasValuesToClear) {
+      updateDimensionsHistory(dimensions);
+      setPositionDependentValues(CLEARED_POSITION_DEPENDENT_VALUES, meta);
+    }
+  }, [positionDependentValues, updateDimensionsHistory, setPositionDependentValues]);
+  const clearPositionDependentPropsRef = useRef9(clearPositionDependentProps);
+  clearPositionDependentPropsRef.current = clearPositionDependentProps;
+  useEffect6(() => {
+    if (positionValue?.value === POSITION_STATIC || positionValue === null) {
+      clearPositionDependentPropsRef.current();
+    }
+  }, [positionValue]);
   const onPositionChange = (newPosition, previousPosition) => {
     const meta = { history: { propDisplayName: DIMENSIONS_LABEL } };
-    if (newPosition === "static") {
-      if (dimensions) {
-        updateDimensionsHistory(dimensions);
-        setDimensions(
-          {
-            "inset-block-start": void 0,
-            "inset-block-end": void 0,
-            "inset-inline-start": void 0,
-            "inset-inline-end": void 0
-          },
+    if (newPosition === POSITION_STATIC) {
+      clearPositionDependentProps();
+    } else if (previousPosition === POSITION_STATIC) {
+      if (dimensionsValuesFromHistory) {
+        setPositionDependentValues(
+          { ...dimensionsValuesFromHistory, "z-index": void 0 },
           meta
         );
-      }
-    } else if (previousPosition === "static") {
-      if (dimensionsValuesFromHistory) {
-        setDimensions(dimensionsValuesFromHistory, meta);
         clearDimensionsHistory();
       }
     }
   };
-  const isNotStatic = positionValue && positionValue?.value !== "static";
+  const isNotStatic = positionValue && positionValue?.value !== POSITION_STATIC;
   return /* @__PURE__ */ React54.createElement(SectionContent, null, /* @__PURE__ */ React54.createElement(PositionField, { onChange: onPositionChange }), isNotStatic ? /* @__PURE__ */ React54.createElement(React54.Fragment, null, /* @__PURE__ */ React54.createElement(DimensionsField, null), /* @__PURE__ */ React54.createElement(ZIndexField, null)) : null, /* @__PURE__ */ React54.createElement(PanelDivider, null), /* @__PURE__ */ React54.createElement(OffsetField, null));
 };
 var usePersistDimensions = () => {
@@ -4063,7 +4087,7 @@ var usePersistDimensions = () => {
 
 // src/components/style-sections/size-section/size-section.tsx
 import * as React59 from "react";
-import { useRef as useRef9 } from "react";
+import { useRef as useRef10 } from "react";
 import { AspectRatioControl, PositionControl, SizeControl as SizeControl6 } from "@elementor/editor-controls";
 import { Grid as Grid4, Stack as Stack10 } from "@elementor/ui";
 import { __ as __36 } from "@wordpress/i18n";
@@ -4230,7 +4254,7 @@ var CssSizeProps = [
 ];
 var ASPECT_RATIO_LABEL = __36("Aspect Ratio", "elementor");
 var SizeSection = () => {
-  const gridRowRefs = [useRef9(null), useRef9(null), useRef9(null)];
+  const gridRowRefs = [useRef10(null), useRef10(null), useRef10(null)];
   return /* @__PURE__ */ React59.createElement(SectionContent, null, CssSizeProps.map((row, rowIndex) => /* @__PURE__ */ React59.createElement(Grid4, { key: rowIndex, container: true, gap: 2, flexWrap: "nowrap", ref: gridRowRefs[rowIndex] }, row.map((props) => /* @__PURE__ */ React59.createElement(Grid4, { item: true, xs: 6, key: props.bind }, /* @__PURE__ */ React59.createElement(SizeField, { ...props, rowRef: gridRowRefs[rowIndex], extendedOptions: ["auto"] }))))), /* @__PURE__ */ React59.createElement(PanelDivider, null), /* @__PURE__ */ React59.createElement(Stack10, null, /* @__PURE__ */ React59.createElement(OverflowField, null)), /* @__PURE__ */ React59.createElement(StyleTabCollapsibleContent, { fields: ["aspect-ratio", "object-fit"] }, /* @__PURE__ */ React59.createElement(Stack10, { gap: 2, pt: 2 }, /* @__PURE__ */ React59.createElement(StylesField, { bind: "aspect-ratio", propDisplayName: ASPECT_RATIO_LABEL }, /* @__PURE__ */ React59.createElement(AspectRatioControl, { label: ASPECT_RATIO_LABEL })), /* @__PURE__ */ React59.createElement(PanelDivider, null), /* @__PURE__ */ React59.createElement(ObjectFitField, null), /* @__PURE__ */ React59.createElement(StylesField, { bind: "object-position", propDisplayName: __36("Object position", "elementor") }, /* @__PURE__ */ React59.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(PositionControl, null))))));
 };
 var SizeField = ({ label, bind, rowRef, extendedOptions }) => {
@@ -4270,12 +4294,12 @@ var ColumnCountField = () => {
 
 // src/components/style-sections/typography-section/column-gap-field.tsx
 import * as React62 from "react";
-import { useRef as useRef10 } from "react";
+import { useRef as useRef11 } from "react";
 import { SizeControl as SizeControl7 } from "@elementor/editor-controls";
 import { __ as __39 } from "@wordpress/i18n";
 var COLUMN_GAP_LABEL = __39("Column gap", "elementor");
 var ColumnGapField = () => {
-  const rowRef = useRef10(null);
+  const rowRef = useRef11(null);
   return /* @__PURE__ */ React62.createElement(StylesField, { bind: "column-gap", propDisplayName: COLUMN_GAP_LABEL }, /* @__PURE__ */ React62.createElement(StylesFieldLayout, { label: COLUMN_GAP_LABEL, ref: rowRef }, /* @__PURE__ */ React62.createElement(SizeControl7, { anchorRef: rowRef })));
 };
 
@@ -4303,12 +4327,12 @@ var FontFamilyField = () => {
 
 // src/components/style-sections/typography-section/font-size-field.tsx
 import * as React64 from "react";
-import { useRef as useRef11 } from "react";
+import { useRef as useRef12 } from "react";
 import { SizeControl as SizeControl8 } from "@elementor/editor-controls";
 import { __ as __41 } from "@wordpress/i18n";
 var FONT_SIZE_LABEL = __41("Font size", "elementor");
 var FontSizeField = () => {
-  const rowRef = useRef11(null);
+  const rowRef = useRef12(null);
   return /* @__PURE__ */ React64.createElement(StylesField, { bind: "font-size", propDisplayName: FONT_SIZE_LABEL }, /* @__PURE__ */ React64.createElement(StylesFieldLayout, { label: FONT_SIZE_LABEL, ref: rowRef }, /* @__PURE__ */ React64.createElement(SizeControl8, { anchorRef: rowRef, ariaLabel: FONT_SIZE_LABEL })));
 };
 
@@ -4358,23 +4382,23 @@ var FontWeightField = () => {
 
 // src/components/style-sections/typography-section/letter-spacing-field.tsx
 import * as React67 from "react";
-import { useRef as useRef12 } from "react";
+import { useRef as useRef13 } from "react";
 import { SizeControl as SizeControl9 } from "@elementor/editor-controls";
 import { __ as __44 } from "@wordpress/i18n";
 var LETTER_SPACING_LABEL = __44("Letter spacing", "elementor");
 var LetterSpacingField = () => {
-  const rowRef = useRef12(null);
+  const rowRef = useRef13(null);
   return /* @__PURE__ */ React67.createElement(StylesField, { bind: "letter-spacing", propDisplayName: LETTER_SPACING_LABEL }, /* @__PURE__ */ React67.createElement(StylesFieldLayout, { label: LETTER_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React67.createElement(SizeControl9, { anchorRef: rowRef, min: -Number.MAX_SAFE_INTEGER })));
 };
 
 // src/components/style-sections/typography-section/line-height-field.tsx
 import * as React68 from "react";
-import { useRef as useRef13 } from "react";
+import { useRef as useRef14 } from "react";
 import { SizeControl as SizeControl10 } from "@elementor/editor-controls";
 import { __ as __45 } from "@wordpress/i18n";
 var LINE_HEIGHT_LABEL = __45("Line height", "elementor");
 var LineHeightField = () => {
-  const rowRef = useRef13(null);
+  const rowRef = useRef14(null);
   return /* @__PURE__ */ React68.createElement(StylesField, { bind: "line-height", propDisplayName: LINE_HEIGHT_LABEL }, /* @__PURE__ */ React68.createElement(StylesFieldLayout, { label: LINE_HEIGHT_LABEL, ref: rowRef }, /* @__PURE__ */ React68.createElement(SizeControl10, { anchorRef: rowRef })));
 };
 
@@ -4596,12 +4620,12 @@ var TransformField = () => /* @__PURE__ */ React75.createElement(StylesField, {
 
 // src/components/style-sections/typography-section/word-spacing-field.tsx
 import * as React76 from "react";
-import { useRef as useRef14 } from "react";
+import { useRef as useRef15 } from "react";
 import { SizeControl as SizeControl11 } from "@elementor/editor-controls";
 import { __ as __52 } from "@wordpress/i18n";
 var WORD_SPACING_LABEL = __52("Word spacing", "elementor");
 var WordSpacingField = () => {
-  const rowRef = useRef14(null);
+  const rowRef = useRef15(null);
   return /* @__PURE__ */ React76.createElement(StylesField, { bind: "word-spacing", propDisplayName: WORD_SPACING_LABEL }, /* @__PURE__ */ React76.createElement(StylesFieldLayout, { label: WORD_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React76.createElement(SizeControl11, { anchorRef: rowRef, min: -Number.MAX_SAFE_INTEGER })));
 };
 
@@ -4874,7 +4898,7 @@ import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 import { blockCommand } from "@elementor/editor-v1-adapters";
 
 // src/hooks/use-open-editor-panel.ts
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 import { __privateListenTo as listenTo, commandStartEvent } from "@elementor/editor-v1-adapters";
 
 // src/panel.ts
@@ -4898,7 +4922,7 @@ var isAtomicWidgetSelected = () => {
 // src/hooks/use-open-editor-panel.ts
 var useOpenEditorPanel = () => {
   const { open } = usePanelActions();
-  useEffect6(() => {
+  useEffect7(() => {
     return listenTo(commandStartEvent("panel/editor/open"), () => {
       if (isAtomicWidgetSelected()) {
         open();
@@ -4918,12 +4942,12 @@ import { AttributesControl, DisplayConditionsControl } from "@elementor/editor-c
 
 // src/components/promotions/custom-css.tsx
 import * as React82 from "react";
-import { useRef as useRef15 } from "react";
+import { useRef as useRef16 } from "react";
 import { PromotionTrigger } from "@elementor/editor-controls";
 import { __ as __56 } from "@wordpress/i18n";
 var TRACKING_DATA = { target_name: "custom_css", location_l2: "style" };
 var CustomCssSection = () => {
-  const triggerRef = useRef15(null);
+  const triggerRef = useRef16(null);
   return /* @__PURE__ */ React82.createElement(
     StyleTabSection,
     {
@@ -5635,7 +5659,7 @@ var DynamicControl = ({ bind, children }) => {
 
 // src/dynamics/components/dynamic-selection.tsx
 import * as React87 from "react";
-import { Fragment as Fragment14, useEffect as useEffect7, useState as useState10 } from "react";
+import { Fragment as Fragment14, useEffect as useEffect8, useState as useState10 } from "react";
 import { trackUpgradePromotionClick, trackViewPromotion, useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
 import { CtaButton, PopoverHeader, PopoverMenuList, SearchField, SectionPopoverBody } from "@elementor/editor-ui";
 import { DatabaseIcon as DatabaseIcon2 } from "@elementor/icons";
@@ -5655,7 +5679,7 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
   const isCurrentValueDynamic = !!dynamicValue;
   const options12 = useFilteredOptions(searchValue);
   const hasNoDynamicTags = !options12.length && !searchValue.trim();
-  useEffect7(() => {
+  useEffect8(() => {
     if (hasNoDynamicTags) {
       trackViewPromotion({ target_name: "dynamic_tags" });
     } else if (expired) {
@@ -6158,7 +6182,7 @@ import { __ as __66 } from "@wordpress/i18n";
 
 // src/styles-inheritance/components/styles-inheritance-infotip.tsx
 import * as React94 from "react";
-import { useMemo as useMemo13, useRef as useRef16, useState as useState12 } from "react";
+import { useMemo as useMemo13, useRef as useRef17, useState as useState12 } from "react";
 import {
   createPropsResolver as createPropsResolver2,
   stylesInheritanceTransformersRegistry
@@ -6178,7 +6202,7 @@ import {
 import { __ as __65 } from "@wordpress/i18n";
 
 // src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx
-import { isValidElement, useEffect as useEffect8, useState as useState11 } from "react";
+import { isValidElement, useEffect as useEffect9, useState as useState11 } from "react";
 import { UnknownStyleStateError } from "@elementor/editor-canvas";
 import {
   isClassState as isClassState2,
@@ -6189,7 +6213,7 @@ import { __ as __63 } from "@wordpress/i18n";
 var MAXIMUM_ITEMS = 2;
 var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
   const [items3, setItems] = useState11([]);
-  useEffect8(() => {
+  useEffect9(() => {
     (async () => {
       const normalizedItems = await Promise.all(
         inheritanceChain.filter(({ style }) => style).map((item, index) => normalizeInheritanceItem(item, index, bind, resolve))
@@ -6370,7 +6394,7 @@ var StylesInheritanceInfotip = ({
   isDisabled
 }) => {
   const [showInfotip, setShowInfotip] = useState12(false);
-  const triggerRef = useRef16(null);
+  const triggerRef = useRef17(null);
   const toggleInfotip = () => {
     if (isDisabled) {
       return;