@elementor/editor-editing-panel 0.16.0 → 0.17.0

package/dist/index.mjs

@@ -27,8 +27,8 @@ function useControl(defaultValue) {
 import { __createPanel as createPanel } from "@elementor/editor-panels";
 
 // src/components/editing-panel.tsx
-import * as React36 from "react";
-import { __ as __17 } from "@wordpress/i18n";
+import * as React37 from "react";
+import { __ as __18 } from "@wordpress/i18n";
 
 // src/hooks/use-selected-elements.ts
 import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
@@ -113,8 +113,8 @@ function useElementContext() {
 
 // src/components/editing-panel-tabs.tsx
 import { Stack as Stack11, Tabs, Tab, TabPanel, useTabs } from "@elementor/ui";
-import * as React35 from "react";
-import { __ as __16 } from "@wordpress/i18n";
+import * as React36 from "react";
+import { __ as __17 } from "@wordpress/i18n";
 
 // src/components/settings-tab.tsx
 import * as React13 from "react";
@@ -360,7 +360,7 @@ var TextFieldInnerSelection = ({
   );
 };
 var SelectionEndAdornment = ({
-  options: options2,
+  options: options3,
   onClick,
   value
 }) => {
@@ -369,7 +369,7 @@ var SelectionEndAdornment = ({
     popupId: useId2()
   });
   const handleMenuItemClick = (index) => {
-    onClick(options2[index]);
+    onClick(options3[index]);
     popupState.close();
   };
   return /* @__PURE__ */ React9.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React9.createElement(
@@ -381,7 +381,7 @@ var SelectionEndAdornment = ({
       ...bindTrigger(popupState)
     },
     value.toUpperCase()
-  ), /* @__PURE__ */ React9.createElement(Menu, { MenuListProps: { dense: true }, ...bindMenu(popupState) }, options2.map((option, index) => /* @__PURE__ */ React9.createElement(MenuItem, { key: option, onClick: () => handleMenuItemClick(index) }, option.toUpperCase()))));
+  ), /* @__PURE__ */ React9.createElement(Menu, { MenuListProps: { dense: true }, ...bindMenu(popupState) }, options3.map((option, index) => /* @__PURE__ */ React9.createElement(MenuItem, { key: option, onClick: () => handleMenuItemClick(index) }, option.toUpperCase()))));
 };
 
 // src/controls/control-types/size-control.tsx
@@ -432,12 +432,12 @@ var SizeControl = ({ units = defaultUnits, placeholder, startIcon }) => {
 // src/controls/control-types/select-control.tsx
 import * as React11 from "react";
 import { MenuItem as MenuItem2, Select } from "@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(Select, { size: "tiny", value: value ?? "", onChange: handleChange }, options2.map(({ label, ...props }) => /* @__PURE__ */ React11.createElement(MenuItem2, { key: props.value, ...props }, label)));
+  return /* @__PURE__ */ React11.createElement(Select, { size: "tiny", value: value ?? "", onChange: handleChange }, options3.map(({ label, ...props }) => /* @__PURE__ */ React11.createElement(MenuItem2, { key: props.value, ...props }, label)));
 };
 
 // src/controls/controls-registry.tsx
@@ -493,7 +493,7 @@ var Control2 = ({ control }) => {
 };
 
 // src/components/style-tab.tsx
-import * as React34 from "react";
+import * as React35 from "react";
 
 // src/contexts/style-context.tsx
 import * as React14 from "react";
@@ -625,7 +625,7 @@ var Control3 = ({ label, bind }) => {
 };
 
 // src/components/style-sections/typography-section/typography-section.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 import { Divider, Stack as Stack6 } from "@elementor/ui";
 
 // src/components/style-sections/typography-section/text-style-control.tsx
@@ -693,7 +693,7 @@ var ToggleButton = ({ onChange, ...props }) => {
 };
 
 // src/components/style-sections/typography-section/typography-section.tsx
-import { __ as __11 } from "@wordpress/i18n";
+import { __ as __12 } from "@wordpress/i18n";
 
 // src/components/style-sections/typography-section/font-size-control.tsx
 import * as React18 from "react";
