@elementor/editor-ui 3.33.0-156 → 3.33.0-158

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as React$1 from 'react';
 import { ReactNode, PropsWithChildren, ReactElement } from 'react';
-import { MenuItemProps, AlertProps, InfotipProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
+import { MenuItemProps, MenuItemTextProps, TypographyProps, AlertProps, InfotipProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
 import * as _emotion_styled from '@emotion/styled';
 
 type EllipsisWithTooltipProps<T extends React$1.ElementType> = {
@@ -23,7 +23,11 @@ declare function ThemeProvider({ children }: {
     children: React$1.ReactNode;
 }): React$1.JSX.Element;
 
-declare const MenuListItem: ({ children, ...props }: MenuItemProps) => React$1.JSX.Element;
+type MenuListItemProps = MenuItemProps & {
+    menuItemTextProps?: MenuItemTextProps;
+    primaryTypographyProps?: TypographyProps;
+};
+declare const MenuListItem: ({ children, menuItemTextProps, primaryTypographyProps, ...props }: MenuListItemProps) => React$1.JSX.Element;
 declare const MenuItemInfotip: React$1.ForwardRefExoticComponent<{
     showInfoTip?: boolean;
     children: React$1.ReactNode;
@@ -67,6 +71,14 @@ type DialogContent = {
 declare const openDialog: ({ component }: DialogContent) => void;
 declare const closeDialog: () => void;
 
+type Props = {
+    value: string;
+    onSearch: (search: string) => void;
+    placeholder: string;
+    id?: string;
+};
+declare const SearchField: ({ value, onSearch, placeholder, id }: Props) => React$1.JSX.Element;
+
 type PopoverBodyProps = PropsWithChildren<{
     height?: number | 'auto';
     width?: number;
@@ -111,14 +123,6 @@ declare const StyledMenuList: _emotion_styled.StyledComponent<any, {}, {
     ref?: React$1.Ref<any> | undefined;
 }>;
 
-type Props = {
-    value: string;
-    onSearch: (search: string) => void;
-    placeholder: string;
-    id?: string;
-};
-declare const PopoverSearch: ({ value, onSearch, placeholder, id }: Props) => React$1.JSX.Element;
-
 declare const SaveChangesDialog: {
     ({ children, onClose }: Pick<DialogProps, "children" | "onClose">): React$1.JSX.Element;
     Title: ({ children, onClose }: React$1.PropsWithChildren & {
@@ -171,4 +175,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
     };
 };
 
-export { EditableField, EllipsisWithTooltip, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PopoverSearch, SaveChangesDialog, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };
+export { EditableField, EllipsisWithTooltip, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, SaveChangesDialog, SearchField, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as React$1 from 'react';
 import { ReactNode, PropsWithChildren, ReactElement } from 'react';
-import { MenuItemProps, AlertProps, InfotipProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
+import { MenuItemProps, MenuItemTextProps, TypographyProps, AlertProps, InfotipProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
 import * as _emotion_styled from '@emotion/styled';
 
 type EllipsisWithTooltipProps<T extends React$1.ElementType> = {
@@ -23,7 +23,11 @@ declare function ThemeProvider({ children }: {
     children: React$1.ReactNode;
 }): React$1.JSX.Element;
 
-declare const MenuListItem: ({ children, ...props }: MenuItemProps) => React$1.JSX.Element;
+type MenuListItemProps = MenuItemProps & {
+    menuItemTextProps?: MenuItemTextProps;
+    primaryTypographyProps?: TypographyProps;
+};
+declare const MenuListItem: ({ children, menuItemTextProps, primaryTypographyProps, ...props }: MenuListItemProps) => React$1.JSX.Element;
 declare const MenuItemInfotip: React$1.ForwardRefExoticComponent<{
     showInfoTip?: boolean;
     children: React$1.ReactNode;
@@ -67,6 +71,14 @@ type DialogContent = {
 declare const openDialog: ({ component }: DialogContent) => void;
 declare const closeDialog: () => void;
 
+type Props = {
+    value: string;
+    onSearch: (search: string) => void;
+    placeholder: string;
+    id?: string;
+};
+declare const SearchField: ({ value, onSearch, placeholder, id }: Props) => React$1.JSX.Element;
+
 type PopoverBodyProps = PropsWithChildren<{
     height?: number | 'auto';
     width?: number;
@@ -111,14 +123,6 @@ declare const StyledMenuList: _emotion_styled.StyledComponent<any, {}, {
     ref?: React$1.Ref<any> | undefined;
 }>;
 
-type Props = {
-    value: string;
-    onSearch: (search: string) => void;
-    placeholder: string;
-    id?: string;
-};
-declare const PopoverSearch: ({ value, onSearch, placeholder, id }: Props) => React$1.JSX.Element;
-
 declare const SaveChangesDialog: {
     ({ children, onClose }: Pick<DialogProps, "children" | "onClose">): React$1.JSX.Element;
     Title: ({ children, onClose }: React$1.PropsWithChildren & {
@@ -171,4 +175,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
     };
 };
 
-export { EditableField, EllipsisWithTooltip, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PopoverSearch, SaveChangesDialog, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };
+export { EditableField, EllipsisWithTooltip, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, SaveChangesDialog, SearchField, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };

package/dist/index.js

@@ -42,8 +42,8 @@ __export(index_exports, {
   PopoverBody: () => PopoverBody,
   PopoverHeader: () => PopoverHeader,
   PopoverMenuList: () => PopoverMenuList,
-  PopoverSearch: () => PopoverSearch,
   SaveChangesDialog: () => SaveChangesDialog,
+  SearchField: () => SearchField,
   StyledMenuList: () => StyledMenuList,
   ThemeProvider: () => ThemeProvider,
   WarningInfotip: () => WarningInfotip,
@@ -213,7 +213,12 @@ var InfoAlert = (props) => /* @__PURE__ */ React5.createElement(
 );
 
 // src/components/menu-item.tsx
-var MenuListItem = ({ children, ...props }) => {
+var MenuListItem = ({
+  children,
+  menuItemTextProps,
+  primaryTypographyProps = { variant: "caption" },
+  ...props
+}) => {
   return /* @__PURE__ */ React6.createElement(
     import_ui6.MenuItem,
     {
@@ -227,9 +232,8 @@ var MenuListItem = ({ children, ...props }) => {
       import_ui6.MenuItemText,
       {
         primary: children,
-        primaryTypographyProps: {
-          variant: "caption"
-        }
+        primaryTypographyProps,
+        ...menuItemTextProps
       }
     )
   );
@@ -346,15 +350,50 @@ var GlobalDialog = () => {
   return /* @__PURE__ */ React9.createElement(ThemeProvider, null, /* @__PURE__ */ React9.createElement(import_ui9.Dialog, { role: "dialog", open: true, onClose: closeDialog, maxWidth: "sm", fullWidth: true }, content.component));
 };
 
-// src/components/popover/body.tsx
+// src/components/search-field.tsx
 var React10 = __toESM(require("react"));
+var import_react8 = require("react");
+var import_icons2 = require("@elementor/icons");
 var import_ui10 = require("@elementor/ui");
+var import_i18n2 = require("@wordpress/i18n");
+var SIZE = "tiny";
+var SearchField = ({ value, onSearch, placeholder, id }) => {
+  const inputRef = (0, import_react8.useRef)(null);
+  const handleClear = () => {
+    onSearch("");
+    inputRef.current?.focus();
+  };
+  const handleInputChange = (event) => {
+    onSearch(event.target.value);
+  };
+  return /* @__PURE__ */ React10.createElement(import_ui10.Box, { sx: { px: 2, pb: 1.5 } }, /* @__PURE__ */ React10.createElement(
+    import_ui10.TextField,
+    {
+      autoFocus: true,
+      fullWidth: true,
+      id,
+      size: SIZE,
+      value,
+      inputRef,
+      onChange: handleInputChange,
+      placeholder,
+      InputProps: {
+        startAdornment: /* @__PURE__ */ React10.createElement(import_ui10.InputAdornment, { position: "start" }, /* @__PURE__ */ React10.createElement(import_icons2.SearchIcon, { fontSize: SIZE })),
+        endAdornment: value && /* @__PURE__ */ React10.createElement(import_ui10.IconButton, { size: SIZE, onClick: handleClear, "aria-label": (0, import_i18n2.__)("Clear", "elementor") }, /* @__PURE__ */ React10.createElement(import_icons2.XIcon, { color: "action", fontSize: SIZE }))
+      }
+    }
+  ));
+};
+
+// src/components/popover/body.tsx
+var React11 = __toESM(require("react"));
+var import_ui11 = require("@elementor/ui");
 var SECTION_PADDING_INLINE = 32;
 var DEFAULT_POPOVER_HEIGHT = 348;
 var FALLBACK_POPOVER_WIDTH = 220;
 var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) => {
-  return /* @__PURE__ */ React10.createElement(
-    import_ui10.Box,
+  return /* @__PURE__ */ React11.createElement(
+    import_ui11.Box,
     {
       display: "flex",
       flexDirection: "column",
@@ -371,9 +410,9 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) =>
 };
 
 // src/components/popover/header.tsx
-var React11 = __toESM(require("react"));
-var import_ui11 = require("@elementor/ui");
-var SIZE = "tiny";
+var React12 = __toESM(require("react"));
+var import_ui12 = require("@elementor/ui");
+var SIZE2 = "tiny";
 var PopoverHeader = ({ title, onClose, icon, actions }) => {
   const paddingAndSizing = {
     pl: 2,
@@ -381,23 +420,23 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
     py: 1.5,
     maxHeight: 36
   };
-  return /* @__PURE__ */ React11.createElement(import_ui11.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React11.createElement(import_ui11.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React11.createElement(import_ui11.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React11.createElement(import_ui11.CloseButton, { slotProps: { icon: { fontSize: SIZE } }, sx: { ml: "auto" }, onClick: onClose })));
+  return /* @__PURE__ */ React12.createElement(import_ui12.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React12.createElement(import_ui12.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React12.createElement(import_ui12.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React12.createElement(import_ui12.CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
 };
 
 // src/components/popover/menu-list.tsx
-var React12 = __toESM(require("react"));
-var import_react10 = require("react");
-var import_ui12 = require("@elementor/ui");
+var React13 = __toESM(require("react"));
+var import_react11 = require("react");
+var import_ui13 = require("@elementor/ui");
 var import_react_virtual = require("@tanstack/react-virtual");
 
 // src/hooks/use-scroll-to-selected.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 var useScrollToSelected = ({
   selectedValue,
   items,
   virtualizer
 }) => {
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!selectedValue || items.length === 0) {
       return;
     }
@@ -409,10 +448,10 @@ var useScrollToSelected = ({
 };
 
 // src/hooks/use-scroll-top.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 var useScrollTop = ({ containerRef }) => {
-  const [scrollTop, setScrollTop] = (0, import_react9.useState)(0);
-  (0, import_react9.useEffect)(() => {
+  const [scrollTop, setScrollTop] = (0, import_react10.useState)(0);
+  (0, import_react10.useEffect)(() => {
     const container = containerRef.current;
     if (!container) {
       return;
@@ -451,10 +490,10 @@ var PopoverMenuList = ({
   noResultsComponent,
   menuListTemplate: CustomMenuList
 }) => {
-  const containerRef = (0, import_react10.useRef)(null);
+  const containerRef = (0, import_react11.useRef)(null);
   const scrollTop = useScrollTop({ containerRef });
   const MenuListComponent = CustomMenuList || StyledMenuList;
-  const stickyIndices = (0, import_react10.useMemo)(
+  const stickyIndices = (0, import_react11.useMemo)(
     () => items.reduce((categoryIndices, item, index) => {
       if (item.type === "category") {
         categoryIndices.push(index);
@@ -486,7 +525,7 @@ var PopoverMenuList = ({
   });
   useScrollToSelected({ selectedValue, items, virtualizer });
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React12.createElement(import_ui12.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(import_ui13.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React13.createElement(
     MenuListComponent,
     {
       role: "listbox",
@@ -504,8 +543,8 @@ var PopoverMenuList = ({
       }
       if (item.type === "category") {
         const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
-        return /* @__PURE__ */ React12.createElement(
-          import_ui12.MenuSubheader,
+        return /* @__PURE__ */ React13.createElement(
+          import_ui13.MenuSubheader,
           {
             key: virtualRow.key,
             style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start),
@@ -515,8 +554,8 @@ var PopoverMenuList = ({
         );
       }
       const isDisabled = item.disabled;
-      return /* @__PURE__ */ React12.createElement(
-        import_ui12.ListItem,
+      return /* @__PURE__ */ React13.createElement(
+        import_ui13.ListItem,
         {
           key: virtualRow.key,
           role: "option",
@@ -554,7 +593,7 @@ var PopoverMenuList = ({
     })
   ));
 };
-var StyledMenuList = (0, import_ui12.styled)(import_ui12.MenuList)(({ theme }) => ({
+var StyledMenuList = (0, import_ui13.styled)(import_ui13.MenuList)(({ theme }) => ({
   "& > li": {
     height: ITEM_HEIGHT,
     width: "100%",
@@ -584,41 +623,6 @@ var StyledMenuList = (0, import_ui12.styled)(import_ui12.MenuList)(({ theme }) =
   position: "relative"
 }));
 
-// src/components/popover/search.tsx
-var React13 = __toESM(require("react"));
-var import_react11 = require("react");
-var import_icons2 = require("@elementor/icons");
-var import_ui13 = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
-var SIZE2 = "tiny";
-var PopoverSearch = ({ value, onSearch, placeholder, id }) => {
-  const inputRef = (0, import_react11.useRef)(null);
-  const handleClear = () => {
-    onSearch("");
-    inputRef.current?.focus();
-  };
-  const handleInputChange = (event) => {
-    onSearch(event.target.value);
-  };
-  return /* @__PURE__ */ React13.createElement(import_ui13.Box, { sx: { px: 2, pb: 1.5 } }, /* @__PURE__ */ React13.createElement(
-    import_ui13.TextField,
-    {
-      autoFocus: true,
-      fullWidth: true,
-      id,
-      size: SIZE2,
-      value,
-      inputRef,
-      onChange: handleInputChange,
-      placeholder,
-      InputProps: {
-        startAdornment: /* @__PURE__ */ React13.createElement(import_ui13.InputAdornment, { position: "start" }, /* @__PURE__ */ React13.createElement(import_icons2.SearchIcon, { fontSize: SIZE2 })),
-        endAdornment: value && /* @__PURE__ */ React13.createElement(import_ui13.IconButton, { size: SIZE2, onClick: handleClear, "aria-label": (0, import_i18n2.__)("Clear", "elementor") }, /* @__PURE__ */ React13.createElement(import_icons2.XIcon, { color: "action", fontSize: SIZE2 }))
-      }
-    }
-  ));
-};
-
 // src/components/save-changes-dialog.tsx
 var React14 = __toESM(require("react"));
 var import_react12 = require("react");
@@ -770,8 +774,8 @@ var selectAll = (el) => {
   PopoverBody,
   PopoverHeader,
   PopoverMenuList,
-  PopoverSearch,
   SaveChangesDialog,
+  SearchField,
   StyledMenuList,
   ThemeProvider,
   WarningInfotip,

package/dist/index.mjs

@@ -152,7 +152,11 @@ function ThemeProvider({ children }) {
 // src/components/menu-item.tsx
 import * as React6 from "react";
 import { forwardRef as forwardRef4 } from "react";
-import { Infotip, MenuItem, MenuItemText } from "@elementor/ui";
+import {
+  Infotip,
+  MenuItem,
+  MenuItemText
+} from "@elementor/ui";
 
 // src/components/info-alert.tsx
 import * as React5 from "react";
@@ -171,7 +175,12 @@ var InfoAlert = (props) => /* @__PURE__ */ React5.createElement(
 );
 
 // src/components/menu-item.tsx
-var MenuListItem = ({ children, ...props }) => {
+var MenuListItem = ({
+  children,
+  menuItemTextProps,
+  primaryTypographyProps = { variant: "caption" },
+  ...props
+}) => {
   return /* @__PURE__ */ React6.createElement(
     MenuItem,
     {
@@ -185,9 +194,8 @@ var MenuListItem = ({ children, ...props }) => {
       MenuItemText,
       {
         primary: children,
-        primaryTypographyProps: {
-          variant: "caption"
-        }
+        primaryTypographyProps,
+        ...menuItemTextProps
       }
     )
   );
@@ -304,15 +312,50 @@ var GlobalDialog = () => {
   return /* @__PURE__ */ React9.createElement(ThemeProvider, null, /* @__PURE__ */ React9.createElement(Dialog2, { role: "dialog", open: true, onClose: closeDialog, maxWidth: "sm", fullWidth: true }, content.component));
 };
 
-// src/components/popover/body.tsx
+// src/components/search-field.tsx
 import * as React10 from "react";
-import { Box as Box4 } from "@elementor/ui";
+import { useRef } from "react";
+import { SearchIcon, XIcon } from "@elementor/icons";
+import { Box as Box4, IconButton, InputAdornment, TextField } from "@elementor/ui";
+import { __ as __2 } from "@wordpress/i18n";
+var SIZE = "tiny";
+var SearchField = ({ value, onSearch, placeholder, id }) => {
+  const inputRef = useRef(null);
+  const handleClear = () => {
+    onSearch("");
+    inputRef.current?.focus();
+  };
+  const handleInputChange = (event) => {
+    onSearch(event.target.value);
+  };
+  return /* @__PURE__ */ React10.createElement(Box4, { sx: { px: 2, pb: 1.5 } }, /* @__PURE__ */ React10.createElement(
+    TextField,
+    {
+      autoFocus: true,
+      fullWidth: true,
+      id,
+      size: SIZE,
+      value,
+      inputRef,
+      onChange: handleInputChange,
+      placeholder,
+      InputProps: {
+        startAdornment: /* @__PURE__ */ React10.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React10.createElement(SearchIcon, { fontSize: SIZE })),
+        endAdornment: value && /* @__PURE__ */ React10.createElement(IconButton, { size: SIZE, onClick: handleClear, "aria-label": __2("Clear", "elementor") }, /* @__PURE__ */ React10.createElement(XIcon, { color: "action", fontSize: SIZE }))
+      }
+    }
+  ));
+};
+
+// src/components/popover/body.tsx
+import * as React11 from "react";
+import { Box as Box5 } from "@elementor/ui";
 var SECTION_PADDING_INLINE = 32;
 var DEFAULT_POPOVER_HEIGHT = 348;
 var FALLBACK_POPOVER_WIDTH = 220;
 var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) => {
-  return /* @__PURE__ */ React10.createElement(
-    Box4,
+  return /* @__PURE__ */ React11.createElement(
+    Box5,
     {
       display: "flex",
       flexDirection: "column",
@@ -329,9 +372,9 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) =>
 };
 
 // src/components/popover/header.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { CloseButton, Stack, Typography as Typography3 } from "@elementor/ui";
-var SIZE = "tiny";
+var SIZE2 = "tiny";
 var PopoverHeader = ({ title, onClose, icon, actions }) => {
   const paddingAndSizing = {
     pl: 2,
@@ -339,13 +382,13 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
     py: 1.5,
     maxHeight: 36
   };
-  return /* @__PURE__ */ React11.createElement(Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React11.createElement(Typography3, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React11.createElement(Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React11.createElement(CloseButton, { slotProps: { icon: { fontSize: SIZE } }, sx: { ml: "auto" }, onClick: onClose })));
+  return /* @__PURE__ */ React12.createElement(Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React12.createElement(Typography3, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React12.createElement(Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React12.createElement(CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
 };
 
 // src/components/popover/menu-list.tsx
-import * as React12 from "react";
-import { useMemo, useRef } from "react";
-import { Box as Box5, ListItem, MenuList, MenuSubheader, styled as styled2 } from "@elementor/ui";
+import * as React13 from "react";
+import { useMemo, useRef as useRef2 } from "react";
+import { Box as Box6, ListItem, MenuList, MenuSubheader, styled as styled2 } from "@elementor/ui";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/hooks/use-scroll-to-selected.ts
@@ -409,7 +452,7 @@ var PopoverMenuList = ({
   noResultsComponent,
   menuListTemplate: CustomMenuList
 }) => {
-  const containerRef = useRef(null);
+  const containerRef = useRef2(null);
   const scrollTop = useScrollTop({ containerRef });
   const MenuListComponent = CustomMenuList || StyledMenuList;
   const stickyIndices = useMemo(
@@ -444,7 +487,7 @@ var PopoverMenuList = ({
   });
   useScrollToSelected({ selectedValue, items, virtualizer });
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React12.createElement(Box5, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(Box6, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React13.createElement(
     MenuListComponent,
     {
       role: "listbox",
@@ -462,7 +505,7 @@ var PopoverMenuList = ({
       }
       if (item.type === "category") {
         const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
-        return /* @__PURE__ */ React12.createElement(
+        return /* @__PURE__ */ React13.createElement(
           MenuSubheader,
           {
             key: virtualRow.key,
@@ -473,7 +516,7 @@ var PopoverMenuList = ({
         );
       }
       const isDisabled = item.disabled;
-      return /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React13.createElement(
         ListItem,
         {
           key: virtualRow.key,
@@ -542,41 +585,6 @@ var StyledMenuList = styled2(MenuList)(({ theme }) => ({
   position: "relative"
 }));
 
-// src/components/popover/search.tsx
-import * as React13 from "react";
-import { useRef as useRef2 } from "react";
-import { SearchIcon, XIcon } from "@elementor/icons";
-import { Box as Box6, IconButton, InputAdornment, TextField } from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
-var SIZE2 = "tiny";
-var PopoverSearch = ({ value, onSearch, placeholder, id }) => {
-  const inputRef = useRef2(null);
-  const handleClear = () => {
-    onSearch("");
-    inputRef.current?.focus();
-  };
-  const handleInputChange = (event) => {
-    onSearch(event.target.value);
-  };
-  return /* @__PURE__ */ React13.createElement(Box6, { sx: { px: 2, pb: 1.5 } }, /* @__PURE__ */ React13.createElement(
-    TextField,
-    {
-      autoFocus: true,
-      fullWidth: true,
-      id,
-      size: SIZE2,
-      value,
-      inputRef,
-      onChange: handleInputChange,
-      placeholder,
-      InputProps: {
-        startAdornment: /* @__PURE__ */ React13.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React13.createElement(SearchIcon, { fontSize: SIZE2 })),
-        endAdornment: value && /* @__PURE__ */ React13.createElement(IconButton, { size: SIZE2, onClick: handleClear, "aria-label": __2("Clear", "elementor") }, /* @__PURE__ */ React13.createElement(XIcon, { color: "action", fontSize: SIZE2 }))
-      }
-    }
-  ));
-};
-
 // src/components/save-changes-dialog.tsx
 import * as React14 from "react";
 import { useState as useState6 } from "react";
@@ -736,8 +744,8 @@ export {
   PopoverBody,
   PopoverHeader,
   PopoverMenuList,
-  PopoverSearch,
   SaveChangesDialog,
+  SearchField,
   StyledMenuList,
   ThemeProvider,
   WarningInfotip,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-ui",
   "description": "Elementor Editor UI",
-  "version": "3.33.0-156",
+  "version": "3.33.0-158",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,7 +37,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor-v1-adapters": "3.33.0-156",
+    "@elementor/editor-v1-adapters": "3.33.0-158",
     "@elementor/icons": "1.46.0",
     "@elementor/ui": "1.36.12",
     "@tanstack/react-virtual": "^3.13.3",

package/src/components/menu-item.tsx

@@ -1,10 +1,25 @@
 import * as React from 'react';
 import { forwardRef } from 'react';
-import { Infotip, MenuItem, type MenuItemProps, MenuItemText } from '@elementor/ui';
+import {
+	Infotip,
+	MenuItem,
+	type MenuItemProps,
+	MenuItemText,
+	type MenuItemTextProps,
+	type TypographyProps,
+} from '@elementor/ui';
 
 import { InfoAlert } from './info-alert';
-
-export const MenuListItem = ( { children, ...props }: MenuItemProps ) => {
+type MenuListItemProps = MenuItemProps & {
+	menuItemTextProps?: MenuItemTextProps;
+	primaryTypographyProps?: TypographyProps;
+};
+export const MenuListItem = ( {
+	children,
+	menuItemTextProps,
+	primaryTypographyProps = { variant: 'caption' },
+	...props
+}: MenuListItemProps ) => {
 	return (
 		<MenuItem
 			dense
@@ -15,9 +30,8 @@ export const MenuListItem = ( { children, ...props }: MenuItemProps ) => {
 		>
 			<MenuItemText
 				primary={ children }
-				primaryTypographyProps={ {
-					variant: 'caption',
-				} }
+				primaryTypographyProps={ primaryTypographyProps }
+				{ ...menuItemTextProps }
 			/>
 		</MenuItem>
 	);

package/src/components/popover/index.ts

@@ -2,4 +2,3 @@ export { PopoverBody } from './body';
 export { PopoverHeader } from './header';
 export { ITEM_HEIGHT, PopoverMenuList, StyledMenuList } from './menu-list';
 export type { PopoverMenuListProps, VirtualizedItem } from './menu-list';
-export { PopoverSearch } from './search';

package/src/components/{popover/search.tsx → search-field.tsx}

@@ -13,7 +13,7 @@ type Props = {
 	id?: string;
 };
 
-export const PopoverSearch = ( { value, onSearch, placeholder, id }: Props ) => {
+export const SearchField = ( { value, onSearch, placeholder, id }: Props ) => {
 	const inputRef = useRef< HTMLInputElement | null >( null );
 
 	const handleClear = () => {

package/src/index.ts

@@ -8,6 +8,8 @@ export { InfoTipCard } from './components/infotip-card';
 export { InfoAlert } from './components/info-alert';
 export { WarningInfotip } from './components/warning-infotip';
 export { GlobalDialog, openDialog, closeDialog } from './components/global-dialog';
+export { SearchField } from './components/search-field';
+
 export * from './components/popover';
 export * from './components/save-changes-dialog';