@elementor/editor-editing-panel 1.4.0 → 1.4.1

package/dist/index.mjs

@@ -259,7 +259,7 @@ var Control2 = ({ control }) => {
 
 // src/components/style-tab.tsx
 import * as React58 from "react";
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { useElementSetting as useElementSetting3, useElementStyles } from "@elementor/editor-elements";
 import { useActiveBreakpoint } from "@elementor/editor-responsive";
 import { Divider as Divider7 } from "@elementor/ui";
@@ -595,43 +595,43 @@ import { Stack as Stack4 } from "@elementor/ui";
 import * as React15 from "react";
 import { BoundPropProvider as BoundPropProvider2 } from "@elementor/editor-controls";
 
-// src/hooks/use-styles-field.ts
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
-import { updateStyle, useElementStyleProp } from "@elementor/editor-elements";
+// src/hooks/use-styles-fields.ts
+import { updateStyle, useElementStyleProps } from "@elementor/editor-elements";
 import { __ as __2 } from "@wordpress/i18n";
-var useStylesField = (propName) => {
+function useStylesFields(propNames) {
   const { element } = useElement();
   const { id, meta } = useStyle();
   const classesProp = useClassesProp();
-  const previousValue = useRef2(null);
-  const onChangeCallbacks = useRef2(/* @__PURE__ */ new Set());
-  const value = useElementStyleProp({
+  const value = useElementStyleProps({
     elementID: element.id,
     styleDefID: id,
     meta,
-    propName
+    propNames
   });
-  const setValue = (newValue) => {
+  const setValue = (newValues) => {
     updateStyle({
       elementID: element.id,
       styleDefID: id,
-      props: { [propName]: newValue },
+      props: newValues,
       meta,
       bind: classesProp,
       label: __2("local", "elementor")
     });
   };
-  const registerChangeListener = (callback) => {
-    onChangeCallbacks.current.add(callback);
-  };
-  useEffect2(() => {
-    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 }) => {
@@ -873,7 +873,7 @@ function useDirection() {
 
 // src/components/style-sections/layout-section/utils/rotated-icon.tsx
 import * as React26 from "react";
-import { useRef as useRef3 } from "react";
+import { useRef as useRef2 } from "react";
 import { useTheme as useTheme2 } from "@elementor/ui";
 var CLOCKWISE_ANGLES = {
   row: 0,
@@ -888,7 +888,7 @@ var COUNTER_CLOCKWISE_ANGLES = {
   "column-reverse": -270
 };
 var RotatedIcon = ({ icon: Icon, size, isClockwise = true, offset = 0 }) => {
-  const rotate = useRef3(useGetTargetAngle(isClockwise, offset));
+  const rotate = useRef2(useGetTargetAngle(isClockwise, offset));
   rotate.current = useGetTargetAngle(isClockwise, offset, rotate);
   return /* @__PURE__ */ React26.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
 };
@@ -1326,108 +1326,43 @@ var FlexFields = () => /* @__PURE__ */ React36.createElement(React36.Fragment, n
 
 // src/components/style-sections/position-section/position-section.tsx
 import * as React40 from "react";
-import { useCallback as useCallback3 } from "react";
 import { Stack as Stack15 } from "@elementor/ui";
 
-// src/hooks/use-style-prop-history.ts
-import { useCallback as useCallback2, useMemo as useMemo3 } from "react";
-import { getElementStyles, getVariantByMeta, updateStyle as updateStyle2 } from "@elementor/editor-elements";
-
-// src/hooks/use-prop-value-history.ts
-import { useCallback, useMemo as useMemo2 } from "react";
-import { getSessionStorageItem, setSessionStorageItem } from "@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 = useCallback(() => {
-    return getSessionStorageItem(elementKey);
-  }, [elementKey]);
-  const getPropValue = useCallback(
-    (propKey) => {
-      const elementPropValues = getElementPropsHistory();
-      return elementPropValues?.[propKey] ?? null;
-    },
-    [getElementPropsHistory]
-  );
-  const setPropValue = useCallback(
-    (propKey, propValue) => {
-      const elementPropValues = getElementPropsHistory();
-      const updatedElementPropValues = { ...elementPropValues, [propKey]: propValue };
-      setSessionStorageItem(elementKey, updatedElementPropValues);
-    },
-    [getElementPropsHistory, elementKey]
-  );
-  const removeProp = useCallback(
-    (propKey) => {
-      const elementPropValues = getElementPropsHistory();
-      const updatedElementPropValues = Object.fromEntries(
-        Object.entries(elementPropValues || {}).filter(([key]) => key !== propKey)
-      );
-      setSessionStorageItem(elementKey, updatedElementPropValues);
-    },
-    [getElementPropsHistory, elementKey]
-  );
-  return useMemo2(() => ({ 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 ? getElementStyles(element.id)?.[styleDefID] : null;
-  const styleVariant = styleDef ? getVariantByMeta(styleDef, meta) : null;
-  const styleVariantPath = `${styleDefID}-${styleVariant?.meta.breakpoint}-${styleVariant?.meta.state}`;
-  const saveStylePropsHistory = useCallback2(() => {
-    props.forEach((propKey) => {
-      const propValue = styleVariant?.props[propKey];
-      if (propValue) {
-        const propPath = `${styleVariantPath}-${propKey}`;
-        setPropValue(propPath, propValue);
-      }
+// src/hooks/use-session-storage.ts
+import { useEffect as useEffect2, useState as useState5 } from "react";
+import { getSessionStorageItem, removeSessionStorageItem, setSessionStorageItem } from "@elementor/utils";
+var useSessionStorage = (key) => {
+  const prefixedKey = `elementor/${key}`;
+  const [value, setValue] = useState5();
+  useEffect2(() => {
+    return subscribeToSessionStorage(prefixedKey, (newValue) => {
+      setValue(newValue ?? null);
     });
-  }, [props, setPropValue, styleVariant?.props, styleVariantPath]);
-  const updateStylePropsFromHistory = useCallback2(() => {
-    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) => {
+    setSessionStorageItem(prefixedKey, newValue);
+  };
+  const removeValue = () => {
+    removeSessionStorageItem(prefixedKey);
+  };
+  return [value, saveValue, removeValue];
+};
+var subscribeToSessionStorage = (key, subscriber) => {
+  subscriber(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) {
-      updateStyle2({
-        elementID: element.id,
-        styleDefID,
-        meta,
-        props: propValuesFromHistory,
-        bind: "classes"
-      });
-    }
-  }, [element.id, getPropValue, meta, props, removeProp, styleDefID, styleVariantPath]);
-  const clearCurrentStyleProps = useCallback2(() => {
-    const resetValues = props.reduce(
-      (allProps, currentPropKey) => ({
-        ...allProps,
-        [currentPropKey]: void 0
-      }),
-      {}
-    );
-    updateStyle2({
-      elementID: element.id,
-      styleDefID,
-      meta,
-      props: resetValues,
-      bind: "classes"
-    });
-  }, [element.id, meta, props, styleDefID]);
-  return useMemo3(
-    () => ({ saveStylePropsHistory, updateStylePropsFromHistory, clearCurrentStyleProps }),
-    [saveStylePropsHistory, updateStylePropsFromHistory, clearCurrentStyleProps]
+      subscriber(getSessionStorageItem(key));
+    },
+    { signal: abortController.signal }
   );
+  return () => {
+    abortController.abort();
+  };
 };
 
 // src/components/style-sections/position-section/dimensions-field.tsx
@@ -1460,8 +1395,8 @@ var positionOptions = [
   { label: __20("Absolute", "elementor"), value: "absolute" },
   { label: __20("Fixed", "elementor"), value: "fixed" }
 ];
-var PositionField = () => {
-  return /* @__PURE__ */ React38.createElement(StylesField, { bind: "position" }, /* @__PURE__ */ React38.createElement(Grid11, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(ControlLabel16, null, __20("Position", "elementor"))), /* @__PURE__ */ React38.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(SelectControl3, { options: positionOptions }))));
+var PositionField = ({ onChange }) => {
+  return /* @__PURE__ */ React38.createElement(StylesField, { bind: "position" }, /* @__PURE__ */ React38.createElement(Grid11, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(ControlLabel16, null, __20("Position", "elementor"))), /* @__PURE__ */ React38.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(SelectControl3, { options: positionOptions, onChange }))));
 };
 
 // src/components/style-sections/position-section/z-index-field.tsx
@@ -1474,33 +1409,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(Stack15, { 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 = useCallback3(
-    (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(Stack15, { 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
@@ -1562,11 +1505,11 @@ import { Divider as Divider6, Stack as Stack19 } from "@elementor/ui";
 
 // src/components/collapsible-content.tsx
 import * as React44 from "react";
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { Button, Collapse as Collapse3, Stack as Stack18 } from "@elementor/ui";
 import { __ as __25 } from "@wordpress/i18n";
 var CollapsibleContent = ({ children, defaultOpen = false }) => {
-  const [open, setOpen] = useState5(defaultOpen);
+  const [open, setOpen] = useState6(defaultOpen);
   const handleToggle = () => {
     setOpen((prevOpen) => !prevOpen);
   };
@@ -1891,7 +1834,7 @@ 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(Divider7, null), /* @__PURE__ */ React58.createElement(SectionsList, null, /* @__PURE__ */ React58.createElement(Section, { title: __38("Layout", "elementor") }, /* @__PURE__ */ React58.createElement(LayoutSection, null)), /* @__PURE__ */ React58.createElement(Section, { title: __38("Spacing", "elementor") }, /* @__PURE__ */ React58.createElement(SpacingSection, null)), /* @__PURE__ */ React58.createElement(Section, { title: __38("Size", "elementor") }, /* @__PURE__ */ React58.createElement(SizeSection, null)), /* @__PURE__ */ React58.createElement(Section, { title: __38("Position", "elementor") }, /* @__PURE__ */ React58.createElement(PositionSection, null)), /* @__PURE__ */ React58.createElement(Section, { title: __38("Typography", "elementor") }, /* @__PURE__ */ React58.createElement(TypographySection, null)), /* @__PURE__ */ React58.createElement(Section, { title: __38("Background", "elementor") }, /* @__PURE__ */ React58.createElement(BackgroundSection, null)), /* @__PURE__ */ React58.createElement(Section, { title: __38("Border", "elementor") }, /* @__PURE__ */ React58.createElement(BorderSection, null)), /* @__PURE__ */ React58.createElement(Section, { title: __38("Effects", "elementor") }, /* @__PURE__ */ React58.createElement(EffectsSection, null)))));
 };
 function useActiveStyleDefId(currentClassesProp) {
-  const [activeStyledDefId, setActiveStyledDefId] = useState6(null);
+  const [activeStyledDefId, setActiveStyledDefId] = useState7(null);
   const fallback = useFirstElementStyleDef(currentClassesProp);
   return [activeStyledDefId || fallback?.id || null, setActiveStyledDefId];
 }
@@ -2013,16 +1956,23 @@ import {
 } from "@elementor/ui";
 import { __ as __42 } from "@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
 import * as React61 from "react";
 import { BoundPropProvider as BoundPropProvider3, useBoundProp } from "@elementor/editor-controls";
 import { isTransformable as isTransformable2 } from "@elementor/editor-props";
 
 // src/dynamics/hooks/use-dynamic-tag.ts
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo3 } from "react";
 
 // src/dynamics/hooks/use-prop-dynamic-tags.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo2 } from "react";
 
 // src/dynamics/sync/get-elementor-config.ts
 var getElementorConfig2 = () => {
@@ -2077,7 +2027,7 @@ var usePropDynamicTags = (propName) => {
     const propDynamicType = getDynamicPropType(propType);
     categories = propDynamicType?.settings.categories || [];
   }
-  return useMemo4(() => getDynamicTagsByCategories(categories), [categories.join()]);
+  return useMemo2(() => getDynamicTagsByCategories(categories), [categories.join()]);
 };
 var getDynamicTagsByCategories = (categories) => {
   const dynamicTags = getAtomicDynamicTags();
@@ -2093,7 +2043,7 @@ var getDynamicTagsByCategories = (categories) => {
 // src/dynamics/hooks/use-dynamic-tag.ts
 var useDynamicTag = (propName, tagName) => {
   const dynamicTags = usePropDynamicTags(propName);
-  return useMemo5(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
+  return useMemo3(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
 };
 
 // src/dynamics/dynamic-control.tsx
@@ -2121,7 +2071,7 @@ var DynamicControl = ({ bind, children }) => {
 
 // src/dynamics/components/dynamic-selection.tsx
 import * as React62 from "react";
-import { Fragment as Fragment8, useState as useState7 } from "react";
+import { Fragment as Fragment8, useState as useState8 } from "react";
 import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
 import { PhotoIcon, SearchIcon } from "@elementor/icons";
 import {
@@ -2139,19 +2089,19 @@ import {
 import { __ as __41 } from "@wordpress/i18n";
 var SIZE3 = "tiny";
 var DynamicSelection = ({ onSelect }) => {
-  const [searchValue, setSearchValue] = useState7("");
+  const [searchValue, setSearchValue] = useState8("");
   const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
   const { value: anyValue } = useBoundProp2();
-  const { bind, value: dynamicvalue, setValue } = useBoundProp2(dynamicPropTypeUtil);
-  const { setPropValue: updatePropValueHistory } = usePropValueHistory();
-  const isCurrentValueDynamic = !!dynamicvalue;
+  const { bind, value: dynamicValue, setValue } = useBoundProp2(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?.();
@@ -2169,7 +2119,7 @@ var DynamicSelection = ({ onSelect }) => {
       }
     }
   )), /* @__PURE__ */ React62.createElement(Divider9, null), /* @__PURE__ */ React62.createElement(Box5, { sx: { overflowY: "auto", height: 260, width: 220 } }, options10.length > 0 ? /* @__PURE__ */ React62.createElement(MenuList, { role: "listbox", tabIndex: 0 }, options10.map(([category, items3], index) => /* @__PURE__ */ React62.createElement(Fragment8, { key: index }, /* @__PURE__ */ React62.createElement(ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, dynamicGroups?.[category]?.title || category), items3.map(({ value, label: tagLabel }) => {
-    const isSelected = isCurrentValueDynamic && value === dynamicvalue?.name;
+    const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
     return /* @__PURE__ */ React62.createElement(
       MenuItem,
       {
@@ -2213,14 +2163,13 @@ var SIZE4 = "tiny";
 var DynamicSelectionControl = () => {
   const { setValue: setAnyValue } = useBoundProp3();
   const { bind, value } = useBoundProp3(dynamicPropTypeUtil);
-  const { getPropValue: getPropValueFromHistory } = usePropValueHistory();
+  const [propValueFromHistory] = usePersistDynamicValue(bind);
   const { name: tagName = "" } = value;
   const selectionPopoverId = useId3();
   const selectionPopoverState = usePopupState2({ 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`);