@elementor/editor-controls 0.24.0 → 0.26.0

package/dist/index.mjs

@@ -29,7 +29,8 @@ var PropProvider = ({
   children,
   value,
   setValue,
-  propType
+  propType,
+  placeholder
 }) => {
   return /* @__PURE__ */ React.createElement(
     PropContext.Provider,
@@ -37,7 +38,8 @@ var PropProvider = ({
       value: {
         value,
         propType,
-        setValue
+        setValue,
+        placeholder
       }
     },
     children
@@ -84,11 +86,12 @@ var ObjectPropKeyProvider = ({ children, bind }) => {
     return context?.setValue(newValue, options, { ...meta, bind });
   };
   const value = context.value?.[bind];
+  const placeholder = context.placeholder?.[bind];
   const propType = context.propType.shape[bind];
   return /* @__PURE__ */ React2.createElement(
     PropKeyContext.Provider,
     {
-      value: { ...context, value, setValue, bind, propType, path: [...path ?? [], bind] }
+      value: { ...context, value, setValue, placeholder, bind, propType, path: [...path ?? [], bind] }
     },
     children
   );
@@ -122,12 +125,17 @@ var usePropKeyContext = () => {
 };
 
 // src/bound-prop-context/use-bound-prop.ts
+import { useState } from "react";
 function useBoundProp(propTypeUtil) {
   const propKeyContext = usePropKeyContext();
+  const { isValid, validate, restoreValue } = useValidation(propKeyContext.propType);
   if (!propTypeUtil) {
     return propKeyContext;
   }
   function setValue(value2, options, meta) {
+    if (!validate(value2)) {
+      return;
+    }
     if (value2 === null) {
       return propKeyContext?.setValue(null, options, meta);
     }
@@ -135,13 +143,34 @@ function useBoundProp(propTypeUtil) {
   }
   const propType = resolveUnionPropType(propKeyContext.propType, propTypeUtil.key);
   const value = propTypeUtil.extract(propKeyContext.value ?? propType.default ?? null);
+  const placeholder = propTypeUtil.extract(propKeyContext.placeholder ?? null);
   return {
     ...propKeyContext,
+    propType,
     setValue,
-    value,
-    propType
+    value: isValid ? value : null,
+    restoreValue,
+    placeholder
   };
 }
+var useValidation = (propType) => {
+  const [isValid, setIsValid] = useState(true);
+  const validate = (value) => {
+    let valid = true;
+    if (propType.settings.required && value === null) {
+      valid = false;
+    }
+    setIsValid(valid);
+    return valid;
+  };
+  const restoreValue = () => setIsValid(true);
+  return {
+    isValid,
+    setIsValid,
+    validate,
+    restoreValue
+  };
+};
 var resolveUnionPropType = (propType, key) => {
   let resolvedPropType = propType;
   if (propType.kind === "union") {
@@ -420,21 +449,32 @@ import { forwardRef, useId } from "react";
 import { MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
 import { bindMenu, bindTrigger, Button as Button2, InputAdornment, Menu, TextField as TextField3, usePopupState } from "@elementor/ui";
 var TextFieldInnerSelection = forwardRef(
-  ({ placeholder, type, value, onChange, endAdornment, startAdornment }, ref) => {
+  ({
+    placeholder,
+    type,
+    value,
+    onChange,
+    onBlur,
+    onKeyDown,
+    endAdornment,
+    startAdornment
+  }, ref) => {
     return /* @__PURE__ */ React13.createElement(
       TextField3,
       {
+        ref,
         size: "tiny",
         fullWidth: true,
         type,
         value,
         onChange,
+        onKeyDown,
+        onBlur,
         placeholder,
         InputProps: {
           endAdornment,
           startAdornment
-        },
-        ref
+        }
       }
     );
   }
@@ -465,7 +505,7 @@ var SelectionEndAdornment = ({
 };
 
 // src/hooks/use-sync-external-state.tsx
-import { useEffect, useState } from "react";
+import { useEffect, useState as useState2 } from "react";
 var useSyncExternalState = ({
   external,
   setExternal,
@@ -484,7 +524,7 @@ var useSyncExternalState = ({
     }
     return externalValue;
   }
-  const [internal, setInternal] = useState(toInternal(external, null));
+  const [internal, setInternal] = useState2(toInternal(external, null));
   useEffect(() => {
     setInternal((prevInternal) => toInternal(external, prevInternal));
   }, [external]);
@@ -503,7 +543,7 @@ var defaultUnit = "px";
 var defaultSize = NaN;
 var SizeControl = createControl(
   ({ units: units2 = defaultUnits, extendedValues = [], placeholder, startIcon }) => {
-    const { value: sizeValue, setValue: setSizeValue } = useBoundProp(sizePropTypeUtil);
+    const { value: sizeValue, setValue: setSizeValue, restoreValue } = useBoundProp(sizePropTypeUtil);
     const [state, setState] = useSyncExternalState({
       external: sizeValue,
       setExternal: setSizeValue,
@@ -523,20 +563,21 @@ var SizeControl = createControl(
         size: size || size === "0" ? parseFloat(size) : defaultSize
       }));
     };
-    const inputProps = {
-      size: state.size,
-      unit: state.unit,
-      placeholder,
-      startIcon,
-      units: units2,
-      extendedValues,
-      handleSizeChange,
-      handleUnitChange
-    };
-    if (extendedValues?.length) {
-      return /* @__PURE__ */ React14.createElement(ExtendedSizeInput, { ...inputProps });
-    }
-    return /* @__PURE__ */ React14.createElement(SizeInput, { ...inputProps });
+    const Input = extendedValues?.length ? ExtendedSizeInput : SizeInput;
+    return /* @__PURE__ */ React14.createElement(
+      Input,
+      {
+        size: state.size,
+        unit: state.unit,
+        placeholder,
+        startIcon,
+        units: units2,
+        extendedValues,
+        handleSizeChange,
+        handleUnitChange,
+        onBlur: restoreValue
+      }
+    );
   }
 );
 var ExtendedSizeInput = (props) => {
@@ -560,12 +601,14 @@ var ExtendedSizeInput = (props) => {
     }
   );
 };
+var RESTRICTED_INPUT_KEYS = ["e", "E", "+", "-"];
 var SizeInput = ({
   units: units2,
   handleUnitChange,
   handleSizeChange,
   placeholder,
   startIcon,
+  onBlur,
   size,
   unit
 }) => {
@@ -584,7 +627,13 @@ var SizeInput = ({
       startAdornment: startIcon ? /* @__PURE__ */ React14.createElement(InputAdornment2, { position: "start" }, startIcon) : void 0,
       type: "number",
       value: Number.isNaN(size) ? "" : size,
-      onChange: handleSizeChange
+      onChange: handleSizeChange,
+      onBlur,
+      onKeyDown: (event) => {
+        if (RESTRICTED_INPUT_KEYS.includes(event.key)) {
+          event.preventDefault();
+        }
+      }
     }
   ));
 };
@@ -643,7 +692,7 @@ var PopoverGridContainer = ({
 
 // src/components/repeater.tsx
 import * as React23 from "react";
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useEffect as useEffect2, useState as useState3 } from "react";
 import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon, XIcon } from "@elementor/icons";
 import {
   bindPopover,
@@ -771,14 +820,14 @@ var Repeater = ({
   values: repeaterValues = [],
   setValues: setRepeaterValues
 }) => {
-  const [openItem, setOpenItem] = useState2(EMPTY_OPEN_ITEM);
+  const [openItem, setOpenItem] = useState3(EMPTY_OPEN_ITEM);
   const [items, setItems] = useSyncExternalState({
     external: repeaterValues,
     // @ts-expect-error - as long as persistWhen => true, value will never be null
     setExternal: setRepeaterValues,
     persistWhen: () => true
   });
-  const [uniqueKeys, setUniqueKeys] = useState2(items.map((_, index) => index));
+  const [uniqueKeys, setUniqueKeys] = useState3(items.map((_, index) => index));
   const generateNextKey = (source) => {
     return 1 + Math.max(0, ...source);
   };
@@ -835,16 +884,28 @@ var Repeater = ({
       });
     });
   };
-  return /* @__PURE__ */ React23.createElement(SectionContent, null, /* @__PURE__ */ React23.createElement(Stack5, { direction: "row", justifyContent: "start", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(Typography, { component: "label", variant: "caption", color: "text.secondary" }, label), /* @__PURE__ */ React23.createElement(ControlAdornments, null), /* @__PURE__ */ React23.createElement(
-    IconButton,
+  return /* @__PURE__ */ React23.createElement(SectionContent, null, /* @__PURE__ */ React23.createElement(
+    Stack5,
     {
-      sx: { ml: "auto" },
-      size: SIZE,
-      onClick: addRepeaterItem,
-      "aria-label": __4("Add item", "elementor")
+      direction: "row",
+      justifyContent: "start",
+      alignItems: "center",
+      gap: 1,
+      sx: { marginInlineEnd: -0.75 }
     },
-    /* @__PURE__ */ React23.createElement(PlusIcon, { fontSize: SIZE })
-  )), 0 < uniqueKeys.length && /* @__PURE__ */ React23.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
+    /* @__PURE__ */ React23.createElement(Typography, { component: "label", variant: "caption", color: "text.secondary" }, label),
+    /* @__PURE__ */ React23.createElement(ControlAdornments, null),
+    /* @__PURE__ */ React23.createElement(
+      IconButton,
+      {
+        sx: { ml: "auto" },
+        size: SIZE,
+        onClick: addRepeaterItem,
+        "aria-label": __4("Add item", "elementor")
+      },
+      /* @__PURE__ */ React23.createElement(PlusIcon, { fontSize: SIZE })
+    )
+  ), 0 < uniqueKeys.length && /* @__PURE__ */ React23.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
     const value = items[index];
     if (!value) {
       return null;
@@ -876,7 +937,7 @@ var RepeaterItem = ({
   openOnMount,
   onOpen
 }) => {
-  const [anchorEl, setAnchorEl] = useState2(null);
+  const [anchorEl, setAnchorEl] = useState3(null);
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
   const duplicateLabel = __4("Duplicate", "elementor");
   const toggleLabel = disabled ? __4("Show", "elementor") : __4("Hide", "elementor");
@@ -912,7 +973,7 @@ var RepeaterItem = ({
   ));
 };
 var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = useState2(null);
+  const [ref, setRef] = useState3(null);
   const popoverState = usePopupState2({ variant: "popover" });
   const popoverProps = bindPopover(popoverState);
   useEffect2(() => {
@@ -1096,7 +1157,7 @@ var ToggleControl = createControl(
     size = "tiny",
     exclusive = true
   }) => {
-    const { value, setValue } = useBoundProp(stringPropTypeUtil5);
+    const { value, setValue, placeholder } = useBoundProp(stringPropTypeUtil5);
     const exclusiveValues = options.filter((option) => option.exclusive).map((option) => option.value);
     const handleNonExclusiveToggle = (selectedValues) => {
       const newSelectedValue = selectedValues[selectedValues.length - 1];
@@ -1113,7 +1174,7 @@ var ToggleControl = createControl(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
-        value: value ?? null,
+        value: value ?? placeholder ?? null,
         onChange: setValue,
         exclusive: true
       }
@@ -1121,7 +1182,7 @@ var ToggleControl = createControl(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
-        value: value?.split(" ") ?? [],
+        value: (value ?? placeholder)?.split(" ") ?? [],
         onChange: handleNonExclusiveToggle,
         exclusive: false
       }
@@ -1134,6 +1195,7 @@ import * as React27 from "react";
 import { numberPropTypeUtil } from "@elementor/editor-props";
 import { TextField as TextField4 } from "@elementor/ui";
 var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
+var RESTRICTED_INPUT_KEYS2 = ["e", "E", "+", "-"];
 var NumberControl = createControl(
   ({
     placeholder,
@@ -1161,7 +1223,12 @@ var NumberControl = createControl(
         value: isEmptyOrNaN(value) ? "" : value,
         onChange: handleChange,
         placeholder,
-        inputProps: { step }
+        inputProps: { step },
+        onKeyDown: (event) => {
+          if (RESTRICTED_INPUT_KEYS2.includes(event.key)) {
+            event.preventDefault();
+          }
+        }
       }
     ));
   }
@@ -1366,7 +1433,7 @@ var Control3 = ({
 
 // src/controls/font-family-control/font-family-control.tsx
 import * as React31 from "react";
-import { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
 import { stringPropTypeUtil as stringPropTypeUtil6 } from "@elementor/editor-props";
 import { ChevronDownIcon, SearchIcon, TextIcon, XIcon as XIcon2 } from "@elementor/icons";
 import {
@@ -1416,7 +1483,7 @@ var enqueueFont = (fontFamily, context = "editor") => {
 // src/controls/font-family-control/font-family-control.tsx
 var SIZE2 = "tiny";
 var FontFamilyControl = createControl(({ fontFamilies }) => {
-  const [searchValue, setSearchValue] = useState3("");
+  const [searchValue, setSearchValue] = useState4("");
   const { value: fontFamily, setValue: setFontFamily } = useBoundProp(stringPropTypeUtil6);
   const popoverState = usePopupState4({ variant: "popover" });
   const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
@@ -1448,6 +1515,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
     /* @__PURE__ */ React31.createElement(Stack9, null, /* @__PURE__ */ React31.createElement(Stack9, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React31.createElement(TextIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React31.createElement(Typography2, { variant: "subtitle2" }, __8("Font Family", "elementor")), /* @__PURE__ */ React31.createElement(IconButton2, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React31.createElement(XIcon2, { fontSize: SIZE2 }))), /* @__PURE__ */ React31.createElement(Box2, { px: 1.5, pb: 1 }, /* @__PURE__ */ React31.createElement(
       TextField5,
       {
+        autoFocus: true,
         fullWidth: true,
         size: SIZE2,
         value: searchValue,
@@ -1625,7 +1693,7 @@ var StyledMenuList = styled4(MenuList)(({ theme }) => ({
   position: "relative"
 }));
 var useDebounce = (fn, delay) => {
-  const [debouncedFn] = useState3(() => debounce(fn, delay));
+  const [debouncedFn] = useState4(() => debounce(fn, delay));
   useEffect3(() => () => debouncedFn.cancel(), [debouncedFn]);
   return debouncedFn;
 };
@@ -1651,7 +1719,7 @@ var UrlControl = createControl(({ placeholder }) => {
 
 // src/controls/link-control.tsx
 import * as React34 from "react";
-import { useMemo, useState as useState4 } from "react";
+import { useMemo, useState as useState5 } from "react";
 import { getLinkInLinkRestriction, selectElement } from "@elementor/editor-elements";
 import {
   booleanPropTypeUtil,
@@ -1789,7 +1857,7 @@ var learnMoreButton = {
 var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(linkPropTypeUtil);
   const [linkSessionValue, setLinkSessionValue] = useSessionStorage(path.join("/"));
-  const [isActive, setIsActive] = useState4(!!value);
+  const [isActive, setIsActive] = useState5(!!value);
   const {
     allowCustomValues,
     queryOptions: { endpoint = "", requestParams = {} },
@@ -1797,8 +1865,8 @@ var LinkControl = createControl((props) => {
     minInputLength = 2,
     context: { elementId }
   } = props || {};
-  const [linkInLinkRestriction, setLinkInLinkRestriction] = useState4(getLinkInLinkRestriction(elementId));
-  const [options, setOptions] = useState4(
+  const [linkInLinkRestriction, setLinkInLinkRestriction] = useState5(getLinkInLinkRestriction(elementId));
+  const [options, setOptions] = useState5(
     generateFirstLoadedOption(value)
   );
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
@@ -1855,7 +1923,8 @@ var LinkControl = createControl((props) => {
       direction: "row",
       sx: {
         justifyContent: "space-between",
-        alignItems: "center"
+        alignItems: "center",
+        marginInlineEnd: -0.75
       }
     },
     /* @__PURE__ */ React34.createElement(ControlFormLabel, null, __9("Link", "elementor")),
@@ -1894,7 +1963,7 @@ var SwitchControl = ({ disabled }) => {
       opacity: 0
     }
   } : {};
-  return /* @__PURE__ */ React34.createElement(Grid7, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React34.createElement(Grid7, { item: true }, /* @__PURE__ */ React34.createElement(ControlFormLabel, null, __9("Open in a new tab", "elementor"))), /* @__PURE__ */ React34.createElement(Grid7, { item: true }, /* @__PURE__ */ React34.createElement(Switch, { checked: value, onClick, disabled, inputProps })));
+  return /* @__PURE__ */ React34.createElement(Grid7, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React34.createElement(Grid7, { item: true }, /* @__PURE__ */ React34.createElement(ControlFormLabel, null, __9("Open in a new tab", "elementor"))), /* @__PURE__ */ React34.createElement(Grid7, { item: true, sx: { marginInlineEnd: -1 } }, /* @__PURE__ */ React34.createElement(Switch, { checked: value, onClick, disabled, inputProps })));
 };
 async function fetchOptions(ajaxUrl, params) {
   if (!params || !ajaxUrl) {
@@ -2007,7 +2076,7 @@ var Control4 = ({ bind, isLinked }) => {
 
 // src/controls/svg-media-control.tsx
 import * as React37 from "react";
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { imageSrcPropTypeUtil as imageSrcPropTypeUtil2 } from "@elementor/editor-props";
 import { UploadIcon as UploadIcon2 } from "@elementor/icons";
 import { Button as Button4, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress3, Stack as Stack12, styled as styled5 } from "@elementor/ui";
@@ -2016,7 +2085,7 @@ import { __ as __12 } from "@wordpress/i18n";
 
 // src/components/enable-unfiltered-modal.tsx
 import * as React36 from "react";
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import {
   Button as Button3,
@@ -2049,7 +2118,7 @@ var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
 var EnableUnfilteredModal = (props) => {
   const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
   const { canUser } = useCurrentUserCapabilities();
-  const [isError, setIsError] = useState5(false);
+  const [isError, setIsError] = useState6(false);
   const canManageOptions = canUser("manage_options");
   const onClose = (enabled) => {
     props.onClose(enabled);
@@ -2114,7 +2183,7 @@ var SvgMediaControl = createControl(() => {
   const { data: attachment, isFetching } = useWpMediaAttachment2(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
-  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState6(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState7(false);
   const { open } = useWpMediaFrame2({
     mediaTypes: ["svg"],
     multiple: false,