@elementor/editor-editing-panel 4.1.0-827 → 4.1.0-829

package/dist/index.mjs

@@ -1817,7 +1817,7 @@ function EditorPanelErrorFallback() {
 }
 
 // src/components/editing-panel-tabs.tsx
-import { Fragment as Fragment10 } from "react";
+import { Fragment as Fragment9 } from "react";
 import * as React86 from "react";
 import { getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
 import { isExperimentActive as isExperimentActive3 } from "@elementor/editor-v1-adapters";
@@ -2923,7 +2923,7 @@ function useSyncDepsWithInherited({
   const syncRef = useRef4({ hasSynced: false, prevDepValues: depValues });
   useEffect4(() => {
     const { hasSynced, prevDepValues } = syncRef.current;
-    if (hasSynced && value && wasDepsCleared(prevDepValues, depValues)) {
+    if (hasSynced && value && wasDepsCleared(prevDepValues, depValues) || isHidden && depValues && value) {
       resetValue();
     }
     if (isHidden || !value || !depValues) {
@@ -3036,7 +3036,13 @@ var StylesField = ({ bind, propDisplayName, children }) => {
 // src/components/section-content.tsx
 import * as React26 from "react";
 import { Stack as Stack6 } from "@elementor/ui";
-var SectionContent = ({ gap = 2, sx, children, "aria-label": ariaLabel }) => /* @__PURE__ */ React26.createElement(Stack6, { gap, sx: { ...sx }, "aria-label": ariaLabel }, children);
+var SectionContent = ({
+  gap = 2,
+  sx,
+  children,
+  "aria-label": ariaLabel,
+  className
+}) => /* @__PURE__ */ React26.createElement(Stack6, { gap, sx: { ...sx }, "aria-label": ariaLabel, className }, children);
 
 // src/components/style-sections/background-section/background-section.tsx
 var BACKGROUND_LABEL = __9("Background", "elementor");
@@ -4399,8 +4405,9 @@ var shouldDisplayFlexFields = (display, local) => {
 
 // src/components/style-sections/position-section/position-section.tsx
 import * as React60 from "react";
-import { useCallback as useCallback2, useEffect as useEffect7, useRef as useRef11 } from "react";
+import { useEffect as useEffect7, useRef as useRef11 } from "react";
 import { useSessionStorage as useSessionStorage4 } from "@elementor/session";
+import { styled as styled6 } from "@elementor/ui";
 import { __ as __38 } from "@wordpress/i18n";
 
 // src/components/style-sections/position-section/dimensions-field.tsx
@@ -4477,8 +4484,8 @@ var positionOptions = [
   { label: __36("Fixed", "elementor"), value: "fixed" },
   { label: __36("Sticky", "elementor"), value: "sticky" }
 ];
-var PositionField = ({ onChange }) => {
-  return /* @__PURE__ */ React58.createElement(StylesField, { bind: "position", propDisplayName: POSITION_LABEL }, /* @__PURE__ */ React58.createElement(StylesFieldLayout, { label: POSITION_LABEL }, /* @__PURE__ */ React58.createElement(SelectControl3, { options: positionOptions, onChange })));
+var PositionField = () => {
+  return /* @__PURE__ */ React58.createElement(StylesField, { bind: "position", propDisplayName: POSITION_LABEL }, /* @__PURE__ */ React58.createElement(StylesFieldLayout, { label: POSITION_LABEL }, /* @__PURE__ */ React58.createElement(SelectControl3, { options: positionOptions })));
 };
 
 // src/components/style-sections/position-section/z-index-field.tsx
@@ -4510,63 +4517,32 @@ var ZIndexField = ({ disabled }) => {
 var POSITION_STATIC = "static";
 var POSITION_LABEL2 = __38("Position", "elementor");
 var DIMENSIONS_LABEL = __38("Dimensions", "elementor");
-var POSITION_DEPENDENT_PROP_NAMES = [
+var 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": null,
-  "inset-block-end": null,
-  "inset-inline-start": null,
-  "inset-inline-end": null,
-  "z-index": null
-};
 var PositionSection = () => {
-  const { value: positionValue } = useStylesField("position", {
-    history: { propDisplayName: POSITION_LABEL2 }
-  });
-  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 = useRef11(clearPositionDependentProps);
-  clearPositionDependentPropsRef.current = clearPositionDependentProps;
+  const { value: position } = useStylesField("position", withHistoryLabel(POSITION_LABEL2));
+  const positionPrevRef = useRef11(position);
+  const { values: dependentValues, setValues: setDependentValues } = useStylesFields(DEPENDENT_PROP_NAMES);
+  const [savedDependentValues, saveToHistory, clearHistory] = usePersistDimensions();
   useEffect7(() => {
-    if (positionValue?.value === POSITION_STATIC || positionValue === null) {
-      clearPositionDependentPropsRef.current();
-    }
-  }, [positionValue]);
-  const onPositionChange = (newPosition, previousPosition) => {
-    const meta = { history: { propDisplayName: DIMENSIONS_LABEL } };
-    if (newPosition === POSITION_STATIC) {
-      clearPositionDependentProps();
-    } else if (previousPosition === POSITION_STATIC) {
-      if (dimensionsValuesFromHistory) {
-        setPositionDependentValues(
-          { ...dimensionsValuesFromHistory, "z-index": void 0 },
-          meta
-        );
-        clearDimensionsHistory();
-      }
+    if (position && position?.value === POSITION_STATIC && hasDependentValues(dependentValues)) {
+      saveToHistory(extractDimensions(dependentValues));
     }
-  };
-  const isNotStatic = positionValue && positionValue?.value !== POSITION_STATIC;
-  return /* @__PURE__ */ React60.createElement(SectionContent, null, /* @__PURE__ */ React60.createElement(PositionField, { onChange: onPositionChange }), isNotStatic ? /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(DimensionsField, null)) : null, /* @__PURE__ */ React60.createElement(ZIndexField, { disabled: !isNotStatic }), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(OffsetField, null));
+    if (positionPrevRef.current?.value === POSITION_STATIC) {
+      setDependentValues({ ...savedDependentValues }, withHistoryLabel(DIMENSIONS_LABEL));
+      clearHistory();
+    }
+    if ((!position || position?.value === POSITION_STATIC) && dependentValues?.["z-index"]) {
+      setDependentValues({ "z-index": null }, withHistoryLabel(DIMENSIONS_LABEL));
+    }
+    positionPrevRef.current = position;
+  }, [position?.value]);
+  return /* @__PURE__ */ React60.createElement(StyledSectionContent, null, /* @__PURE__ */ React60.createElement(PositionField, null), /* @__PURE__ */ React60.createElement(DimensionsField, null), /* @__PURE__ */ React60.createElement(ZIndexField, { disabled: !position || position?.value === POSITION_STATIC }), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(OffsetField, null));
 };
 var usePersistDimensions = () => {
   const { id: styleDefID, meta } = useStyle();
@@ -4574,6 +4550,46 @@ var usePersistDimensions = () => {
   const dimensionsPath = `${styleVariantPath}/dimensions`;
   return useSessionStorage4(dimensionsPath);
 };
+var withHistoryLabel = (name) => {
+  return {
+    history: { propDisplayName: name }
+  };
+};
+var hasDependentValues = (values) => {
+  if (!values) {
+    return false;
+  }
+  const dimensions = extractDimensions(values);
+  return Object.values(dimensions).some((v) => v !== null);
+};
+var extractDimensions = (values) => {
+  return DEPENDENT_PROP_NAMES.reduce((acc, key) => {
+    return {
+      ...acc,
+      [key]: values?.[key] ?? null
+    };
+  }, {});
+};
+var StyledSectionContent = styled6(SectionContent, {
+  shouldForwardProp: (prop) => prop !== "gap"
+})(({ gap = 2, theme }) => ({
+  gap: 0,
+  "& > *": {
+    marginBottom: theme.spacing(gap)
+  },
+  "& > *:last-child": {
+    marginBottom: 0
+  },
+  "& > .MuiStack-root": {
+    marginBottom: 0
+  },
+  "& > .MuiStack-root:has(> *)": {
+    marginBottom: theme.spacing(gap)
+  },
+  "& > .MuiDivider-root": {
+    marginBottom: theme.spacing(gap)
+  }
+}));
 
 // src/components/style-sections/size-section/size-section.tsx
 import * as React65 from "react";
@@ -5338,7 +5354,7 @@ var EditingPanelTabs = () => {
   return (
     // When switching between elements, the local states should be reset. We are using key to rerender the tabs.
     // Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
-    /* @__PURE__ */ React86.createElement(Fragment10, { key: element.id }, /* @__PURE__ */ React86.createElement(PanelTabContent, null))
+    /* @__PURE__ */ React86.createElement(Fragment9, { key: element.id }, /* @__PURE__ */ React86.createElement(PanelTabContent, null))
   );
 };
 var PanelTabContent = () => {
@@ -6155,7 +6171,7 @@ var DynamicControl = ({ bind, children }) => {
 
 // src/dynamics/components/dynamic-selection.tsx
 import * as React93 from "react";
-import { Fragment as Fragment15, useEffect as useEffect9, useState as useState10 } from "react";
+import { Fragment as Fragment14, useEffect as useEffect9, 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";
@@ -6212,7 +6228,7 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
     if (expired) {
       return /* @__PURE__ */ React93.createElement(ExpiredDynamicTags, null);
     }
-    return /* @__PURE__ */ React93.createElement(Fragment15, null, /* @__PURE__ */ React93.createElement(
+    return /* @__PURE__ */ React93.createElement(Fragment14, null, /* @__PURE__ */ React93.createElement(
       SearchField,
       {
         value: searchValue,
@@ -7119,12 +7135,12 @@ var arrayTransformer = createTransformer2((values) => {
 // src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
 import * as React103 from "react";
 import { createTransformer as createTransformer3 } from "@elementor/editor-canvas";
-import { Stack as Stack18, styled as styled6, UnstableColorIndicator } from "@elementor/ui";
+import { Stack as Stack18, styled as styled7, UnstableColorIndicator } from "@elementor/ui";
 var backgroundColorOverlayTransformer = createTransformer3((value) => /* @__PURE__ */ React103.createElement(Stack18, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React103.createElement(ItemLabelColor, { value })));
 var ItemLabelColor = ({ value: { color } }) => {
   return /* @__PURE__ */ React103.createElement("span", null, color);
 };
-var StyledUnstableColorIndicator = styled6(UnstableColorIndicator)(({ theme }) => ({
+var StyledUnstableColorIndicator = styled7(UnstableColorIndicator)(({ theme }) => ({
   width: "1em",
   height: "1em",
   borderRadius: `${theme.shape.borderRadius / 2}px`,
@@ -7222,14 +7238,14 @@ var boxShadowTransformer = createTransformer6((value) => {
 // src/styles-inheritance/transformers/color-transformer.tsx
 import * as React107 from "react";
 import { createTransformer as createTransformer7 } from "@elementor/editor-canvas";
-import { Stack as Stack21, styled as styled7, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
+import { Stack as Stack21, styled as styled8, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
 function isValidCSSColor(value) {
   if (!value.trim()) {
     return false;
   }
   return CSS.supports("color", value.trim());
 }
-var StyledColorIndicator = styled7(UnstableColorIndicator2)(({ theme }) => ({
+var StyledColorIndicator = styled8(UnstableColorIndicator2)(({ theme }) => ({
   width: "1em",
   height: "1em",
   borderRadius: `${theme.shape.borderRadius / 2}px`,