@elementor/editor-controls 3.33.0-243 → 3.33.0-245

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, useState as useState5 } from "react";
+import { useEffect as useEffect3 } from "react";
 import { sizePropTypeUtil as sizePropTypeUtil2 } from "@elementor/editor-props";
 import { useActiveBreakpoint } from "@elementor/editor-responsive";
 import { usePopupState as usePopupState2 } from "@elementor/ui";
@@ -946,13 +946,12 @@ 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: internalState,
+      external: createStateFromSizeProp(sizeValue, actualDefaultUnit),
       setExternal: (newState, options, meta) => setSizeValue(extractValueFromState(newState), options, meta),
       persistWhen: (newState) => !!extractValueFromState(newState),
       fallback: (newState) => ({
@@ -1007,7 +1006,7 @@ var SizeControl = createControl(
         return;
       }
       if (state.unit === newState.unit) {
-        setInternalState(mergedStates);
+        setState(mergedStates);
         return;
       }
       setState(newState);
@@ -1189,7 +1188,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 useState6 } from "react";
+import { createContext as createContext7, useMemo as useMemo2, useState as useState5 } from "react";
 import { usePopupState as usePopupState3 } from "@elementor/ui";
 
 // src/services/event-bus.ts
@@ -1256,7 +1255,7 @@ var RepeaterContextProvider = ({
     setExternal: setRepeaterValues,
     persistWhen: () => true
   });
-  const [uniqueKeys, setUniqueKeys] = useState6(() => {
+  const [uniqueKeys, setUniqueKeys] = useState5(() => {
     return items2?.map((_, index) => index) ?? [];
   });
   const itemsWithKeys = useMemo2(
@@ -1269,8 +1268,8 @@ var RepeaterContextProvider = ({
   const handleSetItems = (newItemsWithKeys) => {
     setItems(newItemsWithKeys.map(({ item }) => item));
   };
-  const [openItemIndex, setOpenItemIndex] = useState6(EMPTY_OPEN_ITEM);
-  const [rowRef, setRowRef] = useState6(null);
+  const [openItemIndex, setOpenItemIndex] = useState5(EMPTY_OPEN_ITEM);
+  const [rowRef, setRowRef] = useState5(null);
   const isOpen = openItemIndex !== EMPTY_OPEN_ITEM;
   const popoverState = usePopupState3({ variant: "popover" });
   const addItem = (ev, config) => {
@@ -2107,7 +2106,7 @@ function ensureFilterConfig(name) {
 
 // src/controls/select-control-wrapper.tsx
 import * as React47 from "react";
-import { useEffect as useEffect4, useState as useState7 } from "react";
+import { useEffect as useEffect4, useState as useState6 } from "react";
 var getOffCanvasElements = () => {
   const extendedWindow = window;
   const documentId = extendedWindow.elementor.config.document.id;
@@ -2125,7 +2124,7 @@ var collectionMethods = {
   "off-canvas": getOffCanvasElements
 };
 var useDynamicOptions = (collectionId, initialOptions) => {
-  const [options, setOptions] = useState7(initialOptions ?? []);
+  const [options, setOptions] = useState6(initialOptions ?? []);
   useEffect4(() => {
     if (!collectionId || !collectionMethods[collectionId]) {
       setOptions(initialOptions ?? []);
@@ -2148,7 +2147,7 @@ import { stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-pro
 
 // src/components/control-toggle-button-group.tsx
 import * as React49 from "react";
-import { useEffect as useEffect5, useMemo as useMemo4, useRef as useRef7, useState as useState8 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo4, useRef as useRef7, useState as useState7 } from "react";
 import { ChevronDownIcon } from "@elementor/icons";
 import {
   ListItemText,
@@ -2301,7 +2300,7 @@ var SplitButtonGroup = ({
   value
 }) => {
   const previewButton = usePreviewButton(items2, value);
-  const [isMenuOpen, setIsMenuOpen] = useState8(false);
+  const [isMenuOpen, setIsMenuOpen] = useState7(false);
   const menuButtonRef = useRef7(null);
   const onMenuToggle = (ev) => {
     setIsMenuOpen((prev) => !prev);
@@ -2371,7 +2370,7 @@ var SplitButtonGroup = ({
   ));
 };
 var usePreviewButton = (items2, value) => {
-  const [previewButton, setPreviewButton] = useState8(
+  const [previewButton, setPreviewButton] = useState7(
     items2.find((item) => item.value === value) ?? items2[0]
   );
   useEffect5(() => {
@@ -2780,7 +2779,7 @@ import { __ as __20 } from "@wordpress/i18n";
 
 // src/components/item-selector.tsx
 import * as React56 from "react";
-import { useCallback, useEffect as useEffect6, useState as useState9 } from "react";
+import { useCallback, useEffect as useEffect6, useState as useState8 } 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";
@@ -2817,7 +2816,7 @@ var ItemSelector = ({
   disabledItems,
   id = "item-selector"
 }) => {
-  const [searchValue, setSearchValue] = useState9("");
+  const [searchValue, setSearchValue] = useState8("");
   const filteredItemsList = useFilteredItemsList(itemsList, searchValue, disabledItems);
   const IconComponent = icon;
   const handleSearch = (value) => {
@@ -2929,7 +2928,7 @@ var ItemList = ({
   );
 };
 var useDebounce = (fn, delay) => {
-  const [debouncedFn] = useState9(() => debounce(fn, delay));
+  const [debouncedFn] = useState8(() => debounce(fn, delay));
   useEffect6(() => () => debouncedFn.cancel(), [debouncedFn]);
   return debouncedFn;
 };
@@ -3031,7 +3030,7 @@ var UrlControl = createControl(
 
 // src/controls/link-control.tsx
 import * as React63 from "react";
-import { useState as useState11 } from "react";
+import { useState as useState10 } from "react";
 import { getLinkInLinkRestriction } from "@elementor/editor-elements";
 import { linkPropTypeUtil } from "@elementor/editor-props";
 import { MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
@@ -3100,7 +3099,7 @@ var RestrictedLinkInfotip = ({
 
 // src/controls/query-control.tsx
 import * as React61 from "react";
-import { useMemo as useMemo6, useState as useState10 } from "react";
+import { useMemo as useMemo6, useState as useState9 } 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";
@@ -3249,7 +3248,7 @@ var QueryControl = createControl((props) => {
     ariaLabel
   } = props || {};
   const normalizedPlaceholder = placeholder || __22("Search", "elementor");
-  const [options, setOptions] = useState10(
+  const [options, setOptions] = useState9(
     generateFirstLoadedOption(value?.value)
   );
   const onOptionChange = (newValue) => {
@@ -3371,7 +3370,7 @@ var SIZE6 = "tiny";
 var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(linkPropTypeUtil);
   const [linkSessionValue, setLinkSessionValue] = useSessionStorage(path.join("/"));
-  const [isActive, setIsActive] = useState11(!!value);
+  const [isActive, setIsActive] = useState10(!!value);
   const {
     allowCustomValues = true,
     queryOptions,
@@ -3381,7 +3380,7 @@ var LinkControl = createControl((props) => {
     label = __23("Link", "elementor"),
     ariaLabel
   } = props || {};
-  const [linkInLinkRestriction, setLinkInLinkRestriction] = useState11(getLinkInLinkRestriction(elementId));
+  const [linkInLinkRestriction, setLinkInLinkRestriction] = useState10(getLinkInLinkRestriction(elementId));
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
   const onEnabledChange = () => {
     setLinkInLinkRestriction(getLinkInLinkRestriction(elementId));
@@ -3603,7 +3602,7 @@ var Control4 = ({
 
 // src/controls/aspect-ratio-control.tsx
 import * as React67 from "react";
-import { useEffect as useEffect7, useState as useState12 } from "react";
+import { useEffect as useEffect7, useState as useState11 } from "react";
 import { stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem4 } from "@elementor/editor-ui";
 import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
@@ -3624,10 +3623,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] = useState12(isCustomSelected);
-  const [customWidth, setCustomWidth] = useState12(initialWidth);
-  const [customHeight, setCustomHeight] = useState12(initialHeight);
-  const [selectedValue, setSelectedValue] = useState12(
+  const [isCustom, setIsCustom] = useState11(isCustomSelected);
+  const [customWidth, setCustomWidth] = useState11(initialWidth);
+  const [customHeight, setCustomHeight] = useState11(initialHeight);
+  const [selectedValue, setSelectedValue] = useState11(
     isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
   );
   useEffect7(() => {
@@ -3714,7 +3713,7 @@ var AspectRatioControl = createControl(({ label }) => {
 
 // src/controls/svg-media-control.tsx
 import * as React69 from "react";
-import { useState as useState14 } from "react";
+import { useState as useState13 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import { imageSrcPropTypeUtil as imageSrcPropTypeUtil2 } from "@elementor/editor-props";
 import { UploadIcon as UploadIcon2 } from "@elementor/icons";
@@ -3724,7 +3723,7 @@ import { __ as __28 } from "@wordpress/i18n";
 
 // src/components/enable-unfiltered-modal.tsx
 import * as React68 from "react";
-import { useState as useState13 } from "react";
+import { useState as useState12 } from "react";
 import {
   Button as Button3,
   CircularProgress as CircularProgress2,
@@ -3750,7 +3749,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] = useState13(false);
+  const [isError, setIsError] = useState12(false);
   const onClose = (enabled) => {
     props.onClose(enabled);
     setTimeout(() => setIsError(false), WAIT_FOR_CLOSE_TIMEOUT_MS);
@@ -3813,7 +3812,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] = useState14(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState13(false);
   const { canUser } = useCurrentUserCapabilities();
   const canManageOptions = canUser("manage_options");
   const { open } = useWpMediaFrame2({
@@ -4610,7 +4609,7 @@ var getAllProperties = (pattern) => {
 
 // src/controls/key-value-control.tsx
 import * as React78 from "react";
-import { useMemo as useMemo8, useState as useState15 } from "react";
+import { useMemo as useMemo8, useState as useState14 } from "react";
 import {
   isTransformable,
   keyValuePropTypeUtil,
@@ -4634,9 +4633,9 @@ var escapeHtmlAttr = (value) => {
 // src/controls/key-value-control.tsx
 var KeyValueControl = createControl((props = {}) => {
   const { value, setValue, ...propContext } = useBoundProp(keyValuePropTypeUtil);
-  const [keyError, setKeyError] = useState15("");
-  const [valueError, setValueError] = useState15("");
-  const [sessionState, setSessionState] = useState15({
+  const [keyError, setKeyError] = useState14("");
+  const [valueError, setValueError] = useState14("");
+  const [sessionState, setSessionState] = useState14({
     key: value?.key?.value || "",
     value: value?.value?.value || ""
   });
@@ -5369,7 +5368,7 @@ var TransformBasePopoverTrigger = ({
 
 // src/controls/transition-control/transition-repeater-control.tsx
 import * as React95 from "react";
-import { useEffect as useEffect8, useMemo as useMemo10, useState as useState16 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo10, useState as useState15 } 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";
@@ -5639,7 +5638,7 @@ var TransitionRepeaterControl = createControl(
     currentStyleState
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
-    const [recentlyUsedList, setRecentlyUsedList] = useState16([]);
+    const [recentlyUsedList, setRecentlyUsedList] = useState15([]);
     const childArrayPropTypeUtil = useMemo10(
       () => createArrayPropUtils2(selectionSizePropTypeUtil2.key, selectionSizePropTypeUtil2.schema, "transition"),
       []
@@ -5858,7 +5857,7 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater.tsx
 import * as React100 from "react";
-import { useEffect as useEffect9, useState as useState17 } from "react";
+import { useEffect as useEffect9, useState as useState16 } 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,
@@ -5888,14 +5887,14 @@ var Repeater3 = ({
   isSortable = true,
   collectionPropUtil
 }) => {
-  const [openItem, setOpenItem] = useState17(EMPTY_OPEN_ITEM2);
+  const [openItem, setOpenItem] = useState16(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] = useState17(items2.map((_, index) => index));
+  const [uniqueKeys, setUniqueKeys] = useState16(items2.map((_, index) => index));
   const generateNextKey = (source) => {
     return 1 + Math.max(0, ...source);
   };
@@ -6037,7 +6036,7 @@ var RepeaterItem = ({
   disabled,
   collectionPropUtil
 }) => {
-  const [anchorEl, setAnchorEl] = useState17(null);
+  const [anchorEl, setAnchorEl] = useState16(null);
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
   const duplicateLabel = __50("Duplicate", "elementor");
   const toggleLabel = propDisabled ? __50("Show", "elementor") : __50("Hide", "elementor");
@@ -6074,7 +6073,7 @@ var RepeaterItem = ({
   ));
 };
 var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = useState17(null);
+  const [ref, setRef] = useState16(null);
   const popoverState = usePopupState8({ variant: "popover" });
   const popoverProps = bindPopover7(popoverState);
   useEffect9(() => {