@elementor/editor-editing-panel 1.21.0 → 1.23.0

package/dist/index.mjs

@@ -136,7 +136,7 @@ function MultiCombobox({
         const optionsAndActions = selectedOrInputValue.filter((option) => typeof option !== "string");
         if (reason === "createOption") {
           const [firstAction] = filterActions(actions, { options: options13, inputValue: inputValue ?? "" });
-          if (firstAction.value) {
+          if (firstAction?.value) {
             return run(firstAction.apply, firstAction.value);
           }
         }
@@ -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";
@@ -570,6 +570,9 @@ function useCreateActions({
     return {
       // translators: %s is the label of the new class.
       label: (value) => __3('Create new "%s"', "elementor").replace("%s", value),
+      // translators: %s is the singular label of css class provider (e.g "Global CSS Class").
+      group: __3("Create New %s", "elementor").replace("%s", provider.labels?.singular ?? ""),
+      condition: (_, inputValue) => isLabelValid(inputValue) && !hasReachedLimit(provider),
       apply: (label) => {
         const createdId = create(label);
         if (!createdId) {
@@ -577,13 +580,19 @@ function useCreateActions({
         }
         pushAppliedId(createdId);
         setActiveId(createdId);
-      },
-      condition: (_, inputValue) => stylesRepository4.isLabelValid(inputValue) && !stylesRepository4.isLabelExist(inputValue),
-      // translators: %s is the singular label of css class provider (e.g "Global CSS Class").
-      group: __3("Create New %s", "elementor").replace("%s", provider.labels?.singular ?? "")
+      }
     };
   });
 }
+function hasReachedLimit(provider) {
+  if (provider.limit === void 0) {
+    return false;
+  }
+  return provider.actions.get().length >= provider.limit;
+}
+function isLabelValid(newLabel) {
+  return stylesRepository4.isLabelValid(newLabel) && !stylesRepository4.isLabelExist(newLabel);
+}
 function useAppliedOptions(options13, appliedIds) {
   const applied = options13.filter((option) => option.value && appliedIds.includes(option.value));
   const hasElementsProviderStyleApplied = applied.some(
@@ -846,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" })
@@ -2927,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
@@ -2968,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" }
     },
@@ -2976,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,
@@ -3111,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 });
       }