@elementor/editor-editing-panel 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 0.17.0
+
+### Minor Changes
+
+- e4f30e9: Restore previous value from session when removing the dynamic value.
+- 658f569: added `TextAlignmentControl`
+
+### Patch Changes
+
+- Updated dependencies [59c991b]
+  - @elementor/editor-style@0.4.0
+
 ## 0.16.0
 
 ### Minor Changes

package/dist/index.js

@@ -64,8 +64,8 @@ function useControl(defaultValue) {
 var import_editor_panels2 = require("@elementor/editor-panels");
 
 // src/components/editing-panel.tsx
-var React36 = __toESM(require("react"));
-var import_i18n17 = require("@wordpress/i18n");
+var React37 = __toESM(require("react"));
+var import_i18n18 = require("@wordpress/i18n");
 
 // src/hooks/use-selected-elements.ts
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
@@ -150,8 +150,8 @@ function useElementContext() {
 
 // src/components/editing-panel-tabs.tsx
 var import_ui22 = require("@elementor/ui");
-var React35 = __toESM(require("react"));
-var import_i18n16 = require("@wordpress/i18n");
+var React36 = __toESM(require("react"));
+var import_i18n17 = require("@wordpress/i18n");
 
 // src/components/settings-tab.tsx
 var React13 = __toESM(require("react"));
@@ -397,7 +397,7 @@ var TextFieldInnerSelection = ({
   );
 };
 var SelectionEndAdornment = ({
-  options: options2,
+  options: options3,
   onClick,
   value
 }) => {
@@ -406,7 +406,7 @@ var SelectionEndAdornment = ({
     popupId: (0, import_react5.useId)()
   });
   const handleMenuItemClick = (index) => {
-    onClick(options2[index]);
+    onClick(options3[index]);
     popupState.close();
   };
   return /* @__PURE__ */ React9.createElement(import_ui7.InputAdornment, { position: "end" }, /* @__PURE__ */ React9.createElement(
@@ -418,7 +418,7 @@ var SelectionEndAdornment = ({
       ...(0, import_ui7.bindTrigger)(popupState)
     },
     value.toUpperCase()
-  ), /* @__PURE__ */ React9.createElement(import_ui7.Menu, { MenuListProps: { dense: true }, ...(0, import_ui7.bindMenu)(popupState) }, options2.map((option, index) => /* @__PURE__ */ React9.createElement(import_ui7.MenuItem, { key: option, onClick: () => handleMenuItemClick(index) }, option.toUpperCase()))));
+  ), /* @__PURE__ */ React9.createElement(import_ui7.Menu, { MenuListProps: { dense: true }, ...(0, import_ui7.bindMenu)(popupState) }, options3.map((option, index) => /* @__PURE__ */ React9.createElement(import_ui7.MenuItem, { key: option, onClick: () => handleMenuItemClick(index) }, option.toUpperCase()))));
 };
 
 // src/controls/control-types/size-control.tsx
@@ -469,12 +469,12 @@ var SizeControl = ({ units = defaultUnits, placeholder, startIcon }) => {
 // src/controls/control-types/select-control.tsx
 var React11 = __toESM(require("react"));
 var import_ui9 = require("@elementor/ui");
-var SelectControl = ({ options: options2 }) => {
+var SelectControl = ({ options: options3 }) => {
   const { value, setValue } = useControl();
   const handleChange = (event) => {
     setValue(event.target.value);
   };
-  return /* @__PURE__ */ React11.createElement(import_ui9.Select, { size: "tiny", value: value ?? "", onChange: handleChange }, options2.map(({ label, ...props }) => /* @__PURE__ */ React11.createElement(import_ui9.MenuItem, { key: props.value, ...props }, label)));
+  return /* @__PURE__ */ React11.createElement(import_ui9.Select, { size: "tiny", value: value ?? "", onChange: handleChange }, options3.map(({ label, ...props }) => /* @__PURE__ */ React11.createElement(import_ui9.MenuItem, { key: props.value, ...props }, label)));
 };
 
 // src/controls/controls-registry.tsx
@@ -530,7 +530,7 @@ var Control2 = ({ control }) => {
 };
 
 // src/components/style-tab.tsx
-var React34 = __toESM(require("react"));
+var React35 = __toESM(require("react"));
 
 // src/contexts/style-context.tsx
 var React14 = __toESM(require("react"));
@@ -662,7 +662,7 @@ var Control3 = ({ label, bind }) => {
 };
 
 // src/components/style-sections/typography-section/typography-section.tsx
-var React28 = __toESM(require("react"));
+var React29 = __toESM(require("react"));
 var import_ui16 = require("@elementor/ui");
 
 // src/components/style-sections/typography-section/text-style-control.tsx
@@ -730,7 +730,7 @@ var ToggleButton = ({ onChange, ...props }) => {
 };
 
 // src/components/style-sections/typography-section/typography-section.tsx
-var import_i18n11 = require("@wordpress/i18n");
+var import_i18n12 = require("@wordpress/i18n");
 
 // src/components/style-sections/typography-section/font-size-control.tsx
 var React18 = __toESM(require("react"));
@@ -855,7 +855,7 @@ var ControlToggleButtonGroup = ({
 };
 
 // src/controls/control-types/toggle-control.tsx
-var ToggleControl = ({ options: options2 }) => {
+var ToggleControl = ({ options: options3 }) => {
   const { value, setValue } = useControl();
   const handleToggle = (option) => {
     setValue(option || void 0);
@@ -863,7 +863,7 @@ var ToggleControl = ({ options: options2 }) => {
   return /* @__PURE__ */ React26.createElement(
     ControlToggleButtonGroup,
     {
-      items: options2,
+      items: options3,
       value: value || null,
       onChange: handleToggle,
       exclusive: true
@@ -882,21 +882,51 @@ var TransformControl = () => {
   return /* @__PURE__ */ React27.createElement(ControlContainer, null, /* @__PURE__ */ React27.createElement(StyleControl.Label, null, (0, import_i18n10.__)("Transform", "elementor")), /* @__PURE__ */ React27.createElement(StyleControl, { bind: "text-transform" }, /* @__PURE__ */ React27.createElement(ToggleControl, { options })));
 };
 
+// src/components/style-sections/typography-section/text-alignment-control.tsx
+var React28 = __toESM(require("react"));
+var import_icons5 = require("@elementor/icons");
+var import_i18n11 = require("@wordpress/i18n");
+var options2 = [
+  {
+    value: "left",
+    label: (0, import_i18n11.__)("Left", "elementor"),
+    icon: import_icons5.AlignLeftIcon
+  },
+  {
+    value: "center",
+    label: (0, import_i18n11.__)("Center", "elementor"),
+    icon: import_icons5.AlignCenterIcon
+  },
+  {
+    value: "right",
+    label: (0, import_i18n11.__)("Right", "elementor"),
+    icon: import_icons5.AlignRightIcon
+  },
+  {
+    value: "justify",
+    label: (0, import_i18n11.__)("Justify", "elementor"),
+    icon: import_icons5.AlignJustifiedIcon
+  }
+];
+var TextAlignmentControl = () => {
+  return /* @__PURE__ */ React28.createElement(ControlContainer, null, /* @__PURE__ */ React28.createElement(StyleControl.Label, null, (0, import_i18n11.__)("Alignment", "elementor")), /* @__PURE__ */ React28.createElement(StyleControl, { bind: "text-align" }, /* @__PURE__ */ React28.createElement(ToggleControl, { options: options2 })));
+};
+
 // src/components/style-sections/typography-section/typography-section.tsx
 var TypographySection = () => {
-  return /* @__PURE__ */ React28.createElement(AccordionSection, { title: (0, import_i18n11.__)("Typography", "elementor") }, /* @__PURE__ */ React28.createElement(import_ui16.Stack, { gap: 1.5 }, /* @__PURE__ */ React28.createElement(FontWeightControl, null), /* @__PURE__ */ React28.createElement(FontSizeControl, null), /* @__PURE__ */ React28.createElement(import_ui16.Divider, null), /* @__PURE__ */ React28.createElement(TextColorControl, null), /* @__PURE__ */ React28.createElement(CollapsibleContent, null, /* @__PURE__ */ React28.createElement(import_ui16.Stack, { gap: 1.5, sx: { pt: 1.5 } }, /* @__PURE__ */ React28.createElement(LetterSpacingControl, null), /* @__PURE__ */ React28.createElement(WordSpacingControl, null), /* @__PURE__ */ React28.createElement(import_ui16.Divider, null), /* @__PURE__ */ React28.createElement(TextStyleControl, null), /* @__PURE__ */ React28.createElement(TransformControl, null)))));
+  return /* @__PURE__ */ React29.createElement(AccordionSection, { title: (0, import_i18n12.__)("Typography", "elementor") }, /* @__PURE__ */ React29.createElement(import_ui16.Stack, { gap: 1.5 }, /* @__PURE__ */ React29.createElement(FontWeightControl, null), /* @__PURE__ */ React29.createElement(FontSizeControl, null), /* @__PURE__ */ React29.createElement(import_ui16.Divider, null), /* @__PURE__ */ React29.createElement(TextColorControl, null), /* @__PURE__ */ React29.createElement(CollapsibleContent, null, /* @__PURE__ */ React29.createElement(import_ui16.Stack, { gap: 1.5, sx: { pt: 1.5 } }, /* @__PURE__ */ React29.createElement(LetterSpacingControl, null), /* @__PURE__ */ React29.createElement(WordSpacingControl, null), /* @__PURE__ */ React29.createElement(import_ui16.Divider, null), /* @__PURE__ */ React29.createElement(TextAlignmentControl, null), /* @__PURE__ */ React29.createElement(TextStyleControl, null), /* @__PURE__ */ React29.createElement(TransformControl, null)))));
 };
 
 // src/components/style-sections/position-section/position-section.tsx
-var React31 = __toESM(require("react"));
+var React32 = __toESM(require("react"));
 var import_ui18 = require("@elementor/ui");
 
 // src/components/style-sections/position-section/z-index-control.tsx
-var React30 = __toESM(require("react"));
-var import_i18n12 = require("@wordpress/i18n");
+var React31 = __toESM(require("react"));
+var import_i18n13 = require("@wordpress/i18n");
 
 // src/controls/control-types/number-control.tsx
-var React29 = __toESM(require("react"));
+var React30 = __toESM(require("react"));
 var import_ui17 = require("@elementor/ui");
 var isEmptyOrNaN = (value) => value === void 0 || value === "" || Number.isNaN(Number(value));
 var NumberControl = ({ placeholder }) => {
@@ -905,7 +935,7 @@ var NumberControl = ({ placeholder }) => {
     const eventValue = event.target.value;
     setValue(isEmptyOrNaN(eventValue) ? void 0 : Number(eventValue));
   };
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(
     import_ui17.TextField,
     {
       size: "tiny",
@@ -919,25 +949,25 @@ var NumberControl = ({ placeholder }) => {
 
 // src/components/style-sections/position-section/z-index-control.tsx
 var ZIndexControl = () => {
-  return /* @__PURE__ */ React30.createElement(StyleControl, { bind: "zIndex" }, /* @__PURE__ */ React30.createElement(ControlContainer, null, /* @__PURE__ */ React30.createElement(StyleControl.Label, null, (0, import_i18n12.__)("Z-Index", "elementor")), /* @__PURE__ */ React30.createElement(NumberControl, null)));
+  return /* @__PURE__ */ React31.createElement(StyleControl, { bind: "zIndex" }, /* @__PURE__ */ React31.createElement(ControlContainer, null, /* @__PURE__ */ React31.createElement(StyleControl.Label, null, (0, import_i18n13.__)("Z-Index", "elementor")), /* @__PURE__ */ React31.createElement(NumberControl, null)));
 };
 
 // src/components/style-sections/position-section/position-section.tsx
-var import_i18n13 = require("@wordpress/i18n");
+var import_i18n14 = require("@wordpress/i18n");
 var PositionSection = () => {
-  return /* @__PURE__ */ React31.createElement(AccordionSection, { title: (0, import_i18n13.__)("Position", "elementor") }, /* @__PURE__ */ React31.createElement(import_ui18.Stack, { gap: 1.5 }, /* @__PURE__ */ React31.createElement(ZIndexControl, null)));
+  return /* @__PURE__ */ React32.createElement(AccordionSection, { title: (0, import_i18n14.__)("Position", "elementor") }, /* @__PURE__ */ React32.createElement(import_ui18.Stack, { gap: 1.5 }, /* @__PURE__ */ React32.createElement(ZIndexControl, null)));
 };
 
 // src/components/style-sections/spacing-section/spacing-section.tsx
-var React33 = __toESM(require("react"));
+var React34 = __toESM(require("react"));
 var import_ui20 = require("@elementor/ui");
-var import_i18n15 = require("@wordpress/i18n");
+var import_i18n16 = require("@wordpress/i18n");
 
 // src/components/style-sections/spacing-section/linked-dimensions-control.tsx
-var React32 = __toESM(require("react"));
+var React33 = __toESM(require("react"));
 var import_ui19 = require("@elementor/ui");
-var import_icons5 = require("@elementor/icons");
-var import_i18n14 = require("@wordpress/i18n");
+var import_icons6 = require("@elementor/icons");
+var import_i18n15 = require("@wordpress/i18n");
 var LinkedDimensionsControl = ({ label }) => {
   const { value, setValue } = useControl();
   const { top, right, bottom, left, isLinked = false } = value?.value || {};
@@ -968,49 +998,49 @@ var LinkedDimensionsControl = ({ label }) => {
       value: updatedValue
     });
   };
-  const LinkedIcon = isLinked ? import_icons5.LinkIcon : import_icons5.DetachIcon;
-  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(import_ui19.Stack, { direction: "row", gap: 2 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, label), /* @__PURE__ */ React32.createElement(
+  const LinkedIcon = isLinked ? import_icons6.LinkIcon : import_icons6.DetachIcon;
+  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(import_ui19.Stack, { direction: "row", gap: 2 }, /* @__PURE__ */ React33.createElement(ControlLabel, null, label), /* @__PURE__ */ React33.createElement(
     import_ui19.ToggleButton,
     {
-      "aria-label": (0, import_i18n14.__)("Link Inputs", "elementor"),
+      "aria-label": (0, import_i18n15.__)("Link Inputs", "elementor"),
       size: "tiny",
       value: "check",
       selected: isLinked,
       sx: { marginLeft: "auto" },
       onChange: toggleLinked
     },
-    /* @__PURE__ */ React32.createElement(LinkedIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React32.createElement(import_ui19.Stack, { direction: "row", gap: 2 }, /* @__PURE__ */ React32.createElement(ControlContainer, { direction: "column" }, /* @__PURE__ */ React32.createElement(ControlLabel, null, (0, import_i18n14.__)("Top", "elementor")), /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React33.createElement(LinkedIcon, { fontSize: "tiny" })
+  )), /* @__PURE__ */ React33.createElement(import_ui19.Stack, { direction: "row", gap: 2 }, /* @__PURE__ */ React33.createElement(ControlContainer, { direction: "column" }, /* @__PURE__ */ React33.createElement(ControlLabel, null, (0, import_i18n15.__)("Top", "elementor")), /* @__PURE__ */ React33.createElement(
     Control4,
     {
       bind: "top",
       value: top,
       setValue: setLinkedValue,
-      startIcon: /* @__PURE__ */ React32.createElement(import_icons5.SideTopIcon, { fontSize: "tiny" })
+      startIcon: /* @__PURE__ */ React33.createElement(import_icons6.SideTopIcon, { fontSize: "tiny" })
     }
-  )), /* @__PURE__ */ React32.createElement(ControlContainer, { direction: "column" }, /* @__PURE__ */ React32.createElement(ControlLabel, null, (0, import_i18n14.__)("Right", "elementor")), /* @__PURE__ */ React32.createElement(
+  )), /* @__PURE__ */ React33.createElement(ControlContainer, { direction: "column" }, /* @__PURE__ */ React33.createElement(ControlLabel, null, (0, import_i18n15.__)("Right", "elementor")), /* @__PURE__ */ React33.createElement(
     Control4,
     {
       bind: "right",
       value: right,
       setValue: setLinkedValue,
-      startIcon: /* @__PURE__ */ React32.createElement(import_icons5.SideRightIcon, { fontSize: "tiny" })
+      startIcon: /* @__PURE__ */ React33.createElement(import_icons6.SideRightIcon, { fontSize: "tiny" })
     }
-  ))), /* @__PURE__ */ React32.createElement(import_ui19.Stack, { direction: "row", gap: 2 }, /* @__PURE__ */ React32.createElement(ControlContainer, { direction: "column" }, /* @__PURE__ */ React32.createElement(ControlLabel, null, (0, import_i18n14.__)("Bottom", "elementor")), /* @__PURE__ */ React32.createElement(
+  ))), /* @__PURE__ */ React33.createElement(import_ui19.Stack, { direction: "row", gap: 2 }, /* @__PURE__ */ React33.createElement(ControlContainer, { direction: "column" }, /* @__PURE__ */ React33.createElement(ControlLabel, null, (0, import_i18n15.__)("Bottom", "elementor")), /* @__PURE__ */ React33.createElement(
     Control4,
     {
       bind: "bottom",
       value: bottom,
       setValue: setLinkedValue,
-      startIcon: /* @__PURE__ */ React32.createElement(import_icons5.SideBottomIcon, { fontSize: "tiny" })
+      startIcon: /* @__PURE__ */ React33.createElement(import_icons6.SideBottomIcon, { fontSize: "tiny" })
     }
-  )), /* @__PURE__ */ React32.createElement(ControlContainer, { direction: "column" }, /* @__PURE__ */ React32.createElement(ControlLabel, null, (0, import_i18n14.__)("Left", "elementor")), /* @__PURE__ */ React32.createElement(
+  )), /* @__PURE__ */ React33.createElement(ControlContainer, { direction: "column" }, /* @__PURE__ */ React33.createElement(ControlLabel, null, (0, import_i18n15.__)("Left", "elementor")), /* @__PURE__ */ React33.createElement(
     Control4,
     {
       bind: "left",
       value: left,
       setValue: setLinkedValue,
-      startIcon: /* @__PURE__ */ React32.createElement(import_icons5.SideLeftIcon, { fontSize: "tiny" })
+      startIcon: /* @__PURE__ */ React33.createElement(import_icons6.SideLeftIcon, { fontSize: "tiny" })
     }
   ))));
 };
@@ -1019,7 +1049,7 @@ var Control4 = ({
   startIcon,
   value,
   setValue
-}) => /* @__PURE__ */ React32.createElement(
+}) => /* @__PURE__ */ React33.createElement(
   ControlContext.Provider,
   {
     value: {
@@ -1028,12 +1058,12 @@ var Control4 = ({
       value
     }
   },
-  /* @__PURE__ */ React32.createElement(SizeControl, { startIcon })
+  /* @__PURE__ */ React33.createElement(SizeControl, { startIcon })
 );
 
 // src/components/style-sections/spacing-section/spacing-section.tsx
 var SpacingSection = () => {
-  return /* @__PURE__ */ React33.createElement(AccordionSection, { title: (0, import_i18n15.__)("Spacing", "elementor") }, /* @__PURE__ */ React33.createElement(import_ui20.Stack, { gap: 1.5 }, /* @__PURE__ */ React33.createElement(StyleControl, { bind: "padding" }, /* @__PURE__ */ React33.createElement(LinkedDimensionsControl, { label: (0, import_i18n15.__)("Padding", "elementor") })), /* @__PURE__ */ React33.createElement(import_ui20.Divider, null), /* @__PURE__ */ React33.createElement(StyleControl, { bind: "margin" }, /* @__PURE__ */ React33.createElement(LinkedDimensionsControl, { label: (0, import_i18n15.__)("Margin", "elementor") }))));
+  return /* @__PURE__ */ React34.createElement(AccordionSection, { title: (0, import_i18n16.__)("Spacing", "elementor") }, /* @__PURE__ */ React34.createElement(import_ui20.Stack, { gap: 1.5 }, /* @__PURE__ */ React34.createElement(StyleControl, { bind: "padding" }, /* @__PURE__ */ React34.createElement(LinkedDimensionsControl, { label: (0, import_i18n16.__)("Padding", "elementor") })), /* @__PURE__ */ React34.createElement(import_ui20.Divider, null), /* @__PURE__ */ React34.createElement(StyleControl, { bind: "margin" }, /* @__PURE__ */ React34.createElement(LinkedDimensionsControl, { label: (0, import_i18n16.__)("Margin", "elementor") }))));
 };
 
 // src/components/style-tab.tsx
@@ -1041,7 +1071,7 @@ var CLASSES_PROP_KEY = "classes";
 var StyleTab = () => {
   const styleDefinition = useStyleDefinition();
   const classesProp = useClassesProp();
-  return /* @__PURE__ */ React34.createElement(StyleContext, { selectedStyleDef: styleDefinition, selectedClassesProp: classesProp }, /* @__PURE__ */ React34.createElement(import_ui21.Stack, null, /* @__PURE__ */ React34.createElement(SizeSection, null), /* @__PURE__ */ React34.createElement(PositionSection, null), /* @__PURE__ */ React34.createElement(TypographySection, null), /* @__PURE__ */ React34.createElement(SpacingSection, null)));
+  return /* @__PURE__ */ React35.createElement(StyleContext, { selectedStyleDef: styleDefinition, selectedClassesProp: classesProp }, /* @__PURE__ */ React35.createElement(import_ui21.Stack, null, /* @__PURE__ */ React35.createElement(SizeSection, null), /* @__PURE__ */ React35.createElement(PositionSection, null), /* @__PURE__ */ React35.createElement(TypographySection, null), /* @__PURE__ */ React35.createElement(SpacingSection, null)));
 };
 function useClassesProp() {
   const { elementType } = useElementContext();
@@ -1060,7 +1090,7 @@ function useStyleDefinition() {
 // src/components/editing-panel-tabs.tsx
 var EditingPanelTabs = () => {
   const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui22.useTabs)("settings");
-  return /* @__PURE__ */ React35.createElement(import_ui22.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React35.createElement(import_ui22.Tabs, { variant: "fullWidth", indicatorColor: "secondary", textColor: "inherit", ...getTabsProps() }, /* @__PURE__ */ React35.createElement(import_ui22.Tab, { label: (0, import_i18n16.__)("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React35.createElement(import_ui22.Tab, { label: (0, import_i18n16.__)("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React35.createElement(import_ui22.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React35.createElement(SettingsTab, null)), /* @__PURE__ */ React35.createElement(import_ui22.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React35.createElement(StyleTab, null)));
+  return /* @__PURE__ */ React36.createElement(import_ui22.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React36.createElement(import_ui22.Tabs, { variant: "fullWidth", indicatorColor: "secondary", textColor: "inherit", ...getTabsProps() }, /* @__PURE__ */ React36.createElement(import_ui22.Tab, { label: (0, import_i18n17.__)("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React36.createElement(import_ui22.Tab, { label: (0, import_i18n17.__)("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React36.createElement(import_ui22.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React36.createElement(SettingsTab, null)), /* @__PURE__ */ React36.createElement(import_ui22.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React36.createElement(StyleTab, null)));
 };
 
 // src/components/editing-panel.tsx
@@ -1071,8 +1101,8 @@ var EditingPanel = () => {
   if (elements.length !== 1 || !elementType) {
     return null;
   }
-  const panelTitle = (0, import_i18n17.__)("Edit %s", "elementor").replace("%s", elementType.title);
-  return /* @__PURE__ */ React36.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React36.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React36.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React36.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React36.createElement(ElementContext, { element: selectedElement, elementType }, /* @__PURE__ */ React36.createElement(EditingPanelTabs, null))));
+  const panelTitle = (0, import_i18n18.__)("Edit %s", "elementor").replace("%s", elementType.title);
+  return /* @__PURE__ */ React37.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React37.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React37.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React37.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React37.createElement(ElementContext, { element: selectedElement, elementType }, /* @__PURE__ */ React37.createElement(EditingPanelTabs, null))));
 };
 
 // src/panel.ts
@@ -1119,11 +1149,11 @@ var import_editor_panels3 = require("@elementor/editor-panels");
 var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
 
 // src/dynamics/components/dynamic-selection-control.tsx
-var React39 = __toESM(require("react"));
+var React40 = __toESM(require("react"));
 var import_react12 = require("react");
 
 // src/dynamics/dynamic-control.tsx
-var React37 = __toESM(require("react"));
+var React38 = __toESM(require("react"));
 
 // src/dynamics/hooks/use-prop-dynamic-tags.ts
 var import_react9 = require("react");
@@ -1213,56 +1243,83 @@ var DynamicControl = ({ bind, children }) => {
       }
     });
   };
-  return /* @__PURE__ */ React37.createElement(ControlContext.Provider, { value: { setValue: setDynamicValue, value: dynamicValue, bind } }, children);
+  return /* @__PURE__ */ React38.createElement(ControlContext.Provider, { value: { setValue: setDynamicValue, value: dynamicValue, bind } }, children);
 };
 
 // src/dynamics/components/dynamic-selection-control.tsx
-var import_icons7 = require("@elementor/icons");
+var import_icons8 = require("@elementor/icons");
 
 // src/dynamics/components/dynamic-selection.tsx
-var React38 = __toESM(require("react"));
+var React39 = __toESM(require("react"));
 var import_react11 = require("react");
-var import_icons6 = require("@elementor/icons");
+var import_icons7 = require("@elementor/icons");
 var import_ui23 = require("@elementor/ui");
-var import_i18n18 = require("@wordpress/i18n");
+var import_i18n19 = require("@wordpress/i18n");
+
+// src/dynamics/hooks/use-prop-value-history.ts
+var PROPS_VALUES_HISTORY_KEY = "elementor/dynamic/non-dynamic-values-history";
+var usePropValueHistory = (path) => {
+  const valuesHistory = getValues();
+  const { element } = useElementContext();
+  const key = `${element.id}-${path}`;
+  const value = valuesHistory[key] ?? null;
+  const setValue = (newValue) => {
+    setValues({ ...valuesHistory, [key]: newValue });
+  };
+  return [value, setValue];
+};
+var getValues = () => {
+  return JSON.parse(sessionStorage.getItem(PROPS_VALUES_HISTORY_KEY) || "{}");
+};
+var setValues = (values) => {
+  sessionStorage.setItem(PROPS_VALUES_HISTORY_KEY, JSON.stringify(values));
+};
+
+// src/dynamics/components/dynamic-selection.tsx
 var SIZE = "tiny";
 var DynamicSelection = ({ onSelect }) => {
   const [searchValue, setSearchValue] = (0, import_react11.useState)("");
   const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
-  const { bind, value: dynamicValue, setValue } = useControl();
-  const options2 = useFilteredOptions(bind, searchValue);
+  const { bind, value: currentValue, setValue } = useControl();
+  const [, updatePropValueHistory] = usePropValueHistory(bind);
+  const isCurrentValueDynamic = isDynamicPropValue(currentValue);
+  const options3 = useFilteredOptions(bind, searchValue);
   const handleSearch = (event) => {
     setSearchValue(event.target.value);
   };
-  return /* @__PURE__ */ React38.createElement(import_ui23.Stack, null, /* @__PURE__ */ React38.createElement(import_ui23.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React38.createElement(
+  const handleSetDynamicTag = (value) => {
+    if (!isCurrentValueDynamic) {
+      updatePropValueHistory(currentValue);
+    }
+    setValue({ $$type: "dynamic", value: { name: value } });
+    onSelect?.();
+  };
+  return /* @__PURE__ */ React39.createElement(import_ui23.Stack, null, /* @__PURE__ */ React39.createElement(import_ui23.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React39.createElement(
     import_ui23.TextField,
     {
       fullWidth: true,
       size: SIZE,
       value: searchValue,
       onChange: handleSearch,
-      placeholder: (0, import_i18n18.__)("Search dynamic tag", "elementor"),
+      placeholder: (0, import_i18n19.__)("Search dynamic tag", "elementor"),
       InputProps: {
-        startAdornment: /* @__PURE__ */ React38.createElement(import_ui23.InputAdornment, { position: "start" }, /* @__PURE__ */ React38.createElement(import_icons6.SearchIcon, { fontSize: SIZE }))
+        startAdornment: /* @__PURE__ */ React39.createElement(import_ui23.InputAdornment, { position: "start" }, /* @__PURE__ */ React39.createElement(import_icons7.SearchIcon, { fontSize: SIZE }))
       }
     }
-  )), /* @__PURE__ */ React38.createElement(import_ui23.Divider, null), /* @__PURE__ */ React38.createElement(import_ui23.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, options2.length > 0 ? /* @__PURE__ */ React38.createElement(import_ui23.MenuList, { role: "listbox", tabIndex: 0 }, options2.map(([category, items], index) => /* @__PURE__ */ React38.createElement(import_react11.Fragment, { key: index }, /* @__PURE__ */ React38.createElement(import_ui23.ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, dynamicGroups?.[category]?.title || category), items.map(({ value, label: tagLabel }) => {
-    const isSelected = value === dynamicValue?.value?.name;
-    return /* @__PURE__ */ React38.createElement(
+  )), /* @__PURE__ */ React39.createElement(import_ui23.Divider, null), /* @__PURE__ */ React39.createElement(import_ui23.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, options3.length > 0 ? /* @__PURE__ */ React39.createElement(import_ui23.MenuList, { role: "listbox", tabIndex: 0 }, options3.map(([category, items], index) => /* @__PURE__ */ React39.createElement(import_react11.Fragment, { key: index }, /* @__PURE__ */ React39.createElement(import_ui23.ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, dynamicGroups?.[category]?.title || category), items.map(({ value, label: tagLabel }) => {
+    const isSelected = isCurrentValueDynamic && value === currentValue?.value?.name;
+    return /* @__PURE__ */ React39.createElement(
       import_ui23.MenuItem,
       {
         key: value,
         selected: isSelected,
         autoFocus: isSelected,
         sx: { typography: "caption" },
-        onClick: () => {
-          setValue({ $$type: "dynamic", value: { name: value } });
-          onSelect?.();
-        }
+        onClick: () => handleSetDynamicTag(value)
       },
       tagLabel
     );
-  })))) : /* @__PURE__ */ React38.createElement(import_ui23.Stack, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React38.createElement(import_icons6.PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React38.createElement(import_ui23.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n18.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React38.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React38.createElement(import_ui23.Typography, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React38.createElement(
+  })))) : /* @__PURE__ */ React39.createElement(import_ui23.Stack, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React39.createElement(import_icons7.PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React39.createElement(import_ui23.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n19.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React39.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React39.createElement(import_ui23.Typography, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React39.createElement(
     import_ui23.Link,
     {
       color: "secondary",
@@ -1270,12 +1327,12 @@ var DynamicSelection = ({ onSelect }) => {
       component: "button",
       onClick: () => setSearchValue("")
     },
-    (0, import_i18n18.__)("Clear the filters", "elementor")
-  ), "\xA0", (0, import_i18n18.__)("and try again.", "elementor")))));
+    (0, import_i18n19.__)("Clear the filters", "elementor")
+  ), "\xA0", (0, import_i18n19.__)("and try again.", "elementor")))));
 };
 var useFilteredOptions = (bind, searchValue) => {
   const dynamicTags = usePropDynamicTags(bind);
-  const options2 = dynamicTags.reduce((categories, { name, label, group }) => {
+  const options3 = dynamicTags.reduce((categories, { name, label, group }) => {
     const isVisible = label.toLowerCase().includes(searchValue.trim().toLowerCase());
     if (!isVisible) {
       return categories;
@@ -1286,44 +1343,45 @@ var useFilteredOptions = (bind, searchValue) => {
     categories.get(group)?.push({ label, value: name });
     return categories;
   }, /* @__PURE__ */ new Map());
-  return [...options2];
+  return [...options3];
 };
 
 // src/dynamics/components/dynamic-selection-control.tsx
 var import_ui24 = require("@elementor/ui");
-var import_i18n19 = require("@wordpress/i18n");
+var import_i18n20 = require("@wordpress/i18n");
 var SIZE2 = "tiny";
 var DynamicSelectionControl = () => {
   const { bind, value, setValue } = useControl();
+  const [propValueFromHistory] = usePropValueHistory(bind);
   const { name: tagName = "" } = value?.value || {};
   const selectionPopoverId = (0, import_react12.useId)();
   const selectionPopoverState = (0, import_ui24.usePopupState)({ variant: "popover", popupId: selectionPopoverId });
   const dynamicTag = useDynamicTag(bind, tagName);
   const removeDynamicTag = () => {
-    setValue(null);
+    setValue(propValueFromHistory ?? null);
   };
   if (!dynamicTag) {
     throw new Error(`Dynamic tag ${tagName} not found`);
   }
-  return /* @__PURE__ */ React39.createElement(import_ui24.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React40.createElement(import_ui24.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React40.createElement(
     import_ui24.UnstableTag,
     {
       fullWidth: true,
       showActionsOnHover: true,
       label: dynamicTag.label,
-      startIcon: /* @__PURE__ */ React39.createElement(import_icons7.DatabaseIcon, { fontSize: SIZE2 }),
+      startIcon: /* @__PURE__ */ React40.createElement(import_icons8.DatabaseIcon, { fontSize: SIZE2 }),
       ...(0, import_ui24.bindTrigger)(selectionPopoverState),
-      actions: /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React39.createElement(
+      actions: /* @__PURE__ */ React40.createElement(React40.Fragment, null, /* @__PURE__ */ React40.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React40.createElement(
         import_ui24.IconButton,
         {
           size: SIZE2,
           onClick: removeDynamicTag,
-          "aria-label": (0, import_i18n19.__)("Remove dynamic value", "elementor")
+          "aria-label": (0, import_i18n20.__)("Remove dynamic value", "elementor")
         },
-        /* @__PURE__ */ React39.createElement(import_icons7.XIcon, { fontSize: SIZE2 })
+        /* @__PURE__ */ React40.createElement(import_icons8.XIcon, { fontSize: SIZE2 })
       ))
     }
-  ), /* @__PURE__ */ React39.createElement(
+  ), /* @__PURE__ */ React40.createElement(
     import_ui24.Popover,
     {
       disablePortal: true,
@@ -1331,7 +1389,7 @@ var DynamicSelectionControl = () => {
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
       ...(0, import_ui24.bindPopover)(selectionPopoverState)
     },
-    /* @__PURE__ */ React39.createElement(import_ui24.Stack, null, /* @__PURE__ */ React39.createElement(import_ui24.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React39.createElement(import_icons7.DatabaseIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React39.createElement(import_ui24.Typography, { variant: "subtitle2" }, (0, import_i18n19.__)("Dynamic Tags", "elementor")), /* @__PURE__ */ React39.createElement(import_ui24.IconButton, { size: SIZE2, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React39.createElement(import_icons7.XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React39.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
+    /* @__PURE__ */ React40.createElement(import_ui24.Stack, null, /* @__PURE__ */ React40.createElement(import_ui24.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React40.createElement(import_icons8.DatabaseIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React40.createElement(import_ui24.Typography, { variant: "subtitle2" }, (0, import_i18n20.__)("Dynamic Tags", "elementor")), /* @__PURE__ */ React40.createElement(import_ui24.IconButton, { size: SIZE2, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React40.createElement(import_icons8.XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React40.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
   ));
 };
 var DynamicSettingsPopover = ({ dynamicTag }) => {
@@ -1341,22 +1399,22 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
   if (!hasDynamicSettings) {
     return null;
   }
-  return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React40.createElement(React40.Fragment, null, /* @__PURE__ */ React40.createElement(
     import_ui24.IconButton,
     {
       size: SIZE2,
       ...(0, import_ui24.bindTrigger)(settingsPopupState),
-      "aria-label": (0, import_i18n19.__)("Settings", "elementor")
+      "aria-label": (0, import_i18n20.__)("Settings", "elementor")
     },
-    /* @__PURE__ */ React39.createElement(import_icons7.SettingsIcon, { fontSize: SIZE2 })
-  ), /* @__PURE__ */ React39.createElement(
+    /* @__PURE__ */ React40.createElement(import_icons8.SettingsIcon, { fontSize: SIZE2 })
+  ), /* @__PURE__ */ React40.createElement(
     import_ui24.Popover,
     {
       disableScrollLock: true,
       anchorOrigin: { vertical: "bottom", horizontal: "center" },
       ...(0, import_ui24.bindPopover)(settingsPopupState)
     },
-    /* @__PURE__ */ React39.createElement(import_ui24.Paper, { component: import_ui24.Stack, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React39.createElement(import_ui24.Stack, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React39.createElement(import_icons7.DatabaseIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React39.createElement(import_ui24.Typography, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React39.createElement(import_ui24.IconButton, { sx: { ml: "auto" }, size: SIZE2, onClick: settingsPopupState.close }, /* @__PURE__ */ React39.createElement(import_icons7.XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React39.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
+    /* @__PURE__ */ React40.createElement(import_ui24.Paper, { component: import_ui24.Stack, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React40.createElement(import_ui24.Stack, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React40.createElement(import_icons8.DatabaseIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React40.createElement(import_ui24.Typography, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React40.createElement(import_ui24.IconButton, { sx: { ml: "auto" }, size: SIZE2, onClick: settingsPopupState.close }, /* @__PURE__ */ React40.createElement(import_icons8.XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React40.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
   ));
 };
 var DynamicSettings = ({ controls }) => {
@@ -1365,10 +1423,10 @@ var DynamicSettings = ({ controls }) => {
   if (!tabs.length) {
     return null;
   }
-  return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(import_ui24.Tabs, { indicatorColor: "secondary", textColor: "secondary", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React39.createElement(import_ui24.Tab, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React39.createElement(import_ui24.Divider, null), tabs.map(({ value }, index) => {
-    return /* @__PURE__ */ React39.createElement(import_ui24.TabPanel, { key: index, sx: { flexGrow: 1 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React39.createElement(import_ui24.Stack, { gap: 1, px: 2 }, value.items.map((item) => {
+  return /* @__PURE__ */ React40.createElement(React40.Fragment, null, /* @__PURE__ */ React40.createElement(import_ui24.Tabs, { indicatorColor: "secondary", textColor: "secondary", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React40.createElement(import_ui24.Tab, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React40.createElement(import_ui24.Divider, null), tabs.map(({ value }, index) => {
+    return /* @__PURE__ */ React40.createElement(import_ui24.TabPanel, { key: index, sx: { flexGrow: 1 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React40.createElement(import_ui24.Stack, { gap: 1, px: 2 }, value.items.map((item) => {
       if (item.type === "control") {
-        return /* @__PURE__ */ React39.createElement(Control5, { key: item.value.bind, control: item.value });
+        return /* @__PURE__ */ React40.createElement(Control5, { key: item.value.bind, control: item.value });
       }
       return null;
     })));
@@ -1378,7 +1436,7 @@ var Control5 = ({ control }) => {
   if (!getControlByType(control.type)) {
     return null;
   }
-  return /* @__PURE__ */ React39.createElement(DynamicControl, { bind: control.bind }, control.label ? /* @__PURE__ */ React39.createElement(ControlLabel, null, control.label) : null, /* @__PURE__ */ React39.createElement(Control, { type: control.type, props: control.props }));
+  return /* @__PURE__ */ React40.createElement(DynamicControl, { bind: control.bind }, control.label ? /* @__PURE__ */ React40.createElement(ControlLabel, null, control.label) : null, /* @__PURE__ */ React40.createElement(Control, { type: control.type, props: control.props }));
 };
 
 // src/dynamics/init.ts