@elementor/editor-ui 0.11.0 → 0.12.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/editor-ui@0.11.0 build
+> @elementor/editor-ui@0.12.0 build
 > tsup --config=../../tsup.build.ts
 
 CLI Building entry: src/index.ts
@@ -10,13 +10,13 @@
 CLI Cleaning output folder
 ESM Build start
 CJS Build start
-CJS dist/index.js     14.50 KB
-CJS dist/index.js.map 23.69 KB
-CJS ⚡️ Build success in 97ms
-ESM dist/index.mjs     12.24 KB
-ESM dist/index.mjs.map 23.31 KB
-ESM ⚡️ Build success in 101ms
+CJS dist/index.js     21.64 KB
+CJS dist/index.js.map 37.24 KB
+CJS ⚡️ Build success in 259ms
+ESM dist/index.mjs     18.99 KB
+ESM dist/index.mjs.map 36.83 KB
+ESM ⚡️ Build success in 276ms
 DTS Build start
-DTS ⚡️ Build success in 16816ms
-DTS dist/index.d.mts 3.47 KB
-DTS dist/index.d.ts  3.47 KB
+DTS ⚡️ Build success in 21292ms
+DTS dist/index.d.mts 5.11 KB
+DTS dist/index.d.ts  5.11 KB

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @elementor/editor-ui
 
+## 0.12.0
+
+### Minor Changes
+
+- da0c4ca: Ability to search variables by name
+- 17b73ab: Update `@elementor/ui` version.
+- 7a4178f: Remove alert custom styling.
+- 8e18905: Update the autofocus and padding of the popover search component.
+- 3daa1c9: Extract font family content list to a standalone component inside the Editor UI package.
+- 40d00c2: Implement the Popover Menu List inside the Dynamic Tags and the Variables.
+- d5e9011: Implement the Popover Search component inside the Dynamic Tags, Font Families and the Variables.
+- f37c325: Extract the popover scrollable content box to a standalone component inside the Editor UI package.
+
 ## 0.11.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as React$1 from 'react';
 import { ReactNode, PropsWithChildren } from 'react';
