@elementor/editor-controls 4.2.0-946 → 4.2.0-beta2

package/dist/index.mjs

@@ -779,11 +779,11 @@ function useTypingBuffer(options = {}) {
 var lengthUnits = ["px", "%", "em", "rem", "vw", "vh", "ch"];
 var angleUnits = ["deg", "rad", "grad", "turn"];
 var timeUnits = ["s", "ms"];
-var defaultExtendedOptions = ["auto", "custom"];
 var DEFAULT_UNIT = "px";
 var DEFAULT_SIZE = NaN;
+var extendedOptions = ["auto", "custom"];
 function isUnitExtendedOption(unit) {
-  return defaultExtendedOptions.includes(unit);
+  return extendedOptions.includes(unit);
 }
 
 // src/components/size-control/text-field-inner-selection.tsx
@@ -1121,13 +1121,13 @@ var TextFieldPopover = (props) => {
 import { useMemo } from "react";
 function useSizeExtendedOptions(options, disableCustom) {
   return useMemo(() => {
-    const extendedOptions = [...options];
-    if (!disableCustom && !extendedOptions.includes("custom")) {
-      extendedOptions.push("custom");
+    const extendedOptions2 = [...options];
+    if (!disableCustom && !extendedOptions2.includes("custom")) {
+      extendedOptions2.push("custom");
     } else if (options.includes("custom")) {
-      extendedOptions.splice(extendedOptions.indexOf("custom"), 1);
+      extendedOptions2.splice(extendedOptions2.indexOf("custom"), 1);
     }
-    return extendedOptions;
+    return extendedOptions2;
   }, [options, disableCustom]);
 }
 
@@ -1164,6 +1164,11 @@ var useSyncExternalState = ({
   return [internal, setInternalValue];
 };
 
+// src/controls/size-control/utils/settings/get-prop-type-settings.ts
+var getPropTypeSettings = (propType) => {
+  return propType.settings;
+};
+
 // src/controls/size-control.tsx
 var defaultSelectedUnit = {
   length: "px",
@@ -1184,7 +1189,7 @@ var SizeControl = createControl(
     placeholder,
     startIcon,
     anchorRef,
-    extendedOptions,
+    extendedOptions: extendedOptions2,
     disableCustom,
     min = 0,
     enablePropTypeUnits = false,
@@ -1201,7 +1206,7 @@ var SizeControl = createControl(
     } = useBoundProp(sizePropTypeUtil2);
     const actualDefaultUnit = defaultUnit ?? externalPlaceholder?.unit ?? defaultSelectedUnit[variant];
     const activeBreakpoint = useActiveBreakpoint();
-    const actualExtendedOptions = useSizeExtendedOptions(extendedOptions || [], disableCustom ?? false);
+    const actualExtendedOptions = useSizeExtendedOptions(extendedOptions2 || [], disableCustom ?? false);
     const actualUnits = resolveUnits(propType, enablePropTypeUnits, variant, units2, actualExtendedOptions);
     const popupState = usePopupState2({ variant: "popover" });
     const memorizedExternalState = useMemo2(
@@ -1290,7 +1295,7 @@ function resolveUnits(propType, enablePropTypeUnits, variant, externalUnits, act
   if (!enablePropTypeUnits) {
     return [...externalUnits ?? fallback, ...actualExtendedOptions || []];
   }
-  return propType.settings?.available_units ?? fallback;
+  return getPropTypeSettings(propType)?.available_units ?? fallback;
 }
 function formatSize(size, unit) {
   if (isUnitExtendedOption(unit)) {
@@ -3626,11 +3631,6 @@ var resolvePlaceholder = (placeholder) => {
   return typeof size === "number" ? size.toString() : size;
 };
 
-// src/controls/size-control/utils/settings/get-prop-type-settings.ts
-var getPropTypeSettings = (propType) => {
-  return propType.settings;
-};
-
 // src/controls/size-control/utils/settings/get-default-unit.ts
 var getDefaultUnit = (propType) => {
   return getPropTypeSettings(propType)?.default_unit;
@@ -4187,7 +4187,7 @@ var UrlControl = createControl(
 
 // src/controls/link-control.tsx
 import * as React73 from "react";
-import { useEffect as useEffect13, useState as useState12 } from "react";
+import { useEffect as useEffect14, useState as useState12 } from "react";
 import { getLinkInLinkRestriction } from "@elementor/editor-elements";
 import { linkPropTypeUtil } from "@elementor/editor-props";
 import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
@@ -4415,7 +4415,7 @@ function factoryFilter(newValue, options, minInputLength) {
 }
 
 // src/hooks/use-query-autocomplete.ts
-import { useMemo as useMemo9, useState as useState11 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo9, useState as useState11 } from "react";
 import { numberPropTypeUtil as numberPropTypeUtil2, stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
 import { httpService as httpService2 } from "@elementor/http-client";
 import { debounce as debounce2 } from "@elementor/utils";
@@ -4439,12 +4439,19 @@ function useQueryAutocomplete({
     ),
     [url, excludeIdSet]
   );
+  useEffect13(() => {
+    if (minInputLength === 0 && url) {
+      fetchOptions(url, { ...params, term: "" }).then((newOptions) => {
+        setOptions(formatOptions(filterExcludedOptions(newOptions, excludeIdSet)));
+      });
+    }
+  }, [url, minInputLength, excludeIdSet, params]);
   const updateOptions = (term) => {
-    setOptions([]);
-    if (!term || !url || term.length < minInputLength) {
+    const termStr = term ?? "";
+    if (!url || termStr.length < minInputLength) {
       return;
     }
-    debounceFetch({ ...params, term });
+    debounceFetch({ ...params, term: termStr });
   };
   return { options, updateOptions };
 }
@@ -4609,7 +4616,7 @@ var LinkControl = createControl((props) => {
     },
     [debouncedCheckRestriction]
   );
-  useEffect13(() => {
+  useEffect14(() => {
     debouncedCheckRestriction();
     const handleInlineLinkChanged = () => {
       debouncedCheckRestriction();
@@ -5098,7 +5105,7 @@ var GapControl = ({ label }) => {
   const disabled = sizeDisabled || directionDisabled;
   const propProviderProps = {
     propType,
-    value: directionValue ?? (!isLinked ? { row: masterPlaceholder, column: masterPlaceholder } : null),
+    value: directionValue ?? (!isLinked ? { row: directionPlaceholder?.row, column: directionPlaceholder?.column } : null),
     setValue: (directions) => {
       const entries = Object.entries(directions);
       const filtered = entries.filter(([, value]) => Boolean(value));
@@ -5162,7 +5169,7 @@ var Control4 = ({
 
 // src/controls/aspect-ratio-control.tsx
 import * as React79 from "react";
-import { useEffect as useEffect14, useState as useState14 } from "react";
+import { useEffect as useEffect15, useState as useState14 } from "react";
 import { stringPropTypeUtil as stringPropTypeUtil13 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem5 } from "@elementor/editor-ui";
 import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
@@ -5195,7 +5202,7 @@ var AspectRatioControl = createControl(({ label }) => {
   const [selectedValue, setSelectedValue] = useState14(
     isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
   );
-  useEffect14(() => {
+  useEffect15(() => {
     const isCustomValue = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
     if (isCustomValue) {
       const [width, height] = aspectRatioValue.split("/");
@@ -7046,7 +7053,7 @@ var TransformBasePopoverTrigger = ({
 
 // src/controls/transition-control/transition-repeater-control.tsx
 import * as React108 from "react";
-import { useEffect as useEffect15, useMemo as useMemo16, useState as useState18 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo16, useState as useState18 } from "react";
 import {
   createArrayPropUtils as createArrayPropUtils3,
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2
@@ -7612,7 +7619,7 @@ var TransitionRepeaterControl = createControl(
       });
       return set;
     }, [proInstalled]);
-    useEffect15(() => {
+    useEffect16(() => {
       if (!value || value.length === 0) {
         return;
       }
@@ -7624,7 +7631,7 @@ var TransitionRepeaterControl = createControl(
         setValue(sanitized);
       }
     }, [allowedTransitionSet]);
-    useEffect15(() => {
+    useEffect16(() => {
       recentlyUsedListGetter().then(setRecentlyUsedList);
     }, [recentlyUsedListGetter]);
     const allPropertiesUsed = useMemo16(() => areAllPropertiesUsed(value), [value]);
@@ -7910,14 +7917,14 @@ var BoundTimeStringControl = ({ bind, ariaLabel }) => {
 
 // src/controls/inline-editing-control.tsx
 import * as React115 from "react";
-import { useCallback as useCallback4, useEffect as useEffect17, useMemo as useMemo17 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect18, useMemo as useMemo17 } from "react";
 import { htmlV3PropTypeUtil, parseHtmlChildren, stringPropTypeUtil as stringPropTypeUtil20 } from "@elementor/editor-props";
 import { Box as Box25 } from "@elementor/ui";
 import { debounce as debounce3 } from "@elementor/utils";
 
 // src/components/inline-editor.tsx
 import * as React114 from "react";
-import { useEffect as useEffect16, useRef as useRef28 } from "react";
+import { useEffect as useEffect17, useRef as useRef28 } from "react";
 import { Box as Box24 } from "@elementor/ui";
 import Bold from "@tiptap/extension-bold";
 import Document from "@tiptap/extension-document";
@@ -8070,7 +8077,7 @@ var InlineEditor = React114.forwardRef((props, ref) => {
 });
 var useOnUpdate = (callback, dependencies) => {
   const hasMounted = useRef28(false);
-  useEffect16(() => {
+  useEffect17(() => {
     if (hasMounted.current) {
       callback();
     } else {
@@ -8110,7 +8117,7 @@ var InlineEditingControl = createControl(
       },
       [setValue, value?.children, debouncedParse]
     );
-    useEffect17(() => () => debouncedParse.cancel(), [debouncedParse]);
+    useEffect18(() => () => debouncedParse.cancel(), [debouncedParse]);
     return /* @__PURE__ */ React115.createElement(ControlActions, null, /* @__PURE__ */ React115.createElement(
       Box25,
       {
@@ -8627,7 +8634,7 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 import * as React126 from "react";
-import { useEffect as useEffect18, useState as useState21 } from "react";
+import { useEffect as useEffect19, useState as useState21 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon5, XIcon as XIcon4 } from "@elementor/icons";
 import {
   bindPopover as bindPopover8,
@@ -8835,7 +8842,7 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
   const [ref, setRef] = useState21(null);
   const popoverState = usePopupState10({ variant: "popover" });
   const popoverProps = bindPopover8(popoverState);
-  useEffect18(() => {
+  useEffect19(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -8855,7 +8862,7 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
 
 // src/components/inline-editor-toolbar.tsx
 import * as React128 from "react";
-import { useEffect as useEffect20, useMemo as useMemo18, useRef as useRef32, useState as useState22 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo18, useRef as useRef32, useState as useState22 } from "react";
 import { getContainer as getContainer3, getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
@@ -8881,7 +8888,7 @@ import { __ as __64 } from "@wordpress/i18n";
 
 // src/components/url-popover.tsx
 import * as React127 from "react";
-import { useEffect as useEffect19, useRef as useRef31 } from "react";
+import { useEffect as useEffect20, useRef as useRef31 } from "react";
 import { ExternalLinkIcon } from "@elementor/icons";
 import { bindPopover as bindPopover9, Popover as Popover8, Stack as Stack23, TextField as TextField13, ToggleButton as ToggleButton2, Tooltip as Tooltip13 } from "@elementor/ui";
 import { __ as __63 } from "@wordpress/i18n";
@@ -8895,7 +8902,7 @@ var UrlPopover = ({
   onToggleNewTab
 }) => {
   const inputRef = useRef31(null);
-  useEffect19(() => {
+  useEffect20(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -8991,7 +8998,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
     }
     linkPopupState.close();
   };
-  useEffect20(() => {
+  useEffect21(() => {
     editor?.commands?.focus();
   }, [editor]);
   return /* @__PURE__ */ React128.createElement(