@elementor/editor-editing-panel 1.29.1 → 1.30.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Change Log
 
+## 1.30.0
+
+### Minor Changes
+
+- 10cbbe9: update `@elementor/ui` version
+- 97e4d7d: create `editor-variables` package
+
+### Patch Changes
+
+- 093b7ca: Add support for multiple control replacements
+- 5f348b8: Allow self icons to be rotated by the ancestor value
+- baa9d17: Show dynamic settings actions when popover is open
+- Updated dependencies [093b7ca]
+- Updated dependencies [10cbbe9]
+- Updated dependencies [ce1852b]
+  - @elementor/editor-controls@0.27.0
+  - @elementor/editor-canvas@0.19.0
+  - @elementor/editor-panels@0.15.0
+  - @elementor/editor-ui@0.8.0
+  - @elementor/editor@0.19.0
+
+## 1.29.2
+
+### Patch Changes
+
+- 212075b: Fix class selector chip line height.
+
 ## 1.29.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { ElementType, ComponentType } from 'react';
 import * as _elementor_editor_props from '@elementor/editor-props';
 import * as _elementor_locations from '@elementor/locations';
+import * as _elementor_menus from '@elementor/menus';
 
 type PopoverActionProps = {
     title: string;
@@ -12,8 +13,9 @@ type PopoverActionProps = {
         closePopover: () => void;
     }>;
 };
+declare function PopoverAction({ title, visible, icon: Icon, popoverContent: PopoverContent, }: PopoverActionProps): React.JSX.Element | null;
 