@@ -818,7 +818,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);
@@ -826,7 +826,7 @@ var ToggleControl = ({ options: options2 }) => {
   return /* @__PURE__ */ React26.createElement(
     ControlToggleButtonGroup,
     {
-      items: options2,
+      items: options3,
       value: value || null,
       onChange: handleToggle,
       exclusive: true
@@ -845,21 +845,51 @@ var TransformControl = () => {
   return /* @__PURE__ */ React27.createElement(ControlContainer, null, /* @__PURE__ */ React27.createElement(StyleControl.Label, null, __10("Transform", "elementor")), /* @__PURE__ */ React27.createElement(StyleControl, { bind: "text-transform" }, /* @__PURE__ */ React27.createElement(ToggleControl, { options })));
 };
 
+// src/components/style-sections/typography-section/text-alignment-control.tsx
+import * as React28 from "react";
+import { AlignLeftIcon, AlignCenterIcon, AlignRightIcon, AlignJustifiedIcon } from "@elementor/icons";
+import { __ as __11 } from "@wordpress/i18n";
+var options2 = [
+  {
+    value: "left",
+    label: __11("Left", "elementor"),
+    icon: AlignLeftIcon
+  },
+  {
+    value: "center",
+    label: __11("Center", "elementor"),
+    icon: AlignCenterIcon
+  },
+  {
+    value: "right",
+    label: __11("Right", "elementor"),
+    icon: AlignRightIcon
+  },
+  {
+    value: "justify",
+    label: __11("Justify", "elementor"),
+    icon: AlignJustifiedIcon
+  }
+];
+var TextAlignmentControl = () => {
+  return /* @__PURE__ */ React28.createElement(ControlContainer, null, /* @__PURE__ */ React28.createElement(StyleControl.Label, null, __11("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: __11("Typography", "elementor") }, /* @__PURE__ */ React28.createElement(Stack6, { gap: 1.5 }, /* @__PURE__ */ React28.createElement(FontWeightControl, null), /* @__PURE__ */ React28.createElement(FontSizeControl, null), /* @__PURE__ */ React28.createElement(Divider, null), /* @__PURE__ */ React28.createElement(TextColorControl, null), /* @__PURE__ */ React28.createElement(CollapsibleContent, null, /* @__PURE__ */ React28.createElement(Stack6, { gap: 1.5, sx: { pt: 1.5 } }, /* @__PURE__ */ React28.createElement(LetterSpacingControl, null), /* @__PURE__ */ React28.createElement(WordSpacingControl, null), /* @__PURE__ */ React28.createElement(Divider, null), /* @__PURE__ */ React28.createElement(TextStyleControl, null), /* @__PURE__ */ React28.createElement(TransformControl, null)))));
+  return /* @__PURE__ */ React29.createElement(AccordionSection, { title: __12("Typography", "elementor") }, /* @__PURE__ */ React29.createElement(Stack6, { gap: 1.5 }, /* @__PURE__ */ React29.createElement(FontWeightControl, null), /* @__PURE__ */ React29.createElement(FontSizeControl, null), /* @__PURE__ */ React29.createElement(Divider, null), /* @__PURE__ */ React29.createElement(TextColorControl, null), /* @__PURE__ */ React29.createElement(CollapsibleContent, null, /* @__PURE__ */ React29.createElement(Stack6, { gap: 1.5, sx: { pt: 1.5 } }, /* @__PURE__ */ React29.createElement(LetterSpacingControl, null), /* @__PURE__ */ React29.createElement(WordSpacingControl, null), /* @__PURE__ */ React29.createElement(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
-import * as React31 from "react";
+import * as React32 from "react";
 import { Stack as Stack7 } from "@elementor/ui";
 
 // src/components/style-sections/position-section/z-index-control.tsx
-import * as React30 from "react";
-import { __ as __12 } from "@wordpress/i18n";
+import * as React31 from "react";
+import { __ as __13 } from "@wordpress/i18n";
 
 // src/controls/control-types/number-control.tsx
-import * as React29 from "react";
+import * as React30 from "react";
 import { TextField as TextField4 } from "@elementor/ui";
 var isEmptyOrNaN = (value) => value === void 0 || value === "" || Number.isNaN(Number(value));
 var NumberControl = ({ placeholder }) => {
@@ -868,7 +898,7 @@ var NumberControl = ({ placeholder }) => {
     const eventValue = event.target.value;
     setValue(isEmptyOrNaN(eventValue) ? void 0 : Number(eventValue));
   };
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(
     TextField4,
     {
       size: "tiny",
@@ -882,25 +912,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, __12("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, __13("Z-Index", "elementor")), /* @__PURE__ */ React31.createElement(NumberControl, null)));
 };
 
 // src/components/style-sections/position-section/position-section.tsx
-import { __ as __13 } from "@wordpress/i18n";
+import { __ as __14 } from "@wordpress/i18n";
 var PositionSection = () => {
-  return /* @__PURE__ */ React31.createElement(AccordionSection, { title: __13("Position", "elementor") }, /* @__PURE__ */ React31.createElement(Stack7, { gap: 1.5 }, /* @__PURE__ */ React31.createElement(ZIndexControl, null)));
+  return /* @__PURE__ */ React32.createElement(AccordionSection, { title: __14("Position", "elementor") }, /* @__PURE__ */ React32.createElement(Stack7, { gap: 1.5 }, /* @__PURE__ */ React32.createElement(ZIndexControl, null)));
 };
 
 // src/components/style-sections/spacing-section/spacing-section.tsx
-import * as React33 from "react";
+import * as React34 from "react";
 import { Divider as Divider2, Stack as Stack9 } from "@elementor/ui";
-import { __ as __15 } from "@wordpress/i18n";
+import { __ as __16 } from "@wordpress/i18n";
 
 // src/components/style-sections/spacing-section/linked-dimensions-control.tsx
-import * as React32 from "react";
+import * as React33 from "react";
 import { Stack as Stack8, ToggleButton as ToggleButton3 } from "@elementor/ui";
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
-import { __ as __14 } from "@wordpress/i18n";
+import { __ as __15 } from "@wordpress/i18n";
 var LinkedDimensionsControl = ({ label }) => {
   const { value, setValue } = useControl();
   const { top, right, bottom, left, isLinked = false } = value?.value || {};
@@ -932,48 +962,48 @@ var LinkedDimensionsControl = ({ label }) => {
     });
   };
   const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
-  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(Stack8, { direction: "row", gap: 2 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, label), /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(Stack8, { direction: "row", gap: 2 }, /* @__PURE__ */ React33.createElement(ControlLabel, null, label), /* @__PURE__ */ React33.createElement(
     ToggleButton3,
     {
-      "aria-label": __14("Link Inputs", "elementor"),
+      "aria-label": __15("Link Inputs", "elementor"),
       size: "tiny",
       value: "check",
       selected: isLinked,
       sx: { marginLeft: "auto" },
       onChange: toggleLinked
     },
-    /* @__PURE__ */ React32.createElement(LinkedIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React32.createElement(Stack8, { direction: "row", gap: 2 }, /* @__PURE__ */ React32.createElement(ControlContainer, { direction: "column" }, /* @__PURE__ */ React32.createElement(ControlLabel, null, __14("Top", "elementor")), /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React33.createElement(LinkedIcon, { fontSize: "tiny" })
+  )), /* @__PURE__ */ React33.createElement(Stack8, { direction: "row", gap: 2 }, /* @__PURE__ */ React33.createElement(ControlContainer, { direction: "column" }, /* @__PURE__ */ React33.createElement(ControlLabel, null, __15("Top", "elementor")), /* @__PURE__ */ React33.createElement(
     Control4,
     {
       bind: "top",
       value: top,
       setValue: setLinkedValue,
-      startIcon: /* @__PURE__ */ React32.createElement(SideTopIcon, { fontSize: "tiny" })
+      startIcon: /* @__PURE__ */ React33.createElement(SideTopIcon, { fontSize: "tiny" })
     }
-  )), /* @__PURE__ */ React32.createElement(ControlContainer, { direction: "column" }, /* @__PURE__ */ React32.createElement(ControlLabel, null, __14("Right", "elementor")), /* @__PURE__ */ React32.createElement(
+  )), /* @__PURE__ */ React33.createElement(ControlContainer, { direction: "column" }, /* @__PURE__ */ React33.createElement(ControlLabel, null, __15("Right", "elementor")), /* @__PURE__ */ React33.createElement(
     Control4,
     {
       bind: "right",
       value: right,
       setValue: setLinkedValue,
-      startIcon: /* @__PURE__ */ React32.createElement(SideRightIcon, { fontSize: "tiny" })
+      startIcon: /* @__PURE__ */ React33.createElement(SideRightIcon, { fontSize: "tiny" })
     }
-  ))), /* @__PURE__ */ React32.createElement(Stack8, { direction: "row", gap: 2 }, /* @__PURE__ */ React32.createElement(ControlContainer, { direction: "column" }, /* @__PURE__ */ React32.createElement(ControlLabel, null, __14("Bottom", "elementor")), /* @__PURE__ */ React32.createElement(
+  ))), /* @__PURE__ */ React33.createElement(Stack8, { direction: "row", gap: 2 }, /* @__PURE__ */ React33.createElement(ControlContainer, { direction: "column" }, /* @__PURE__ */ React33.createElement(ControlLabel, null, __15("Bottom", "elementor")), /* @__PURE__ */ React33.createElement(
     Control4,
     {
       bind: "bottom",
       value: bottom,
       setValue: setLinkedValue,
-      startIcon: /* @__PURE__ */ React32.createElement(SideBottomIcon, { fontSize: "tiny" })
+      startIcon: /* @__PURE__ */ React33.createElement(SideBottomIcon, { fontSize: "tiny" })
     }
-  )), /* @__PURE__ */ React32.createElement(ControlContainer, { direction: "column" }, /* @__PURE__ */ React32.createElement(ControlLabel, null, __14("Left", "elementor")), /* @__PURE__ */ React32.createElement(
+  )), /* @__PURE__ */ React33.createElement(ControlContainer, { direction: "column" }, /* @__PURE__ */ React33.createElement(ControlLabel, null, __15("Left", "elementor")), /* @__PURE__ */ React33.createElement(
     Control4,
     {
       bind: "left",
       value: left,
       setValue: setLinkedValue,
-      startIcon: /* @__PURE__ */ React32.createElement(SideLeftIcon, { fontSize: "tiny" })
+      startIcon: /* @__PURE__ */ React33.createElement(SideLeftIcon, { fontSize: "tiny" })
     }
   ))));
 };
@@ -982,7 +1012,7 @@ var Control4 = ({
   startIcon,
   value,
   setValue
-}) => /* @__PURE__ */ React32.createElement(
+}) => /* @__PURE__ */ React33.createElement(
   ControlContext.Provider,
   {
     value: {
@@ -991,12 +1021,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: __15("Spacing", "elementor") }, /* @__PURE__ */ React33.createElement(Stack9, { gap: 1.5 }, /* @__PURE__ */ React33.createElement(StyleControl, { bind: "padding" }, /* @__PURE__ */ React33.createElement(LinkedDimensionsControl, { label: __15("Padding", "elementor") })), /* @__PURE__ */ React33.createElement(Divider2, null), /* @__PURE__ */ React33.createElement(StyleControl, { bind: "margin" }, /* @__PURE__ */ React33.createElement(LinkedDimensionsControl, { label: __15("Margin", "elementor") }))));
+  return /* @__PURE__ */ React34.createElement(AccordionSection, { title: __16("Spacing", "elementor") }, /* @__PURE__ */ React34.createElement(Stack9, { gap: 1.5 }, /* @__PURE__ */ React34.createElement(StyleControl, { bind: "padding" }, /* @__PURE__ */ React34.createElement(LinkedDimensionsControl, { label: __16("Padding", "elementor") })), /* @__PURE__ */ React34.createElement(Divider2, null), /* @__PURE__ */ React34.createElement(StyleControl, { bind: "margin" }, /* @__PURE__ */ React34.createElement(LinkedDimensionsControl, { label: __16("Margin", "elementor") }))));
 };
 
 // src/components/style-tab.tsx
@@ -1004,7 +1034,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(Stack10, 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(Stack10, 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();
@@ -1023,7 +1053,7 @@ function useStyleDefinition() {
 // src/components/editing-panel-tabs.tsx
 var EditingPanelTabs = () => {
   const { getTabProps, getTabPanelProps, getTabsProps } = useTabs("settings");
-  return /* @__PURE__ */ React35.createElement(Stack11, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React35.createElement(Tabs, { variant: "fullWidth", indicatorColor: "secondary", textColor: "inherit", ...getTabsProps() }, /* @__PURE__ */ React35.createElement(Tab, { label: __16("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React35.createElement(Tab, { label: __16("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React35.createElement(TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React35.createElement(SettingsTab, null)), /* @__PURE__ */ React35.createElement(TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React35.createElement(StyleTab, null)));
+  return /* @__PURE__ */ React36.createElement(Stack11, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React36.createElement(Tabs, { variant: "fullWidth", indicatorColor: "secondary", textColor: "inherit", ...getTabsProps() }, /* @__PURE__ */ React36.createElement(Tab, { label: __17("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React36.createElement(Tab, { label: __17("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React36.createElement(TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React36.createElement(SettingsTab, null)), /* @__PURE__ */ React36.createElement(TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React36.createElement(StyleTab, null)));
 };
 
 // src/components/editing-panel.tsx
@@ -1034,8 +1064,8 @@ var EditingPanel = () => {
   if (elements.length !== 1 || !elementType) {
     return null;
   }
-  const panelTitle = __17("Edit %s", "elementor").replace("%s", elementType.title);
-  return /* @__PURE__ */ React36.createElement(Panel, null, /* @__PURE__ */ React36.createElement(PanelHeader, null, /* @__PURE__ */ React36.createElement(PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React36.createElement(PanelBody, null, /* @__PURE__ */ React36.createElement(ElementContext, { element: selectedElement, elementType }, /* @__PURE__ */ React36.createElement(EditingPanelTabs, null))));
+  const panelTitle = __18("Edit %s", "elementor").replace("%s", elementType.title);
+  return /* @__PURE__ */ React37.createElement(Panel, null, /* @__PURE__ */ React37.createElement(PanelHeader, null, /* @__PURE__ */ React37.createElement(PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React37.createElement(PanelBody, null, /* @__PURE__ */ React37.createElement(ElementContext, { element: selectedElement, elementType }, /* @__PURE__ */ React37.createElement(EditingPanelTabs, null))));
 };
 
 // src/panel.ts
@@ -1082,11 +1112,11 @@ import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 import { __privateBlockDataCommand as blockDataCommand } from "@elementor/editor-v1-adapters";
 
 // src/dynamics/components/dynamic-selection-control.tsx
-import * as React39 from "react";
+import * as React40 from "react";
 import { useId as useId3 } from "react";
 
 // src/dynamics/dynamic-control.tsx
-import * as React37 from "react";
+import * as React38 from "react";
 
 // src/dynamics/hooks/use-prop-dynamic-tags.ts
 import { useMemo } from "react";
@@ -1176,14 +1206,14 @@ 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
 import { DatabaseIcon, SettingsIcon, XIcon } from "@elementor/icons";
 
 // src/dynamics/components/dynamic-selection.tsx
-import * as React38 from "react";
+import * as React39 from "react";
 import { useState as useState3, Fragment as Fragment2 } from "react";
 import { SearchIcon, PhotoIcon } from "@elementor/icons";
 import {
@@ -1198,45 +1228,72 @@ import {
   TextField as TextField5,
   Typography as Typography2
 } from "@elementor/ui";
-import { __ as __18 } from "@wordpress/i18n";
+import { __ as __19 } from "@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] = useState3("");
   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(Stack12, null, /* @__PURE__ */ React38.createElement(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(Stack12, null, /* @__PURE__ */ React39.createElement(Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React39.createElement(
     TextField5,
     {
       fullWidth: true,
       size: SIZE,
       value: searchValue,
       onChange: handleSearch,
-      placeholder: __18("Search dynamic tag", "elementor"),
+      placeholder: __19("Search dynamic tag", "elementor"),
       InputProps: {
-        startAdornment: /* @__PURE__ */ React38.createElement(InputAdornment3, { position: "start" }, /* @__PURE__ */ React38.createElement(SearchIcon, { fontSize: SIZE }))
+        startAdornment: /* @__PURE__ */ React39.createElement(InputAdornment3, { position: "start" }, /* @__PURE__ */ React39.createElement(SearchIcon, { fontSize: SIZE }))
       }
     }
-  )), /* @__PURE__ */ React38.createElement(Divider3, null), /* @__PURE__ */ React38.createElement(Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, options2.length > 0 ? /* @__PURE__ */ React38.createElement(MenuList, { role: "listbox", tabIndex: 0 }, options2.map(([category, items], index) => /* @__PURE__ */ React38.createElement(Fragment2, { key: index }, /* @__PURE__ */ React38.createElement(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(Divider3, null), /* @__PURE__ */ React39.createElement(Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, options3.length > 0 ? /* @__PURE__ */ React39.createElement(MenuList, { role: "listbox", tabIndex: 0 }, options3.map(([category, items], index) => /* @__PURE__ */ React39.createElement(Fragment2, { key: index }, /* @__PURE__ */ React39.createElement(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(
       MenuItem3,
       {
         key: value,
         selected: isSelected,
         autoFocus: isSelected,
         sx: { typography: "caption" },
-        onClick: () => {
-          setValue({ $$type: "dynamic", value: { name: value } });
-          onSelect?.();
-        }
+        onClick: () => handleSetDynamicTag(value)
       },
       tagLabel
     );
-  })))) : /* @__PURE__ */ React38.createElement(Stack12, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React38.createElement(PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React38.createElement(Typography2, { align: "center", variant: "caption", color: "text.secondary" }, __18("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React38.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React38.createElement(Typography2, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React38.createElement(
+  })))) : /* @__PURE__ */ React39.createElement(Stack12, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React39.createElement(PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React39.createElement(Typography2, { align: "center", variant: "caption", color: "text.secondary" }, __19("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React39.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React39.createElement(Typography2, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React39.createElement(
     Link,
     {
       color: "secondary",
@@ -1244,12 +1301,12 @@ var DynamicSelection = ({ onSelect }) => {
       component: "button",
       onClick: () => setSearchValue("")
     },
-    __18("Clear the filters", "elementor")
-  ), "\xA0", __18("and try again.", "elementor")))));
+    __19("Clear the filters", "elementor")
+  ), "\xA0", __19("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;
@@ -1260,7 +1317,7 @@ 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
@@ -1281,39 +1338,40 @@ import {
   Tab as Tab2,
   TabPanel as TabPanel2
 } from "@elementor/ui";
-import { __ as __19 } from "@wordpress/i18n";
+import { __ as __20 } from "@wordpress/i18n";
 var SIZE2 = "tiny";
 var DynamicSelectionControl = () => {
   const { bind, value, setValue } = useControl();
+  const [propValueFromHistory] = usePropValueHistory(bind);
   const { name: tagName = "" } = value?.value || {};
   const selectionPopoverId = useId3();
   const selectionPopoverState = usePopupState2({ 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(Box2, { sx: { width: "100%" } }, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React40.createElement(Box2, { sx: { width: "100%" } }, /* @__PURE__ */ React40.createElement(
     Tag,
     {
       fullWidth: true,
       showActionsOnHover: true,
       label: dynamicTag.label,
-      startIcon: /* @__PURE__ */ React39.createElement(DatabaseIcon, { fontSize: SIZE2 }),
+      startIcon: /* @__PURE__ */ React40.createElement(DatabaseIcon, { fontSize: SIZE2 }),
       ...bindTrigger2(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(
         IconButton,
         {
           size: SIZE2,
           onClick: removeDynamicTag,
-          "aria-label": __19("Remove dynamic value", "elementor")
+          "aria-label": __20("Remove dynamic value", "elementor")
         },
-        /* @__PURE__ */ React39.createElement(XIcon, { fontSize: SIZE2 })
+        /* @__PURE__ */ React40.createElement(XIcon, { fontSize: SIZE2 })
       ))
     }
-  ), /* @__PURE__ */ React39.createElement(
+  ), /* @__PURE__ */ React40.createElement(
     Popover,
     {
       disablePortal: true,
@@ -1321,7 +1379,7 @@ var DynamicSelectionControl = () => {
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
       ...bindPopover(selectionPopoverState)
     },
-    /* @__PURE__ */ React39.createElement(Stack13, null, /* @__PURE__ */ React39.createElement(Stack13, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React39.createElement(DatabaseIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React39.createElement(Typography3, { variant: "subtitle2" }, __19("Dynamic Tags", "elementor")), /* @__PURE__ */ React39.createElement(IconButton, { size: SIZE2, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React39.createElement(XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React39.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
+    /* @__PURE__ */ React40.createElement(Stack13, null, /* @__PURE__ */ React40.createElement(Stack13, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React40.createElement(DatabaseIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React40.createElement(Typography3, { variant: "subtitle2" }, __20("Dynamic Tags", "elementor")), /* @__PURE__ */ React40.createElement(IconButton, { size: SIZE2, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React40.createElement(XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React40.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
   ));
 };
 var DynamicSettingsPopover = ({ dynamicTag }) => {
@@ -1331,22 +1389,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(
     IconButton,
     {
       size: SIZE2,
       ...bindTrigger2(settingsPopupState),
-      "aria-label": __19("Settings", "elementor")
+      "aria-label": __20("Settings", "elementor")
     },
-    /* @__PURE__ */ React39.createElement(SettingsIcon, { fontSize: SIZE2 })
-  ), /* @__PURE__ */ React39.createElement(
+    /* @__PURE__ */ React40.createElement(SettingsIcon, { fontSize: SIZE2 })
+  ), /* @__PURE__ */ React40.createElement(
     Popover,
     {
       disableScrollLock: true,
       anchorOrigin: { vertical: "bottom", horizontal: "center" },
       ...bindPopover(settingsPopupState)
     },
-    /* @__PURE__ */ React39.createElement(Paper, { component: Stack13, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React39.createElement(Stack13, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React39.createElement(DatabaseIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React39.createElement(Typography3, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React39.createElement(IconButton, { sx: { ml: "auto" }, size: SIZE2, onClick: settingsPopupState.close }, /* @__PURE__ */ React39.createElement(XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React39.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
+    /* @__PURE__ */ React40.createElement(Paper, { component: Stack13, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React40.createElement(Stack13, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React40.createElement(DatabaseIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React40.createElement(Typography3, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React40.createElement(IconButton, { sx: { ml: "auto" }, size: SIZE2, onClick: settingsPopupState.close }, /* @__PURE__ */ React40.createElement(XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React40.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
   ));
 };
 var DynamicSettings = ({ controls }) => {
@@ -1355,10 +1413,10 @@ var DynamicSettings = ({ controls }) => {
   if (!tabs.length) {
     return null;
   }
-  return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(Tabs2, { indicatorColor: "secondary", textColor: "secondary", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React39.createElement(Tab2, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React39.createElement(Divider4, null), tabs.map(({ value }, index) => {
-    return /* @__PURE__ */ React39.createElement(TabPanel2, { key: index, sx: { flexGrow: 1 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React39.createElement(Stack13, { gap: 1, px: 2 }, value.items.map((item) => {
+  return /* @__PURE__ */ React40.createElement(React40.Fragment, null, /* @__PURE__ */ React40.createElement(Tabs2, { indicatorColor: "secondary", textColor: "secondary", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React40.createElement(Tab2, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React40.createElement(Divider4, null), tabs.map(({ value }, index) => {
+    return /* @__PURE__ */ React40.createElement(TabPanel2, { key: index, sx: { flexGrow: 1 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React40.createElement(Stack13, { 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;
     })));
@@ -1368,7 +1426,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