@elementor/editor-editing-panel 1.21.0 → 1.23.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Change Log
 
+## 1.23.0
+
+### Minor Changes
+
+- c10d154: Change outer margin of dynamic tags popover
+- 50938e4: Change controls menus text style
+- 64ec032: Change the style from 'ListSubHeader' to 'MenuSubHeader'
+
+### Patch Changes
+
+- Updated dependencies [2ea9555]
+- Updated dependencies [50938e4]
+- Updated dependencies [64ec032]
+  - @elementor/editor-elements@0.7.0
+  - @elementor/editor-controls@0.20.0
+  - @elementor/editor-ui@0.5.0
+  - @elementor/editor-styles-repository@0.8.1
+
+## 1.22.0
+
+### Minor Changes
+
+- 202ff33: Set max global classes creation limit.
+
+### Patch Changes
+
+- 3e108d9: update elementor/ui
+- 700303b: Prevent creation attempt to invalid css class.
+- Updated dependencies [3e108d9]
+- Updated dependencies [202ff33]
+- Updated dependencies [593f222]
+  - @elementor/editor-controls@0.19.1
+  - @elementor/editor-panels@0.13.1
+  - @elementor/editor-ui@0.4.3
+  - @elementor/locations@0.7.7
+  - @elementor/editor@0.18.4
+  - @elementor/menus@0.1.4
+  - @elementor/editor-styles-repository@0.8.0
+  - @elementor/editor-elements@0.6.6
+
 ## 1.21.0
 
 ### Minor Changes

package/dist/index.js

@@ -163,7 +163,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);
           }
         }
@@ -247,7 +247,7 @@ function isAction(option) {
 var React6 = __toESM(require("react"));
 var import_react5 = require("react");
 var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
-var import_editor_ui = require("@elementor/editor-ui");
+var import_editor_ui2 = require("@elementor/editor-ui");
 var import_icons = require("@elementor/icons");
 var import_ui3 = require("@elementor/ui");
 var import_i18n2 = require("@wordpress/i18n");
@@ -255,6 +255,7 @@ var import_i18n2 = require("@wordpress/i18n");
 // src/components/css-classes/css-class-menu.tsx
 var React5 = __toESM(require("react"));
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
+var import_editor_ui = require("@elementor/editor-ui");
 var import_ui2 = require("@elementor/ui");
 var import_i18n = require("@wordpress/i18n");
 
@@ -303,7 +304,7 @@ function CssClassMenu({ styleId, provider, popupState, handleRename, anchorEl })
       onKeyDown: handleKeyDown
     },
     getMenuItemsByProvider({ provider, styleId, handleRename, closeMenu: popupState.close }),
