@elementor/editor-ui 3.33.0-99 → 3.34.2

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
       }
     )
   );
@@ -232,7 +240,7 @@ import { forwardRef as forwardRef5 } from "react";
 import * as React8 from "react";
 import { Alert as Alert2, AlertTitle, Infotip as Infotip2 } from "@elementor/ui";
 var WarningInfotip = forwardRef5(
-  ({ children, open, title, text, placement, width, offset }, ref) => {
+  ({ children, open, title, text, placement, width, offset, hasError = true }, ref) => {
     return /* @__PURE__ */ React8.createElement(
       Infotip2,
       {
@@ -247,22 +255,129 @@ var WarningInfotip = forwardRef5(
           modifiers: offset ? [{ name: "offset", options: { offset } }] : []
         },
         arrow: false,
-        content: /* @__PURE__ */ React8.createElement(Alert2, { color: "error", severity: "warning", variant: "standard", size: "small" }, title ? /* @__PURE__ */ React8.createElement(AlertTitle, null, title) : null, text)
+        content: /* @__PURE__ */ React8.createElement(
+          Alert2,
+          {
+            color: hasError ? "error" : "secondary",
+            severity: "warning",
+            variant: "standard",
+            size: "small"
+          },
+          title ? /* @__PURE__ */ React8.createElement(AlertTitle, null, title) : null,
+          text
+        )
       },
       children
     );
   }
 );
 
-// src/components/popover/body.tsx
+// src/components/global-dialog/components/global-dialog.tsx
+import { useEffect as useEffect3, useState as useState4 } from "react";
 import * as React9 from "react";
-import { Box as Box4 } from "@elementor/ui";
+import { Dialog as Dialog2 } from "@elementor/ui";
+
+// src/components/global-dialog/subscribers.ts
+var currentDialogState = null;
+var stateSubscribers = /* @__PURE__ */ new Set();
+var subscribeToDialogState = (callback) => {
+  stateSubscribers.add(callback);
+  callback(currentDialogState);
+  return () => stateSubscribers.delete(callback);
+};
+var notifySubscribers = () => {
+  stateSubscribers.forEach((callback) => callback(currentDialogState));
+};
+var openDialog = ({ component }) => {
+  currentDialogState = { component };
+  notifySubscribers();
+};
+var closeDialog = () => {
+  currentDialogState = null;
+  notifySubscribers();
+};
+
+// src/components/global-dialog/components/global-dialog.tsx
+var GlobalDialog = () => {
+  const [content, setContent] = useState4(null);
+  useEffect3(() => {
+    const unsubscribe = subscribeToDialogState(setContent);
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ React9.createElement(ThemeProvider, null, /* @__PURE__ */ React9.createElement(Dialog2, { role: "dialog", open: true, onClose: closeDialog, maxWidth: "sm", fullWidth: true }, content.component));
+};
+
+// src/components/search-field.tsx
+import * as React10 from "react";
+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, sx }) => {
+  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, ...sx } }, /* @__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/form.tsx
+import * as React11 from "react";
+import { useRef as useRef2 } from "react";
+var Form = ({ children, onSubmit }) => {
+  const formRef = useRef2(null);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSubmit?.();
+  };
+  const handleKeyDown = (e) => {
+    const { target } = e;
+    if (e.key === "Enter" && target instanceof HTMLInputElement && target.type !== "submit") {
+      e.preventDefault();
+      formRef.current?.requestSubmit();
+    }
+  };
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    /* @__PURE__ */ React11.createElement("form", { onSubmit: handleSubmit, ref: formRef, onKeyDown: handleKeyDown }, children)
+  );
+};
+
+// src/components/popover/body.tsx
+import * as React12 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 }) => {
-  return /* @__PURE__ */ React9.createElement(
-    Box4,
+var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) => {
+  return /* @__PURE__ */ React12.createElement(
+    Box5,
     {
       display: "flex",
       flexDirection: "column",
@@ -271,16 +386,17 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width }) => {
         overflow: "hidden",
         width: `${width ? width - SECTION_PADDING_INLINE : FALLBACK_POPOVER_WIDTH}px`,
         maxWidth: 496
-      }
+      },
+      id
     },
     children
   );
 };
 
 // src/components/popover/header.tsx
