@elementor/editor-controls 4.4.0-1086 → 4.4.0-1088

package/dist/index.mjs

@@ -9699,8 +9699,69 @@ var AttachmentTypeControl = createControl(({ label, options }) => {
   ))));
 });
 
-// src/controls/grid-span-control.tsx
+// src/controls/notice-control.tsx
 import * as React128 from "react";
+import { useState as useState23 } from "react";
+import { ajax } from "@elementor/editor-v1-adapters";
+import { BulbIcon } from "@elementor/icons";
+import { Alert as Alert3, AlertAction as AlertAction2, AlertTitle as AlertTitle4, styled as styled13, Typography as Typography12 } from "@elementor/ui";
+var NoticeTitle = styled13(AlertTitle4)({
+  "&.MuiAlertTitle-root.MuiAlertTitle-root": {
+    marginBottom: 4,
+    fontStyle: "italic"
+  }
+});
+var markNoticeAsDismissedInSession = (dismissId) => {
+  const dismissedNotices = window.elementor?.config?.user?.dismissed_editor_notices;
+  if (dismissedNotices && !dismissedNotices.includes(dismissId)) {
+    dismissedNotices.push(dismissId);
+  }
+};
+var NoticeControl = createControl(
+  ({ noticeType = "info", heading, content, dismissible, buttonText, buttonUrl }) => {
+    const [isDismissed, setIsDismissed] = useState23(false);
+    if (isDismissed || !content) {
+      return null;
+    }
+    const severity = noticeType === "danger" ? "error" : noticeType;
+    const icon = noticeType === "info" ? /* @__PURE__ */ React128.createElement(BulbIcon, { fontSize: "inherit" }) : void 0;
+    const handleDismiss = () => {
+      setIsDismissed(true);
+      if (!dismissible) {
+        return;
+      }
+      markNoticeAsDismissedInSession(dismissible);
+      ajax.load({
+        action: "dismissed_editor_notices",
+        unique_id: `dismiss-editor-notice-${dismissible}`,
+        data: { dismissId: dismissible }
+      }).catch(() => {
+      });
+    };
+    const handleActionClick = () => {
+      setIsDismissed(true);
+      if (dismissible) {
+        markNoticeAsDismissedInSession(dismissible);
+      }
+    };
+    return /* @__PURE__ */ React128.createElement(Alert3, { variant: "outlined", severity, icon, size: "small", onClose: handleDismiss }, heading && /* @__PURE__ */ React128.createElement(NoticeTitle, null, heading), /* @__PURE__ */ React128.createElement(Typography12, { variant: "caption", color: "textSecondary", sx: { fontStyle: "italic" } }, content), buttonText && buttonUrl && /* @__PURE__ */ React128.createElement(
+      AlertAction2,
+      {
+        variant: "contained",
+        color: severity,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        href: buttonUrl,
+        onClick: handleActionClick,
+        sx: { mt: 2 }
+      },
+      buttonText
+    ));
+  }
+);
+
+// src/controls/grid-span-control.tsx
+import * as React129 from "react";
 import { spanPropTypeUtil } from "@elementor/editor-props";
 import { TextField as TextField13 } from "@elementor/ui";
 var GridSpanControl = createControl(
@@ -9719,7 +9780,7 @@ var GridSpanControl = createControl(
       setValue(next === "" ? null : next);
     };
     const placeholder = propPlaceholder ?? boundPlaceholder ?? `e.g: 'span 2' or '1 / 3'`;
-    return /* @__PURE__ */ React128.createElement(ControlActions, null, /* @__PURE__ */ React128.createElement(
+    return /* @__PURE__ */ React129.createElement(ControlActions, null, /* @__PURE__ */ React129.createElement(
       TextField13,
       {
         size: "tiny",
@@ -9740,15 +9801,15 @@ var GridSpanControl = createControl(
 );
 
 // src/components/promotions/display-conditions-control.tsx
-import * as React130 from "react";
+import * as React131 from "react";
 import { useRef as useRef32 } from "react";
 import { SitemapIcon } from "@elementor/icons";
 import { IconButton as IconButton10, Stack as Stack25, Tooltip as Tooltip12 } from "@elementor/ui";
 import { __ as __66 } from "@wordpress/i18n";
 
 // src/components/promotions/promotion-trigger.tsx
-import * as React129 from "react";
-import { forwardRef as forwardRef12, useCallback as useCallback5, useImperativeHandle, useState as useState23 } from "react";
+import * as React130 from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback5, useImperativeHandle, useState as useState24 } from "react";
 import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
 import { Box as Box33 } from "@elementor/ui";
 function getV4Promotion(key) {
@@ -9756,7 +9817,7 @@ function getV4Promotion(key) {
 }
 var PromotionTrigger = forwardRef12(
   ({ promotionKey, children, trackingData }, ref) => {
-    const [isOpen, setIsOpen] = useState23(false);
+    const [isOpen, setIsOpen] = useState24(false);
     const promotion = getV4Promotion(promotionKey);
     const toggle = useCallback5(() => {
       setIsOpen((prev) => {
@@ -9767,7 +9828,7 @@ var PromotionTrigger = forwardRef12(
       });
     }, [trackingData]);
     useImperativeHandle(ref, () => ({ toggle }), [toggle]);
-    return /* @__PURE__ */ React129.createElement(React129.Fragment, null, promotion && /* @__PURE__ */ React129.createElement(
+    return /* @__PURE__ */ React130.createElement(React130.Fragment, null, promotion && /* @__PURE__ */ React130.createElement(
       PromotionInfotip,
       {
         title: promotion.title,
@@ -9781,7 +9842,7 @@ var PromotionTrigger = forwardRef12(
         },
         onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
-      /* @__PURE__ */ React129.createElement(
+      /* @__PURE__ */ React130.createElement(
         Box33,
         {
           onClick: (e) => {
@@ -9790,7 +9851,7 @@ var PromotionTrigger = forwardRef12(
           },
           sx: { cursor: "pointer", display: "inline-flex" }
         },
-        children ?? /* @__PURE__ */ React129.createElement(PromotionChip2, null)
+        children ?? /* @__PURE__ */ React130.createElement(PromotionChip2, null)
       )
     ));
   }
@@ -9801,7 +9862,7 @@ var ARIA_LABEL = __66("Display Conditions", "elementor");
 var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
   const triggerRef = useRef32(null);
-  return /* @__PURE__ */ React130.createElement(
+  return /* @__PURE__ */ React131.createElement(
     Stack25,
     {
       direction: "row",
@@ -9811,8 +9872,8 @@ var DisplayConditionsControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React130.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
-    /* @__PURE__ */ React130.createElement(Tooltip12, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React130.createElement(
+    /* @__PURE__ */ React131.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
+    /* @__PURE__ */ React131.createElement(Tooltip12, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React131.createElement(
       IconButton10,
       {
         size: "tiny",
@@ -9825,13 +9886,13 @@ var DisplayConditionsControl = createControl(() => {
           borderRadius: 1
         }
       },
-      /* @__PURE__ */ React130.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
+      /* @__PURE__ */ React131.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
     ))
   );
 });
 
 // src/components/promotions/attributes-control.tsx
-import * as React131 from "react";
+import * as React132 from "react";
 import { useRef as useRef33 } from "react";
 import { PlusIcon as PlusIcon4 } from "@elementor/icons";
 import { Stack as Stack26, Tooltip as Tooltip13 } from "@elementor/ui";
@@ -9840,7 +9901,7 @@ var ARIA_LABEL2 = __67("Attributes", "elementor");
 var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
   const triggerRef = useRef33(null);
-  return /* @__PURE__ */ React131.createElement(
+  return /* @__PURE__ */ React132.createElement(
     Stack26,
     {
       direction: "row",
@@ -9850,8 +9911,8 @@ var AttributesControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React131.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
-    /* @__PURE__ */ React131.createElement(Tooltip13, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React131.createElement(
+    /* @__PURE__ */ React132.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
+    /* @__PURE__ */ React132.createElement(Tooltip13, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React132.createElement(
       PlusIcon4,
       {
         "aria-label": ARIA_LABEL2,
@@ -9865,18 +9926,18 @@ var AttributesControl = createControl(() => {
 });
 
 // src/components/icon-buttons/clear-icon-button.tsx
-import * as React132 from "react";
+import * as React133 from "react";
 import { BrushBigIcon } from "@elementor/icons";
-import { IconButton as IconButton11, styled as styled13, Tooltip as Tooltip14 } from "@elementor/ui";
-var CustomIconButton = styled13(IconButton11)(({ theme }) => ({
+import { IconButton as IconButton11, styled as styled14, Tooltip as Tooltip14 } from "@elementor/ui";
+var CustomIconButton = styled14(IconButton11)(({ theme }) => ({
   width: theme.spacing(2.5),
   height: theme.spacing(2.5)
 }));
-var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React132.createElement(Tooltip14, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React132.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React132.createElement(BrushBigIcon, { fontSize: size })));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React133.createElement(Tooltip14, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React133.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React133.createElement(BrushBigIcon, { fontSize: size })));
 
 // src/components/repeater/repeater.tsx
-import * as React133 from "react";
-import { useEffect as useEffect21, useState as useState24 } from "react";
+import * as React134 from "react";
+import { useEffect as useEffect21, useState as useState25 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon5, XIcon as XIcon4 } from "@elementor/icons";
 import {
   bindPopover as bindPopover9,
@@ -9906,7 +9967,7 @@ var Repeater3 = ({
   isSortable = true,
   adornment = ControlAdornments
 }) => {
-  const [openItem, setOpenItem] = useState24(initialOpenItem);
+  const [openItem, setOpenItem] = useState25(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -9969,7 +10030,7 @@ var Repeater3 = ({
   };
   const isButtonDisabled = disabled || disableAddItemButton;
   const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
-  const addButton = /* @__PURE__ */ React133.createElement(
+  const addButton = /* @__PURE__ */ React134.createElement(
     IconButton12,
     {
       size: SIZE12,
@@ -9980,9 +10041,9 @@ var Repeater3 = ({
       onClick: addRepeaterItem,
       "aria-label": __68("Add item", "elementor")
     },
-    /* @__PURE__ */ React133.createElement(PlusIcon5, { fontSize: SIZE12 })
+    /* @__PURE__ */ React134.createElement(PlusIcon5, { fontSize: SIZE12 })
   );
-  return /* @__PURE__ */ React133.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React133.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React133.createElement(
+  return /* @__PURE__ */ React134.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React134.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React134.createElement(
     Infotip4,
     {
       placement: "right",
@@ -9990,20 +10051,20 @@ var Repeater3 = ({
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React133.createElement(Box34, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
-  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React133.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
+    /* @__PURE__ */ React134.createElement(Box34, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
+  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React134.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
     const index = uniqueKeys.indexOf(key);
     const value = items2[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React133.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React133.createElement(
+    return /* @__PURE__ */ React134.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React134.createElement(
       RepeaterItem,
       {
         disabled,
         propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React133.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React133.createElement(itemSettings.Label, { value, index })),
-        startIcon: /* @__PURE__ */ React133.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React133.createElement(itemSettings.Icon, { value })),
+        label: /* @__PURE__ */ React134.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React134.createElement(itemSettings.Label, { value, index })),
+        startIcon: /* @__PURE__ */ React134.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React134.createElement(itemSettings.Icon, { value })),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -10017,7 +10078,7 @@ var Repeater3 = ({
         actions: itemSettings.actions,
         value
       },
-      (props) => /* @__PURE__ */ React133.createElement(
+      (props) => /* @__PURE__ */ React134.createElement(
         itemSettings.Content,
         {
           ...props,
@@ -10062,7 +10123,7 @@ var RepeaterItem = ({
   const duplicateLabel = __68("Duplicate", "elementor");
   const toggleLabel = propDisabled ? __68("Show", "elementor") : __68("Hide", "elementor");
   const removeLabel = __68("Remove", "elementor");
-  return /* @__PURE__ */ React133.createElement(Box34, { sx: { display: "contents" } }, /* @__PURE__ */ React133.createElement(
+  return /* @__PURE__ */ React134.createElement(Box34, { sx: { display: "contents" } }, /* @__PURE__ */ React134.createElement(
     RepeaterTag,
     {
       disabled,
@@ -10077,12 +10138,12 @@ var RepeaterItem = ({
         }
       },
       startIcon,
-      actions: /* @__PURE__ */ React133.createElement(React133.Fragment, null, showDuplicate && /* @__PURE__ */ React133.createElement(Tooltip15, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React133.createElement(IconButton12, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React133.createElement(CopyIcon2, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React133.createElement(Tooltip15, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React133.createElement(IconButton12, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React133.createElement(EyeOffIcon2, { fontSize: SIZE12 }) : /* @__PURE__ */ React133.createElement(EyeIcon2, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React133.createElement(Tooltip15, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React133.createElement(IconButton12, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React133.createElement(XIcon4, { fontSize: SIZE12 }))))
+      actions: /* @__PURE__ */ React134.createElement(React134.Fragment, null, showDuplicate && /* @__PURE__ */ React134.createElement(Tooltip15, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React134.createElement(IconButton12, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React134.createElement(CopyIcon2, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React134.createElement(Tooltip15, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React134.createElement(IconButton12, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React134.createElement(EyeOffIcon2, { fontSize: SIZE12 }) : /* @__PURE__ */ React134.createElement(EyeIcon2, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React134.createElement(Tooltip15, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React134.createElement(IconButton12, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React134.createElement(XIcon4, { fontSize: SIZE12 }))))
     }
-  ), /* @__PURE__ */ React133.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React133.createElement(Box34, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React134.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React134.createElement(Box34, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen, onPopoverClose) => {
-  const [ref, setRef] = useState24(null);
+  const [ref, setRef] = useState25(null);
   const popoverState = usePopupState13({ variant: "popover" });
   const popoverProps = bindPopover9(popoverState);
   useEffect21(() => {
@@ -10104,7 +10165,7 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
 };
 
 // src/components/size/unstable-size-field.tsx
-import * as React136 from "react";
+import * as React137 from "react";
 import { InputAdornment as InputAdornment6 } from "@elementor/ui";
 
 // src/hooks/use-size-value.ts
@@ -10147,10 +10208,10 @@ var differsFromExternal = (newState, externalState) => {
 };
 
 // src/components/size/unit-select.tsx
-import * as React134 from "react";
+import * as React135 from "react";
 import { useId as useId5 } from "react";
 import { MenuListItem as MenuListItem8 } from "@elementor/editor-ui";
-import { bindMenu as bindMenu4, bindTrigger as bindTrigger8, Button as Button7, Menu as Menu5, styled as styled14, usePopupState as usePopupState14 } from "@elementor/ui";
+import { bindMenu as bindMenu4, bindTrigger as bindTrigger8, Button as Button7, Menu as Menu5, styled as styled15, usePopupState as usePopupState14 } from "@elementor/ui";
 var menuItemContentStyles2 = {
   display: "flex",
   flexDirection: "column",
@@ -10165,7 +10226,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
     onClick(options[index]);
     popupState.close();
   };
-  return /* @__PURE__ */ React134.createElement(React134.Fragment, null, /* @__PURE__ */ React134.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...bindTrigger8(popupState) }, value), /* @__PURE__ */ React134.createElement(Menu5, { MenuListProps: { dense: true }, ...bindMenu4(popupState) }, options.map((option, index) => /* @__PURE__ */ React134.createElement(
+  return /* @__PURE__ */ React135.createElement(React135.Fragment, null, /* @__PURE__ */ React135.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...bindTrigger8(popupState) }, value), /* @__PURE__ */ React135.createElement(Menu5, { MenuListProps: { dense: true }, ...bindMenu4(popupState) }, options.map((option, index) => /* @__PURE__ */ React135.createElement(
     MenuListItem8,
     {
       key: option,
@@ -10184,7 +10245,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
     option.toUpperCase()
   ))));
 };
-var StyledButton3 = styled14(Button7, {
+var StyledButton3 = styled15(Button7, {
   shouldForwardProp: (prop) => prop !== "isPrimaryColor"
 })(({ isPrimaryColor, theme }) => ({
   color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
@@ -10194,11 +10255,11 @@ var StyledButton3 = styled14(Button7, {
 }));
 
 // src/components/size/unstable-size-input.tsx
-import * as React135 from "react";
+import * as React136 from "react";
 import { forwardRef as forwardRef13 } from "react";
 var UnstableSizeInput = forwardRef13(
   ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
-    return /* @__PURE__ */ React135.createElement(
+    return /* @__PURE__ */ React136.createElement(
       NumberInput,
       {
         ref,
@@ -10236,7 +10297,7 @@ var UnstableSizeField = ({
   const shouldHighlightUnit2 = () => {
     return hasValue(size);
   };
-  return /* @__PURE__ */ React136.createElement(
+  return /* @__PURE__ */ React137.createElement(
     UnstableSizeInput,
     {
       type: "number",
@@ -10245,8 +10306,8 @@ var UnstableSizeField = ({
       onChange: (event) => setSize(event.target.value),
       InputProps: {
         ...InputProps,
-        startAdornment: startIcon && /* @__PURE__ */ React136.createElement(InputAdornment6, { position: "start" }, startIcon),
-        endAdornment: /* @__PURE__ */ React136.createElement(InputAdornment6, { position: "end" }, /* @__PURE__ */ React136.createElement(
+        startAdornment: startIcon && /* @__PURE__ */ React137.createElement(InputAdornment6, { position: "start" }, startIcon),
+        endAdornment: /* @__PURE__ */ React137.createElement(InputAdornment6, { position: "end" }, /* @__PURE__ */ React137.createElement(
           UnitSelect,
           {
             options: units2,
@@ -10329,6 +10390,7 @@ export {
   LinkControl,
   LinkedDimensionsControl,
   MentionTextAreaControl,
+  NoticeControl,
   NumberControl,
   NumberInput,
   PopoverContent,