@elementor/editor-editing-panel 1.4.0 → 1.4.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 1.4.1
+
+### Patch Changes
+
+- a0ca1d8: fixed an issue where persisting dimensions values behaved unpredictably when switching breakpoints
+- Updated dependencies [a0ca1d8]
+  - @elementor/editor-controls@0.3.1
+
 ## 1.4.0
 
 ### Minor Changes
@@ -315,7 +323,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### Features
 
-- **edito-editing-panel:** add control internal state hook [EDS-359] ([#232](https://github.com/elementor/elementor-packages/issues/232)) ([c9cbced](https://github.com/elementor/elementor-packages/commit/c9cbced3d8136f8bb157a0ab3878076b08e521f5))
+- **editor-editing-panel:** add control internal state hook [EDS-359] ([#232](https://github.com/elementor/elementor-packages/issues/232)) ([c9cbced](https://github.com/elementor/elementor-packages/commit/c9cbced3d8136f8bb157a0ab3878076b08e521f5))
 
 # [0.10.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.9.1...@elementor/editor-editing-panel@0.10.0) (2024-08-14)
 

package/dist/index.js

@@ -46,8 +46,8 @@ var import_editor_panels3 = require("@elementor/editor-panels");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 
 // src/hooks/use-close-editor-panel.ts
-var import_react16 = require("react");
-var import_editor_elements8 = require("@elementor/editor-elements");
+var import_react13 = require("react");
+var import_editor_elements7 = require("@elementor/editor-elements");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 
 // src/panel.ts
@@ -56,7 +56,7 @@ var import_editor_panels2 = require("@elementor/editor-panels");
 // src/components/editing-panel.tsx
 var React60 = __toESM(require("react"));
 var import_editor_controls42 = require("@elementor/editor-controls");
-var import_editor_elements6 = require("@elementor/editor-elements");
+var import_editor_elements5 = require("@elementor/editor-elements");
 var import_editor_panels = require("@elementor/editor-panels");
 var import_ui52 = require("@elementor/ui");
 var import_i18n40 = require("@wordpress/i18n");
@@ -131,7 +131,7 @@ function EditorPanelErrorFallback() {
 
 // src/components/editing-panel-tabs.tsx
 var React59 = __toESM(require("react"));
-var import_react15 = require("react");
+var import_react12 = require("react");
 var import_ui51 = require("@elementor/ui");
 var import_i18n39 = require("@wordpress/i18n");
 
@@ -286,8 +286,8 @@ var Control2 = ({ control }) => {
 
 // src/components/style-tab.tsx
 var React58 = __toESM(require("react"));
-var import_react14 = require("react");
-var import_editor_elements5 = require("@elementor/editor-elements");
+var import_react11 = require("react");
+var import_editor_elements4 = require("@elementor/editor-elements");
 var import_editor_responsive = require("@elementor/editor-responsive");
 var import_ui50 = require("@elementor/ui");
 var import_i18n38 = require("@wordpress/i18n");
@@ -616,43 +616,43 @@ var import_ui12 = require("@elementor/ui");
 var React15 = __toESM(require("react"));
 var import_editor_controls5 = require("@elementor/editor-controls");
 
-// src/hooks/use-styles-field.ts
-var import_react7 = require("react");
+// src/hooks/use-styles-fields.ts
 var import_editor_elements3 = require("@elementor/editor-elements");
 var import_i18n2 = require("@wordpress/i18n");
-var useStylesField = (propName) => {
+function useStylesFields(propNames) {
   const { element } = useElement();
   const { id, meta } = useStyle();
   const classesProp = useClassesProp();
-  const previousValue = (0, import_react7.useRef)(null);
-  const onChangeCallbacks = (0, import_react7.useRef)(/* @__PURE__ */ new Set());
-  const value = (0, import_editor_elements3.useElementStyleProp)({
+  const value = (0, import_editor_elements3.useElementStyleProps)({
     elementID: element.id,
     styleDefID: id,
     meta,
-    propName
+    propNames
   });
-  const setValue = (newValue) => {
+  const setValue = (newValues) => {
     (0, import_editor_elements3.updateStyle)({
       elementID: element.id,
       styleDefID: id,
-      props: { [propName]: newValue },
+      props: newValues,
       meta,
       bind: classesProp,
       label: (0, import_i18n2.__)("local", "elementor")
     });
   };
-  const registerChangeListener = (callback) => {
-    onChangeCallbacks.current.add(callback);
-  };
-  (0, import_react7.useEffect)(() => {
-    onChangeCallbacks.current.forEach((cb) => {
-      cb(value, previousValue.current);
+  return [value, setValue];
+}
+
+// src/hooks/use-styles-field.ts
+function useStylesField(propName) {
+  const [values, setValues] = useStylesFields([propName]);
+  const value = values?.[propName] ?? null;
+  const setValue = (newValue) => {
+    setValues({
+      [propName]: newValue
     });
-    previousValue.current = value;
-  }, [value]);
-  return [value, setValue, registerChangeListener];
-};
+  };
+  return [value, setValue];
+}
 
 // src/controls-registry/styles-field.tsx
 var StylesField = ({ bind, children }) => {
@@ -883,7 +883,7 @@ function useDirection() {
 
 // src/components/style-sections/layout-section/utils/rotated-icon.tsx
 var React26 = __toESM(require("react"));
-var import_react8 = require("react");
+var import_react7 = require("react");
 var import_ui19 = require("@elementor/ui");
 var CLOCKWISE_ANGLES = {
   row: 0,
@@ -898,7 +898,7 @@ var COUNTER_CLOCKWISE_ANGLES = {
   "column-reverse": -270
 };
 var RotatedIcon = ({ icon: Icon, size, isClockwise = true, offset = 0 }) => {
-  const rotate = (0, import_react8.useRef)(useGetTargetAngle(isClockwise, offset));
+  const rotate = (0, import_react7.useRef)(useGetTargetAngle(isClockwise, offset));
   rotate.current = useGetTargetAngle(isClockwise, offset, rotate);
   return /* @__PURE__ */ React26.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
 };
@@ -1061,7 +1061,7 @@ var FlexDirectionField = () => {
 
 // src/components/style-sections/layout-section/flex-order-field.tsx
 var React31 = __toESM(require("react"));
-var import_react9 = require("react");
+var import_react8 = require("react");
 var import_editor_controls18 = require("@elementor/editor-controls");
 var import_icons9 = require("@elementor/icons");
 var import_ui24 = require("@elementor/ui");
@@ -1097,7 +1097,7 @@ var items = [
 ];
 var FlexOrderField = () => {
   const { isSiteRtl } = useDirection(), [order, setOrder] = useStylesField("order");
-  const [groupControlValue, setGroupControlValue] = (0, import_react9.useState)(getGroupControlValue(order?.value || null));
+  const [groupControlValue, setGroupControlValue] = (0, import_react8.useState)(getGroupControlValue(order?.value || null));
   const handleToggleButtonChange = (group) => {
     setGroupControlValue(group);
     if (!group || group === CUSTOM) {
@@ -1315,108 +1315,43 @@ var FlexFields = () => /* @__PURE__ */ React36.createElement(React36.Fragment, n
 
 // src/components/style-sections/position-section/position-section.tsx
 var React40 = __toESM(require("react"));
-var import_react12 = require("react");
 var import_ui33 = require("@elementor/ui");
 
-// src/hooks/use-style-prop-history.ts
-var import_react11 = require("react");
-var import_editor_elements4 = require("@elementor/editor-elements");
-
-// src/hooks/use-prop-value-history.ts
-var import_react10 = require("react");
+// src/hooks/use-session-storage.ts
+var import_react9 = require("react");
 var import_utils2 = require("@elementor/utils");
-var PROPS_VALUES_HISTORY_PREFIX = "elementor/editor-editing-panel/prop-value-history";
-var usePropValueHistory = () => {
-  const { element } = useElement();
-  const elementKey = `${PROPS_VALUES_HISTORY_PREFIX}/${element.id}`;
-  const getElementPropsHistory = (0, import_react10.useCallback)(() => {
-    return (0, import_utils2.getSessionStorageItem)(elementKey);
-  }, [elementKey]);
-  const getPropValue = (0, import_react10.useCallback)(
-    (propKey) => {
-      const elementPropValues = getElementPropsHistory();
-      return elementPropValues?.[propKey] ?? null;
-    },
-    [getElementPropsHistory]
-  );
-  const setPropValue = (0, import_react10.useCallback)(
-    (propKey, propValue) => {
-      const elementPropValues = getElementPropsHistory();
-      const updatedElementPropValues = { ...elementPropValues, [propKey]: propValue };
-      (0, import_utils2.setSessionStorageItem)(elementKey, updatedElementPropValues);
-    },
-    [getElementPropsHistory, elementKey]
-  );
-  const removeProp = (0, import_react10.useCallback)(
-    (propKey) => {
-      const elementPropValues = getElementPropsHistory();
-      const updatedElementPropValues = Object.fromEntries(
-        Object.entries(elementPropValues || {}).filter(([key]) => key !== propKey)
-      );
-      (0, import_utils2.setSessionStorageItem)(elementKey, updatedElementPropValues);
-    },
-    [getElementPropsHistory, elementKey]
-  );
-  return (0, import_react10.useMemo)(() => ({ getPropValue, setPropValue, removeProp }), [getPropValue, removeProp, setPropValue]);
-};
-
-// src/hooks/use-style-prop-history.ts
-var useStylePropsHistory = (props) => {
-  const { element } = useElement();
-  const { id: styleDefID, meta } = useStyle();
-  const { getPropValue, setPropValue, removeProp } = usePropValueHistory();
-  const styleDef = styleDefID ? (0, import_editor_elements4.getElementStyles)(element.id)?.[styleDefID] : null;
-  const styleVariant = styleDef ? (0, import_editor_elements4.getVariantByMeta)(styleDef, meta) : null;
-  const styleVariantPath = `${styleDefID}-${styleVariant?.meta.breakpoint}-${styleVariant?.meta.state}`;
-  const saveStylePropsHistory = (0, import_react11.useCallback)(() => {
-    props.forEach((propKey) => {
-      const propValue = styleVariant?.props[propKey];
-      if (propValue) {
-        const propPath = `${styleVariantPath}-${propKey}`;
-        setPropValue(propPath, propValue);
-      }
+var useSessionStorage = (key) => {
+  const prefixedKey = `elementor/${key}`;
+  const [value, setValue] = (0, import_react9.useState)();
+  (0, import_react9.useEffect)(() => {
+    return subscribeToSessionStorage(prefixedKey, (newValue) => {
+      setValue(newValue ?? null);
     });
-  }, [props, setPropValue, styleVariant?.props, styleVariantPath]);
-  const updateStylePropsFromHistory = (0, import_react11.useCallback)(() => {
-    const propValuesFromHistory = props.reduce((allProps, currentPropKey) => {
-      const propPath = `${styleVariantPath}-${currentPropKey}`;
-      const propHistory = getPropValue(propPath);
-      if (propHistory) {
-        removeProp(propPath);
-        return { ...allProps, [currentPropKey]: propHistory };
+  }, [prefixedKey]);
+  const saveValue = (newValue) => {
+    (0, import_utils2.setSessionStorageItem)(prefixedKey, newValue);
+  };
+  const removeValue = () => {
+    (0, import_utils2.removeSessionStorageItem)(prefixedKey);
+  };
+  return [value, saveValue, removeValue];
+};
+var subscribeToSessionStorage = (key, subscriber) => {
+  subscriber((0, import_utils2.getSessionStorageItem)(key));
+  const abortController = new AbortController();
+  window.addEventListener(
+    "storage",
+    (e) => {
+      if (e.key !== key || e.storageArea !== sessionStorage) {
+        return;
       }
-      return allProps;
-    }, {});
-    if (Object.keys(propValuesFromHistory).length) {
-      (0, import_editor_elements4.updateStyle)({
-        elementID: element.id,
-        styleDefID,
-        meta,
-        props: propValuesFromHistory,
-        bind: "classes"
-      });
-    }
-  }, [element.id, getPropValue, meta, props, removeProp, styleDefID, styleVariantPath]);
-  const clearCurrentStyleProps = (0, import_react11.useCallback)(() => {
-    const resetValues = props.reduce(
-      (allProps, currentPropKey) => ({
-        ...allProps,
-        [currentPropKey]: void 0
-      }),
-      {}
-    );
-    (0, import_editor_elements4.updateStyle)({
-      elementID: element.id,
-      styleDefID,
-      meta,
-      props: resetValues,
-      bind: "classes"
-    });
-  }, [element.id, meta, props, styleDefID]);
-  return (0, import_react11.useMemo)(
-    () => ({ saveStylePropsHistory, updateStylePropsFromHistory, clearCurrentStyleProps }),
-    [saveStylePropsHistory, updateStylePropsFromHistory, clearCurrentStyleProps]
+      subscriber((0, import_utils2.getSessionStorageItem)(key));
+    },
+    { signal: abortController.signal }
   );
+  return () => {
+    abortController.abort();
+  };
 };
 
 // src/components/style-sections/position-section/dimensions-field.tsx
@@ -1449,8 +1384,8 @@ var positionOptions = [
   { label: (0, import_i18n20.__)("Absolute", "elementor"), value: "absolute" },
   { label: (0, import_i18n20.__)("Fixed", "elementor"), value: "fixed" }
 ];
-var PositionField = () => {
-  return /* @__PURE__ */ React38.createElement(StylesField, { bind: "position" }, /* @__PURE__ */ React38.createElement(import_ui31.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(import_editor_controls25.ControlLabel, null, (0, import_i18n20.__)("Position", "elementor"))), /* @__PURE__ */ React38.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(import_editor_controls25.SelectControl, { options: positionOptions }))));
+var PositionField = ({ onChange }) => {
+  return /* @__PURE__ */ React38.createElement(StylesField, { bind: "position" }, /* @__PURE__ */ React38.createElement(import_ui31.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(import_editor_controls25.ControlLabel, null, (0, import_i18n20.__)("Position", "elementor"))), /* @__PURE__ */ React38.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(import_editor_controls25.SelectControl, { options: positionOptions, onChange }))));
 };
 
 // src/components/style-sections/position-section/z-index-field.tsx
@@ -1463,33 +1398,41 @@ var ZIndexField = () => {
 };
 
 // src/components/style-sections/position-section/position-section.tsx
-var dimensionsPropKeys = ["top", "bottom", "left", "right"];
 var PositionSection = () => {
   const [positionValue] = useStylesField("position");
-  usePositionChangeHandler();
-  const isNotStatic = positionValue && positionValue?.value !== "static";
-  return /* @__PURE__ */ React40.createElement(import_ui33.Stack, { gap: 1.5 }, /* @__PURE__ */ React40.createElement(PositionField, null), isNotStatic ? /* @__PURE__ */ React40.createElement(React40.Fragment, null, /* @__PURE__ */ React40.createElement(DimensionsField, null), /* @__PURE__ */ React40.createElement(ZIndexField, null)) : null);
-};
-var usePositionChangeHandler = () => {
-  const dimensionsHistory = useStylePropsHistory(dimensionsPropKeys);
-  const onPositionChange = (0, import_react12.useCallback)(
-    (newPositionValue, previousPosition) => {
-      if (!dimensionsHistory) {
-        return;
+  const [dimensionsValues, setDimensionsValues] = useStylesFields([
+    "top",
+    "bottom",
+    "left",
+    "right"
+  ]);
+  const [dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory] = usePersistDimensions();
+  const onPositionChange = (newPosition, previousPosition) => {
+    if (newPosition === "static") {
+      if (dimensionsValues) {
+        updateDimensionsHistory(dimensionsValues);
+        setDimensionsValues({
+          top: void 0,
+          bottom: void 0,
+          left: void 0,
+          right: void 0
+        });
       }
-      const { saveStylePropsHistory, updateStylePropsFromHistory, clearCurrentStyleProps } = dimensionsHistory;
-      if (newPositionValue === "static") {
-        saveStylePropsHistory();
-        clearCurrentStyleProps();
-      } else if (previousPosition === "static") {
-        updateStylePropsFromHistory();
+    } else if (previousPosition === "static") {
+      if (dimensionsValuesFromHistory) {
+        setDimensionsValues(dimensionsValuesFromHistory);
+        clearDimensionsHistory();
       }
-      previousPosition = newPositionValue;
-    },
-    [dimensionsHistory]
-  );
-  const [, , registerChangeListener] = useStylesField("position");
-  registerChangeListener?.(onPositionChange);
+    }
+  };
+  const isNotStatic = positionValue && positionValue?.value !== "static";
+  return /* @__PURE__ */ React40.createElement(import_ui33.Stack, { gap: 1.5 }, /* @__PURE__ */ React40.createElement(PositionField, { onChange: onPositionChange }), isNotStatic ? /* @__PURE__ */ React40.createElement(React40.Fragment, null, /* @__PURE__ */ React40.createElement(DimensionsField, null), /* @__PURE__ */ React40.createElement(ZIndexField, null)) : null);
+};
+var usePersistDimensions = () => {
+  const { id: styleDefID, meta } = useStyle();
+  const styleVariantPath = `styles/${styleDefID}/${meta.breakpoint || "desktop"}/${meta.state || "null"}`;
+  const dimensionsPath = `${styleVariantPath}/dimensions`;
+  return useSessionStorage(dimensionsPath);
 };
 
 // src/components/style-sections/size-section/size-section.tsx
@@ -1551,11 +1494,11 @@ var import_ui49 = require("@elementor/ui");
 
 // src/components/collapsible-content.tsx
 var React44 = __toESM(require("react"));
-var import_react13 = require("react");
+var import_react10 = require("react");
 var import_ui37 = require("@elementor/ui");
 var import_i18n25 = require("@wordpress/i18n");
 var CollapsibleContent = ({ children, defaultOpen = false }) => {
-  const [open, setOpen] = (0, import_react13.useState)(defaultOpen);
+  const [open, setOpen] = (0, import_react10.useState)(defaultOpen);
   const handleToggle = () => {
     setOpen((prevOpen) => !prevOpen);
   };
@@ -1880,14 +1823,14 @@ var StyleTab = () => {
   return /* @__PURE__ */ React58.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React58.createElement(StyleProvider, { meta: { breakpoint, state: null }, id: activeStyleDefId, setId: setActiveStyleDefId }, /* @__PURE__ */ React58.createElement(CssClassSelector, null), /* @__PURE__ */ React58.createElement(import_ui50.Divider, null), /* @__PURE__ */ React58.createElement(SectionsList, null, /* @__PURE__ */ React58.createElement(Section, { title: (0, import_i18n38.__)("Layout", "elementor") }, /* @__PURE__ */ React58.createElement(LayoutSection, null)), /* @__PURE__ */ React58.createElement(Section, { title: (0, import_i18n38.__)("Spacing", "elementor") }, /* @__PURE__ */ React58.createElement(SpacingSection, null)), /* @__PURE__ */ React58.createElement(Section, { title: (0, import_i18n38.__)("Size", "elementor") }, /* @__PURE__ */ React58.createElement(SizeSection, null)), /* @__PURE__ */ React58.createElement(Section, { title: (0, import_i18n38.__)("Position", "elementor") }, /* @__PURE__ */ React58.createElement(PositionSection, null)), /* @__PURE__ */ React58.createElement(Section, { title: (0, import_i18n38.__)("Typography", "elementor") }, /* @__PURE__ */ React58.createElement(TypographySection, null)), /* @__PURE__ */ React58.createElement(Section, { title: (0, import_i18n38.__)("Background", "elementor") }, /* @__PURE__ */ React58.createElement(BackgroundSection, null)), /* @__PURE__ */ React58.createElement(Section, { title: (0, import_i18n38.__)("Border", "elementor") }, /* @__PURE__ */ React58.createElement(BorderSection, null)), /* @__PURE__ */ React58.createElement(Section, { title: (0, import_i18n38.__)("Effects", "elementor") }, /* @__PURE__ */ React58.createElement(EffectsSection, null)))));
 };
 function useActiveStyleDefId(currentClassesProp) {
-  const [activeStyledDefId, setActiveStyledDefId] = (0, import_react14.useState)(null);
+  const [activeStyledDefId, setActiveStyledDefId] = (0, import_react11.useState)(null);
   const fallback = useFirstElementStyleDef(currentClassesProp);
   return [activeStyledDefId || fallback?.id || null, setActiveStyledDefId];
 }
 function useFirstElementStyleDef(currentClassesProp) {
   const { element } = useElement();
-  const classesIds = (0, import_editor_elements5.useElementSetting)(element.id, currentClassesProp)?.value || [];
-  const stylesDefs = (0, import_editor_elements5.useElementStyles)(element.id);
+  const classesIds = (0, import_editor_elements4.useElementSetting)(element.id, currentClassesProp)?.value || [];
+  const stylesDefs = (0, import_editor_elements4.useElementStyles)(element.id);
   return Object.values(stylesDefs).find((styleDef) => classesIds.includes(styleDef.id));
 }
 function useCurrentClassesProp() {
@@ -1908,14 +1851,14 @@ 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__ */ React59.createElement(import_react15.Fragment, { key: element.id }, /* @__PURE__ */ React59.createElement(import_ui51.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React59.createElement(import_ui51.Tabs, { variant: "fullWidth", indicatorColor: "secondary", textColor: "inherit", ...getTabsProps() }, /* @__PURE__ */ React59.createElement(import_ui51.Tab, { label: (0, import_i18n39.__)("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React59.createElement(import_ui51.Tab, { label: (0, import_i18n39.__)("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React59.createElement(import_ui51.Divider, null), /* @__PURE__ */ React59.createElement(import_ui51.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React59.createElement(SettingsTab, null)), /* @__PURE__ */ React59.createElement(import_ui51.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React59.createElement(StyleTab, null))))
+    /* @__PURE__ */ React59.createElement(import_react12.Fragment, { key: element.id }, /* @__PURE__ */ React59.createElement(import_ui51.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React59.createElement(import_ui51.Tabs, { variant: "fullWidth", indicatorColor: "secondary", textColor: "inherit", ...getTabsProps() }, /* @__PURE__ */ React59.createElement(import_ui51.Tab, { label: (0, import_i18n39.__)("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React59.createElement(import_ui51.Tab, { label: (0, import_i18n39.__)("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React59.createElement(import_ui51.Divider, null), /* @__PURE__ */ React59.createElement(import_ui51.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React59.createElement(SettingsTab, null)), /* @__PURE__ */ React59.createElement(import_ui51.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React59.createElement(StyleTab, null))))
   );
 };
 
 // src/components/editing-panel.tsx
 var { useMenuItems } = controlActionsMenu;
 var EditingPanel = () => {
-  const { element, elementType } = (0, import_editor_elements6.useSelectedElement)();
+  const { element, elementType } = (0, import_editor_elements5.useSelectedElement)();
   const controlReplacement = getControlReplacement();
   const menuItems = useMenuItems().default;
   if (!element || !elementType) {
@@ -1932,10 +1875,10 @@ var { panel, usePanelActions, usePanelStatus } = (0, import_editor_panels2.__cre
 });
 
 // src/sync/is-atomic-widget-selected.ts
-var import_editor_elements7 = require("@elementor/editor-elements");
+var import_editor_elements6 = require("@elementor/editor-elements");
 var isAtomicWidgetSelected = () => {
-  const selectedElements = (0, import_editor_elements7.getSelectedElements)();
-  const widgetCache = (0, import_editor_elements7.getWidgetsCache)();
+  const selectedElements = (0, import_editor_elements6.getSelectedElements)();
+  const widgetCache = (0, import_editor_elements6.getWidgetsCache)();
   if (selectedElements.length !== 1) {
     return false;
   }
@@ -1945,11 +1888,11 @@ var isAtomicWidgetSelected = () => {
 // src/hooks/use-close-editor-panel.ts
 var useCloseEditorPanel = () => {
   const { close } = usePanelActions();
-  return (0, import_react16.useEffect)(() => {
+  return (0, import_react13.useEffect)(() => {
     return (0, import_editor_v1_adapters.__privateListenTo)((0, import_editor_v1_adapters.commandStartEvent)("document/elements/delete"), (e) => {
-      const selectedElement = (0, import_editor_elements8.getSelectedElements)()[0];
+      const selectedElement = (0, import_editor_elements7.getSelectedElements)()[0];
       const { container: deletedContainer } = e?.args;
-      const isSelectedElementInDeletedContainer = deletedContainer && selectedElement && (0, import_editor_elements8.isElementInContainer)(selectedElement, deletedContainer);
+      const isSelectedElementInDeletedContainer = deletedContainer && selectedElement && (0, import_editor_elements7.isElementInContainer)(selectedElement, deletedContainer);
       if (isSelectedElementInDeletedContainer && isAtomicWidgetSelected()) {
         close();
       }
@@ -1958,11 +1901,11 @@ var useCloseEditorPanel = () => {
 };
 
 // src/hooks/use-open-editor-panel.ts
-var import_react17 = require("react");
+var import_react14 = require("react");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var useOpenEditorPanel = () => {
   const { open } = usePanelActions();
-  (0, import_react17.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     return (0, import_editor_v1_adapters2.__privateListenTo)((0, import_editor_v1_adapters2.commandStartEvent)("panel/editor/open"), () => {
       if (isAtomicWidgetSelected()) {
         open();
@@ -1980,22 +1923,29 @@ var EditingPanelHooks = () => {
 
 // src/dynamics/components/dynamic-selection-control.tsx
 var React63 = __toESM(require("react"));
-var import_react21 = require("react");
+var import_react18 = require("react");
 var import_editor_controls45 = require("@elementor/editor-controls");
 var import_icons20 = require("@elementor/icons");
 var import_ui54 = require("@elementor/ui");
 var import_i18n42 = require("@wordpress/i18n");
 
+// src/hooks/use-persist-dynamic-value.ts
+var usePersistDynamicValue = (propKey) => {
+  const { element } = useElement();
+  const prefixedKey = `dynamic/non-dynamic-values-history/${element.id}/${propKey}`;
+  return useSessionStorage(prefixedKey);
+};
+
 // src/dynamics/dynamic-control.tsx
 var React61 = __toESM(require("react"));
 var import_editor_controls43 = require("@elementor/editor-controls");
 var import_editor_props5 = require("@elementor/editor-props");
 
 // src/dynamics/hooks/use-dynamic-tag.ts
-var import_react19 = require("react");
+var import_react16 = require("react");
 
 // src/dynamics/hooks/use-prop-dynamic-tags.ts
-var import_react18 = require("react");
+var import_react15 = require("react");
 
 // src/dynamics/sync/get-elementor-config.ts
 var getElementorConfig2 = () => {
@@ -2047,7 +1997,7 @@ var usePropDynamicTags = (propName) => {
     const propDynamicType = getDynamicPropType(propType);
     categories = propDynamicType?.settings.categories || [];
   }
-  return (0, import_react18.useMemo)(() => getDynamicTagsByCategories(categories), [categories.join()]);
+  return (0, import_react15.useMemo)(() => getDynamicTagsByCategories(categories), [categories.join()]);
 };
 var getDynamicTagsByCategories = (categories) => {
   const dynamicTags = getAtomicDynamicTags();
@@ -2063,7 +2013,7 @@ var getDynamicTagsByCategories = (categories) => {
 // src/dynamics/hooks/use-dynamic-tag.ts
 var useDynamicTag = (propName, tagName) => {
   const dynamicTags = usePropDynamicTags(propName);
-  return (0, import_react19.useMemo)(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
+  return (0, import_react16.useMemo)(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
 };
 
 // src/dynamics/dynamic-control.tsx
@@ -2091,26 +2041,26 @@ var DynamicControl = ({ bind, children }) => {
 
 // src/dynamics/components/dynamic-selection.tsx
 var React62 = __toESM(require("react"));
-var import_react20 = require("react");
+var import_react17 = require("react");
 var import_editor_controls44 = require("@elementor/editor-controls");
 var import_icons19 = require("@elementor/icons");
 var import_ui53 = require("@elementor/ui");
 var import_i18n41 = require("@wordpress/i18n");
 var SIZE3 = "tiny";
 var DynamicSelection = ({ onSelect }) => {
-  const [searchValue, setSearchValue] = (0, import_react20.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react17.useState)("");
   const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
   const { value: anyValue } = (0, import_editor_controls44.useBoundProp)();
-  const { bind, value: dynamicvalue, setValue } = (0, import_editor_controls44.useBoundProp)(dynamicPropTypeUtil);
-  const { setPropValue: updatePropValueHistory } = usePropValueHistory();
-  const isCurrentValueDynamic = !!dynamicvalue;
+  const { bind, value: dynamicValue, setValue } = (0, import_editor_controls44.useBoundProp)(dynamicPropTypeUtil);
+  const [, updatePropValueHistory] = usePersistDynamicValue(bind);
+  const isCurrentValueDynamic = !!dynamicValue;
   const options10 = useFilteredOptions(bind, searchValue);
   const handleSearch = (event) => {
     setSearchValue(event.target.value);
   };
   const handleSetDynamicTag = (value) => {
     if (!isCurrentValueDynamic) {
-      updatePropValueHistory(bind, anyValue);
+      updatePropValueHistory(anyValue);
     }
     setValue({ name: value, settings: {} });
     onSelect?.();
@@ -2127,8 +2077,8 @@ var DynamicSelection = ({ onSelect }) => {
         startAdornment: /* @__PURE__ */ React62.createElement(import_ui53.InputAdornment, { position: "start" }, /* @__PURE__ */ React62.createElement(import_icons19.SearchIcon, { fontSize: SIZE3 }))
       }
     }
-  )), /* @__PURE__ */ React62.createElement(import_ui53.Divider, null), /* @__PURE__ */ React62.createElement(import_ui53.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, options10.length > 0 ? /* @__PURE__ */ React62.createElement(import_ui53.MenuList, { role: "listbox", tabIndex: 0 }, options10.map(([category, items3], index) => /* @__PURE__ */ React62.createElement(import_react20.Fragment, { key: index }, /* @__PURE__ */ React62.createElement(import_ui53.ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, dynamicGroups?.[category]?.title || category), items3.map(({ value, label: tagLabel }) => {
-    const isSelected = isCurrentValueDynamic && value === dynamicvalue?.name;
+  )), /* @__PURE__ */ React62.createElement(import_ui53.Divider, null), /* @__PURE__ */ React62.createElement(import_ui53.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, options10.length > 0 ? /* @__PURE__ */ React62.createElement(import_ui53.MenuList, { role: "listbox", tabIndex: 0 }, options10.map(([category, items3], index) => /* @__PURE__ */ React62.createElement(import_react17.Fragment, { key: index }, /* @__PURE__ */ React62.createElement(import_ui53.ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, dynamicGroups?.[category]?.title || category), items3.map(({ value, label: tagLabel }) => {
+    const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
     return /* @__PURE__ */ React62.createElement(
       import_ui53.MenuItem,
       {
@@ -2172,14 +2122,13 @@ var SIZE4 = "tiny";
 var DynamicSelectionControl = () => {
   const { setValue: setAnyValue } = (0, import_editor_controls45.useBoundProp)();
   const { bind, value } = (0, import_editor_controls45.useBoundProp)(dynamicPropTypeUtil);
-  const { getPropValue: getPropValueFromHistory } = usePropValueHistory();
+  const [propValueFromHistory] = usePersistDynamicValue(bind);
   const { name: tagName = "" } = value;
-  const selectionPopoverId = (0, import_react21.useId)();
+  const selectionPopoverId = (0, import_react18.useId)();
   const selectionPopoverState = (0, import_ui54.usePopupState)({ variant: "popover", popupId: selectionPopoverId });
   const dynamicTag = useDynamicTag(bind, tagName);
   const removeDynamicTag = () => {
-    const propValue = getPropValueFromHistory(bind);
-    setAnyValue(propValue ?? null);
+    setAnyValue(propValueFromHistory ?? null);
   };
   if (!dynamicTag) {
     throw new Error(`Dynamic tag ${tagName} not found`);
@@ -2214,7 +2163,7 @@ var DynamicSelectionControl = () => {
   ));
 };
 var DynamicSettingsPopover = ({ dynamicTag }) => {
-  const popupId = (0, import_react21.useId)();
+  const popupId = (0, import_react18.useId)();
   const settingsPopupState = (0, import_ui54.usePopupState)({ variant: "popover", popupId });
   const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
   if (!hasDynamicSettings) {