@elementor/editor-controls 4.1.0-757 → 4.1.0-759

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,7 +7607,7 @@ 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,
@@ -7607,7 +7636,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)
   );
@@ -7789,10 +7818,10 @@ var RepeaterItem = ({
   ));
 };
 var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = useState18(null);
+  const [ref, setRef] = useState19(null);
   const popoverState = usePopupState10({ variant: "popover" });
   const popoverProps = bindPopover8(popoverState);
-  useEffect16(() => {
+  useEffect17(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -7808,7 +7837,7 @@ var usePopover = (openOnMount, onOpen) => {
 
 // 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 +7863,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 +7877,7 @@ var UrlPopover = ({
   onToggleNewTab
 }) => {
   const inputRef = useRef28(null);
-  useEffect17(() => {
+  useEffect18(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -7898,8 +7927,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 +7973,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
     }
     linkPopupState.close();
   };
-  useEffect18(() => {
+  useEffect19(() => {
     editor?.commands?.focus();
   }, [editor]);
   return /* @__PURE__ */ React115.createElement(