@elementor/editor-controls 0.30.0 → 0.31.0

package/dist/index.mjs

@@ -433,6 +433,7 @@ var TextAreaControl = createControl(({ placeholder }) => {
 
 // src/controls/size-control.tsx
 import * as React14 from "react";
+import { useRef } from "react";
 import { sizePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-props";
 import { InputAdornment as InputAdornment2 } from "@elementor/ui";
 
@@ -449,6 +450,7 @@ var TextFieldInnerSelection = forwardRef(
     onChange,
     onBlur,
     onKeyDown,
+    onKeyUp,
     endAdornment,
     startAdornment
   }, ref) => {
@@ -462,6 +464,7 @@ var TextFieldInnerSelection = forwardRef(
         value,
         onChange,
         onKeyDown,
+        onKeyUp,
         onBlur,
         placeholder,
         InputProps: {
@@ -605,6 +608,21 @@ var SizeInput = ({
   size,
   unit
 }) => {
+  const unitInputBufferRef = useRef("");
+  const handleKeyUp = (event) => {
+    const { key } = event;
+    if (!/^[a-zA-Z%]$/.test(key)) {
+      return;
+    }
+    event.preventDefault();
+    const newChar = key.toLowerCase();
+    const updatedBuffer = (unitInputBufferRef.current + newChar).slice(-3);
+    unitInputBufferRef.current = updatedBuffer;
+    const matchedUnit = units2.find((u) => u.includes(updatedBuffer)) || units2.find((u) => u.startsWith(newChar)) || units2.find((u) => u.includes(newChar));
+    if (matchedUnit) {
+      handleUnitChange(matchedUnit);
+    }
+  };
   return /* @__PURE__ */ React14.createElement(ControlActions, null, /* @__PURE__ */ React14.createElement(
     TextFieldInnerSelection,
     {
@@ -621,12 +639,16 @@ var SizeInput = ({
       type: "number",
       value: Number.isNaN(size) ? "" : size,
       onChange: handleSizeChange,
-      onBlur,
+      onBlur: (event) => {
+        unitInputBufferRef.current = "";
+        onBlur?.(event);
+      },
       onKeyDown: (event) => {
         if (RESTRICTED_INPUT_KEYS.includes(event.key)) {
           event.preventDefault();
         }
-      }
+      },
+      onKeyUp: handleKeyUp
     }
   ));
 };
@@ -646,13 +668,38 @@ var SectionContent = ({ gap = 2, sx, children }) => /* @__PURE__ */ React15.crea
 import * as React16 from "react";
 import { colorPropTypeUtil } from "@elementor/editor-props";
 import { UnstableColorField } from "@elementor/ui";
-var ColorControl = createControl(({ propTypeUtil = colorPropTypeUtil, ...props }) => {
-  const { value, setValue } = useBoundProp(propTypeUtil);
-  const handleChange = (selectedColor) => {
-    setValue(selectedColor || null);
-  };
-  return /* @__PURE__ */ React16.createElement(ControlActions, null, /* @__PURE__ */ React16.createElement(UnstableColorField, { size: "tiny", ...props, value: value ?? "", onChange: handleChange, fullWidth: true }));
-});
+var ColorControl = createControl(
+  ({ propTypeUtil = colorPropTypeUtil, anchorEl, slotProps = {}, ...props }) => {
+    const { value, setValue } = useBoundProp(propTypeUtil);
+    const handleChange = (selectedColor) => {
+      setValue(selectedColor || null);
+    };
+    return /* @__PURE__ */ React16.createElement(ControlActions, null, /* @__PURE__ */ React16.createElement(
+      UnstableColorField,
+      {
+        size: "tiny",
+        fullWidth: true,
+        value: value ?? "",
+        onChange: handleChange,
+        ...props,
+        slotProps: {
+          ...slotProps,
+          colorPicker: {
+            anchorEl,
+            anchorOrigin: {
+              vertical: "top",
+              horizontal: "right"
+            },
+            transformOrigin: {
+              vertical: "top",
+              horizontal: -10
+            }
+          }
+        }
+      }
+    ));
+  }
+);
 
 // src/controls/stroke-control.tsx
 var units = ["px", "em", "rem"];
@@ -1013,24 +1060,7 @@ var ItemContent = ({ anchorEl, bind }) => {
 };
 var Content = ({ anchorEl }) => {
   const { propType, value, setValue } = useBoundProp(shadowPropTypeUtil);
-  return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React24.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React24.createElement(PopoverGridContainer, null, /* @__PURE__ */ React24.createElement(Control2, { bind: "color", label: __5("Color", "elementor") }, /* @__PURE__ */ React24.createElement(
-    ColorControl,
-    {
-      slotProps: {
-        colorPicker: {
-          anchorEl,
-          anchorOrigin: {
-            vertical: "top",
-            horizontal: "right"
-          },
-          transformOrigin: {
-            vertical: "top",
-            horizontal: -10
-          }
-        }
-      }
-    }
-  )), /* @__PURE__ */ React24.createElement(Control2, { bind: "position", label: __5("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React24.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React24.createElement(PopoverGridContainer, null, /* @__PURE__ */ React24.createElement(Control2, { bind: "color", label: __5("Color", "elementor") }, /* @__PURE__ */ React24.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React24.createElement(Control2, { bind: "position", label: __5("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React24.createElement(
     SelectControl,
     {
       options: [
@@ -1094,7 +1124,7 @@ import { stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-pro
 
 // src/components/control-toggle-button-group.tsx
 import * as React26 from "react";
-import { useEffect as useEffect3, useMemo, useRef, useState as useState4 } from "react";
+import { useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState4 } from "react";
 import { ChevronDownIcon } from "@elementor/icons";
 import {
   ListItemText,
@@ -1201,7 +1231,7 @@ var SplitButtonGroup = ({
 }) => {
   const previewButton = usePreviewButton(items, value);
   const [isMenuOpen, setIsMenuOpen] = useState4(false);
-  const menuButtonRef = useRef(null);
+  const menuButtonRef = useRef2(null);
   const onMenuToggle = (ev) => {
     setIsMenuOpen((prev) => !prev);
     ev.preventDefault();
@@ -1371,7 +1401,7 @@ var NumberControl = createControl(
 
 // src/controls/equal-unequal-sizes-control.tsx
 import * as React30 from "react";
-import { useId as useId2, useRef as useRef2 } from "react";
+import { useId as useId2, useRef as useRef3 } from "react";
 import { sizePropTypeUtil as sizePropTypeUtil2 } from "@elementor/editor-props";
 import { bindPopover as bindPopover2, bindToggle, Grid as Grid5, Popover as Popover2, Stack as Stack7, ToggleButton as ToggleButton2, Tooltip as Tooltip3, usePopupState as usePopupState3 } from "@elementor/ui";
 import { __ as __6 } from "@wordpress/i18n";
@@ -1402,7 +1432,7 @@ function EqualUnequalSizesControl({
   multiSizePropTypeUtil
 }) {
   const popupId = useId2();
-  const controlRef = useRef2(null);
+  const controlRef = useRef3(null);
   const popupState = usePopupState3({ variant: "popover", popupId });
   const {
     propType: multiSizePropType,
@@ -1567,7 +1597,7 @@ var Control3 = ({
 
 // src/controls/font-family-control/font-family-control.tsx
 import * as React32 from "react";
-import { useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
 import { stringPropTypeUtil as stringPropTypeUtil6 } from "@elementor/editor-props";
 import { ChevronDownIcon as ChevronDownIcon2, SearchIcon, TextIcon, XIcon as XIcon2 } from "@elementor/icons";
 import {
@@ -1702,7 +1732,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
 var LIST_ITEM_HEIGHT = 36;
 var LIST_ITEMS_BUFFER = 6;
 var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
-  const containerRef = useRef3(null);
+  const containerRef = useRef4(null);
   const selectedItem = fontListItems.find((item) => item.value === fontFamily);
   const debouncedVirtualizeChange = useDebounce(({ getVirtualIndexes }) => {
     getVirtualIndexes().forEach((index) => {
@@ -2397,6 +2427,7 @@ var SvgMediaControl = createControl(() => {
 // src/controls/background-control/background-control.tsx
 import * as React45 from "react";
 import { backgroundPropTypeUtil } from "@elementor/editor-props";
+import { isExperimentActive } from "@elementor/editor-v1-adapters";
 import { Grid as Grid14 } from "@elementor/ui";
 import { __ as __18 } from "@wordpress/i18n";
 
@@ -2663,7 +2694,7 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-import { useRef as useRef4 } from "react";
+import { useRef as useRef5 } from "react";
 import {
   backgroundColorOverlayPropTypeUtil,
   backgroundGradientOverlayPropTypeUtil as backgroundGradientOverlayPropTypeUtil2,
@@ -2688,7 +2719,7 @@ var useBackgroundTabsHistory = ({
     return "image";
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs(getCurrentOverlayType());
-  const valuesHistory = useRef4({
+  const valuesHistory = useRef5({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -2779,10 +2810,10 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
     }
   ));
 });
-var ItemContent2 = ({ bind }) => {
-  return /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React44.createElement(Content2, null));
+var ItemContent2 = ({ anchorEl = null, bind }) => {
+  return /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React44.createElement(Content2, { anchorEl }));
 };
-var Content2 = () => {
+var Content2 = ({ anchorEl }) => {
   const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
     image: getInitialBackgroundOverlay().value,
     color: initialBackgroundColorOverlay.value,
@@ -2799,7 +2830,7 @@ var Content2 = () => {
     /* @__PURE__ */ React44.createElement(Tab, { label: __17("Image", "elementor"), ...getTabProps("image") }),
     /* @__PURE__ */ React44.createElement(Tab, { label: __17("Gradient", "elementor"), ...getTabProps("gradient") }),
     /* @__PURE__ */ React44.createElement(Tab, { label: __17("Color", "elementor"), ...getTabProps("color") })
-  )), /* @__PURE__ */ React44.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React44.createElement(PopoverContent, null, /* @__PURE__ */ React44.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React44.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React44.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React44.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React44.createElement(PopoverContent, null, /* @__PURE__ */ React44.createElement(ColorOverlayContent, null))));
+  )), /* @__PURE__ */ React44.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React44.createElement(PopoverContent, null, /* @__PURE__ */ React44.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React44.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React44.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React44.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React44.createElement(PopoverContent, null, /* @__PURE__ */ React44.createElement(ColorOverlayContent, { anchorEl }))));
 };
 var ItemIcon2 = ({ value }) => {
   switch (value.$$type) {
@@ -2868,9 +2899,9 @@ var ItemLabelGradient = ({ value }) => {
   }
   return /* @__PURE__ */ React44.createElement("span", null, __17("Radial Gradient", "elementor"));
 };
-var ColorOverlayContent = () => {
+var ColorOverlayContent = ({ anchorEl }) => {
   const propContext = useBoundProp(backgroundColorOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React44.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React44.createElement(ColorControl, null)));
+  return /* @__PURE__ */ React44.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React44.createElement(ColorControl, { anchorEl })));
 };
 var ImageOverlayContent = () => {
   const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil2);
@@ -2918,7 +2949,9 @@ var getGradientValue = (value) => {
 // src/controls/background-control/background-control.tsx
 var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(backgroundPropTypeUtil);
-  return /* @__PURE__ */ React45.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React45.createElement(SectionContent, null, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React45.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React45.createElement(Grid14, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React45.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(ControlFormLabel, null, __18("Color", "elementor"))), /* @__PURE__ */ React45.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(ColorControl, null))))));
+  const isUsingNestedProps = isExperimentActive("e_v_3_30");
+  const colorLabel = __18("Color", "elementor");
+  return /* @__PURE__ */ React45.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React45.createElement(SectionContent, null, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React45.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React45.createElement(Grid14, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React45.createElement(Grid14, { item: true, xs: 6 }, isUsingNestedProps ? /* @__PURE__ */ React45.createElement(ControlLabel, null, colorLabel) : /* @__PURE__ */ React45.createElement(ControlFormLabel, null, colorLabel)), /* @__PURE__ */ React45.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(ColorControl, null))))));
 });
 export {
   BackgroundControl,