@elementor/editor-editing-panel 1.28.0 → 1.29.1

package/dist/index.mjs

@@ -100,14 +100,8 @@ function getProviderByStyleId(styleId) {
 
 // src/components/multi-combobox.tsx
 import * as React4 from "react";
-import { useId, useState } from "react";
-import {
-  Autocomplete,
-  Box,
-  createFilterOptions,
-  styled,
-  TextField
-} from "@elementor/ui";
+import { useState } from "react";
+import { Autocomplete, createFilterOptions, TextField } from "@elementor/ui";
 function MultiCombobox({
   actions = [],
   selected,
@@ -131,7 +125,6 @@ function MultiCombobox({
       disabled: loading,
       value: selected,
       options: options13,
-      renderGroup: (params) => /* @__PURE__ */ React4.createElement(Group, { ...params }),
       renderInput: (params) => /* @__PURE__ */ React4.createElement(
         TextField,
         {
@@ -179,28 +172,10 @@ function MultiCombobox({
         ];
       },
       groupBy: (option) => option.group ?? "",
-      renderOption: (optionProps, { label }) => /* @__PURE__ */ React4.createElement("li", { ...optionProps, style: { display: "block", textOverflow: "ellipsis" } }, label)
+      renderOption: (optionProps, { label, group }) => /* @__PURE__ */ React4.createElement("li", { ...optionProps, style: { display: "block", textOverflow: "ellipsis" }, "data-group": group }, label)
     }
   );
 }
-var Group = (params) => {
-  const id = `combobox-group-${useId().replace(/:/g, "_")}`;
-  return /* @__PURE__ */ React4.createElement(StyledGroup, { role: "group", "aria-labelledby": id }, /* @__PURE__ */ React4.createElement(StyledGroupHeader, { id }, " ", params.group), /* @__PURE__ */ React4.createElement(StyledGroupItems, { role: "listbox" }, params.children));
-};
-var StyledGroup = styled("li")`
-	&:not( :last-of-type ) {
-		border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
-	}
-`;
-var StyledGroupHeader = styled(Box)(({ theme }) => ({
-  position: "sticky",
-  top: "-8px",
-  padding: theme.spacing(1, 2),
-  color: theme.palette.text.tertiary
-}));
-var StyledGroupItems = styled("ul")`
-	padding: 0;
-`;
 function useFilterOptions() {
   return useState(() => createFilterOptions())[0];
 }
@@ -276,8 +251,8 @@ var useUnapplyClass = (classId) => {
 };
 
 // src/components/style-indicator.tsx
-import { styled as styled2 } from "@elementor/ui";
-var StyleIndicator = styled2("div", {
+import { styled } from "@elementor/ui";
+var StyleIndicator = styled("div", {
   shouldForwardProp: (prop) => prop !== "variant"
 })`
 	width: 5px;
@@ -586,7 +561,7 @@ function CssClassSelector() {
     {
       id: ID,
       size: "tiny",
-      placeholder: showPlaceholder ? __3("Type to search/add global classes", "elementor") : void 0,
+      placeholder: showPlaceholder ? __3("Type class name", "elementor") : void 0,
       options: options13,
       selected: applied,
       onSelect: handleApply,
@@ -751,7 +726,7 @@ import { createMenu } from "@elementor/menus";
 
 // src/popover-action.tsx
 import * as React8 from "react";
-import { useId as useId2 } from "react";
+import { useId } from "react";
 import { XIcon } from "@elementor/icons";
 import { bindPopover, bindToggle, IconButton, Popover, Stack as Stack4, Tooltip, Typography as Typography2, usePopupState as usePopupState2 } from "@elementor/ui";
 var SIZE = "tiny";
@@ -761,7 +736,7 @@ function PopoverAction({
   icon: Icon,
   popoverContent: PopoverContent2
 }) {
-  const id = useId2();
+  const id = useId();
   const popupState = usePopupState2({
     variant: "popover",
     popupId: `elementor-popover-action-${id}`
@@ -794,9 +769,9 @@ var controlActionsMenu = createMenu({
 
 // src/components/editing-panel-error-fallback.tsx
 import * as React9 from "react";
-import { Alert, Box as Box2 } from "@elementor/ui";
+import { Alert, Box } from "@elementor/ui";
 function EditorPanelErrorFallback() {
-  return /* @__PURE__ */ React9.createElement(Box2, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React9.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React9.createElement("strong", null, "Something went wrong")));
+  return /* @__PURE__ */ React9.createElement(Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React9.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React9.createElement("strong", null, "Something went wrong")));
 }
 
 // src/components/editing-panel-tabs.tsx
@@ -851,7 +826,7 @@ var Control = ({ props, type }) => {
 
 // src/controls-registry/control-type-container.tsx
 import * as React11 from "react";
-import { Box as Box3, styled as styled3 } from "@elementor/ui";
+import { Box as Box2, styled as styled2 } from "@elementor/ui";
 var ControlTypeContainer = ({
   controlType,
   children
@@ -859,7 +834,7 @@ var ControlTypeContainer = ({
   const layout = getLayoutByType(controlType);
   return /* @__PURE__ */ React11.createElement(StyledContainer, { layout }, children);
 };
-var StyledContainer = styled3(Box3, {
+var StyledContainer = styled2(Box2, {
   shouldForwardProp: (prop) => !["layout"].includes(prop)
 })(({ layout, theme }) => ({
   display: "grid",
@@ -909,13 +884,13 @@ var SettingsField = ({ bind, children }) => {
 
 // src/components/section.tsx
 import * as React13 from "react";
-import { useId as useId3, useState as useState3 } from "react";
+import { useId as useId2, useState as useState3 } from "react";
 import { Collapse, Divider as Divider2, ListItemButton, ListItemText, Stack as Stack5 } from "@elementor/ui";
 
 // src/components/collapse-icon.tsx
 import { ChevronDownIcon } from "@elementor/icons";
-import { styled as styled4 } from "@elementor/ui";
-var CollapseIcon = styled4(ChevronDownIcon, {
+import { styled as styled3 } from "@elementor/ui";
+var CollapseIcon = styled3(ChevronDownIcon, {
   shouldForwardProp: (prop) => prop !== "open"
 })(({ theme, open }) => ({
   transform: open ? "rotate(180deg)" : "rotate(0deg)",
@@ -927,7 +902,7 @@ var CollapseIcon = styled4(ChevronDownIcon, {
 // src/components/section.tsx
 function Section({ title, children, defaultExpanded = false }) {
   const [isOpen, setIsOpen] = useState3(!!defaultExpanded);
-  const id = useId3();
+  const id = useId2();
   const labelId = `label-${id}`;
   const contentId = `content-${id}`;
   return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
@@ -1494,7 +1469,8 @@ var AddOrRemoveContent = ({ isAdded, label, onAdd, onRemove, children }) => {
       direction: "row",
       sx: {
         justifyContent: "space-between",
-        alignItems: "center"
+        alignItems: "center",
+        marginInlineEnd: -0.75
       }
     },
     /* @__PURE__ */ React23.createElement(ControlLabel, null, label),
@@ -2917,13 +2893,13 @@ import { settingsTransformersRegistry, styleTransformersRegistry } from "@elemen
 
 // src/dynamics/components/dynamic-selection-control.tsx
 import * as React71 from "react";
-import { useId as useId4 } from "react";
+import { useId as useId3 } from "react";
 import { ControlFormLabel as ControlFormLabel5, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
 import { DatabaseIcon as DatabaseIcon2, SettingsIcon, XIcon as XIcon2 } from "@elementor/icons";
 import {
   bindPopover as bindPopover2,
   bindTrigger as bindTrigger2,
-  Box as Box5,
+  Box as Box4,
   Divider as Divider7,
   Grid as Grid26,
   IconButton as IconButton3,
@@ -3065,7 +3041,7 @@ import { Fragment as Fragment9, useState as useState9 } from "react";
 import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
 import { DatabaseIcon, SearchIcon } from "@elementor/icons";
 import {
-  Box as Box4,
+  Box as Box3,
   Divider as Divider6,
   InputAdornment,
   Link,
@@ -3097,7 +3073,7 @@ var DynamicSelection = ({ onSelect }) => {
     setValue({ name: value, settings: { label } });
     onSelect?.();
   };
-  return /* @__PURE__ */ React70.createElement(Stack18, null, hasNoDynamicTags ? /* @__PURE__ */ React70.createElement(NoDynamicTags, null) : /* @__PURE__ */ React70.createElement(Fragment9, null, /* @__PURE__ */ React70.createElement(Box4, { px: 1.5, pb: 1 }, /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React70.createElement(Stack18, null, hasNoDynamicTags ? /* @__PURE__ */ React70.createElement(NoDynamicTags, null) : /* @__PURE__ */ React70.createElement(Fragment9, null, /* @__PURE__ */ React70.createElement(Box3, { px: 1.5, pb: 1 }, /* @__PURE__ */ React70.createElement(
     TextField2,
     {
       fullWidth: true,
@@ -3109,7 +3085,7 @@ var DynamicSelection = ({ onSelect }) => {
         startAdornment: /* @__PURE__ */ React70.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React70.createElement(SearchIcon, { fontSize: SIZE3 }))
       }
     }
-  )), /* @__PURE__ */ React70.createElement(Divider6, null), /* @__PURE__ */ React70.createElement(Box4, { sx: { overflowY: "auto", height: 260, width: 220 } }, options13.length > 0 ? /* @__PURE__ */ React70.createElement(MenuList, { role: "listbox", tabIndex: 0 }, options13.map(([category, items3], index) => /* @__PURE__ */ React70.createElement(Fragment9, { key: index }, /* @__PURE__ */ React70.createElement(
+  )), /* @__PURE__ */ React70.createElement(Divider6, null), /* @__PURE__ */ React70.createElement(Box3, { sx: { overflowY: "auto", height: 260, width: 220 } }, options13.length > 0 ? /* @__PURE__ */ React70.createElement(MenuList, { role: "listbox", tabIndex: 0 }, options13.map(([category, items3], index) => /* @__PURE__ */ React70.createElement(Fragment9, { key: index }, /* @__PURE__ */ React70.createElement(
     MenuSubheader2,
     {
       sx: { px: 1.5, typography: "caption", color: "text.tertiary" }
@@ -3145,7 +3121,7 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React70.createElem
   /* @__PURE__ */ React70.createElement(Typography3, { align: "center", variant: "subtitle2" }, __46("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React70.createElement("br", null), "\u201C", searchValue, "\u201D."),
   /* @__PURE__ */ React70.createElement(Typography3, { align: "center", variant: "caption" }, __46("Try something else.", "elementor"), "\xA0", /* @__PURE__ */ React70.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __46("Clear & try again", "elementor")))
 );
-var NoDynamicTags = () => /* @__PURE__ */ React70.createElement(Box4, { sx: { overflowY: "hidden", height: 297, width: 220 } }, /* @__PURE__ */ React70.createElement(Divider6, null), /* @__PURE__ */ React70.createElement(
+var NoDynamicTags = () => /* @__PURE__ */ React70.createElement(Box3, { sx: { overflowY: "hidden", height: 297, width: 220 } }, /* @__PURE__ */ React70.createElement(Divider6, null), /* @__PURE__ */ React70.createElement(
   Stack18,
   {
     gap: 1,
@@ -3183,7 +3159,7 @@ var DynamicSelectionControl = () => {
   const { bind, value } = useBoundProp5(dynamicPropTypeUtil);
   const [propValueFromHistory] = usePersistDynamicValue(bind);
   const { name: tagName = "" } = value;
-  const selectionPopoverId = useId4();
+  const selectionPopoverId = useId3();
   const selectionPopoverState = usePopupState3({ variant: "popover", popupId: selectionPopoverId });
   const dynamicTag = useDynamicTag(tagName);
   const removeDynamicTag = () => {
@@ -3192,7 +3168,7 @@ var DynamicSelectionControl = () => {
   if (!dynamicTag) {
     throw new Error(`Dynamic tag ${tagName} not found`);
   }
-  return /* @__PURE__ */ React71.createElement(Box5, null, /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React71.createElement(Box4, null, /* @__PURE__ */ React71.createElement(
     Tag,
     {
       fullWidth: true,
@@ -3222,7 +3198,7 @@ var DynamicSelectionControl = () => {
   ));
 };
 var DynamicSettingsPopover = ({ dynamicTag }) => {
-  const popupId = useId4();
+  const popupId = useId3();
   const settingsPopupState = usePopupState3({ variant: "popover", popupId });
   const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
   if (!hasDynamicSettings) {