@elementor/editor-controls 4.1.0-758 → 4.1.0-760

package/dist/index.mjs

@@ -6830,7 +6830,7 @@ import { sizePropTypeUtil as sizePropTypeUtil6 } from "@elementor/editor-props";
 
 // src/controls/size-control/size-component.tsx
 import * as React107 from "react";
-import { useEffect as useEffect15 } from "react";
+import { useEffect as useEffect16 } from "react";
 import { useActiveBreakpoint as useActiveBreakpoint4 } from "@elementor/editor-responsive";
 import { Box as Box25, usePopupState as usePopupState9 } from "@elementor/ui";
 
@@ -6952,6 +6952,24 @@ var sanitizeSize = (size) => {
   return size;
 };
 
+// src/controls/size-control/hooks/use-unit-sync.ts
+import { useEffect as useEffect14, useState as useState17 } from "react";
+var useUnitSync = ({ unit, setUnit, persistWhen }) => {
+  const [state, setState] = useState17(unit);
+  useEffect14(() => {
+    if (unit !== state) {
+      setState(unit);
+    }
+  }, [unit]);
+  const setInternalValue = (newUnit) => {
+    setState(newUnit);
+    if (persistWhen()) {
+      setUnit(newUnit);
+    }
+  };
+  return [state, setInternalValue];
+};
+
 // src/controls/size-control/hooks/use-size-value.ts
 var useSizeValue = ({
   value,
@@ -6974,25 +6992,34 @@ var useSizeValue = ({
     persistWhen: (next) => hasChanged(next, resolvedValue),
     fallback: () => createDefaultSizeValue(units2, defaultUnit)
   });
+  const [unit, setUnit] = useUnitSync({
+    unit: sizeValue?.unit,
+    setUnit: (newUnit) => {
+      setSizeValue({
+        unit: newUnit,
+        size: resolveSizeOnUnitChange(sizeValue.size, newUnit)
+      });
+    },
+    persistWhen: () => {
+      return Boolean(sizeValue.size) || sizeValue.size !== "";
+    }
+  });
   const setSize = (newSize, isInputValid = true) => {
-    if (isExtendedUnit(sizeValue.unit)) {
+    if (isExtendedUnit(unit)) {
       return;
     }
     const trimmed = newSize.trim();
     const parsed = Number(trimmed);
     const newState = {
-      ...sizeValue,
+      unit,
       size: trimmed && !isNaN(parsed) ? parsed : ""
     };
     setSizeValue(newState, void 0, { validation: () => isInputValid });
   };
-  const setUnit = (unit) => {
-    setSizeValue({ unit, size: resolveSizeOnUnitChange(sizeValue.size, unit) });
-  };
   return {
     size: sizeValue.size,
-    unit: sizeValue.unit,
     setSize,
+    unit,
     setUnit
   };
 };
@@ -7191,7 +7218,7 @@ var shouldHighlightUnit = (value) => {
 
 // src/controls/size-control/ui/text-field-popover.tsx
 import * as React106 from "react";
-import { useEffect as useEffect14, useRef as useRef25 } from "react";
+import { useEffect as useEffect15, useRef as useRef25 } from "react";
 import { PopoverHeader as PopoverHeader4 } from "@elementor/editor-ui";
 import { MathFunctionIcon as MathFunctionIcon4 } from "@elementor/icons";
 import { bindPopover as bindPopover7, Popover as Popover7, TextField as TextField9 } from "@elementor/ui";
@@ -7199,7 +7226,7 @@ import { __ as __52 } from "@wordpress/i18n";
 var SIZE10 = "tiny";
 var TextFieldPopover2 = ({ popupState, anchorRef, value, onChange, onClose }) => {
   const inputRef = useRef25(null);
-  useEffect14(() => {
+  useEffect15(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => {
         if (inputRef.current) {
@@ -7266,7 +7293,7 @@ var SizeComponent = ({ anchorRef, SizeFieldWrapper = React107.Fragment, ...sizeF
   const activeBreakpoint = useActiveBreakpoint4();
   const isCustomUnit = sizeFieldProps?.value?.unit === EXTENDED_UNITS.custom;
   const hasCustomUnitOption = sizeFieldProps.units.includes(EXTENDED_UNITS.custom);
-  useEffect15(() => {
+  useEffect16(() => {
     if (popupState && popupState.isOpen) {
       popupState.close();
     }
@@ -7321,36 +7348,38 @@ var SizeComponent = ({ anchorRef, SizeFieldWrapper = React107.Fragment, ...sizeF
 // src/controls/size-control/utils/resolve-bound-prop-value.ts
 import { sizePropTypeUtil as sizePropTypeUtil5 } from "@elementor/editor-props";
 var resolveBoundPropValue = (value, boundPropPlaceholder, propPlaceholder) => {
-  let sizeValue = null;
-  if (validateSizeValue(value)) {
-    sizeValue = value;
-  } else if (validateSizeValue(boundPropPlaceholder)) {
-    sizeValue = { size: "", unit: boundPropPlaceholder?.unit };
-  }
+  const sizeValue = pickFirstValid([
+    { candidate: value, resolve: (v) => v },
+    { candidate: propPlaceholder, resolve: toUnitPlaceholder },
+    { candidate: boundPropPlaceholder, resolve: toUnitPlaceholder }
+  ]);
+  const placeholderSource = propPlaceholder ?? boundPropPlaceholder;
   return {
     sizeValue,
-    placeholder: resolvePlaceholder(propPlaceholder, boundPropPlaceholder)
+    placeholder: resolvePlaceholder(placeholderSource)
   };
 };
+var toUnitPlaceholder = (v) => ({ ...v, size: "" });
+var pickFirstValid = (candidates) => {
+  const found = candidates.find(({ candidate }) => validateSizeValue(candidate));
+  return found ? found.resolve(found.candidate) : null;
+};
 var validateSizeValue = (value) => {
-  if (!value) {
+  if (!value || typeof value !== "object") {
     return false;
   }
   const sizePropValue = sizePropTypeUtil5.create(value);
   return sizePropTypeUtil5.isValid(sizePropValue);
 };
-var resolvePlaceholder = (propPlaceholder, boundPropPlaceholder) => {
-  if (propPlaceholder) {
-    return propPlaceholder;
+var resolvePlaceholder = (placeholder) => {
+  if (typeof placeholder === "string") {
+    return placeholder;
   }
-  const size = boundPropPlaceholder?.size;
+  const size = placeholder?.size;
   if (size === void 0) {
     return void 0;
   }
-  if (typeof size === "number") {
-    return size.toString();
-  }
-  return size;
+  return typeof size === "number" ? size.toString() : size;
 };
 
 // src/controls/size-control/utils/settings/get-prop-type-settings.ts
@@ -7450,7 +7479,7 @@ import { __ as __53 } from "@wordpress/i18n";
 
 // src/components/promotions/promotion-trigger.tsx
 import * as React109 from "react";
-import { forwardRef as forwardRef12, useCallback as useCallback4, useImperativeHandle, useState as useState17 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback4, useImperativeHandle, useState as useState18 } from "react";
 import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
 import { Box as Box26 } from "@elementor/ui";
 function getV4Promotion(key) {
@@ -7458,7 +7487,7 @@ function getV4Promotion(key) {
 }
 var PromotionTrigger = forwardRef12(
   ({ promotionKey, children, trackingData }, ref) => {
-    const [isOpen, setIsOpen] = useState17(false);
+    const [isOpen, setIsOpen] = useState18(false);
     const promotion = getV4Promotion(promotionKey);
     const toggle = useCallback4(() => {
       setIsOpen((prev) => {
@@ -7578,12 +7607,13 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 import * as React113 from "react";
-import { useEffect as useEffect16, useState as useState18 } from "react";
+import { useEffect as useEffect17, useState as useState19 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon4, XIcon as XIcon4 } from "@elementor/icons";
 import {
   bindPopover as bindPopover8,
   bindTrigger as bindTrigger7,
   Box as Box27,
+  ClickAwayListener,
   IconButton as IconButton10,
   Infotip as Infotip4,
   Tooltip as Tooltip12,
@@ -7607,7 +7637,7 @@ var Repeater3 = ({
   openItem: initialOpenItem = EMPTY_OPEN_ITEM2,
   isSortable = true
 }) => {
-  const [openItem, setOpenItem] = useState18(initialOpenItem);
+  const [openItem, setOpenItem] = useState19(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -7749,10 +7779,14 @@ var RepeaterItem = ({
   actions,
   value
 }) => {
-  const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, () => {
-    onOpen();
-    onPopoverOpen?.(value);
-  });
+  const { popoverState, popoverProps, ref, setRef } = usePopover(
+    openOnMount,
+    () => {
+      onOpen();
+      onPopoverOpen?.(value);
+    },
+    onPopoverClose
+  );
   const triggerProps = bindTrigger7(popoverState);
   const duplicateLabel = __55("Duplicate", "elementor");
   const toggleLabel = propDisabled ? __55("Show", "elementor") : __55("Hide", "elementor");
@@ -7774,41 +7808,41 @@ var RepeaterItem = ({
       startIcon,
       actions: /* @__PURE__ */ React113.createElement(React113.Fragment, null, showDuplicate && /* @__PURE__ */ React113.createElement(Tooltip12, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React113.createElement(IconButton10, { size: SIZE11, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React113.createElement(CopyIcon2, { fontSize: SIZE11 }))), showToggle && /* @__PURE__ */ React113.createElement(Tooltip12, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React113.createElement(IconButton10, { size: SIZE11, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React113.createElement(EyeOffIcon2, { fontSize: SIZE11 }) : /* @__PURE__ */ React113.createElement(EyeIcon2, { fontSize: SIZE11 }))), actions?.(value), showRemove && /* @__PURE__ */ React113.createElement(Tooltip12, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React113.createElement(IconButton10, { size: SIZE11, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React113.createElement(XIcon4, { fontSize: SIZE11 }))))
     }
-  ), /* @__PURE__ */ React113.createElement(
-    RepeaterPopover,
+  ), /* @__PURE__ */ React113.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React113.createElement(
+    ClickAwayListener,
     {
-      width: ref?.getBoundingClientRect().width,
-      ...popoverProps,
-      onClose: () => {
-        popoverProps.onClose?.();
-        onPopoverClose?.();
-      },
-      anchorEl: ref
+      mouseEvent: "onMouseDown",
+      touchEvent: "onTouchStart",
+      onClickAway: popoverProps.onClose
     },
     /* @__PURE__ */ React113.createElement(Box27, null, children({ anchorEl: ref }))
-  ));
+  )));
 };
-var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = useState18(null);
+var usePopover = (openOnMount, onOpen, onPopoverClose) => {
+  const [ref, setRef] = useState19(null);
   const popoverState = usePopupState10({ variant: "popover" });
   const popoverProps = bindPopover8(popoverState);
-  useEffect16(() => {
+  useEffect17(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
     }
   }, [ref]);
+  const onClose = () => {
+    popoverProps.onClose?.();
+    onPopoverClose?.();
+  };
   return {
     popoverState,
     ref,
     setRef,
-    popoverProps
+    popoverProps: { ...popoverProps, onClose }
   };
 };
 
 // src/components/inline-editor-toolbar.tsx
 import * as React115 from "react";
-import { useEffect as useEffect18, useMemo as useMemo16, useRef as useRef29, useState as useState19 } from "react";
+import { useEffect as useEffect19, useMemo as useMemo16, useRef as useRef29, useState as useState20 } from "react";
 import { getContainer, getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
@@ -7834,7 +7868,7 @@ import { __ as __57 } from "@wordpress/i18n";
 
 // src/components/url-popover.tsx
 import * as React114 from "react";
-import { useEffect as useEffect17, useRef as useRef28 } from "react";
+import { useEffect as useEffect18, useRef as useRef28 } from "react";
 import { ExternalLinkIcon } from "@elementor/icons";
 import { bindPopover as bindPopover9, Popover as Popover8, Stack as Stack20, TextField as TextField10, ToggleButton as ToggleButton2, Tooltip as Tooltip13 } from "@elementor/ui";
 import { __ as __56 } from "@wordpress/i18n";
@@ -7848,7 +7882,7 @@ var UrlPopover = ({
   onToggleNewTab
 }) => {
   const inputRef = useRef28(null);
-  useEffect17(() => {
+  useEffect18(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -7898,8 +7932,8 @@ var UrlPopover = ({
 
 // src/components/inline-editor-toolbar.tsx
 var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
-  const [urlValue, setUrlValue] = useState19("");
-  const [openInNewTab, setOpenInNewTab] = useState19(false);
+  const [urlValue, setUrlValue] = useState20("");
+  const [openInNewTab, setOpenInNewTab] = useState20(false);
   const toolbarRef = useRef29(null);
   const linkPopupState = usePopupState11({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
@@ -7944,7 +7978,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
     }
     linkPopupState.close();
   };
-  useEffect18(() => {
+  useEffect19(() => {
     editor?.commands?.focus();
   }, [editor]);
   return /* @__PURE__ */ React115.createElement(