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

package/dist/index.d.mts

@@ -483,7 +483,7 @@ type SizeVariant = 'length' | 'angle' | 'time';
 type SetSizeValue<T> = (value: T, options?: CreateOptions, meta?: SetValueMeta) => void;
 
 type Props$3 = {
-    placeholder?: string;
+    placeholder?: string | SizePropValue['value'];
     variant?: SizeVariant;
     anchorRef?: RefObject<HTMLDivElement | null>;
     startIcon?: React$1.ReactNode;

package/dist/index.d.ts

@@ -483,7 +483,7 @@ type SizeVariant = 'length' | 'angle' | 'time';
 type SetSizeValue<T> = (value: T, options?: CreateOptions, meta?: SetValueMeta) => void;
 
 type Props$3 = {
-    placeholder?: string;
+    placeholder?: string | SizePropValue['value'];
     variant?: SizeVariant;
     anchorRef?: RefObject<HTMLDivElement | null>;
     startIcon?: React$1.ReactNode;

package/dist/index.js

@@ -6849,7 +6849,7 @@ var import_editor_props56 = require("@elementor/editor-props");
 
 // src/controls/size-control/size-component.tsx
 var React107 = __toESM(require("react"));
-var import_react62 = require("react");
+var import_react63 = require("react");
 var import_editor_responsive4 = require("@elementor/editor-responsive");
 var import_ui92 = require("@elementor/ui");
 
@@ -6920,7 +6920,7 @@ var isNumericValue = (value) => {
 };
 
 // src/controls/size-control/hooks/use-size-value.ts
-var import_react58 = require("react");
+var import_react59 = require("react");
 
 // src/controls/size-control/utils/resolve-size-value.ts
 var DEFAULT_SIZE2 = "";
@@ -6971,6 +6971,24 @@ var sanitizeSize = (size) => {
   return size;
 };
 
+// src/controls/size-control/hooks/use-unit-sync.ts
+var import_react58 = require("react");
+var useUnitSync = ({ unit, setUnit, persistWhen }) => {
+  const [state, setState] = (0, import_react58.useState)(unit);
+  (0, import_react58.useEffect)(() => {
+    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,
@@ -6978,7 +6996,7 @@ var useSizeValue = ({
   units: units2,
   defaultUnit
 }) => {
-  const resolvedValue = (0, import_react58.useMemo)(
+  const resolvedValue = (0, import_react59.useMemo)(
     () => resolveSizeValue(value, { units: units2, defaultUnit }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [value?.size, value?.unit, defaultUnit]
@@ -6993,25 +7011,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
   };
 };
@@ -7021,8 +7048,8 @@ var hasChanged = (next, current) => {
 
 // src/controls/size-control/ui/size-input.tsx
 var React103 = __toESM(require("react"));
-var import_react59 = require("react");
-var SizeInput2 = (0, import_react59.forwardRef)(
+var import_react60 = require("react");
+var SizeInput2 = (0, import_react60.forwardRef)(
   ({
     id,
     type,
@@ -7066,7 +7093,7 @@ var getCursorStyle = (readOnly) => ({
 
 // src/controls/size-control/ui/unit-selector.tsx
 var React104 = __toESM(require("react"));
-var import_react60 = require("react");
+var import_react61 = require("react");
 var import_editor_ui14 = require("@elementor/editor-ui");
 var import_ui89 = require("@elementor/ui");
 var menuItemContentStyles = {
@@ -7085,7 +7112,7 @@ var UnitSelector = ({
 }) => {
   const popupState = (0, import_ui89.usePopupState)({
     variant: "popover",
-    popupId: (0, import_react60.useId)()
+    popupId: (0, import_react61.useId)()
   });
   const handleMenuItemClick = (option) => {
     onSelect(option);
@@ -7210,15 +7237,15 @@ var shouldHighlightUnit = (value) => {
 
 // src/controls/size-control/ui/text-field-popover.tsx
 var React106 = __toESM(require("react"));
-var import_react61 = require("react");
+var import_react62 = require("react");
 var import_editor_ui15 = require("@elementor/editor-ui");
 var import_icons35 = require("@elementor/icons");
 var import_ui91 = require("@elementor/ui");
 var import_i18n52 = require("@wordpress/i18n");
 var SIZE10 = "tiny";
 var TextFieldPopover2 = ({ popupState, anchorRef, value, onChange, onClose }) => {
-  const inputRef = (0, import_react61.useRef)(null);
-  (0, import_react61.useEffect)(() => {
+  const inputRef = (0, import_react62.useRef)(null);
+  (0, import_react62.useEffect)(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => {
         if (inputRef.current) {
@@ -7285,7 +7312,7 @@ var SizeComponent = ({ anchorRef, SizeFieldWrapper = React107.Fragment, ...sizeF
   const activeBreakpoint = (0, import_editor_responsive4.useActiveBreakpoint)();
   const isCustomUnit = sizeFieldProps?.value?.unit === EXTENDED_UNITS.custom;
   const hasCustomUnitOption = sizeFieldProps.units.includes(EXTENDED_UNITS.custom);
-  (0, import_react62.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     if (popupState && popupState.isOpen) {
       popupState.close();
     }
@@ -7340,36 +7367,38 @@ var SizeComponent = ({ anchorRef, SizeFieldWrapper = React107.Fragment, ...sizeF
 // src/controls/size-control/utils/resolve-bound-prop-value.ts
 var import_editor_props55 = require("@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 = import_editor_props55.sizePropTypeUtil.create(value);
   return import_editor_props55.sizePropTypeUtil.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
@@ -7462,24 +7491,24 @@ var UnstableSizeControl = createControl(
 
 // src/components/promotions/display-conditions-control.tsx
 var React110 = __toESM(require("react"));
-var import_react64 = require("react");
+var import_react65 = require("react");
 var import_icons36 = require("@elementor/icons");
 var import_ui94 = require("@elementor/ui");
 var import_i18n53 = require("@wordpress/i18n");
 
 // src/components/promotions/promotion-trigger.tsx
 var React109 = __toESM(require("react"));
-var import_react63 = require("react");
+var import_react64 = require("react");
 var import_editor_ui16 = require("@elementor/editor-ui");
 var import_ui93 = require("@elementor/ui");
 function getV4Promotion(key) {
   return window.elementor?.config?.v4Promotions?.[key];
 }
-var PromotionTrigger = (0, import_react63.forwardRef)(
+var PromotionTrigger = (0, import_react64.forwardRef)(
   ({ promotionKey, children, trackingData }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react63.useState)(false);
+    const [isOpen, setIsOpen] = (0, import_react64.useState)(false);
     const promotion = getV4Promotion(promotionKey);
-    const toggle = (0, import_react63.useCallback)(() => {
+    const toggle = (0, import_react64.useCallback)(() => {
       setIsOpen((prev) => {
         if (!prev) {
           trackViewPromotion(trackingData);
@@ -7487,7 +7516,7 @@ var PromotionTrigger = (0, import_react63.forwardRef)(
         return !prev;
       });
     }, [trackingData]);
-    (0, import_react63.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
+    (0, import_react64.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
     return /* @__PURE__ */ React109.createElement(React109.Fragment, null, promotion && /* @__PURE__ */ React109.createElement(
       import_editor_ui16.PromotionInfotip,
       {
@@ -7521,7 +7550,7 @@ var PromotionTrigger = (0, import_react63.forwardRef)(
 var ARIA_LABEL = (0, import_i18n53.__)("Display Conditions", "elementor");
 var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
-  const triggerRef = (0, import_react64.useRef)(null);
+  const triggerRef = (0, import_react65.useRef)(null);
   return /* @__PURE__ */ React110.createElement(
     import_ui94.Stack,
     {
@@ -7553,14 +7582,14 @@ var DisplayConditionsControl = createControl(() => {
 
 // src/components/promotions/attributes-control.tsx
 var React111 = __toESM(require("react"));
-var import_react65 = require("react");
+var import_react66 = require("react");
 var import_icons37 = require("@elementor/icons");
 var import_ui95 = require("@elementor/ui");
 var import_i18n54 = require("@wordpress/i18n");
 var ARIA_LABEL2 = (0, import_i18n54.__)("Attributes", "elementor");
 var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
-  const triggerRef = (0, import_react65.useRef)(null);
+  const triggerRef = (0, import_react66.useRef)(null);
   return /* @__PURE__ */ React111.createElement(
     import_ui95.Stack,
     {
@@ -7597,7 +7626,7 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 var React113 = __toESM(require("react"));
-var import_react66 = require("react");
+var import_react67 = require("react");
 var import_icons39 = require("@elementor/icons");
 var import_ui97 = require("@elementor/ui");
 var import_i18n55 = require("@wordpress/i18n");
@@ -7618,7 +7647,7 @@ var Repeater3 = ({
   openItem: initialOpenItem = EMPTY_OPEN_ITEM2,
   isSortable = true
 }) => {
-  const [openItem, setOpenItem] = (0, import_react66.useState)(initialOpenItem);
+  const [openItem, setOpenItem] = (0, import_react67.useState)(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -7760,10 +7789,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 = (0, import_ui97.bindTrigger)(popoverState);
   const duplicateLabel = (0, import_i18n55.__)("Duplicate", "elementor");
   const toggleLabel = propDisabled ? (0, import_i18n55.__)("Show", "elementor") : (0, import_i18n55.__)("Hide", "elementor");
@@ -7785,50 +7818,50 @@ var RepeaterItem = ({
       startIcon,
       actions: /* @__PURE__ */ React113.createElement(React113.Fragment, null, showDuplicate && /* @__PURE__ */ React113.createElement(import_ui97.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React113.createElement(import_ui97.IconButton, { size: SIZE11, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React113.createElement(import_icons39.CopyIcon, { fontSize: SIZE11 }))), showToggle && /* @__PURE__ */ React113.createElement(import_ui97.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React113.createElement(import_ui97.IconButton, { size: SIZE11, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React113.createElement(import_icons39.EyeOffIcon, { fontSize: SIZE11 }) : /* @__PURE__ */ React113.createElement(import_icons39.EyeIcon, { fontSize: SIZE11 }))), actions?.(value), showRemove && /* @__PURE__ */ React113.createElement(import_ui97.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React113.createElement(import_ui97.IconButton, { size: SIZE11, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React113.createElement(import_icons39.XIcon, { fontSize: SIZE11 }))))
     }
-  ), /* @__PURE__ */ React113.createElement(
-    RepeaterPopover,
+  ), /* @__PURE__ */ React113.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React113.createElement(
+    import_ui97.ClickAwayListener,
     {
-      width: ref?.getBoundingClientRect().width,
-      ...popoverProps,
-      onClose: () => {
-        popoverProps.onClose?.();
-        onPopoverClose?.();
-      },
-      anchorEl: ref
+      mouseEvent: "onMouseDown",
+      touchEvent: "onTouchStart",
+      onClickAway: popoverProps.onClose
     },
     /* @__PURE__ */ React113.createElement(import_ui97.Box, null, children({ anchorEl: ref }))
-  ));
+  )));
 };
-var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = (0, import_react66.useState)(null);
+var usePopover = (openOnMount, onOpen, onPopoverClose) => {
+  const [ref, setRef] = (0, import_react67.useState)(null);
   const popoverState = (0, import_ui97.usePopupState)({ variant: "popover" });
   const popoverProps = (0, import_ui97.bindPopover)(popoverState);
-  (0, import_react66.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     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
 var React115 = __toESM(require("react"));
-var import_react68 = require("react");
+var import_react69 = require("react");
 var import_editor_elements6 = require("@elementor/editor-elements");
 var import_icons41 = require("@elementor/icons");
 var import_ui99 = require("@elementor/ui");
-var import_react69 = require("@tiptap/react");
+var import_react70 = require("@tiptap/react");
 var import_i18n57 = require("@wordpress/i18n");
 
 // src/components/url-popover.tsx
 var React114 = __toESM(require("react"));
-var import_react67 = require("react");
+var import_react68 = require("react");
 var import_icons40 = require("@elementor/icons");
 var import_ui98 = require("@elementor/ui");
 var import_i18n56 = require("@wordpress/i18n");
@@ -7841,8 +7874,8 @@ var UrlPopover = ({
   openInNewTab,
   onToggleNewTab
 }) => {
-  const inputRef = (0, import_react67.useRef)(null);
-  (0, import_react67.useEffect)(() => {
+  const inputRef = (0, import_react68.useRef)(null);
+  (0, import_react68.useEffect)(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -7892,16 +7925,16 @@ var UrlPopover = ({
 
 // src/components/inline-editor-toolbar.tsx
 var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
-  const [urlValue, setUrlValue] = (0, import_react68.useState)("");
-  const [openInNewTab, setOpenInNewTab] = (0, import_react68.useState)(false);
-  const toolbarRef = (0, import_react68.useRef)(null);
+  const [urlValue, setUrlValue] = (0, import_react69.useState)("");
+  const [openInNewTab, setOpenInNewTab] = (0, import_react69.useState)(false);
+  const toolbarRef = (0, import_react69.useRef)(null);
   const linkPopupState = (0, import_ui99.usePopupState)({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
-  const editorState = (0, import_react69.useEditorState)({
+  const editorState = (0, import_react70.useEditorState)({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = (0, import_react68.useMemo)(() => {
+  const formatButtonsList = (0, import_react69.useMemo)(() => {
     const buttons = Object.values(formatButtons);
     if (isElementClickable) {
       return buttons.filter((button) => button.action !== "link");
@@ -7938,7 +7971,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
     }
     linkPopupState.close();
   };
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     editor?.commands?.focus();
   }, [editor]);
   return /* @__PURE__ */ React115.createElement(
@@ -8132,7 +8165,7 @@ var differsFromExternal = (newState, externalState) => {
 
 // src/components/size/unit-select.tsx
 var React116 = __toESM(require("react"));
-var import_react70 = require("react");
+var import_react71 = require("react");
 var import_editor_ui17 = require("@elementor/editor-ui");
 var import_ui100 = require("@elementor/ui");
 var menuItemContentStyles2 = {
@@ -8143,7 +8176,7 @@ var menuItemContentStyles2 = {
 var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
   const popupState = (0, import_ui100.usePopupState)({
     variant: "popover",
-    popupId: (0, import_react70.useId)()
+    popupId: (0, import_react71.useId)()
   });
   const handleMenuItemClick = (index) => {
     onClick(options[index]);
@@ -8179,8 +8212,8 @@ var StyledButton3 = (0, import_ui100.styled)(import_ui100.Button, {
 
 // src/components/size/unstable-size-input.tsx
 var React117 = __toESM(require("react"));
-var import_react71 = require("react");
-var UnstableSizeInput = (0, import_react71.forwardRef)(
+var import_react72 = require("react");
+var UnstableSizeInput = (0, import_react72.forwardRef)(
   ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
     return /* @__PURE__ */ React117.createElement(
       NumberInput,
@@ -8248,7 +8281,7 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-var import_react72 = require("react");
+var import_react73 = require("react");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var getFontControlConfig = () => {
   const { controls } = (0, import_editor_v1_adapters.getElementorConfig)();
@@ -8256,7 +8289,7 @@ var getFontControlConfig = () => {
 };
 var useFontFamilies = () => {
   const { groups, options } = getFontControlConfig();
-  return (0, import_react72.useMemo)(() => {
+  return (0, import_react73.useMemo)(() => {
     if (!groups || !options) {
       return [];
     }