-declare const replaceControl: ({ component, condition }: {
+declare const registerControlReplacement: (replacement: {
     component: React.ComponentType;
     condition: ({ value }: {
         value: _elementor_editor_props.PropValue;
@@ -31,6 +33,10 @@ declare const usePanelStatus: () => {
     isBlocked: boolean;
 };
 
+declare const controlActionsMenu: _elementor_menus.Menu<{
+    PopoverAction: typeof PopoverAction;
+}, "default">;
+
 declare function init(): void;
 
-export { type PopoverActionProps, init, injectIntoClassSelectorActions, replaceControl, usePanelActions, usePanelStatus };
+export { type PopoverActionProps, controlActionsMenu, init, injectIntoClassSelectorActions, registerControlReplacement, usePanelActions, usePanelStatus };

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { ElementType, ComponentType } from 'react';
 import * as _elementor_editor_props from '@elementor/editor-props';
 import * as _elementor_locations from '@elementor/locations';
+import * as _elementor_menus from '@elementor/menus';
 
 type PopoverActionProps = {
     title: string;
@@ -12,8 +13,9 @@ type PopoverActionProps = {
         closePopover: () => void;
     }>;
 };
+declare function PopoverAction({ title, visible, icon: Icon, popoverContent: PopoverContent, }: PopoverActionProps): React.JSX.Element | null;
 
-declare const replaceControl: ({ component, condition }: {
+declare const registerControlReplacement: (replacement: {
     component: React.ComponentType;
     condition: ({ value }: {
         value: _elementor_editor_props.PropValue;
@@ -31,6 +33,10 @@ declare const usePanelStatus: () => {
     isBlocked: boolean;
 };
 
+declare const controlActionsMenu: _elementor_menus.Menu<{
+    PopoverAction: typeof PopoverAction;
+}, "default">;
+
 declare function init(): void;
 
-export { type PopoverActionProps, init, injectIntoClassSelectorActions, replaceControl, usePanelActions, usePanelStatus };
+export { type PopoverActionProps, controlActionsMenu, init, injectIntoClassSelectorActions, registerControlReplacement, usePanelActions, usePanelStatus };

package/dist/index.js

@@ -30,9 +30,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  controlActionsMenu: () => controlActionsMenu,
   init: () => init2,
   injectIntoClassSelectorActions: () => injectIntoClassSelectorActions,
-  replaceControl: () => replaceControl,
+  registerControlReplacement: () => registerControlReplacement,
   useBoundProp: () => import_editor_controls50.useBoundProp,
   usePanelActions: () => usePanelActions,
   usePanelStatus: () => usePanelStatus
@@ -42,7 +43,7 @@ var import_editor_controls50 = require("@elementor/editor-controls");
 
 // src/control-replacement.tsx
 var import_editor_controls = require("@elementor/editor-controls");
-var { replaceControl, getControlReplacement } = (0, import_editor_controls.createControlReplacement)();
+var { registerControlReplacement, getControlReplacements } = (0, import_editor_controls.createControlReplacementsRegistry)();
 
 // src/components/css-classes/css-class-selector.tsx
 var React7 = __toESM(require("react"));
@@ -138,7 +139,7 @@ var import_ui = require("@elementor/ui");
 function MultiCombobox({
   actions = [],
   selected,
-  options: options13,
+  options: options12,
   onSelect,
   placeholder,
   ...props
@@ -157,7 +158,7 @@ function MultiCombobox({
       handleHomeEndKeys: true,
       disabled: loading,
       value: selected,
-      options: options13,
+      options: options12,
       renderInput: (params) => /* @__PURE__ */ React4.createElement(
         import_ui.TextField,
         {
@@ -175,7 +176,7 @@ function MultiCombobox({
         const inputValue = selectedOrInputValue.find((option) => typeof option === "string");
         const optionsAndActions = selectedOrInputValue.filter((option) => typeof option !== "string");
         if (reason === "createOption") {
-          const [firstAction] = filterActions(actions, { options: options13, inputValue: inputValue ?? "" });
+          const [firstAction] = filterActions(actions, { options: options12, inputValue: inputValue ?? "" });
           if (firstAction?.value) {
             return run(firstAction.apply, firstAction.value);
           }
@@ -184,7 +185,7 @@ function MultiCombobox({
         if (reason === "selectOption" && action?.value) {
           return run(action.apply, action.value);
         }
-        const fixedValues = options13.filter((option) => !!option.fixed);
+        const fixedValues = options12.filter((option) => !!option.fixed);
         onSelect?.([.../* @__PURE__ */ new Set([...optionsAndActions, ...fixedValues])]);
       },
       getOptionLabel: (option) => typeof option === "string" ? option : option.label,
@@ -224,8 +225,8 @@ function useActionRunner() {
   };
   return { run, loading };
 }
-function filterActions(actions, { options: options13, inputValue }) {
-  return actions.filter((action) => action.condition(options13, inputValue)).map((action, index) => ({
+function filterActions(actions, { options: options12, inputValue }) {
+  return actions.filter((action) => action.condition(options12, inputValue)).map((action, index) => ({
     label: action.label(inputValue),
     value: inputValue,
     group: action.group,
@@ -515,6 +516,7 @@ function CssClassItem({
         },
         "aria-pressed": isActive,
         sx: (theme) => ({
+          lineHeight: 1,
           cursor: isActive && allowRename && !isShowingState ? "text" : "pointer",
           borderRadius: `${theme.shape.borderRadius * 0.75}px`,
           "&.Mui-focusVisible": {
@@ -574,12 +576,12 @@ var EMPTY_OPTION = {
 };
 var { Slot: ClassSelectorActionsSlot, inject: injectIntoClassSelectorActions } = (0, import_locations.createLocation)();
 function CssClassSelector() {
-  const options13 = useOptions();
+  const options12 = useOptions();
   const { value: appliedIds, setValue: setAppliedIds, pushValue: pushAppliedId } = useAppliedClassesIds();
   const { id: activeId, setId: setActiveId } = useStyle();
   const actions = useCreateActions({ pushAppliedId, setActiveId });
   const handleApply = useHandleApply(appliedIds, setAppliedIds);
-  const applied = useAppliedOptions(options13, appliedIds);
+  const applied = useAppliedOptions(options12, appliedIds);
   const active = applied.find((option) => option.value === activeId) ?? EMPTY_OPTION;
   const showPlaceholder = applied.every(({ fixed }) => fixed);
   return /* @__PURE__ */ React7.createElement(import_ui5.Stack, { p: 2 }, /* @__PURE__ */ React7.createElement(import_ui5.Stack, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React7.createElement(import_ui5.FormLabel, { htmlFor: ID, size: "small" }, (0, import_i18n3.__)("Classes", "elementor")), /* @__PURE__ */ React7.createElement(import_ui5.Stack, { direction: "row", gap: 1 }, /* @__PURE__ */ React7.createElement(ClassSelectorActionsSlot, null))), /* @__PURE__ */ React7.createElement(
@@ -588,7 +590,7 @@ function CssClassSelector() {
       id: ID,
       size: "tiny",
       placeholder: showPlaceholder ? (0, import_i18n3.__)("Type class name", "elementor") : void 0,
-      options: options13,
+      options: options12,
       selected: applied,
       onSelect: handleApply,
       limitTags: TAGS_LIMIT,
@@ -680,8 +682,8 @@ function useCreateActions({
 function hasReachedLimit(provider) {
   return provider.actions.all().length >= provider.limit;
 }
-function useAppliedOptions(options13, appliedIds) {
-  const applied = options13.filter((option) => option.value && appliedIds.includes(option.value));
+function useAppliedOptions(options12, appliedIds) {
+  const applied = options12.filter((option) => option.value && appliedIds.includes(option.value));
   const hasElementsProviderStyleApplied = applied.some(
     (option) => option.provider && (0, import_editor_styles_repository4.isElementsStylesProvider)(option.provider)
   );
@@ -1850,41 +1852,78 @@ var import_editor_controls16 = require("@elementor/editor-controls");
 var import_icons10 = require("@elementor/icons");
 var import_ui24 = require("@elementor/ui");
 var import_i18n13 = require("@wordpress/i18n");
+var ALIGN_SELF_CHILD_OFFSET_MAP = {
+  row: 90,
+  "row-reverse": 90,
+  column: 0,
+  "column-reverse": 0
+};
 var StartIcon3 = (0, import_ui24.withDirection)(import_icons10.LayoutAlignLeftIcon);
 var EndIcon3 = (0, import_ui24.withDirection)(import_icons10.LayoutAlignRightIcon);
 var iconProps3 = {
-  isClockwise: false,
-  offset: 90
+  isClockwise: false
 };
-var options3 = [
+var getOptions = (parentStyleDirection) => [
   {
     value: "start",
     label: (0, import_i18n13.__)("Start", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(RotatedIcon, { icon: StartIcon3, size, ...iconProps3 }),
+    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(
+      RotatedIcon,
+      {
+        icon: StartIcon3,
+        size,
+        offset: ALIGN_SELF_CHILD_OFFSET_MAP[parentStyleDirection],
+        ...iconProps3
+      }
+    ),
     showTooltip: true
   },
   {
     value: "center",
     label: (0, import_i18n13.__)("Center", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(RotatedIcon, { icon: import_icons10.LayoutAlignCenterIcon, size, ...iconProps3 }),
+    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(
+      RotatedIcon,
+      {
+        icon: import_icons10.LayoutAlignCenterIcon,
+        size,
+        offset: ALIGN_SELF_CHILD_OFFSET_MAP[parentStyleDirection],
+        ...iconProps3
+      }
+    ),
     showTooltip: true
   },
   {
     value: "end",
     label: (0, import_i18n13.__)("End", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(RotatedIcon, { icon: EndIcon3, size, ...iconProps3 }),
+    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(
+      RotatedIcon,
+      {
+        icon: EndIcon3,
+        size,
+        offset: ALIGN_SELF_CHILD_OFFSET_MAP[parentStyleDirection],
+        ...iconProps3
+      }
+    ),
     showTooltip: true
   },
   {
     value: "stretch",
     label: (0, import_i18n13.__)("Stretch", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(RotatedIcon, { icon: import_icons10.LayoutDistributeVerticalIcon, size, ...iconProps3 }),
+    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(
+      RotatedIcon,
+      {
+        icon: import_icons10.LayoutDistributeVerticalIcon,
+        size,
+        offset: ALIGN_SELF_CHILD_OFFSET_MAP[parentStyleDirection],
+        ...iconProps3
+      }
+    ),
     showTooltip: true
   }
 ];
-var AlignSelfChild = () => {
+var AlignSelfChild = ({ parentStyleDirection }) => {
   const { isSiteRtl } = useDirection();
-  return /* @__PURE__ */ React34.createElement(import_ui24.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React34.createElement(import_ui24.ThemeProvider, null, /* @__PURE__ */ React34.createElement(StylesField, { bind: "align-self" }, /* @__PURE__ */ React34.createElement(import_ui24.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel, null, (0, import_i18n13.__)("Align self", "elementor"))), /* @__PURE__ */ React34.createElement(import_ui24.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React34.createElement(import_editor_controls16.ToggleControl, { options: options3 }))))));
+  return /* @__PURE__ */ React34.createElement(import_ui24.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React34.createElement(import_ui24.ThemeProvider, null, /* @__PURE__ */ React34.createElement(StylesField, { bind: "align-self" }, /* @__PURE__ */ React34.createElement(import_ui24.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel, null, (0, import_i18n13.__)("Align self", "elementor"))), /* @__PURE__ */ React34.createElement(import_ui24.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React34.createElement(import_editor_controls16.ToggleControl, { options: getOptions(parentStyleDirection) }))))));
 };
 
 // src/components/style-sections/layout-section/display-field.tsx
@@ -1930,7 +1969,7 @@ var import_editor_controls18 = require("@elementor/editor-controls");
 var import_icons11 = require("@elementor/icons");
 var import_ui26 = require("@elementor/ui");
 var import_i18n15 = require("@wordpress/i18n");
-var options4 = [
+var options3 = [
   {
     value: "row",
     label: (0, import_i18n15.__)("Row", "elementor"),
@@ -1964,7 +2003,7 @@ var options4 = [
 ];
 var FlexDirectionField = () => {
   const { isSiteRtl } = useDirection();
-  return /* @__PURE__ */ React36.createElement(import_ui26.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React36.createElement(import_ui26.ThemeProvider, null, /* @__PURE__ */ React36.createElement(StylesField, { bind: "flex-direction" }, /* @__PURE__ */ React36.createElement(import_ui26.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React36.createElement(import_ui26.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(ControlLabel, null, (0, import_i18n15.__)("Direction", "elementor"))), /* @__PURE__ */ React36.createElement(import_ui26.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React36.createElement(import_editor_controls18.ToggleControl, { options: options4 }))))));
+  return /* @__PURE__ */ React36.createElement(import_ui26.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React36.createElement(import_ui26.ThemeProvider, null, /* @__PURE__ */ React36.createElement(StylesField, { bind: "flex-direction" }, /* @__PURE__ */ React36.createElement(import_ui26.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React36.createElement(import_ui26.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(ControlLabel, null, (0, import_i18n15.__)("Direction", "elementor"))), /* @__PURE__ */ React36.createElement(import_ui26.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React36.createElement(import_editor_controls18.ToggleControl, { options: options3 }))))));
 };
 
 // src/components/style-sections/layout-section/flex-order-field.tsx
@@ -2153,7 +2192,7 @@ var iconProps4 = {
   isClockwise: true,
   offset: -90
 };
-var options5 = [
+var options4 = [
   {
     value: "flex-start",
     label: (0, import_i18n19.__)("Start", "elementor"),
@@ -2193,7 +2232,7 @@ var options5 = [
 ];
 var JustifyContentField = () => {
   const { isSiteRtl } = useDirection();
-  return /* @__PURE__ */ React40.createElement(import_ui30.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React40.createElement(import_ui30.ThemeProvider, null, /* @__PURE__ */ React40.createElement(StylesField, { bind: "justify-content" }, /* @__PURE__ */ React40.createElement(import_ui30.Stack, { gap: 0.75 }, /* @__PURE__ */ React40.createElement(ControlLabel, null, (0, import_i18n19.__)("Justify content", "elementor")), /* @__PURE__ */ React40.createElement(import_editor_controls22.ToggleControl, { options: options5, fullWidth: true })))));
+  return /* @__PURE__ */ React40.createElement(import_ui30.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React40.createElement(import_ui30.ThemeProvider, null, /* @__PURE__ */ React40.createElement(StylesField, { bind: "justify-content" }, /* @__PURE__ */ React40.createElement(import_ui30.Stack, { gap: 0.75 }, /* @__PURE__ */ React40.createElement(ControlLabel, null, (0, import_i18n19.__)("Justify content", "elementor")), /* @__PURE__ */ React40.createElement(import_editor_controls22.ToggleControl, { options: options4, fullWidth: true })))));
 };
 
 // src/components/style-sections/layout-section/wrap-field.tsx
@@ -2202,7 +2241,7 @@ var import_editor_controls23 = require("@elementor/editor-controls");
 var import_icons15 = require("@elementor/icons");
 var import_ui31 = require("@elementor/ui");
 var import_i18n20 = require("@wordpress/i18n");
-var options6 = [
+var options5 = [
   {
     value: "nowrap",
     label: (0, import_i18n20.__)("No wrap", "elementor"),
@@ -2224,7 +2263,7 @@ var options6 = [
 ];
 var WrapField = () => {
   const { isSiteRtl } = useDirection();
-  return /* @__PURE__ */ React41.createElement(import_ui31.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React41.createElement(import_ui31.ThemeProvider, null, /* @__PURE__ */ React41.createElement(StylesField, { bind: "flex-wrap" }, /* @__PURE__ */ React41.createElement(import_ui31.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React41.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ControlLabel, null, (0, import_i18n20.__)("Wrap", "elementor"))), /* @__PURE__ */ React41.createElement(import_ui31.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React41.createElement(import_editor_controls23.ToggleControl, { options: options6 }))))));
+  return /* @__PURE__ */ React41.createElement(import_ui31.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React41.createElement(import_ui31.ThemeProvider, null, /* @__PURE__ */ React41.createElement(StylesField, { bind: "flex-wrap" }, /* @__PURE__ */ React41.createElement(import_ui31.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React41.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ControlLabel, null, (0, import_i18n20.__)("Wrap", "elementor"))), /* @__PURE__ */ React41.createElement(import_ui31.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React41.createElement(import_editor_controls23.ToggleControl, { options: options5 }))))));
 };
 
 // src/components/style-sections/layout-section/layout-section.tsx
@@ -2235,13 +2274,14 @@ var LayoutSection = () => {
   const { element } = useElement();
   const parent = (0, import_editor_elements7.useParentElement)(element.id);
   const parentStyle = useComputedStyle(parent?.id || null);
-  return /* @__PURE__ */ React42.createElement(SectionContent, null, /* @__PURE__ */ React42.createElement(DisplayField, null), isDisplayFlex && /* @__PURE__ */ React42.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React42.createElement(FlexChildFields, null));
+  const parentStyleDirection = parentStyle?.flexDirection ?? "row";
+  return /* @__PURE__ */ React42.createElement(SectionContent, null, /* @__PURE__ */ React42.createElement(DisplayField, null), isDisplayFlex && /* @__PURE__ */ React42.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React42.createElement(FlexChildFields, { parentStyleDirection }));
 };
 var FlexFields = () => {
   const [flexWrap] = useStylesField("flex-wrap");
   return /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(FlexDirectionField, null), /* @__PURE__ */ React42.createElement(JustifyContentField, null), /* @__PURE__ */ React42.createElement(AlignItemsField, null), /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(GapControlField, null), /* @__PURE__ */ React42.createElement(WrapField, null), ["wrap", "wrap-reverse"].includes(flexWrap?.value) && /* @__PURE__ */ React42.createElement(AlignContentField, null));
 };
-var FlexChildFields = () => /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(import_editor_controls24.ControlFormLabel, null, (0, import_i18n21.__)("Flex child", "elementor")), /* @__PURE__ */ React42.createElement(AlignSelfChild, null), /* @__PURE__ */ React42.createElement(FlexOrderField, null), /* @__PURE__ */ React42.createElement(FlexSizeField, null));
+var FlexChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(import_editor_controls24.ControlFormLabel, null, (0, import_i18n21.__)("Flex child", "elementor")), /* @__PURE__ */ React42.createElement(AlignSelfChild, { parentStyleDirection }), /* @__PURE__ */ React42.createElement(FlexOrderField, null), /* @__PURE__ */ React42.createElement(FlexSizeField, null));
 var shouldDisplayFlexFields = (display, local) => {
   const value = display?.value ?? local?.value;
   if (!value) {
@@ -2353,7 +2393,7 @@ var import_editor_controls28 = require("@elementor/editor-controls");
 var import_icons17 = require("@elementor/icons");
 var import_ui35 = require("@elementor/ui");
 var import_i18n25 = require("@wordpress/i18n");
-var options7 = [
+var options6 = [
   {
     value: "visible",
     label: (0, import_i18n25.__)("Visible", "elementor"),
@@ -2374,7 +2414,7 @@ var options7 = [
   }
 ];
 var OverflowField = () => {
-  return /* @__PURE__ */ React47.createElement(StylesField, { bind: "overflow" }, /* @__PURE__ */ React47.createElement(import_ui35.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(ControlLabel, null, (0, import_i18n25.__)("Overflow", "elementor"))), /* @__PURE__ */ React47.createElement(import_ui35.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React47.createElement(import_editor_controls28.ToggleControl, { options: options7 }))));
+  return /* @__PURE__ */ React47.createElement(StylesField, { bind: "overflow" }, /* @__PURE__ */ React47.createElement(import_ui35.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(ControlLabel, null, (0, import_i18n25.__)("Overflow", "elementor"))), /* @__PURE__ */ React47.createElement(import_ui35.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React47.createElement(import_editor_controls28.ToggleControl, { options: options6 }))));
 };
 
 // src/components/style-sections/size-section/size-section.tsx
@@ -2467,11 +2507,11 @@ var supportedCategories = {
 };
 var getFontFamilies = () => {
   const { controls } = getElementorConfig();
-  const options13 = controls?.font?.options;
-  if (!options13) {
+  const options12 = controls?.font?.options;
+  if (!options12) {
     return null;
   }
-  return options13;
+  return options12;
 };
 var useFontFamilies = () => {
   const fontFamilies = getFontFamilies();
@@ -2518,7 +2558,7 @@ var import_editor_controls33 = require("@elementor/editor-controls");
 var import_icons18 = require("@elementor/icons");
 var import_ui40 = require("@elementor/ui");
 var import_i18n32 = require("@wordpress/i18n");
-var options8 = [
+var options7 = [
   {
     value: "normal",
     label: (0, import_i18n32.__)("Normal", "elementor"),
@@ -2532,7 +2572,7 @@ var options8 = [
     showTooltip: true
   }
 ];
-var FontStyleField = () => /* @__PURE__ */ React53.createElement(StylesField, { bind: "font-style" }, /* @__PURE__ */ React53.createElement(import_ui40.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(import_ui40.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(import_editor_controls33.ControlFormLabel, null, (0, import_i18n32.__)("Font style", "elementor"))), /* @__PURE__ */ React53.createElement(import_ui40.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React53.createElement(import_editor_controls33.ToggleControl, { options: options8 }))));
+var FontStyleField = () => /* @__PURE__ */ React53.createElement(StylesField, { bind: "font-style" }, /* @__PURE__ */ React53.createElement(import_ui40.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(import_ui40.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(import_editor_controls33.ControlFormLabel, null, (0, import_i18n32.__)("Font style", "elementor"))), /* @__PURE__ */ React53.createElement(import_ui40.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React53.createElement(import_editor_controls33.ToggleControl, { options: options7 }))));
 
 // src/components/style-sections/typography-section/font-weight-field.tsx
 var React54 = __toESM(require("react"));
@@ -2580,7 +2620,7 @@ var import_ui44 = require("@elementor/ui");
 var import_i18n36 = require("@wordpress/i18n");
 var AlignStartIcon = (0, import_ui44.withDirection)(import_icons19.AlignLeftIcon);
 var AlignEndIcon = (0, import_ui44.withDirection)(import_icons19.AlignRightIcon);
-var options9 = [
+var options8 = [
   {
     value: "start",
     label: (0, import_i18n36.__)("Start", "elementor"),
@@ -2607,7 +2647,7 @@ var options9 = [
   }
 ];
 var TextAlignmentField = () => {
-  return /* @__PURE__ */ React57.createElement(StylesField, { bind: "text-align" }, /* @__PURE__ */ React57.createElement(import_ui44.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(import_ui44.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(ControlLabel, null, (0, import_i18n36.__)("Text align", "elementor"))), /* @__PURE__ */ React57.createElement(import_ui44.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React57.createElement(import_editor_controls37.ToggleControl, { options: options9 }))));
+  return /* @__PURE__ */ React57.createElement(StylesField, { bind: "text-align" }, /* @__PURE__ */ React57.createElement(import_ui44.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(import_ui44.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(ControlLabel, null, (0, import_i18n36.__)("Text align", "elementor"))), /* @__PURE__ */ React57.createElement(import_ui44.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React57.createElement(import_editor_controls37.ToggleControl, { options: options8 }))));
 };
 
 // src/components/style-sections/typography-section/text-color-field.tsx
@@ -2625,7 +2665,7 @@ var import_editor_controls39 = require("@elementor/editor-controls");
 var import_icons20 = require("@elementor/icons");
 var import_ui46 = require("@elementor/ui");
 var import_i18n38 = require("@wordpress/i18n");
-var options10 = [
+var options9 = [
   {
     value: "none",
     label: (0, import_i18n38.__)("None", "elementor"),
@@ -2652,7 +2692,7 @@ var options10 = [
     showTooltip: true
   }
 ];
-var TextDecorationField = () => /* @__PURE__ */ React59.createElement(StylesField, { bind: "text-decoration" }, /* @__PURE__ */ React59.createElement(import_ui46.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React59.createElement(import_ui46.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(ControlLabel, null, (0, import_i18n38.__)("Line decoration", "elementor"))), /* @__PURE__ */ React59.createElement(import_ui46.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React59.createElement(import_editor_controls39.ToggleControl, { options: options10, exclusive: false }))));
+var TextDecorationField = () => /* @__PURE__ */ React59.createElement(StylesField, { bind: "text-decoration" }, /* @__PURE__ */ React59.createElement(import_ui46.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React59.createElement(import_ui46.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(ControlLabel, null, (0, import_i18n38.__)("Line decoration", "elementor"))), /* @__PURE__ */ React59.createElement(import_ui46.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React59.createElement(import_editor_controls39.ToggleControl, { options: options9, exclusive: false }))));
 
 // src/components/style-sections/typography-section/text-direction-field.tsx
 var React60 = __toESM(require("react"));
@@ -2660,7 +2700,7 @@ var import_editor_controls40 = require("@elementor/editor-controls");
 var import_icons21 = require("@elementor/icons");
 var import_ui47 = require("@elementor/ui");
 var import_i18n39 = require("@wordpress/i18n");
-var options11 = [
+var options10 = [
   {
     value: "ltr",
     label: (0, import_i18n39.__)("Left to right", "elementor"),
@@ -2675,7 +2715,7 @@ var options11 = [
   }
 ];
 var TextDirectionField = () => {
-  return /* @__PURE__ */ React60.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React60.createElement(import_ui47.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(import_ui47.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(ControlLabel, null, (0, import_i18n39.__)("Direction", "elementor"))), /* @__PURE__ */ React60.createElement(import_ui47.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React60.createElement(import_editor_controls40.ToggleControl, { options: options11 }))));
+  return /* @__PURE__ */ React60.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React60.createElement(import_ui47.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(import_ui47.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(ControlLabel, null, (0, import_i18n39.__)("Direction", "elementor"))), /* @__PURE__ */ React60.createElement(import_ui47.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React60.createElement(import_editor_controls40.ToggleControl, { options: options10 }))));
 };
 
 // src/components/style-sections/typography-section/text-stroke-field.tsx
@@ -2725,7 +2765,7 @@ var import_editor_controls42 = require("@elementor/editor-controls");
 var import_icons22 = require("@elementor/icons");
 var import_ui48 = require("@elementor/ui");
 var import_i18n41 = require("@wordpress/i18n");
-var options12 = [
+var options11 = [
   {
     value: "none",
     label: (0, import_i18n41.__)("None", "elementor"),
@@ -2751,7 +2791,7 @@ var options12 = [
     showTooltip: true
   }
 ];
-var TransformField = () => /* @__PURE__ */ React62.createElement(StylesField, { bind: "text-transform" }, /* @__PURE__ */ React62.createElement(import_ui48.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React62.createElement(import_ui48.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(ControlLabel, null, (0, import_i18n41.__)("Text transform", "elementor"))), /* @__PURE__ */ React62.createElement(import_ui48.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React62.createElement(import_editor_controls42.ToggleControl, { options: options12 }))));
+var TransformField = () => /* @__PURE__ */ React62.createElement(StylesField, { bind: "text-transform" }, /* @__PURE__ */ React62.createElement(import_ui48.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React62.createElement(import_ui48.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(ControlLabel, null, (0, import_i18n41.__)("Text transform", "elementor"))), /* @__PURE__ */ React62.createElement(import_ui48.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React62.createElement(import_editor_controls42.ToggleControl, { options: options11 }))));
 
 // src/components/style-sections/typography-section/word-spacing-field.tsx
 var React63 = __toESM(require("react"));
@@ -2813,13 +2853,13 @@ var EditingPanelTabs = () => {
 var { useMenuItems } = controlActionsMenu;
 var EditingPanel = () => {
   const { element, elementType } = (0, import_editor_elements8.useSelectedElement)();
-  const controlReplacement = getControlReplacement();
+  const controlReplacements = getControlReplacements();
   const menuItems = useMenuItems().default;
   if (!element || !elementType) {
     return null;
   }
   const panelTitle = (0, import_i18n45.__)("Edit %s", "elementor").replace("%s", elementType.title);
-  return /* @__PURE__ */ React67.createElement(import_ui52.ErrorBoundary, { fallback: /* @__PURE__ */ React67.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React67.createElement(import_session4.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React67.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React67.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React67.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React67.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React67.createElement(import_icons23.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React67.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React67.createElement(import_editor_controls44.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React67.createElement(import_editor_controls44.ControlReplacementProvider, { ...controlReplacement }, /* @__PURE__ */ React67.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React67.createElement(EditingPanelTabs, null)))))))));
+  return /* @__PURE__ */ React67.createElement(import_ui52.ErrorBoundary, { fallback: /* @__PURE__ */ React67.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React67.createElement(import_session4.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React67.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React67.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React67.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React67.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React67.createElement(import_icons23.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React67.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React67.createElement(import_editor_controls44.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React67.createElement(import_editor_controls44.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React67.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React67.createElement(EditingPanelTabs, null)))))))));
 };
 
 // src/panel.ts
@@ -2872,7 +2912,6 @@ var import_editor_canvas2 = require("@elementor/editor-canvas");
 
 // src/dynamics/components/dynamic-selection-control.tsx
 var React71 = __toESM(require("react"));
-var import_react23 = require("react");
 var import_editor_controls48 = require("@elementor/editor-controls");
 var import_icons25 = require("@elementor/icons");
 var import_ui55 = require("@elementor/ui");
@@ -3009,8 +3048,8 @@ var DynamicSelection = ({ onSelect }) => {
   const { bind, value: dynamicValue, setValue } = (0, import_editor_controls47.useBoundProp)(dynamicPropTypeUtil);
   const [, updatePropValueHistory] = usePersistDynamicValue(bind);
   const isCurrentValueDynamic = !!dynamicValue;
-  const options13 = useFilteredOptions(searchValue);
-  const hasNoDynamicTags = !options13.length && !searchValue.trim();
+  const options12 = useFilteredOptions(searchValue);
+  const hasNoDynamicTags = !options12.length && !searchValue.trim();
   const handleSearch = (event) => {
     setSearchValue(event.target.value);
   };
@@ -3033,7 +3072,7 @@ var DynamicSelection = ({ onSelect }) => {
         startAdornment: /* @__PURE__ */ React70.createElement(import_ui54.InputAdornment, { position: "start" }, /* @__PURE__ */ React70.createElement(import_icons24.SearchIcon, { fontSize: SIZE3 }))
       }
     }
-  )), /* @__PURE__ */ React70.createElement(import_ui54.Divider, null), /* @__PURE__ */ React70.createElement(import_ui54.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, options13.length > 0 ? /* @__PURE__ */ React70.createElement(import_ui54.MenuList, { role: "listbox", tabIndex: 0 }, options13.map(([category, items3], index) => /* @__PURE__ */ React70.createElement(import_react22.Fragment, { key: index }, /* @__PURE__ */ React70.createElement(
+  )), /* @__PURE__ */ React70.createElement(import_ui54.Divider, null), /* @__PURE__ */ React70.createElement(import_ui54.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, options12.length > 0 ? /* @__PURE__ */ React70.createElement(import_ui54.MenuList, { role: "listbox", tabIndex: 0 }, options12.map(([category, items3], index) => /* @__PURE__ */ React70.createElement(import_react22.Fragment, { key: index }, /* @__PURE__ */ React70.createElement(
     import_ui54.MenuSubheader,
     {
       sx: { px: 1.5, typography: "caption", color: "text.tertiary" }
@@ -3086,7 +3125,7 @@ var NoDynamicTags = () => /* @__PURE__ */ React70.createElement(import_ui54.Box,
 ));
 var useFilteredOptions = (searchValue) => {
   const dynamicTags = usePropDynamicTags();
-  const options13 = dynamicTags.reduce((categories, { name, label, group }) => {
+  const options12 = dynamicTags.reduce((categories, { name, label, group }) => {
     const isVisible = label.toLowerCase().includes(searchValue.trim().toLowerCase());
     if (!isVisible) {
       return categories;
@@ -3097,7 +3136,7 @@ var useFilteredOptions = (searchValue) => {
     categories.get(group)?.push({ label, value: name });
     return categories;
   }, /* @__PURE__ */ new Map());
-  return [...options13];
+  return [...options12];
 };
 
 // src/dynamics/components/dynamic-selection-control.tsx
@@ -3106,9 +3145,8 @@ var DynamicSelectionControl = () => {
   const { setValue: setAnyValue } = (0, import_editor_controls48.useBoundProp)();
   const { bind, value } = (0, import_editor_controls48.useBoundProp)(dynamicPropTypeUtil);
   const [propValueFromHistory] = usePersistDynamicValue(bind);
+  const selectionPopoverState = (0, import_ui55.usePopupState)({ variant: "popover" });
   const { name: tagName = "" } = value;
-  const selectionPopoverId = (0, import_react23.useId)();
-  const selectionPopoverState = (0, import_ui55.usePopupState)({ variant: "popover", popupId: selectionPopoverId });
   const dynamicTag = useDynamicTag(tagName);
   const removeDynamicTag = () => {
     setAnyValue(propValueFromHistory ?? null);
@@ -3146,28 +3184,20 @@ var DynamicSelectionControl = () => {
   ));
 };
 var DynamicSettingsPopover = ({ dynamicTag }) => {
-  const popupId = (0, import_react23.useId)();
-  const settingsPopupState = (0, import_ui55.usePopupState)({ variant: "popover", popupId });
+  const popupState = (0, import_ui55.usePopupState)({ variant: "popover" });
   const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
   if (!hasDynamicSettings) {
     return null;
   }
-  return /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement(
-    import_ui55.IconButton,
-    {
-      size: SIZE4,
-      ...(0, import_ui55.bindTrigger)(settingsPopupState),
-      "aria-label": (0, import_i18n47.__)("Settings", "elementor")
-    },
-    /* @__PURE__ */ React71.createElement(import_icons25.SettingsIcon, { fontSize: SIZE4 })
-  ), /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement(import_ui55.IconButton, { size: SIZE4, ...(0, import_ui55.bindTrigger)(popupState), "aria-label": (0, import_i18n47.__)("Settings", "elementor") }, /* @__PURE__ */ React71.createElement(import_icons25.SettingsIcon, { fontSize: SIZE4 })), /* @__PURE__ */ React71.createElement(
     import_ui55.Popover,
     {
+      disablePortal: true,
       disableScrollLock: true,
       anchorOrigin: { vertical: "bottom", horizontal: "center" },
-      ...(0, import_ui55.bindPopover)(settingsPopupState)
+      ...(0, import_ui55.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React71.createElement(import_ui55.Paper, { component: import_ui55.Stack, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React71.createElement(import_ui55.Stack, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React71.createElement(import_icons25.DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React71.createElement(import_ui55.Typography, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React71.createElement(import_ui55.IconButton, { sx: { ml: "auto" }, size: SIZE4, onClick: settingsPopupState.close }, /* @__PURE__ */ React71.createElement(import_icons25.XIcon, { fontSize: SIZE4 }))), /* @__PURE__ */ React71.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
+    /* @__PURE__ */ React71.createElement(import_ui55.Paper, { component: import_ui55.Stack, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React71.createElement(import_ui55.Stack, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React71.createElement(import_icons25.DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React71.createElement(import_ui55.Typography, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React71.createElement(import_ui55.IconButton, { sx: { ml: "auto" }, size: SIZE4, onClick: popupState.close }, /* @__PURE__ */ React71.createElement(import_icons25.XIcon, { fontSize: SIZE4 }))), /* @__PURE__ */ React71.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
   ));
 };
 var DynamicSettings = ({ controls }) => {
@@ -3260,7 +3290,7 @@ var usePropDynamicAction = () => {
 // src/dynamics/init.ts
 var { registerPopoverAction } = controlActionsMenu;
 var init = () => {
-  replaceControl({
+  registerControlReplacement({
     component: DynamicSelectionControl,
     condition: ({ value }) => isDynamicPropValue(value)
   });
@@ -3294,9 +3324,10 @@ var blockV1Panel = () => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  controlActionsMenu,
   init,
   injectIntoClassSelectorActions,
-  replaceControl,
+  registerControlReplacement,
   useBoundProp,
   usePanelActions,
   usePanelStatus