@elementor/editor-editing-panel 1.22.0 → 1.23.0

package/dist/index.mjs

@@ -235,7 +235,8 @@ import { __ as __2 } from "@wordpress/i18n";
 // src/components/css-classes/css-class-menu.tsx
 import * as React5 from "react";
 import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
-import { bindMenu, Divider, ListSubheader, Menu, MenuItem } from "@elementor/ui";
+import { MenuListItem } from "@elementor/editor-ui";
+import { bindMenu, Divider, Menu, MenuSubheader } from "@elementor/ui";
 import { __ } from "@wordpress/i18n";
 
 // src/hooks/use-unapply-class.ts
@@ -283,7 +284,7 @@ function CssClassMenu({ styleId, provider, popupState, handleRename, anchorEl })
       onKeyDown: handleKeyDown
     },
     getMenuItemsByProvider({ provider, styleId, handleRename, closeMenu: popupState.close }),
-    /* @__PURE__ */ React5.createElement(ListSubheader, { sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 } }, __("Pseudo classes", "elementor")),
+    /* @__PURE__ */ React5.createElement(MenuSubheader, { sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 } }, __("Pseudo classes", "elementor")),
     /* @__PURE__ */ React5.createElement(StateMenuItem, { key: "normal", state: null, styleId, closeMenu: popupState.close }),
     STATES.map((state) => {
       return /* @__PURE__ */ React5.createElement(StateMenuItem, { key: state, state, styleId, closeMenu: popupState.close });
@@ -309,7 +310,7 @@ function getMenuItemsByProvider({
   if (actions.length) {
     actions.unshift(
       /* @__PURE__ */ React5.createElement(
-        ListSubheader,
+        MenuSubheader,
         {
           key: "provider-label",
           sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 }
@@ -327,7 +328,7 @@ function StateMenuItem({ state, styleId, closeMenu, ...props }) {
   const isActive = styleId === activeId;
   const isSelected = state === activeState && isActive;
   return /* @__PURE__ */ React5.createElement(
-    StyledMenuItem,
+    MenuListItem,
     {
       ...props,
       selected: isSelected,
@@ -346,7 +347,7 @@ function StateMenuItem({ state, styleId, closeMenu, ...props }) {
 function UnapplyClassMenuItem({ styleId, closeMenu, ...props }) {
   const unapplyClass = useUnapplyClass(styleId);
   return /* @__PURE__ */ React5.createElement(
-    StyledMenuItem,
+    MenuListItem,
     {
       ...props,
       onClick: () => {
@@ -363,7 +364,7 @@ function RenameClassMenuItem({
   ...props
 }) {
   return /* @__PURE__ */ React5.createElement(
-    StyledMenuItem,
+    MenuListItem,
     {
       ...props,
       onClick: () => {
@@ -374,7 +375,6 @@ function RenameClassMenuItem({
     __("Rename", "elementor")
   );
 }
-var StyledMenuItem = ({ ...props }) => /* @__PURE__ */ React5.createElement(MenuItem, { ...props, sx: { ...props.sx ?? {}, typography: "caption", color: "text.primary" } });
 
 // src/components/css-classes/css-class-item.tsx
 var CHIP_SIZE = "tiny";
@@ -855,7 +855,7 @@ function Section({ title, children, defaultExpanded = false }) {
       ListItemText,
       {
         secondary: title,
-        secondaryTypographyProps: { sx: { typography: "caption", fontWeight: "bold" } }
+        secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" }
       }
     ),
     /* @__PURE__ */ React13.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
@@ -2936,9 +2936,9 @@ import {
   Divider as Divider6,
   InputAdornment,
   Link,
-  ListSubheader as ListSubheader2,
-  MenuItem as MenuItem2,
+  MenuItem,
   MenuList,
+  MenuSubheader as MenuSubheader2,
   Stack as Stack16,
   TextField as TextField2,
   Typography as Typography4
@@ -2977,7 +2977,7 @@ var DynamicSelection = ({ onSelect }) => {
       }
     }
   )), /* @__PURE__ */ React69.createElement(Divider6, null), /* @__PURE__ */ React69.createElement(Box4, { sx: { overflowY: "auto", height: 260, width: 220 } }, options13.length > 0 ? /* @__PURE__ */ React69.createElement(MenuList, { role: "listbox", tabIndex: 0 }, options13.map(([category, items3], index) => /* @__PURE__ */ React69.createElement(Fragment9, { key: index }, /* @__PURE__ */ React69.createElement(
-    ListSubheader2,
+    MenuSubheader2,
     {
       sx: { px: 1.5, typography: "caption", color: "text.tertiary" }
     },
@@ -2985,7 +2985,7 @@ var DynamicSelection = ({ onSelect }) => {
   ), items3.map(({ value, label: tagLabel }) => {
     const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
     return /* @__PURE__ */ React69.createElement(
-      MenuItem2,
+      MenuItem,
       {
         key: value,
         selected: isSelected,
@@ -3120,7 +3120,7 @@ var DynamicSettings = ({ controls }) => {
     return null;
   }
   return /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement(Tabs2, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React70.createElement(Tab2, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React70.createElement(Divider7, null), tabs.map(({ value }, index) => {
-    return /* @__PURE__ */ React70.createElement(TabPanel2, { key: index, sx: { flexGrow: 1, py: 0 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React70.createElement(PopoverContent, { p: 1.5 }, value.items.map((item) => {
+    return /* @__PURE__ */ React70.createElement(TabPanel2, { key: index, sx: { flexGrow: 1, py: 0 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React70.createElement(PopoverContent, { p: 2, gap: 2 }, value.items.map((item) => {
       if (item.type === "control") {
         return /* @__PURE__ */ React70.createElement(Control3, { key: item.value.bind, control: item.value });
       }