-    /* @__PURE__ */ React5.createElement(import_ui2.ListSubheader, { sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 } }, (0, import_i18n.__)("Pseudo classes", "elementor")),
+    /* @__PURE__ */ React5.createElement(import_ui2.MenuSubheader, { sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 } }, (0, import_i18n.__)("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 });
@@ -329,7 +330,7 @@ function getMenuItemsByProvider({
   if (actions.length) {
     actions.unshift(
       /* @__PURE__ */ React5.createElement(
-        import_ui2.ListSubheader,
+        import_ui2.MenuSubheader,
         {
           key: "provider-label",
           sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 }
@@ -347,7 +348,7 @@ function StateMenuItem({ state, styleId, closeMenu, ...props }) {
   const isActive = styleId === activeId;
   const isSelected = state === activeState && isActive;
   return /* @__PURE__ */ React5.createElement(
-    StyledMenuItem,
+    import_editor_ui.MenuListItem,
     {
       ...props,
       selected: isSelected,
@@ -366,7 +367,7 @@ function StateMenuItem({ state, styleId, closeMenu, ...props }) {
 function UnapplyClassMenuItem({ styleId, closeMenu, ...props }) {
   const unapplyClass = useUnapplyClass(styleId);
   return /* @__PURE__ */ React5.createElement(
-    StyledMenuItem,
+    import_editor_ui.MenuListItem,
     {
       ...props,
       onClick: () => {
@@ -383,7 +384,7 @@ function RenameClassMenuItem({
   ...props
 }) {
   return /* @__PURE__ */ React5.createElement(
-    StyledMenuItem,
+    import_editor_ui.MenuListItem,
     {
       ...props,
       onClick: () => {
@@ -394,7 +395,6 @@ function RenameClassMenuItem({
     (0, import_i18n.__)("Rename", "elementor")
   );
 }
-var StyledMenuItem = ({ ...props }) => /* @__PURE__ */ React5.createElement(import_ui2.MenuItem, { ...props, sx: { ...props.sx ?? {}, typography: "caption", color: "text.primary" } });
 
 // src/components/css-classes/css-class-item.tsx
 var CHIP_SIZE = "tiny";
@@ -419,7 +419,7 @@ function CssClassItem({
     openEditMode,
     error,
     getProps: getEditableProps
-  } = (0, import_editor_ui.useEditable)({
+  } = (0, import_editor_ui2.useEditable)({
     value: label,
     onSubmit: renameLabel,
     validation: validateLabel
@@ -432,7 +432,7 @@ function CssClassItem({
     import_ui3.Chip,
     {
       size: CHIP_SIZE,
-      label: isEditing ? /* @__PURE__ */ React6.createElement(import_editor_ui.EditableField, { ref, error, ...getEditableProps() }) : /* @__PURE__ */ React6.createElement(import_editor_ui.EllipsisWithTooltip, { maxWidth: "10ch", title: label, as: "div" }),
+      label: isEditing ? /* @__PURE__ */ React6.createElement(import_editor_ui2.EditableField, { ref, error, ...getEditableProps() }) : /* @__PURE__ */ React6.createElement(import_editor_ui2.EllipsisWithTooltip, { maxWidth: "10ch", title: label, as: "div" }),
       variant: isActive && !meta.state && !isEditing ? "filled" : "standard",
       shape: "rounded",
       icon,
@@ -590,6 +590,9 @@ function useCreateActions({
     return {
       // translators: %s is the label of the new class.
       label: (value) => (0, import_i18n3.__)('Create new "%s"', "elementor").replace("%s", value),
+      // translators: %s is the singular label of css class provider (e.g "Global CSS Class").
+      group: (0, import_i18n3.__)("Create New %s", "elementor").replace("%s", provider.labels?.singular ?? ""),
+      condition: (_, inputValue) => isLabelValid(inputValue) && !hasReachedLimit(provider),
       apply: (label) => {
         const createdId = create(label);
         if (!createdId) {
@@ -597,13 +600,19 @@ function useCreateActions({
         }
         pushAppliedId(createdId);
         setActiveId(createdId);
-      },
-      condition: (_, inputValue) => import_editor_styles_repository4.stylesRepository.isLabelValid(inputValue) && !import_editor_styles_repository4.stylesRepository.isLabelExist(inputValue),
-      // translators: %s is the singular label of css class provider (e.g "Global CSS Class").
-      group: (0, import_i18n3.__)("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 import_editor_styles_repository4.stylesRepository.isLabelValid(newLabel) && !import_editor_styles_repository4.stylesRepository.isLabelExist(newLabel);
+}
 function useAppliedOptions(options13, appliedIds) {
   const applied = options13.filter((option) => option.value && appliedIds.includes(option.value));
   const hasElementsProviderStyleApplied = applied.some(
@@ -857,7 +866,7 @@ function Section({ title, children, defaultExpanded = false }) {
       import_ui9.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" })
@@ -2905,7 +2914,7 @@ var DynamicSelection = ({ onSelect }) => {
       }
     }
   )), /* @__PURE__ */ React69.createElement(import_ui53.Divider, null), /* @__PURE__ */ React69.createElement(import_ui53.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, options13.length > 0 ? /* @__PURE__ */ React69.createElement(import_ui53.MenuList, { role: "listbox", tabIndex: 0 }, options13.map(([category, items3], index) => /* @__PURE__ */ React69.createElement(import_react21.Fragment, { key: index }, /* @__PURE__ */ React69.createElement(
-    import_ui53.ListSubheader,
+    import_ui53.MenuSubheader,
     {
       sx: { px: 1.5, typography: "caption", color: "text.tertiary" }
     },
@@ -3048,7 +3057,7 @@ var DynamicSettings = ({ controls }) => {
     return null;
   }
   return /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement(import_ui54.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React70.createElement(import_ui54.Tab, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React70.createElement(import_ui54.Divider, null), tabs.map(({ value }, index) => {
-    return /* @__PURE__ */ React70.createElement(import_ui54.TabPanel, { key: index, sx: { flexGrow: 1, py: 0 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React70.createElement(PopoverContent, { p: 1.5 }, value.items.map((item) => {
+    return /* @__PURE__ */ React70.createElement(import_ui54.TabPanel, { 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 });
       }