-import { MenuItemProps, SxProps, InfotipProps } from '@elementor/ui';
+import { MenuItemProps, AlertProps, InfotipProps, MenuList } from '@elementor/ui';
+import * as _emotion_styled from '@emotion/styled';
 
 type EllipsisWithTooltipProps<T extends React$1.ElementType> = {
     maxWidth?: React$1.CSSProperties['maxWidth'];
@@ -45,10 +46,7 @@ type InfoTipCardProps = {
 };
 declare const InfoTipCard: ({ content, svgIcon, learnMoreButton, ctaButton }: InfoTipCardProps) => React$1.JSX.Element;
 
-declare const InfoAlert: ({ content, sx }: {
-    content: string;
-    sx?: SxProps;
-}) => React$1.JSX.Element;
+declare const InfoAlert: (props: AlertProps) => React$1.JSX.Element;
 
 interface WarningInfotipProps extends PropsWithChildren {
     open: boolean;
@@ -68,6 +66,46 @@ type PopoverHeaderProps = {
 };
 declare const PopoverHeader: ({ title, onClose, icon, actions }: PopoverHeaderProps) => React$1.JSX.Element;
 
+type VirtualizedItem<T, V extends string> = {
+    type: T;
+    value: V;
+    label?: string;
+    icon?: React$1.ReactNode;
+    secondaryText?: string;
+    [key: string]: unknown;
+};
+type PopoverMenuListProps<T, V extends string> = {
+    items: VirtualizedItem<T, V>[];
+    onSelect: (value: V) => void;
+    onClose: () => void;
+    selectedValue?: V;
+    itemStyle?: (item: VirtualizedItem<T, V>) => React$1.CSSProperties;
+    'data-testid'?: string;
+    onChange?: (params: {
+        getVirtualIndexes: () => number[];
+    }) => void;
+    menuListTemplate?: React$1.ComponentType<React$1.ComponentProps<typeof MenuList>>;
+    menuItemContentTemplate?: (item: VirtualizedItem<T, V>) => React$1.ReactNode;
+    noResultsComponent?: React$1.ReactNode;
+};
+declare const PopoverMenuList: <T, V extends string>({ items, onSelect, onClose, selectedValue, itemStyle, onChange, "data-testid": dataTestId, menuItemContentTemplate, noResultsComponent, menuListTemplate: CustomMenuList, }: PopoverMenuListProps<T, V>) => React$1.JSX.Element;
+declare const StyledMenuList: _emotion_styled.StyledComponent<any, {}, {
+    ref?: React$1.Ref<any> | undefined;
+}>;
+
+declare const PopoverScrollableContent: React$1.ForwardRefExoticComponent<{
+    height?: number;
+} & {
+    children?: React$1.ReactNode | undefined;
+} & React$1.RefAttributes<HTMLDivElement>>;
+
+type Props = {
+    value: string;
+    onSearch: (search: string) => void;
+    placeholder: string;
+};
+declare const PopoverSearch: ({ value, onSearch, placeholder }: Props) => React$1.JSX.Element;
+
 type UseEditableParams = {
     value: string;
     onSubmit: (value: string) => unknown;
@@ -94,4 +132,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
     };
 };
 
-export { EditableField, EllipsisWithTooltip, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverHeader, ThemeProvider, WarningInfotip, useEditable };
+export { EditableField, EllipsisWithTooltip, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PopoverScrollableContent, PopoverSearch, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, useEditable };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as React$1 from 'react';
 import { ReactNode, PropsWithChildren } from 'react';
-import { MenuItemProps, SxProps, InfotipProps } from '@elementor/ui';
+import { MenuItemProps, AlertProps, InfotipProps, MenuList } from '@elementor/ui';
+import * as _emotion_styled from '@emotion/styled';
 
 type EllipsisWithTooltipProps<T extends React$1.ElementType> = {
     maxWidth?: React$1.CSSProperties['maxWidth'];
@@ -45,10 +46,7 @@ type InfoTipCardProps = {
 };
 declare const InfoTipCard: ({ content, svgIcon, learnMoreButton, ctaButton }: InfoTipCardProps) => React$1.JSX.Element;
 
-declare const InfoAlert: ({ content, sx }: {
-    content: string;
-    sx?: SxProps;
-}) => React$1.JSX.Element;
+declare const InfoAlert: (props: AlertProps) => React$1.JSX.Element;
 
 interface WarningInfotipProps extends PropsWithChildren {
     open: boolean;
@@ -68,6 +66,46 @@ type PopoverHeaderProps = {
 };
 declare const PopoverHeader: ({ title, onClose, icon, actions }: PopoverHeaderProps) => React$1.JSX.Element;
 
+type VirtualizedItem<T, V extends string> = {
+    type: T;
+    value: V;
+    label?: string;
+    icon?: React$1.ReactNode;
+    secondaryText?: string;
+    [key: string]: unknown;
+};
+type PopoverMenuListProps<T, V extends string> = {
+    items: VirtualizedItem<T, V>[];
+    onSelect: (value: V) => void;
+    onClose: () => void;
+    selectedValue?: V;
+    itemStyle?: (item: VirtualizedItem<T, V>) => React$1.CSSProperties;
+    'data-testid'?: string;
+    onChange?: (params: {
+        getVirtualIndexes: () => number[];
+    }) => void;
+    menuListTemplate?: React$1.ComponentType<React$1.ComponentProps<typeof MenuList>>;
+    menuItemContentTemplate?: (item: VirtualizedItem<T, V>) => React$1.ReactNode;
+    noResultsComponent?: React$1.ReactNode;
+};
+declare const PopoverMenuList: <T, V extends string>({ items, onSelect, onClose, selectedValue, itemStyle, onChange, "data-testid": dataTestId, menuItemContentTemplate, noResultsComponent, menuListTemplate: CustomMenuList, }: PopoverMenuListProps<T, V>) => React$1.JSX.Element;
+declare const StyledMenuList: _emotion_styled.StyledComponent<any, {}, {
+    ref?: React$1.Ref<any> | undefined;
+}>;
+
+declare const PopoverScrollableContent: React$1.ForwardRefExoticComponent<{
+    height?: number;
+} & {
+    children?: React$1.ReactNode | undefined;
+} & React$1.RefAttributes<HTMLDivElement>>;
+
+type Props = {
+    value: string;
+    onSearch: (search: string) => void;
+    placeholder: string;
+};
+declare const PopoverSearch: ({ value, onSearch, placeholder }: Props) => React$1.JSX.Element;
+
 type UseEditableParams = {
     value: string;
     onSubmit: (value: string) => unknown;
@@ -94,4 +132,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
     };
 };
 
-export { EditableField, EllipsisWithTooltip, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverHeader, ThemeProvider, WarningInfotip, useEditable };
+export { EditableField, EllipsisWithTooltip, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PopoverScrollableContent, PopoverSearch, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, useEditable };

package/dist/index.js

@@ -38,6 +38,10 @@ __export(index_exports, {
   MenuItemInfotip: () => MenuItemInfotip,
   MenuListItem: () => MenuListItem,
   PopoverHeader: () => PopoverHeader,
+  PopoverMenuList: () => PopoverMenuList,
+  PopoverScrollableContent: () => PopoverScrollableContent,
+  PopoverSearch: () => PopoverSearch,
+  StyledMenuList: () => StyledMenuList,
   ThemeProvider: () => ThemeProvider,
   WarningInfotip: () => WarningInfotip,
   useEditable: () => useEditable
@@ -190,22 +194,17 @@ var import_ui6 = require("@elementor/ui");
 var React5 = __toESM(require("react"));
 var import_icons = require("@elementor/icons");
 var import_ui5 = require("@elementor/ui");
-var InfoAlert = ({ content, sx }) => {
-  return /* @__PURE__ */ React5.createElement(
-    import_ui5.Alert,
-    {
-      sx: (theme) => ({
-        ".MuiAlert-icon": { fontSize: "1.25rem", marginRight: theme.spacing(0.5) },
-        ...sx
-      }),
-      icon: /* @__PURE__ */ React5.createElement(import_icons.InfoCircleFilledIcon, { fontSize: "small", color: "secondary" }),
-      variant: "standard",
-      color: "secondary",
-      elevation: 0
-    },
-    /* @__PURE__ */ React5.createElement(import_ui5.Stack, null, /* @__PURE__ */ React5.createElement(import_ui5.Typography, { variant: "caption", color: "text.primary" }, content))
-  );
-};
+var InfoAlert = (props) => /* @__PURE__ */ React5.createElement(
+  import_ui5.Alert,
+  {
+    icon: /* @__PURE__ */ React5.createElement(import_icons.InfoCircleFilledIcon, { fontSize: "small", color: "secondary" }),
+    variant: "standard",
+    color: "secondary",
+    elevation: 0,
+    size: "small",
+    ...props
+  }
+);
 
 // src/components/menu-item.tsx
 var MenuListItem = ({ children, ...props }) => {
@@ -240,7 +239,7 @@ var MenuItemInfotip = (0, import_react5.forwardRef)(
         ref,
         placement: "right",
         arrow: false,
-        content: /* @__PURE__ */ React6.createElement(InfoAlert, { content, sx: { maxWidth: 325 } })
+        content: /* @__PURE__ */ React6.createElement(InfoAlert, { sx: { maxWidth: 325 } }, content)
       },
       /* @__PURE__ */ React6.createElement("div", { style: { pointerEvents: "initial", width: "100%" }, onClick: (e) => e.stopPropagation() }, children)
     );
@@ -274,19 +273,7 @@ var WarningInfotip = (0, import_react6.forwardRef)(
           modifiers: offset ? [{ name: "offset", options: { offset } }] : []
         },
         arrow: false,
-        content: /* @__PURE__ */ React8.createElement(
-          import_ui8.Alert,
-          {
-            color: "error",
-            severity: "warning",
-            variant: "standard",
-            sx: (theme) => ({
-              ".MuiAlert-icon": { fontSize: "1.25rem", marginRight: theme.spacing(0.5) }
-            })
-          },
-          title ? /* @__PURE__ */ React8.createElement(import_ui8.AlertTitle, null, title) : null,
-          /* @__PURE__ */ React8.createElement(import_ui8.Typography, { variant: "caption", sx: { color: "text.primary" } }, text)
-        )
+        content: /* @__PURE__ */ React8.createElement(import_ui8.Alert, { color: "error", severity: "warning", variant: "standard", size: "small" }, title ? /* @__PURE__ */ React8.createElement(import_ui8.AlertTitle, null, title) : null, text)
       },
       children
     );
@@ -299,11 +286,241 @@ var import_ui9 = require("@elementor/ui");
 var SIZE = "tiny";
 var PopoverHeader = ({ title, onClose, icon, actions }) => /* @__PURE__ */ React9.createElement(import_ui9.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React9.createElement(import_ui9.Typography, { variant: "subtitle2" }, title), /* @__PURE__ */ React9.createElement(import_ui9.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React9.createElement(import_ui9.CloseButton, { slotProps: { icon: { fontSize: SIZE } }, sx: { ml: "auto" }, onClick: onClose })));
 
-// src/hooks/use-editable.ts
+// src/components/popover/menu-list.tsx
+var React11 = __toESM(require("react"));
+var import_react9 = require("react");
+var import_ui11 = require("@elementor/ui");
+var import_react_virtual = require("@tanstack/react-virtual");
+
+// src/hooks/use-scroll-to-selected.ts
 var import_react7 = require("react");
+var useScrollToSelected = ({
+  selectedValue,
+  items,
+  virtualizer
+}) => {
+  (0, import_react7.useEffect)(() => {
+    if (!selectedValue || items.length === 0) {
+      return;
+    }
+    const selectedIndex = items.findIndex((item) => item.value === selectedValue);
+    if (selectedIndex !== -1) {
+      virtualizer.scrollToIndex(selectedIndex, { align: "center" });
+    }
+  }, [selectedValue, items, virtualizer]);
+};
+
+// src/hooks/use-scroll-top.ts
+var import_react8 = require("react");
+var useScrollTop = ({ containerRef }) => {
+  const [scrollTop, setScrollTop] = (0, import_react8.useState)(0);
+  (0, import_react8.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const handleScroll = () => {
+      setScrollTop(container.scrollTop);
+    };
+    container.addEventListener("scroll", handleScroll);
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [containerRef]);
+  return scrollTop;
+};
+
+// src/components/popover/scrollable-content.tsx
+var React10 = __toESM(require("react"));
+var import_ui10 = require("@elementor/ui");
+var PopoverScrollableContent = React10.forwardRef(
+  ({ children, height = 260 }, ref) => {
+    return /* @__PURE__ */ React10.createElement(import_ui10.Box, { ref, sx: { overflowY: "auto", height, width: 220 } }, children);
+  }
+);
+
+// src/components/popover/menu-list.tsx
+var ITEM_HEIGHT = 32;
+var LIST_ITEMS_BUFFER = 6;
+var MENU_LIST_PADDING_TOP = 8;
+var menuSubHeaderAbsoluteStyling = (start) => ({
+  position: "absolute",
+  transform: `translateY(${start + MENU_LIST_PADDING_TOP}px)`
+});
+var PopoverMenuList = ({
+  items,
+  onSelect,
+  onClose,
+  selectedValue,
+  itemStyle,
+  onChange,
+  "data-testid": dataTestId,
+  menuItemContentTemplate,
+  noResultsComponent,
+  menuListTemplate: CustomMenuList
+}) => {
+  const containerRef = (0, import_react9.useRef)(null);
+  const scrollTop = useScrollTop({ containerRef });
+  const MenuListComponent = CustomMenuList || StyledMenuList;
+  const stickyIndices = (0, import_react9.useMemo)(
+    () => items.reduce((categoryIndices, item, index) => {
+      if (item.type === "category") {
+        categoryIndices.push(index);
+      }
+      return categoryIndices;
+    }, []),
+    [items]
+  );
+  const getActiveItemIndices = (range) => {
+    const visibleAndStickyIndexes = [];
+    for (let i = range.startIndex; i <= range.endIndex; i++) {
+      visibleAndStickyIndexes.push(i);
+    }
+    stickyIndices.forEach((stickyIndex) => {
+      if (!visibleAndStickyIndexes.includes(stickyIndex)) {
+        visibleAndStickyIndexes.push(stickyIndex);
+      }
+    });
+    return visibleAndStickyIndexes.sort((a, b) => a - b);
+  };
+  const virtualizer = (0, import_react_virtual.useVirtualizer)({
+    count: items.length,
+    getScrollElement: () => containerRef.current,
+    estimateSize: () => ITEM_HEIGHT,
+    overscan: LIST_ITEMS_BUFFER,
+    rangeExtractor: getActiveItemIndices,
+    onChange
+  });
+  useScrollToSelected({ selectedValue, items, virtualizer });
+  return /* @__PURE__ */ React11.createElement(PopoverScrollableContent, { ref: containerRef }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React11.createElement(
+    MenuListComponent,
+    {
+      role: "listbox",
+      style: { height: `${virtualizer.getTotalSize()}px` },
+      "data-testid": dataTestId
+    },
+    virtualizer.getVirtualItems().map((virtualRow) => {
+      const item = items[virtualRow.index];
+      const isLast = virtualRow.index === items.length - 1;
+      const isFirst = items[0]?.type === "category" ? virtualRow.index === 1 : virtualRow.index === 0;
+      const isSelected = selectedValue === item.value;
+      const tabIndexFallback = !selectedValue ? 0 : -1;
+      if (!item) {
+        return null;
+      }
+      if (item.type === "category") {
+        const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
+        return /* @__PURE__ */ React11.createElement(
+          import_ui11.MenuSubheader,
+          {
+            key: virtualRow.key,
+            style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start)
+          },
+          item.label || item.value
+        );
+      }
+      return /* @__PURE__ */ React11.createElement(
+        "li",
+        {
+          key: virtualRow.key,
+          role: "option",
+          "aria-selected": isSelected,
+          onClick: (e) => {
+            if (e.target.closest("button")) {
+              return;
+            }
+            onSelect(item.value);
+            onClose();
+          },
+          onKeyDown: (event) => {
+            if (event.key === "Enter") {
+              onSelect(item.value);
+              onClose();
+            }
+            if (event.key === "ArrowDown" && isLast) {
+              event.preventDefault();
+              event.stopPropagation();
+            }
+            if (event.key === "ArrowUp" && isFirst) {
+              event.preventDefault();
+              event.stopPropagation();
+            }
+          },
+          tabIndex: isSelected ? 0 : tabIndexFallback,
+          style: {
+            transform: `translateY(${virtualRow.start + MENU_LIST_PADDING_TOP}px)`,
+            ...itemStyle ? itemStyle(item) : {}
+          }
+        },
+        menuItemContentTemplate ? menuItemContentTemplate(item) : item.label || item.value
+      );
+    })
+  ));
+};
+var StyledMenuList = (0, import_ui11.styled)(import_ui11.MenuList)(({ theme }) => ({
+  "& > li": {
+    height: ITEM_HEIGHT,
+    width: "100%",
+    display: "flex",
+    alignItems: "center"
+  },
+  '& > [role="option"]': {
+    ...theme.typography.caption,
+    lineHeight: "inherit",
+    padding: theme.spacing(0.75, 2, 0.75, 4),
+    "&:hover, &:focus": {
+      backgroundColor: theme.palette.action.hover
+    },
+    '&[aria-selected="true"]': {
+      backgroundColor: theme.palette.action.selected
+    },
+    cursor: "pointer",
+    textOverflow: "ellipsis",
+    position: "absolute",
+    top: 0,
+    left: 0
+  },
+  width: "100%",
+  position: "relative"
+}));
+
+// src/components/popover/search.tsx
+var React12 = __toESM(require("react"));
+var import_react10 = require("react");
+var import_icons2 = require("@elementor/icons");
+var import_ui12 = require("@elementor/ui");
+var import_i18n2 = require("@wordpress/i18n");
+var SIZE2 = "tiny";
+var PopoverSearch = ({ value, onSearch, placeholder }) => {
+  const inputRef = (0, import_react10.useRef)(null);
+  const handleClear = () => {
+    onSearch("");
+    inputRef.current?.focus();
+  };
+  const handleInputChange = (event) => {
+    onSearch(event.target.value);
+  };
+  return /* @__PURE__ */ React12.createElement(import_ui12.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React12.createElement(
+    import_ui12.TextField,
+    {
+      autoFocus: true,
+      fullWidth: true,
+      size: SIZE2,
+      value,
+      inputRef,
+      onChange: handleInputChange,
+      placeholder,
+      InputProps: {
+        startAdornment: /* @__PURE__ */ React12.createElement(import_ui12.InputAdornment, { position: "start" }, /* @__PURE__ */ React12.createElement(import_icons2.SearchIcon, { fontSize: SIZE2 })),
+        endAdornment: value && /* @__PURE__ */ React12.createElement(import_ui12.IconButton, { size: SIZE2, onClick: handleClear, "aria-label": (0, import_i18n2.__)("Clear", "elementor") }, /* @__PURE__ */ React12.createElement(import_icons2.XIcon, { color: "action", fontSize: SIZE2 }))
+      }
+    }
+  ));
+};
+
+// src/hooks/use-editable.ts
+var import_react11 = require("react");
 var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
-  const [isEditing, setIsEditing] = (0, import_react7.useState)(false);
-  const [error, setError] = (0, import_react7.useState)(null);
+  const [isEditing, setIsEditing] = (0, import_react11.useState)(false);
+  const [error, setError] = (0, import_react11.useState)(null);
   const ref = useSelection(isEditing);
   const isDirty = (newValue) => newValue !== value;
   const openEditMode = () => {
@@ -376,8 +593,8 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
   };
 };
 var useSelection = (isEditing) => {
-  const ref = (0, import_react7.useRef)(null);
-  (0, import_react7.useEffect)(() => {
+  const ref = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
     if (isEditing) {
       selectAll(ref.current);
     }
@@ -404,6 +621,10 @@ var selectAll = (el) => {
   MenuItemInfotip,
   MenuListItem,
   PopoverHeader,
+  PopoverMenuList,
+  PopoverScrollableContent,
+  PopoverSearch,
+  StyledMenuList,
   ThemeProvider,
   WarningInfotip,
   useEditable