@elementor/editor-controls 3.33.0-120 → 3.33.0-121

package/dist/index.d.mts

@@ -90,8 +90,9 @@ declare const SelectControl: ControlComponent<({ options, onChange }: Props$5) =
 type Props$4 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
     propTypeUtil?: PropTypeUtil<string, string>;
     anchorEl?: HTMLElement | null;
+    id?: string;
 };
-declare const ColorControl: ControlComponent<({ propTypeUtil, anchorEl, slotProps, ...props }: Props$4) => React$1.JSX.Element>;
+declare const ColorControl: ControlComponent<({ propTypeUtil, anchorEl, slotProps, id, ...props }: Props$4) => React$1.JSX.Element>;
 
 type RenderContentProps = {
     size: ToggleButtonProps['size'];
@@ -199,8 +200,9 @@ type ItemSelectorProps = {
         fontSize: string;
     }>;
     disabledItems?: string[];
+    id?: string;
 };
-declare const ItemSelector: ({ itemsList, selectedItem, onItemChange, onClose, sectionWidth, title, itemStyle, onDebounce, icon, disabledItems, }: ItemSelectorProps) => React$1.JSX.Element;
+declare const ItemSelector: ({ itemsList, selectedItem, onItemChange, onClose, sectionWidth, title, itemStyle, onDebounce, icon, disabledItems, id, }: ItemSelectorProps) => React$1.JSX.Element;
 
 declare const UrlControl: ControlComponent<({ placeholder }: {
     placeholder?: string;

package/dist/index.d.ts

@@ -90,8 +90,9 @@ declare const SelectControl: ControlComponent<({ options, onChange }: Props$5) =
 type Props$4 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
     propTypeUtil?: PropTypeUtil<string, string>;
     anchorEl?: HTMLElement | null;
+    id?: string;
 };
-declare const ColorControl: ControlComponent<({ propTypeUtil, anchorEl, slotProps, ...props }: Props$4) => React$1.JSX.Element>;
+declare const ColorControl: ControlComponent<({ propTypeUtil, anchorEl, slotProps, id, ...props }: Props$4) => React$1.JSX.Element>;
 
 type RenderContentProps = {
     size: ToggleButtonProps['size'];
@@ -199,8 +200,9 @@ type ItemSelectorProps = {
         fontSize: string;
     }>;
     disabledItems?: string[];
+    id?: string;
 };
-declare const ItemSelector: ({ itemsList, selectedItem, onItemChange, onClose, sectionWidth, title, itemStyle, onDebounce, icon, disabledItems, }: ItemSelectorProps) => React$1.JSX.Element;
+declare const ItemSelector: ({ itemsList, selectedItem, onItemChange, onClose, sectionWidth, title, itemStyle, onDebounce, icon, disabledItems, id, }: ItemSelectorProps) => React$1.JSX.Element;
 
 declare const UrlControl: ControlComponent<({ placeholder }: {
     placeholder?: string;

package/dist/index.js

@@ -1184,7 +1184,7 @@ var React20 = __toESM(require("react"));
 var import_editor_props8 = require("@elementor/editor-props");
 var import_ui15 = require("@elementor/ui");
 var ColorControl = createControl(
-  ({ propTypeUtil = import_editor_props8.colorPropTypeUtil, anchorEl, slotProps = {}, ...props }) => {
+  ({ propTypeUtil = import_editor_props8.colorPropTypeUtil, anchorEl, slotProps = {}, id, ...props }) => {
     const { value, setValue, placeholder: boundPropPlaceholder, disabled } = useBoundProp(propTypeUtil);
     const placeholder = props.placeholder ?? boundPropPlaceholder;
     const handleChange = (selectedColor) => {
@@ -1193,6 +1193,7 @@ var ColorControl = createControl(
     return /* @__PURE__ */ React20.createElement(ControlActions, null, /* @__PURE__ */ React20.createElement(
       import_ui15.UnstableColorField,
       {
+        id,
         size: "tiny",
         fullWidth: true,
         value: value ?? "",
@@ -2785,7 +2786,8 @@ var ItemSelector = ({
   onDebounce = () => {
   },
   icon,
-  disabledItems
+  disabledItems,
+  id = "item-selector"
 }) => {
   const [searchValue, setSearchValue] = (0, import_react25.useState)("");
   const filteredItemsList = useFilteredItemsList(itemsList, searchValue, disabledItems);
@@ -2797,12 +2799,13 @@ var ItemSelector = ({
     setSearchValue("");
     onClose();
   };
-  return /* @__PURE__ */ React54.createElement(import_editor_ui4.PopoverBody, { width: sectionWidth }, /* @__PURE__ */ React54.createElement(import_editor_ui4.PopoverHeader, { title, onClose: handleClose, icon: /* @__PURE__ */ React54.createElement(IconComponent, { fontSize: "tiny" }) }), /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React54.createElement(import_editor_ui4.PopoverBody, { width: sectionWidth, id }, /* @__PURE__ */ React54.createElement(import_editor_ui4.PopoverHeader, { title, onClose: handleClose, icon: /* @__PURE__ */ React54.createElement(IconComponent, { fontSize: "tiny" }) }), /* @__PURE__ */ React54.createElement(
     import_editor_ui4.PopoverSearch,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: (0, import_i18n19.__)("Search", "elementor")
+      placeholder: (0, import_i18n19.__)("Search", "elementor"),
+      id: id + "-search"
     }
   ), /* @__PURE__ */ React54.createElement(import_ui41.Divider, null), filteredItemsList.length > 0 ? /* @__PURE__ */ React54.createElement(
     ItemList,
@@ -2923,6 +2926,7 @@ var FontFamilyControl = createControl(({ fontFamilies, sectionWidth }) => {
   return /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(ControlActions, null, /* @__PURE__ */ React55.createElement(
     import_ui42.UnstableTag,
     {
+      id: "font-family-control",
       variant: "outlined",
       label: fontFamily || placeholder,
       endIcon: /* @__PURE__ */ React55.createElement(import_icons11.ChevronDownIcon, { fontSize: "tiny" }),
@@ -2949,6 +2953,7 @@ var FontFamilyControl = createControl(({ fontFamilies, sectionWidth }) => {
     /* @__PURE__ */ React55.createElement(
       ItemSelector,
       {
+        id: "font-family-selector",
         itemsList: mapFontSubs,
         selectedItem: fontFamily,
         onItemChange: setFontFamily,