@elementor/editor-controls 3.33.0-250 → 3.33.0-252

package/dist/index.mjs

@@ -523,7 +523,7 @@ var TextAreaControl = createControl(({ placeholder, ariaLabel }) => {
 
 // src/controls/size-control.tsx
 import * as React18 from "react";
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect3, useState as useState5 } from "react";
 import { sizePropTypeUtil as sizePropTypeUtil2 } from "@elementor/editor-props";
 import { useActiveBreakpoint } from "@elementor/editor-responsive";
 import { usePopupState as usePopupState2 } from "@elementor/ui";
@@ -946,12 +946,13 @@ var SizeControl = createControl(
       propType
     } = useBoundProp(sizePropTypeUtil2);
     const actualDefaultUnit = defaultUnit ?? externalPlaceholder?.unit ?? defaultSelectedUnit[variant];
+    const [internalState, setInternalState] = useState5(createStateFromSizeProp(sizeValue, actualDefaultUnit));
     const activeBreakpoint = useActiveBreakpoint();
     const actualUnits = resolveUnits(propType, enablePropTypeUnits, variant, units2);
     const actualExtendedOptions = useSizeExtendedOptions(extendedOptions || [], disableCustom ?? false);
     const popupState = usePopupState2({ variant: "popover" });
     const [state, setState] = useSyncExternalState({
-      external: createStateFromSizeProp(sizeValue, actualDefaultUnit),
+      external: internalState,
       setExternal: (newState, options, meta) => setSizeValue(extractValueFromState(newState), options, meta),
       persistWhen: (newState) => !!extractValueFromState(newState),
       fallback: (newState) => ({
@@ -1006,7 +1007,7 @@ var SizeControl = createControl(
         return;
       }
       if (state.unit === newState.unit) {
-        setState(mergedStates);
+        setInternalState(mergedStates);
         return;
       }
       setState(newState);
@@ -1188,7 +1189,7 @@ import { __ as __5, sprintf } from "@wordpress/i18n";
 
 // src/components/control-repeater/context/repeater-context.tsx
 import * as React22 from "react";
-import { createContext as createContext7, useMemo as useMemo2, useState as useState5 } from "react";
+import { createContext as createContext7, useMemo as useMemo2, useState as useState6 } from "react";
 import { usePopupState as usePopupState3 } from "@elementor/ui";
 
 // src/services/event-bus.ts
@@ -1255,7 +1256,7 @@ var RepeaterContextProvider = ({
     setExternal: setRepeaterValues,
     persistWhen: () => true
   });
-  const [uniqueKeys, setUniqueKeys] = useState5(() => {
+  const [uniqueKeys, setUniqueKeys] = useState6(() => {
     return items2?.map((_, index) => index) ?? [];
   });
   const itemsWithKeys = useMemo2(
@@ -1268,8 +1269,8 @@ var RepeaterContextProvider = ({
   const handleSetItems = (newItemsWithKeys) => {
     setItems(newItemsWithKeys.map(({ item }) => item));
   };
-  const [openItemIndex, setOpenItemIndex] = useState5(EMPTY_OPEN_ITEM);
-  const [rowRef, setRowRef] = useState5(null);
+  const [openItemIndex, setOpenItemIndex] = useState6(EMPTY_OPEN_ITEM);
+  const [rowRef, setRowRef] = useState6(null);
   const isOpen = openItemIndex !== EMPTY_OPEN_ITEM;
   const popoverState = usePopupState3({ variant: "popover" });
   const addItem = (ev, config) => {
@@ -2126,7 +2127,7 @@ function ensureFilterConfig(name) {
 
 // src/controls/select-control-wrapper.tsx
 import * as React49 from "react";
-import { useEffect as useEffect4, useState as useState6 } from "react";
+import { useEffect as useEffect4, useState as useState7 } from "react";
 var getOffCanvasElements = () => {
   const extendedWindow = window;
   const documentId = extendedWindow.elementor.config.document.id;
@@ -2144,7 +2145,7 @@ var collectionMethods = {
   "off-canvas": getOffCanvasElements
 };
 var useDynamicOptions = (collectionId, initialOptions) => {
-  const [options, setOptions] = useState6(initialOptions ?? []);
+  const [options, setOptions] = useState7(initialOptions ?? []);
   useEffect4(() => {
     if (!collectionId || !collectionMethods[collectionId]) {
       setOptions(initialOptions ?? []);
@@ -2167,7 +2168,7 @@ import { stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-pro
 
 // src/components/control-toggle-button-group.tsx
 import * as React51 from "react";
-import { useEffect as useEffect5, useMemo as useMemo4, useRef as useRef7, useState as useState7 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo4, useRef as useRef7, useState as useState8 } from "react";
 import { ChevronDownIcon } from "@elementor/icons";
 import {
   ListItemText,
@@ -2320,7 +2321,7 @@ var SplitButtonGroup = ({
   value
 }) => {
   const previewButton = usePreviewButton(items2, value);
-  const [isMenuOpen, setIsMenuOpen] = useState7(false);
+  const [isMenuOpen, setIsMenuOpen] = useState8(false);
   const menuButtonRef = useRef7(null);
   const onMenuToggle = (ev) => {
     setIsMenuOpen((prev) => !prev);
@@ -2390,7 +2391,7 @@ var SplitButtonGroup = ({
   ));
 };
 var usePreviewButton = (items2, value) => {
-  const [previewButton, setPreviewButton] = useState7(
+  const [previewButton, setPreviewButton] = useState8(
     items2.find((item) => item.value === value) ?? items2[0]
   );
   useEffect5(() => {
@@ -2799,7 +2800,7 @@ import { __ as __20 } from "@wordpress/i18n";
 
 // src/components/item-selector.tsx
 import * as React58 from "react";
-import { useCallback, useEffect as useEffect6, useState as useState8 } from "react";
+import { useCallback, useEffect as useEffect6, useState as useState9 } from "react";
 import { PopoverBody, PopoverHeader as PopoverHeader2, PopoverMenuList, SearchField } from "@elementor/editor-ui";
 import { Box as Box7, Divider as Divider2, Link, Stack as Stack9, Typography as Typography4 } from "@elementor/ui";
 import { debounce } from "@elementor/utils";
@@ -2836,7 +2837,7 @@ var ItemSelector = ({
   disabledItems,
   id = "item-selector"
 }) => {
-  const [searchValue, setSearchValue] = useState8("");
+  const [searchValue, setSearchValue] = useState9("");
   const filteredItemsList = useFilteredItemsList(itemsList, searchValue, disabledItems);
   const IconComponent = icon;
   const handleSearch = (value) => {
@@ -2948,7 +2949,7 @@ var ItemList = ({
   );
 };
 var useDebounce = (fn, delay) => {
-  const [debouncedFn] = useState8(() => debounce(fn, delay));
+  const [debouncedFn] = useState9(() => debounce(fn, delay));
   useEffect6(() => () => debouncedFn.cancel(), [debouncedFn]);
   return debouncedFn;
 };
@@ -3050,7 +3051,7 @@ var UrlControl = createControl(
 
 // src/controls/link-control.tsx
 import * as React65 from "react";
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 import { getLinkInLinkRestriction } from "@elementor/editor-elements";
 import { linkPropTypeUtil } from "@elementor/editor-props";
 import { MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
@@ -3119,7 +3120,7 @@ var RestrictedLinkInfotip = ({
 
 // src/controls/query-control.tsx
 import * as React63 from "react";
-import { useMemo as useMemo6, useState as useState9 } from "react";
+import { useMemo as useMemo6, useState as useState10 } from "react";
 import { numberPropTypeUtil as numberPropTypeUtil2, stringPropTypeUtil as stringPropTypeUtil6, urlPropTypeUtil as urlPropTypeUtil2 } from "@elementor/editor-props";
 import { httpService as httpService2 } from "@elementor/http-client";
 import { SearchIcon } from "@elementor/icons";
@@ -3268,7 +3269,7 @@ var QueryControl = createControl((props) => {
     ariaLabel
   } = props || {};
   const normalizedPlaceholder = placeholder || __22("Search", "elementor");
-  const [options, setOptions] = useState9(
+  const [options, setOptions] = useState10(
     generateFirstLoadedOption(value?.value)
   );
   const onOptionChange = (newValue) => {
@@ -3390,7 +3391,7 @@ var SIZE6 = "tiny";
 var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(linkPropTypeUtil);
   const [linkSessionValue, setLinkSessionValue] = useSessionStorage(path.join("/"));
-  const [isActive, setIsActive] = useState10(!!value);
+  const [isActive, setIsActive] = useState11(!!value);
   const {
     allowCustomValues = true,
     queryOptions,
@@ -3400,7 +3401,7 @@ var LinkControl = createControl((props) => {
     label = __23("Link", "elementor"),
     ariaLabel
   } = props || {};
-  const [linkInLinkRestriction, setLinkInLinkRestriction] = useState10(getLinkInLinkRestriction(elementId));
+  const [linkInLinkRestriction, setLinkInLinkRestriction] = useState11(getLinkInLinkRestriction(elementId));
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
   const onEnabledChange = () => {
     setLinkInLinkRestriction(getLinkInLinkRestriction(elementId));
@@ -3622,7 +3623,7 @@ var Control4 = ({
 
 // src/controls/aspect-ratio-control.tsx
 import * as React69 from "react";
-import { useEffect as useEffect7, useState as useState11 } from "react";
+import { useEffect as useEffect7, useState as useState12 } from "react";
 import { stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem4 } from "@elementor/editor-ui";
 import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
@@ -3643,10 +3644,10 @@ var AspectRatioControl = createControl(({ label }) => {
   const { value: aspectRatioValue, setValue: setAspectRatioValue, disabled } = useBoundProp(stringPropTypeUtil8);
   const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
   const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
-  const [isCustom, setIsCustom] = useState11(isCustomSelected);
-  const [customWidth, setCustomWidth] = useState11(initialWidth);
-  const [customHeight, setCustomHeight] = useState11(initialHeight);
-  const [selectedValue, setSelectedValue] = useState11(
+  const [isCustom, setIsCustom] = useState12(isCustomSelected);
+  const [customWidth, setCustomWidth] = useState12(initialWidth);
+  const [customHeight, setCustomHeight] = useState12(initialHeight);
+  const [selectedValue, setSelectedValue] = useState12(
     isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
   );
   useEffect7(() => {
@@ -3733,7 +3734,7 @@ var AspectRatioControl = createControl(({ label }) => {
 
 // src/controls/svg-media-control.tsx
 import * as React71 from "react";
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import { imageSrcPropTypeUtil as imageSrcPropTypeUtil2 } from "@elementor/editor-props";
 import { UploadIcon as UploadIcon2 } from "@elementor/icons";
@@ -3743,7 +3744,7 @@ import { __ as __28 } from "@wordpress/i18n";
 
 // src/components/enable-unfiltered-modal.tsx
 import * as React70 from "react";
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 import {
   Button as Button3,
   CircularProgress as CircularProgress2,
@@ -3769,7 +3770,7 @@ var ADMIN_FAILED_CONTENT_TEXT_PT2 = __27(
 var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
 var EnableUnfilteredModal = (props) => {
   const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
-  const [isError, setIsError] = useState12(false);
+  const [isError, setIsError] = useState13(false);
   const onClose = (enabled) => {
     props.onClose(enabled);
     setTimeout(() => setIsError(false), WAIT_FOR_CLOSE_TIMEOUT_MS);
@@ -3832,7 +3833,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] = useState13(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState14(false);
   const { canUser } = useCurrentUserCapabilities();
   const canManageOptions = canUser("manage_options");
   const { open } = useWpMediaFrame2({
@@ -4629,7 +4630,7 @@ var getAllProperties = (pattern) => {
 
 // src/controls/key-value-control.tsx
 import * as React80 from "react";
-import { useMemo as useMemo8, useState as useState14 } from "react";
+import { useMemo as useMemo8, useState as useState15 } from "react";
 import {
   isTransformable,
   keyValuePropTypeUtil,
@@ -4653,9 +4654,9 @@ var escapeHtmlAttr = (value) => {
 // src/controls/key-value-control.tsx
 var KeyValueControl = createControl((props = {}) => {
   const { value, setValue, ...propContext } = useBoundProp(keyValuePropTypeUtil);
-  const [keyError, setKeyError] = useState14("");
-  const [valueError, setValueError] = useState14("");
-  const [sessionState, setSessionState] = useState14({
+  const [keyError, setKeyError] = useState15("");
+  const [valueError, setValueError] = useState15("");
+  const [sessionState, setSessionState] = useState15({
     key: value?.key?.value || "",
     value: value?.value?.value || ""
   });
@@ -5388,7 +5389,7 @@ var TransformBasePopoverTrigger = ({
 
 // src/controls/transition-control/transition-repeater-control.tsx
 import * as React97 from "react";
-import { useEffect as useEffect8, useMemo as useMemo10, useState as useState15 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo10, useState as useState16 } from "react";
 import { createArrayPropUtils as createArrayPropUtils2, selectionSizePropTypeUtil as selectionSizePropTypeUtil2 } from "@elementor/editor-props";
 import { InfoCircleFilledIcon as InfoCircleFilledIcon3 } from "@elementor/icons";
 import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box19, Typography as Typography7 } from "@elementor/ui";
@@ -5658,7 +5659,7 @@ var TransitionRepeaterControl = createControl(
     currentStyleState
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
-    const [recentlyUsedList, setRecentlyUsedList] = useState15([]);
+    const [recentlyUsedList, setRecentlyUsedList] = useState16([]);
     const childArrayPropTypeUtil = useMemo10(
       () => createArrayPropUtils2(selectionSizePropTypeUtil2.key, selectionSizePropTypeUtil2.schema, "transition"),
       []
@@ -5877,7 +5878,7 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 import * as React102 from "react";
-import { useEffect as useEffect9, useState as useState16 } from "react";
+import { useEffect as useEffect9, useState as useState17 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon3, XIcon as XIcon4 } from "@elementor/icons";
 import {
   bindPopover as bindPopover7,
@@ -5902,14 +5903,14 @@ var Repeater3 = ({
   showToggle = true,
   isSortable = true
 }) => {
-  const [openItem, setOpenItem] = useState16(EMPTY_OPEN_ITEM2);
+  const [openItem, setOpenItem] = useState17(EMPTY_OPEN_ITEM2);
   const [items2, setItems] = useSyncExternalState({
     external: repeaterValues,
     // @ts-expect-error - as long as persistWhen => true, value will never be null
     setExternal: setRepeaterValues,
     persistWhen: () => true
   });
-  const [uniqueKeys, setUniqueKeys] = useState16(items2.map((_, index) => index));
+  const [uniqueKeys, setUniqueKeys] = useState17(items2.map((_, index) => index));
   const generateNextKey = (source) => {
     return 1 + Math.max(0, ...source);
   };
@@ -6055,7 +6056,7 @@ var RepeaterItem = ({
   ), /* @__PURE__ */ React102.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React102.createElement(Box22, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = useState16(null);
+  const [ref, setRef] = useState17(null);
   const popoverState = usePopupState8({ variant: "popover" });
   const popoverProps = bindPopover7(popoverState);
   useEffect9(() => {