-import * as React10 from "react";
+import * as React13 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,
@@ -288,23 +404,23 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
     py: 1.5,
     maxHeight: 36
   };
-  return /* @__PURE__ */ React10.createElement(Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React10.createElement(Typography3, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React10.createElement(Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React10.createElement(CloseButton, { slotProps: { icon: { fontSize: SIZE } }, sx: { ml: "auto" }, onClick: onClose })));
+  return /* @__PURE__ */ React13.createElement(Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React13.createElement(Typography3, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React13.createElement(Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React13.createElement(CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
 };
 
 // src/components/popover/menu-list.tsx
-import * as React11 from "react";
-import { useMemo, useRef } from "react";
-import { Box as Box5, MenuList, MenuSubheader, styled as styled2 } from "@elementor/ui";
+import * as React14 from "react";
+import { useMemo, useRef as useRef3 } 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
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect4 } from "react";
 var useScrollToSelected = ({
   selectedValue,
   items,
   virtualizer
 }) => {
-  useEffect3(() => {
+  useEffect4(() => {
     if (!selectedValue || items.length === 0) {
       return;
     }
@@ -316,10 +432,10 @@ var useScrollToSelected = ({
 };
 
 // src/hooks/use-scroll-top.ts
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect5, useState as useState5 } from "react";
 var useScrollTop = ({ containerRef }) => {
-  const [scrollTop, setScrollTop] = useState4(0);
-  useEffect4(() => {
+  const [scrollTop, setScrollTop] = useState5(0);
+  useEffect5(() => {
     const container = containerRef.current;
     if (!container) {
       return;
@@ -358,7 +474,7 @@ var PopoverMenuList = ({
   noResultsComponent,
   menuListTemplate: CustomMenuList
 }) => {
-  const containerRef = useRef(null);
+  const containerRef = useRef3(null);
   const scrollTop = useScrollTop({ containerRef });
   const MenuListComponent = CustomMenuList || StyledMenuList;
   const stickyIndices = useMemo(
@@ -392,14 +508,15 @@ var PopoverMenuList = ({
     onChange
   });
   useScrollToSelected({ selectedValue, items, virtualizer });
-  return /* @__PURE__ */ React11.createElement(Box5, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React11.createElement(
+  const virtualItems = virtualizer.getVirtualItems();
+  return /* @__PURE__ */ React14.createElement(Box6, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React14.createElement(
     MenuListComponent,
     {
       role: "listbox",
       style: { height: `${virtualizer.getTotalSize()}px` },
       "data-testid": dataTestId
     },
-    virtualizer.getVirtualItems().map((virtualRow) => {
+    virtualItems.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;
@@ -410,7 +527,7 @@ var PopoverMenuList = ({
       }
       if (item.type === "category") {
         const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
-        return /* @__PURE__ */ React11.createElement(
+        return /* @__PURE__ */ React14.createElement(
           MenuSubheader,
           {
             key: virtualRow.key,
@@ -420,13 +537,15 @@ var PopoverMenuList = ({
           item.label || item.value
         );
       }
-      return /* @__PURE__ */ React11.createElement(
-        "li",
+      const isDisabled = item.disabled;
+      return /* @__PURE__ */ React14.createElement(
+        ListItem,
         {
           key: virtualRow.key,
           role: "option",
           "aria-selected": isSelected,
-          onClick: (e) => {
+          "aria-disabled": isDisabled,
+          onClick: isDisabled ? void 0 : (e) => {
             if (e.target.closest("button")) {
               return;
             }
@@ -434,7 +553,7 @@ var PopoverMenuList = ({
             onClose();
           },
           onKeyDown: (event) => {
-            if (event.key === "Enter") {
+            if (event.key === "Enter" && !isDisabled) {
               onSelect(item.value);
               onClose();
             }
@@ -448,7 +567,7 @@ var PopoverMenuList = ({
             }
           },
           tabIndex: isSelected ? 0 : tabIndexFallback,
-          style: {
+          sx: {
             transform: `translateY(${virtualRow.start + MENU_LIST_PADDING_TOP}px)`,
             ...itemStyle ? itemStyle(item) : {}
           }
@@ -475,6 +594,9 @@ var StyledMenuList = styled2(MenuList)(({ theme }) => ({
     '&[aria-selected="true"]': {
       backgroundColor: theme.palette.action.selected
     },
+    '&[aria-disabled="true"]': {
+      color: theme.palette.text.disabled
+    },
     cursor: "pointer",
     textOverflow: "ellipsis",
     position: "absolute",
@@ -485,58 +607,75 @@ var StyledMenuList = styled2(MenuList)(({ theme }) => ({
   position: "relative"
 }));
 
-// src/components/popover/search.tsx
-import * as React12 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 }) => {
-  const inputRef = useRef2(null);
-  const handleClear = () => {
-    onSearch("");
-    inputRef.current?.focus();
-  };
-  const handleInputChange = (event) => {
-    onSearch(event.target.value);
+// src/components/save-changes-dialog.tsx
+import * as React15 from "react";
+import { useState as useState6 } from "react";
+import { AlertTriangleFilledIcon, XIcon as XIcon2 } from "@elementor/icons";
+import {
+  Button as Button3,
+  Dialog as Dialog3,
+  DialogActions as DialogActions2,
+  DialogContent,
+  DialogContentText,
+  DialogTitle as DialogTitle2,
+  IconButton as IconButton2,
+  Stack as Stack2
+} from "@elementor/ui";
+var TITLE_ID = "save-changes-dialog";
+var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React15.createElement(Dialog3, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
+var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React15.createElement(
+  DialogTitle2,
+  {
+    id: TITLE_ID,
+    display: "flex",
+    alignItems: "center",
+    gap: 1,
+    sx: { lineHeight: 1, justifyContent: "space-between" }
+  },
+  /* @__PURE__ */ React15.createElement(Stack2, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React15.createElement(AlertTriangleFilledIcon, { color: "secondary" }), children),
+  onClose && /* @__PURE__ */ React15.createElement(IconButton2, { onClick: onClose, size: "small" }, /* @__PURE__ */ React15.createElement(XIcon2, null))
+);
+var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React15.createElement(DialogContent, null, children);
+var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React15.createElement(DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
+var SaveChangesDialogActions = ({ actions }) => {
+  const [isConfirming, setIsConfirming] = useState6(false);
+  const { cancel, confirm, discard } = actions;
+  const onConfirm = async () => {
+    setIsConfirming(true);
+    await confirm.action();
+    setIsConfirming(false);
   };
-  return /* @__PURE__ */ React12.createElement(Box6, { sx: { px: 2, pb: 1.5 } }, /* @__PURE__ */ React12.createElement(
-    TextField,
-    {
-      autoFocus: true,
-      fullWidth: true,
-      size: SIZE2,
-      value,
-      inputRef,
-      onChange: handleInputChange,
-      placeholder,
-      InputProps: {
-        startAdornment: /* @__PURE__ */ React12.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React12.createElement(SearchIcon, { fontSize: SIZE2 })),
-        endAdornment: value && /* @__PURE__ */ React12.createElement(IconButton, { size: SIZE2, onClick: handleClear, "aria-label": __2("Clear", "elementor") }, /* @__PURE__ */ React12.createElement(XIcon, { color: "action", fontSize: SIZE2 }))
-      }
-    }
-  ));
+  return /* @__PURE__ */ React15.createElement(DialogActions2, null, cancel && /* @__PURE__ */ React15.createElement(Button3, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React15.createElement(Button3, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React15.createElement(Button3, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
+};
+SaveChangesDialog.Title = SaveChangesDialogTitle;
+SaveChangesDialog.Content = SaveChangesDialogContent;
+SaveChangesDialog.ContentText = SaveChangesDialogContentText;
+SaveChangesDialog.Actions = SaveChangesDialogActions;
+var useDialog = () => {
+  const [isOpen, setIsOpen] = useState6(false);
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+  return { isOpen, open, close };
 };
 
 // src/hooks/use-editable.ts
-import { useEffect as useEffect5, useRef as useRef3, useState as useState5 } from "react";
+import { useEffect as useEffect6, useRef as useRef4, useState as useState7 } from "react";
 var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
-  const [isEditing, setIsEditing] = useState5(false);
-  const [error, setError] = useState5(null);
+  const [isEditing, setIsEditing] = useState7(false);
+  const [error, setError] = useState7(null);
   const ref = useSelection(isEditing);
   const isDirty = (newValue) => newValue !== value;
   const openEditMode = () => {
     setIsEditing(true);
   };
   const closeEditMode = () => {
-    ref.current?.blur();
     setError(null);
     onError?.(null);
     setIsEditing(false);
   };
   const submit = (newValue) => {
     if (!isDirty(newValue)) {
+      closeEditMode();
       return;
     }
     if (!error) {
@@ -562,7 +701,9 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
     }
     if (["Enter"].includes(event.key)) {
       event.preventDefault();
-      return submit(event.target.innerText);
+      if (!error) {
+        ref.current?.blur();
+      }
     }
   };
   const handleClick = (event) => {
@@ -571,11 +712,18 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
     }
     onClick?.(event);
   };
+  const handleBlur = () => {
+    if (error) {
+      closeEditMode();
+      return;
+    }
+    submit(ref.current.innerText);
+  };
   const listeners = {
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     onInput: onChange,
-    onBlur: closeEditMode
+    onBlur: handleBlur
   };
   const attributes = {
     value,
@@ -596,8 +744,8 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
   };
 };
 var useSelection = (isEditing) => {
-  const ref = useRef3(null);
-  useEffect5(() => {
+  const ref = useRef4(null);
+  useEffect6(() => {
     if (isEditing) {
       selectAll(ref.current);
     }
@@ -617,6 +765,8 @@ var selectAll = (el) => {
 export {
   EditableField,
   EllipsisWithTooltip,
+  Form,
+  GlobalDialog,
   ITEM_HEIGHT,
   InfoAlert,
   InfoTipCard,
@@ -626,10 +776,14 @@ export {
   PopoverBody,
   PopoverHeader,
   PopoverMenuList,
-  PopoverSearch,
+  SaveChangesDialog,
+  SearchField,
   StyledMenuList,
   ThemeProvider,
   WarningInfotip,
+  closeDialog,
+  openDialog,
+  useDialog,
   useEditable
 };
 //# sourceMappingURL=index.mjs.map

package/package.json

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

package/src/components/form.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { type FormEvent as FormEvent, type KeyboardEvent, type PropsWithChildren, useRef } from 'react';
+
+type Props = PropsWithChildren< {
+	onSubmit?: () => void;
+} >;
+export const Form = ( { children, onSubmit }: Props ) => {
+	const formRef = useRef< HTMLFormElement >( null );
+
+	const handleSubmit = ( e: FormEvent< HTMLFormElement > | SubmitEvent ) => {
+		e.preventDefault();
+		onSubmit?.();
+	};
+
+	const handleKeyDown = ( e: KeyboardEvent< HTMLFormElement > ) => {
+		const { target } = e;
+		if ( e.key === 'Enter' && target instanceof HTMLInputElement && target.type !== 'submit' ) {
+			e.preventDefault();
+
+			formRef.current?.requestSubmit();
+		}
+	};
+
+	return (
+		// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+		<form onSubmit={ handleSubmit } ref={ formRef } onKeyDown={ handleKeyDown }>
+			{ children }
+		</form>
+	);
+};