@elementor/editor-controls 4.4.0-1078 → 4.4.0-1079

package/dist/index.mjs

@@ -5315,7 +5315,7 @@ var AspectRatioControl = createControl(({ label }) => {
 
 // src/controls/svg-media-control.tsx
 import * as React85 from "react";
-import { useEffect as useEffect16, useRef as useRef15, useState as useState17 } from "react";
+import { useEffect as useEffect16, useRef as useRef15, useState as useState16 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import { iconPropTypeUtil, svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil4 } from "@elementor/editor-props";
 import { Box as Box18, Card as Card2, CardOverlay as CardOverlay2, Popover as Popover6, Stack as Stack15, styled as styled11, usePopupState as usePopupState8 } from "@elementor/ui";
@@ -5399,7 +5399,7 @@ function measureIconLibraryAnchor(container, buttonGroup) {
 
 // src/controls/icon-library/icon-library-popover.tsx
 import * as React82 from "react";
-import { useMemo as useMemo12, useState as useState16 } from "react";
+import { useMemo as useMemo12 } from "react";
 import {
   PopoverBody as PopoverBody2,
   PopoverHeader as PopoverHeader4,
@@ -5409,6 +5409,7 @@ import {
 } from "@elementor/editor-ui";
 import { ComponentsIcon } from "@elementor/icons";
 import { Box as Box15, CircularProgress as CircularProgress3, Divider as Divider4, Link as Link3, Stack as Stack13, styled as styled9, Typography as Typography7 } from "@elementor/ui";
+import { useDebounceState } from "@elementor/utils";
 import { __ as __32 } from "@wordpress/i18n";
 
 // src/controls/icon-library/font-awesome-7-data.ts
@@ -5683,6 +5684,7 @@ function useFontAwesome7Catalog(enabled) {
 // src/controls/icon-library/icon-library-popover.tsx
 var ICON_LIBRARY_POPOVER_WIDTH = 300;
 var ICON_LIBRARY_ROW_HEIGHT = 48;
+var ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY = 300;
 var ICON_TILE_SIZE = 40;
 var ICON_GLYPH_SIZE = 20;
 var ICON_LIBRARY_INLINE_SPACING = 1;
@@ -5699,7 +5701,12 @@ var IconLibraryPopover = ({
   onClose,
   width = ICON_LIBRARY_POPOVER_WIDTH
 }) => {
-  const [searchValue, setSearchValue] = useState16("");
+  const {
+    debouncedValue: searchValue,
+    inputValue: searchInputValue,
+    handleChange: handleSearchChange,
+    setImmediateValue: setSearchValue
+  } = useDebounceState({ delay: ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY });
   const { data: icons = [], isLoading } = useFontAwesome7Catalog(open);
   const items2 = useMemo12(() => createIconLibraryItems(icons, searchValue), [icons, searchValue]);
   const selectedValue = useMemo12(
@@ -5734,8 +5741,8 @@ var IconLibraryPopover = ({
   ), /* @__PURE__ */ React82.createElement(
     SearchField2,
     {
-      value: searchValue,
-      onSearch: setSearchValue,
+      value: searchInputValue,
+      onSearch: handleSearchChange,
       placeholder: __32("Search", "elementor"),
       id: "icon-library-search",
       sx: { px: ICON_LIBRARY_INLINE_SPACING, pb: 1 }
@@ -6018,11 +6025,11 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
   const { data: attachment, isFetching } = useWpMediaAttachment2(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
-  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState17(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState16(false);
   const iconLibraryPopoverState = usePopupState8({ variant: "popover" });
   const controlContainerRef = useRef15(null);
   const buttonGroupRef = useRef15(null);
-  const [iconLibraryAnchor, setIconLibraryAnchor] = useState17(null);
+  const [iconLibraryAnchor, setIconLibraryAnchor] = useState16(null);
   const { isAdmin } = useCurrentUserCapabilities();
   const selectedIconClass = showIconLibrary && typeof iconValue?.value?.value === "string" ? iconValue.value.value : null;
   const selectedIconLibrary = showIconLibrary && typeof iconValue?.library?.value === "string" ? iconValue.library.value : null;
@@ -6989,7 +6996,7 @@ var getAllProperties = (pattern) => {
 
 // src/controls/key-value-control.tsx
 import * as React95 from "react";
-import { useMemo as useMemo14, useState as useState18 } from "react";
+import { useMemo as useMemo14, useState as useState17 } from "react";
 import {
   isTransformable,
   keyValuePropTypeUtil,
@@ -7020,9 +7027,9 @@ var getInitialFieldValue = (fieldValue) => {
 };
 var KeyValueControl = createControl((props = {}) => {
   const { value, setValue, ...propContext } = useBoundProp(keyValuePropTypeUtil);
-  const [keyError, setKeyError] = useState18("");
-  const [valueError, setValueError] = useState18("");
-  const [sessionState, setSessionState] = useState18({
+  const [keyError, setKeyError] = useState17("");
+  const [valueError, setValueError] = useState17("");
+  const [sessionState, setSessionState] = useState17({
     key: getInitialFieldValue(value?.key),
     value: getInitialFieldValue(value?.value)
   });
@@ -7771,7 +7778,7 @@ var TransformBasePopoverTrigger = ({
 
 // src/controls/transition-control/transition-repeater-control.tsx
 import * as React112 from "react";
-import { useEffect as useEffect17, useMemo as useMemo17, useState as useState19 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo17, useState as useState18 } from "react";
 import {
   createArrayPropUtils as createArrayPropUtils3,
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2
@@ -8318,7 +8325,7 @@ var TransitionRepeaterControl = createControl(
     currentStyleState
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
-    const [recentlyUsedList, setRecentlyUsedList] = useState19([]);
+    const [recentlyUsedList, setRecentlyUsedList] = useState18([]);
     const proInstalled = hasProInstalled2();
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
     const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo17(
@@ -8634,7 +8641,7 @@ var BoundTimeStringControl = ({ bind, ariaLabel }) => {
 
 // src/controls/inline-editing-control.tsx
 import * as React121 from "react";
-import { useCallback as useCallback4, useState as useState21 } from "react";
+import { useCallback as useCallback4, useState as useState20 } from "react";
 import { escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil2 } from "@elementor/editor-props";
 import { Box as Box30 } from "@elementor/ui";
 
@@ -8814,7 +8821,7 @@ var useOnUpdate = (callback, dependencies) => {
 
 // src/components/inline-editor-toolbar.tsx
 import * as React120 from "react";
-import { useEffect as useEffect20, useMemo as useMemo18, useRef as useRef31, useState as useState20 } from "react";
+import { useEffect as useEffect20, useMemo as useMemo18, useRef as useRef31, useState as useState19 } from "react";
 import { getContainer as getContainer2, getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
@@ -8909,8 +8916,8 @@ var InlineEditorToolbar = ({
   sx = {},
   inControlPanel = false
 }) => {
-  const [urlValue, setUrlValue] = useState20("");
-  const [openInNewTab, setOpenInNewTab] = useState20(false);
+  const [urlValue, setUrlValue] = useState19("");
+  const [openInNewTab, setOpenInNewTab] = useState19(false);
   const toolbarRef = useRef31(null);
   const linkPopupState = usePopupState11({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
@@ -9136,7 +9143,7 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
   const { setValue, placeholder, value } = useBoundProp(escapedHtmlPropTypeUtil2);
   const { value: rawValue } = usePropKeyContext();
   const content = value ?? extractInlineHtmlContent(rawValue);
-  const [editor, setEditor] = useState21(null);
+  const [editor, setEditor] = useState20(null);
   const handleChange = useCallback4(
     (newValue) => {
       const html = newValue ?? "";
@@ -9319,7 +9326,7 @@ function useFormFieldSuggestions(options) {
 
 // src/controls/email-form-action-control/email-chips-field.tsx
 import * as React122 from "react";
-import { useMemo as useMemo19, useState as useState22 } from "react";
+import { useMemo as useMemo19, useState as useState21 } from "react";
 import { stringArrayPropTypeUtil as stringArrayPropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil23 } from "@elementor/editor-props";
 import { Autocomplete as Autocomplete4, Grid as Grid32, TextField as TextField12 } from "@elementor/ui";
 
@@ -9357,7 +9364,7 @@ function resolveMention(raw, suggestions) {
 }
 var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
   const { value, setValue, disabled } = useBoundProp(stringArrayPropTypeUtil3);
-  const [inputValue, setInputValue] = useState22("");
+  const [inputValue, setInputValue] = useState21("");
   const items2 = value || [];
   const selectedValues = items2.map((item) => stringPropTypeUtil23.extract(item)).filter((val) => val !== null);
   const suggestionOptions = useMemo19(
@@ -9587,7 +9594,7 @@ import { __ as __65 } from "@wordpress/i18n";
 
 // src/components/promotions/promotion-trigger.tsx
 import * as React128 from "react";
-import { forwardRef as forwardRef12, useCallback as useCallback5, useImperativeHandle, useState as useState23 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback5, useImperativeHandle, useState as useState22 } from "react";
 import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
 import { Box as Box32 } from "@elementor/ui";
 function getV4Promotion(key) {
@@ -9595,7 +9602,7 @@ function getV4Promotion(key) {
 }
 var PromotionTrigger = forwardRef12(
   ({ promotionKey, children, trackingData }, ref) => {
-    const [isOpen, setIsOpen] = useState23(false);
+    const [isOpen, setIsOpen] = useState22(false);
     const promotion = getV4Promotion(promotionKey);
     const toggle = useCallback5(() => {
       setIsOpen((prev) => {
@@ -9715,7 +9722,7 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 import * as React132 from "react";
-import { useEffect as useEffect21, useState as useState24 } from "react";
+import { useEffect as useEffect21, useState as useState23 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon5, XIcon as XIcon4 } from "@elementor/icons";
 import {
   bindPopover as bindPopover9,
@@ -9745,7 +9752,7 @@ var Repeater3 = ({
   isSortable = true,
   adornment = ControlAdornments
 }) => {
-  const [openItem, setOpenItem] = useState24(initialOpenItem);
+  const [openItem, setOpenItem] = useState23(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -9921,7 +9928,7 @@ var RepeaterItem = ({
   ), /* @__PURE__ */ React132.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React132.createElement(Box33, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen, onPopoverClose) => {
-  const [ref, setRef] = useState24(null);
+  const [ref, setRef] = useState23(null);
   const popoverState = usePopupState12({ variant: "popover" });
   const popoverProps = bindPopover9(popoverState);
   useEffect21(() => {