@elementor/editor-ui 3.33.0-99 → 3.34.2

package/dist/index.js

@@ -32,6 +32,8 @@ var index_exports = {};
 __export(index_exports, {
   EditableField: () => EditableField,
   EllipsisWithTooltip: () => EllipsisWithTooltip,
+  Form: () => Form,
+  GlobalDialog: () => GlobalDialog,
   ITEM_HEIGHT: () => ITEM_HEIGHT,
   InfoAlert: () => InfoAlert,
   InfoTipCard: () => InfoTipCard,
@@ -41,10 +43,14 @@ __export(index_exports, {
   PopoverBody: () => PopoverBody,
   PopoverHeader: () => PopoverHeader,
   PopoverMenuList: () => PopoverMenuList,
-  PopoverSearch: () => PopoverSearch,
+  SaveChangesDialog: () => SaveChangesDialog,
+  SearchField: () => SearchField,
   StyledMenuList: () => StyledMenuList,
   ThemeProvider: () => ThemeProvider,
   WarningInfotip: () => WarningInfotip,
+  closeDialog: () => closeDialog,
+  openDialog: () => openDialog,
+  useDialog: () => useDialog,
   useEditable: () => useEditable
 });
 module.exports = __toCommonJS(index_exports);
@@ -208,7 +214,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,
     {
@@ -222,9 +233,8 @@ var MenuListItem = ({ children, ...props }) => {
       import_ui6.MenuItemText,
       {
         primary: children,
-        primaryTypographyProps: {
-          variant: "caption"
-        }
+        primaryTypographyProps,
+        ...menuItemTextProps
       }
     )
   );
@@ -269,7 +279,7 @@ var import_react6 = require("react");
 var React8 = __toESM(require("react"));
 var import_ui8 = require("@elementor/ui");
 var WarningInfotip = (0, import_react6.forwardRef)(
-  ({ children, open, title, text, placement, width, offset }, ref) => {
+  ({ children, open, title, text, placement, width, offset, hasError = true }, ref) => {
     return /* @__PURE__ */ React8.createElement(
       import_ui8.Infotip,
       {
@@ -284,22 +294,129 @@ 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", size: "small" }, title ? /* @__PURE__ */ React8.createElement(import_ui8.AlertTitle, null, title) : null, text)
+        content: /* @__PURE__ */ React8.createElement(
+          import_ui8.Alert,
+          {
+            color: hasError ? "error" : "secondary",
+            severity: "warning",
+            variant: "standard",
+            size: "small"
+          },
+          title ? /* @__PURE__ */ React8.createElement(import_ui8.AlertTitle, null, title) : null,
+          text
+        )
       },
       children
     );
   }
 );
 
-// src/components/popover/body.tsx
+// src/components/global-dialog/components/global-dialog.tsx
+var import_react7 = require("react");
 var React9 = __toESM(require("react"));
 var import_ui9 = require("@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] = (0, import_react7.useState)(null);
+  (0, import_react7.useEffect)(() => {
+    const unsubscribe = subscribeToDialogState(setContent);
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+  if (!content) {
+    return null;
+  }
+  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/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, sx }) => {
+  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, ...sx } }, /* @__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/form.tsx
+var React11 = __toESM(require("react"));
+var import_react9 = require("react");
+var Form = ({ children, onSubmit }) => {
+  const formRef = (0, import_react9.useRef)(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
+var React12 = __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 }) => {
-  return /* @__PURE__ */ React9.createElement(
-    import_ui9.Box,
+var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) => {
+  return /* @__PURE__ */ React12.createElement(
+    import_ui11.Box,
     {
       display: "flex",
       flexDirection: "column",
@@ -308,16 +425,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
-var React10 = __toESM(require("react"));
-var import_ui10 = require("@elementor/ui");
-var SIZE = "tiny";
+var React13 = __toESM(require("react"));
+var import_ui12 = require("@elementor/ui");
+var SIZE2 = "tiny";
 var PopoverHeader = ({ title, onClose, icon, actions }) => {
   const paddingAndSizing = {
     pl: 2,
@@ -325,23 +443,23 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
     py: 1.5,
     maxHeight: 36
   };
-  return /* @__PURE__ */ React10.createElement(import_ui10.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React10.createElement(import_ui10.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React10.createElement(import_ui10.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React10.createElement(import_ui10.CloseButton, { slotProps: { icon: { fontSize: SIZE } }, sx: { ml: "auto" }, onClick: onClose })));
+  return /* @__PURE__ */ React13.createElement(import_ui12.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React13.createElement(import_ui12.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React13.createElement(import_ui12.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React13.createElement(import_ui12.CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
 };
 
 // src/components/popover/menu-list.tsx
-var React11 = __toESM(require("react"));
-var import_react9 = require("react");
-var import_ui11 = require("@elementor/ui");
+var React14 = __toESM(require("react"));
+var import_react12 = 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_react7 = require("react");
+var import_react10 = require("react");
 var useScrollToSelected = ({
   selectedValue,
   items,
   virtualizer
 }) => {
-  (0, import_react7.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!selectedValue || items.length === 0) {
       return;
     }
@@ -353,10 +471,10 @@ var useScrollToSelected = ({
 };
 
 // src/hooks/use-scroll-top.ts
-var import_react8 = require("react");
+var import_react11 = require("react");
 var useScrollTop = ({ containerRef }) => {
-  const [scrollTop, setScrollTop] = (0, import_react8.useState)(0);
-  (0, import_react8.useEffect)(() => {
+  const [scrollTop, setScrollTop] = (0, import_react11.useState)(0);
+  (0, import_react11.useEffect)(() => {
     const container = containerRef.current;
     if (!container) {
       return;
@@ -395,10 +513,10 @@ var PopoverMenuList = ({
   noResultsComponent,
   menuListTemplate: CustomMenuList
 }) => {
-  const containerRef = (0, import_react9.useRef)(null);
+  const containerRef = (0, import_react12.useRef)(null);
   const scrollTop = useScrollTop({ containerRef });
   const MenuListComponent = CustomMenuList || StyledMenuList;
-  const stickyIndices = (0, import_react9.useMemo)(
+  const stickyIndices = (0, import_react12.useMemo)(
     () => items.reduce((categoryIndices, item, index) => {
       if (item.type === "category") {
         categoryIndices.push(index);
@@ -429,14 +547,15 @@ var PopoverMenuList = ({
     onChange
   });
   useScrollToSelected({ selectedValue, items, virtualizer });
-  return /* @__PURE__ */ React11.createElement(import_ui11.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React11.createElement(
+  const virtualItems = virtualizer.getVirtualItems();
+  return /* @__PURE__ */ React14.createElement(import_ui13.Box, { 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;
@@ -447,8 +566,8 @@ var PopoverMenuList = ({
       }
       if (item.type === "category") {
         const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
-        return /* @__PURE__ */ React11.createElement(
-          import_ui11.MenuSubheader,
+        return /* @__PURE__ */ React14.createElement(
+          import_ui13.MenuSubheader,
           {
             key: virtualRow.key,
             style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start),
@@ -457,13 +576,15 @@ var PopoverMenuList = ({
           item.label || item.value
         );
       }
-      return /* @__PURE__ */ React11.createElement(
-        "li",
+      const isDisabled = item.disabled;
+      return /* @__PURE__ */ React14.createElement(
+        import_ui13.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;
             }
@@ -471,7 +592,7 @@ var PopoverMenuList = ({
             onClose();
           },
           onKeyDown: (event) => {
-            if (event.key === "Enter") {
+            if (event.key === "Enter" && !isDisabled) {
               onSelect(item.value);
               onClose();
             }
@@ -485,7 +606,7 @@ var PopoverMenuList = ({
             }
           },
           tabIndex: isSelected ? 0 : tabIndexFallback,
-          style: {
+          sx: {
             transform: `translateY(${virtualRow.start + MENU_LIST_PADDING_TOP}px)`,
             ...itemStyle ? itemStyle(item) : {}
           }
@@ -495,7 +616,7 @@ var PopoverMenuList = ({
     })
   ));
 };
-var StyledMenuList = (0, import_ui11.styled)(import_ui11.MenuList)(({ theme }) => ({
+var StyledMenuList = (0, import_ui13.styled)(import_ui13.MenuList)(({ theme }) => ({
   "& > li": {
     height: ITEM_HEIGHT,
     width: "100%",
@@ -512,6 +633,9 @@ var StyledMenuList = (0, import_ui11.styled)(import_ui11.MenuList)(({ theme }) =
     '&[aria-selected="true"]': {
       backgroundColor: theme.palette.action.selected
     },
+    '&[aria-disabled="true"]': {
+      color: theme.palette.text.disabled
+    },
     cursor: "pointer",
     textOverflow: "ellipsis",
     position: "absolute",
@@ -522,58 +646,66 @@ var StyledMenuList = (0, import_ui11.styled)(import_ui11.MenuList)(({ theme }) =
   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);
+// src/components/save-changes-dialog.tsx
+var React15 = __toESM(require("react"));
+var import_react13 = require("react");
+var import_icons3 = require("@elementor/icons");
+var import_ui14 = require("@elementor/ui");
+var TITLE_ID = "save-changes-dialog";
+var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React15.createElement(import_ui14.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
+var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React15.createElement(
+  import_ui14.DialogTitle,
+  {
+    id: TITLE_ID,
+    display: "flex",
+    alignItems: "center",
+    gap: 1,
+    sx: { lineHeight: 1, justifyContent: "space-between" }
+  },
+  /* @__PURE__ */ React15.createElement(import_ui14.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React15.createElement(import_icons3.AlertTriangleFilledIcon, { color: "secondary" }), children),
+  onClose && /* @__PURE__ */ React15.createElement(import_ui14.IconButton, { onClick: onClose, size: "small" }, /* @__PURE__ */ React15.createElement(import_icons3.XIcon, null))
+);
+var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React15.createElement(import_ui14.DialogContent, null, children);
+var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React15.createElement(import_ui14.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
+var SaveChangesDialogActions = ({ actions }) => {
+  const [isConfirming, setIsConfirming] = (0, import_react13.useState)(false);
+  const { cancel, confirm, discard } = actions;
+  const onConfirm = async () => {
+    setIsConfirming(true);
+    await confirm.action();
+    setIsConfirming(false);
   };
-  return /* @__PURE__ */ React12.createElement(import_ui12.Box, { sx: { px: 2, pb: 1.5 } }, /* @__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 }))
-      }
-    }
-  ));
+  return /* @__PURE__ */ React15.createElement(import_ui14.DialogActions, null, cancel && /* @__PURE__ */ React15.createElement(import_ui14.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React15.createElement(import_ui14.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React15.createElement(import_ui14.Button, { 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] = (0, import_react13.useState)(false);
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+  return { isOpen, open, close };
 };
 
 // src/hooks/use-editable.ts
-var import_react11 = require("react");
+var import_react14 = require("react");
 var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
-  const [isEditing, setIsEditing] = (0, import_react11.useState)(false);
-  const [error, setError] = (0, import_react11.useState)(null);
+  const [isEditing, setIsEditing] = (0, import_react14.useState)(false);
+  const [error, setError] = (0, import_react14.useState)(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) {
@@ -599,7 +731,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) => {
@@ -608,11 +742,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,
@@ -633,8 +774,8 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
   };
 };
 var useSelection = (isEditing) => {
-  const ref = (0, import_react11.useRef)(null);
-  (0, import_react11.useEffect)(() => {
+  const ref = (0, import_react14.useRef)(null);
+  (0, import_react14.useEffect)(() => {
     if (isEditing) {
       selectAll(ref.current);
     }
@@ -655,6 +796,8 @@ var selectAll = (el) => {
 0 && (module.exports = {
   EditableField,
   EllipsisWithTooltip,
+  Form,
+  GlobalDialog,
   ITEM_HEIGHT,
   InfoAlert,
   InfoTipCard,
@@ -664,10 +807,14 @@ var selectAll = (el) => {
   PopoverBody,
   PopoverHeader,
   PopoverMenuList,
-  PopoverSearch,
+  SaveChangesDialog,
+  SearchField,
   StyledMenuList,
   ThemeProvider,
   WarningInfotip,
+  closeDialog,
+  openDialog,
+  useDialog,
   useEditable
 });
 //# sourceMappingURL=index.js.map