@elementor/editor-controls 4.4.0-beta2 → 4.4.0-beta3

package/dist/index.mjs

@@ -5773,7 +5773,7 @@ var AspectRatioControl = createControl(({ label }) => {
 
 // src/controls/svg-media-control.tsx
 import * as React94 from "react";
-import { useEffect as useEffect18, useRef as useRef22, useState as useState24 } from "react";
+import { useEffect as useEffect18, useRef as useRef23, useState as useState24 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import { iconPropTypeUtil, svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil4 } from "@elementor/editor-props";
 import { Box as Box24, Card as Card2, CardOverlay as CardOverlay2, Popover as Popover6, Stack as Stack18, styled as styled12, usePopupState as usePopupState9 } from "@elementor/ui";
@@ -5857,7 +5857,7 @@ function measureIconLibraryAnchor(container, buttonGroup) {
 
 // src/controls/icon-library/icon-library-popover.tsx
 import * as React91 from "react";
-import { useMemo as useMemo13, useState as useState23 } from "react";
+import { useMemo as useMemo13, useRef as useRef22, useState as useState23 } from "react";
 import {
   PopoverBody as PopoverBody2,
   PopoverHeader as PopoverHeader4,
@@ -6538,8 +6538,9 @@ function parseFilterEntry(value) {
 // src/controls/icon-library/icon-library-grid.tsx
 import * as React87 from "react";
 import { useLayoutEffect as useLayoutEffect3, useRef as useRef20, useState as useState21 } from "react";
+import { useRovingFocus } from "@elementor/editor-ui";
 import { Box as Box19, Tooltip as Tooltip9, useTheme as useTheme4 } from "@elementor/ui";
-import { useVirtualizer } from "@tanstack/react-virtual";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 import { __ as __36 } from "@wordpress/i18n";
 var ICON_LIBRARY_GRID_FALLBACK_COLUMN_COUNT = 4;
 var ICON_LIBRARY_GRID_MIN_CELL_SIZE = 52;
@@ -6577,8 +6578,6 @@ var IconLibraryGrid = ({
 }) => {
   const theme = useTheme4();
   const containerRef = useRef20(null);
-  const cellRefs = useRef20(/* @__PURE__ */ new Map());
-  const shouldRestoreFocusRef = useRef20(false);
   const selectedIndex = items2.findIndex((item) => item.id === selectedValue);
   const [focusedIndex, setFocusedIndex] = useState21(selectedIndex >= 0 ? selectedIndex : 0);
   const [{ columnCount, cellSize }, setGridMetrics] = useState21(() => getGridMetrics(0, 0, 0));
@@ -6592,7 +6591,15 @@ var IconLibraryGrid = ({
     gap: cellGap,
     paddingStart: verticalPadding,
     paddingEnd: verticalPadding,
-    overscan: GRID_OVERSCAN
+    overscan: GRID_OVERSCAN,
+    rangeExtractor: (range) => {
+      const rowIndexes = defaultRangeExtractor(range);
+      const focusedRow = Math.floor(focusedIndex / columnCount);
+      if (items2.length === 0 || rowIndexes.includes(focusedRow)) {
+        return rowIndexes;
+      }
+      return [...rowIndexes, focusedRow].sort((a, b) => a - b);
+    }
   });
   const focusedItem = items2[focusedIndex];
   const visibleRowIndexes = virtualizer.getVirtualIndexes().join(",");
@@ -6611,17 +6618,10 @@ var IconLibraryGrid = ({
       virtualizer.scrollToIndex(Math.floor(selectedIndex / columnCount), { align: "center" });
     }
   }, [cellSize, columnCount, items2, selectedIndex, selectedValue]);
-  useLayoutEffect3(() => {
-    if (!shouldRestoreFocusRef.current || !focusedItem) {
-      return;
-    }
-    const cell = cellRefs.current.get(focusedItem.id);
-    if (!cell) {
-      return;
-    }
-    cell.focus();
-    shouldRestoreFocusRef.current = false;
-  }, [focusedItem, visibleRowIndexes]);
+  const { registerRef, requestFocus } = useRovingFocus({
+    tabbableKey: focusedItem?.id,
+    mountedSignature: visibleRowIndexes
+  });
   useLayoutEffect3(() => {
     const container = containerRef.current;
     if (!container) {
@@ -6647,7 +6647,7 @@ var IconLibraryGrid = ({
     if (nextIndex < 0 || nextIndex >= items2.length) {
       return;
     }
-    shouldRestoreFocusRef.current = true;
+    requestFocus();
     setFocusedIndex(nextIndex);
     virtualizer.scrollToIndex(Math.floor(nextIndex / columnCount));
   };
@@ -6770,13 +6770,7 @@ var IconLibraryGrid = ({
                     "aria-label": item.label,
                     "aria-selected": isSelected,
                     tabIndex,
-                    ref: (node) => {
-                      if (node) {
-                        cellRefs.current.set(item.id, node);
-                      } else {
-                        cellRefs.current.delete(item.id);
-                      }
-                    },
+                    ref: registerRef(item.id),
                     onClick: () => {
                       onSelect(item.id);
                       onClose();
@@ -7073,6 +7067,7 @@ var IconLibraryPopover = ({
     () => findFontAwesome7Icon(icons, selectedIconClass, selectedIconLibrary)?.id,
     [icons, selectedIconClass, selectedIconLibrary]
   );
+  const contentRef = useRef22(null);
   const handleClose = () => {
     setSearchValue("");
     setActiveLibraries([]);
@@ -7088,6 +7083,16 @@ var IconLibraryPopover = ({
       library: icon.library
     });
   };
+  const handleSearchKeyDown = (event) => {
+    if (event.key !== "ArrowDown" || view !== "list") {
+      return;
+    }
+    const option = contentRef.current?.querySelector('[role="option"][tabindex="0"]');
+    if (option) {
+      event.preventDefault();
+      option.focus();
+    }
+  };
   const handleClearSearch = () => {
     setSearchValue("");
   };
@@ -7115,18 +7120,18 @@ var IconLibraryPopover = ({
       gap: 1,
       sx: { px: ICON_LIBRARY_INLINE_SPACING, pb: ICON_LIBRARY_SEARCH_PADDING_BOTTOM }
     },
-    /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React91.createElement(Box21, { onKeyDown: handleSearchKeyDown, sx: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React91.createElement(
       SearchField2,
       {
         value: searchInputValue,
         onSearch: handleSearchChange,
         placeholder: __39("Search", "elementor"),
         id: "icon-library-search",
-        sx: { flex: 1, px: 0, pb: 0 }
+        sx: { width: "100%", px: 0, pb: 0 }
       }
-    ),
+    )),
     /* @__PURE__ */ React91.createElement(IconLibraryFilter, { value: activeLibraries, onChange: setActiveLibraries })
-  ), /* @__PURE__ */ React91.createElement(Divider5, null), /* @__PURE__ */ React91.createElement(Box21, { sx: { flex: 1, overflow: "hidden", minHeight: 0, minWidth: 0 } }, /* @__PURE__ */ React91.createElement(
+  ), /* @__PURE__ */ React91.createElement(Divider5, null), /* @__PURE__ */ React91.createElement(Box21, { ref: contentRef, sx: { flex: 1, overflow: "hidden", minHeight: 0, minWidth: 0 } }, /* @__PURE__ */ React91.createElement(
     IconLibraryContent,
     {
       isLoading,
@@ -7185,6 +7190,7 @@ var IconLibraryContent = ({
       onClose,
       itemHeight: ICON_LIBRARY_ROW_HEIGHT,
       menuItemContentTemplate: IconLibraryRow,
+      rovingFocus: true,
       noResultsComponent: emptyState,
       "data-testid": "icon-library-list"
     }
@@ -7446,8 +7452,8 @@ var SvgMediaControl = createControl(({ label }) => {
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
   const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState24(false);
   const iconLibraryPopoverState = usePopupState9({ variant: "popover" });
-  const controlContainerRef = useRef22(null);
-  const buttonGroupRef = useRef22(null);
+  const controlContainerRef = useRef23(null);
+  const buttonGroupRef = useRef23(null);
   const [iconLibraryAnchor, setIconLibraryAnchor] = useState24(null);
   const { isAdmin } = useCurrentUserCapabilities();
   const selectedIconClass = typeof previewIconValue?.value?.value === "string" ? previewIconValue.value.value : null;
@@ -7793,7 +7799,7 @@ var BackgroundImageOverlayAttachment = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
 import * as React98 from "react";
-import { useRef as useRef23 } from "react";
+import { useRef as useRef24 } from "react";
 import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil17 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem6 } from "@elementor/editor-ui";
 import { LetterXIcon, LetterYIcon } from "@elementor/icons";
@@ -7815,7 +7821,7 @@ var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
   const stringPropContext = useBoundProp(stringPropTypeUtil17);
   const isCustom = !!backgroundImageOffsetContext.value;
-  const rowRef = useRef23(null);
+  const rowRef = useRef24(null);
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -7888,7 +7894,7 @@ var BackgroundImageOverlayRepeat = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
 import * as React100 from "react";
-import { useRef as useRef24 } from "react";
+import { useRef as useRef25 } from "react";
 import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil18 } from "@elementor/editor-props";
 import {
   ArrowBarBothIcon,
@@ -7930,7 +7936,7 @@ var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
   const stringPropContext = useBoundProp(stringPropTypeUtil18);
   const isCustom = !!backgroundImageScaleContext.value;
-  const rowRef = useRef24(null);
+  const rowRef = useRef25(null);
   const handleSizeChange = (size) => {
     if (size === "custom") {
       backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -7965,7 +7971,7 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-import { useRef as useRef25 } from "react";
+import { useRef as useRef26 } from "react";
 import {
   backgroundColorOverlayPropTypeUtil,
   backgroundGradientOverlayPropTypeUtil as backgroundGradientOverlayPropTypeUtil2,
@@ -7990,7 +7996,7 @@ var useBackgroundTabsHistory = ({
     return "image";
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs(getCurrentOverlayType());
-  const valuesHistory = useRef25({
+  const valuesHistory = useRef26({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -8573,7 +8579,7 @@ var PositionControl = () => {
 
 // src/controls/transform-control/transform-repeater-control.tsx
 import * as React118 from "react";
-import { useRef as useRef33 } from "react";
+import { useRef as useRef34 } from "react";
 import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from "@elementor/editor-props";
 import { AdjustmentsIcon as AdjustmentsIcon2, InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
 import { bindTrigger as bindTrigger5, Box as Box30, IconButton as IconButton10, Tooltip as Tooltip12, Typography as Typography12, usePopupState as usePopupState10 } from "@elementor/ui";
@@ -8637,7 +8643,7 @@ import { __ as __56 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/move.tsx
 import * as React107 from "react";
-import { useRef as useRef26 } from "react";
+import { useRef as useRef27 } from "react";
 import { moveTransformPropTypeUtil } from "@elementor/editor-props";
 import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from "@elementor/icons";
 import { Grid as Grid22 } from "@elementor/ui";
@@ -8684,7 +8690,7 @@ var moveAxisControls = [
 ];
 var Move = () => {
   const context = useBoundProp(moveTransformPropTypeUtil);
-  const rowRefs = [useRef26(null), useRef26(null), useRef26(null)];
+  const rowRefs = [useRef27(null), useRef27(null), useRef27(null)];
   return /* @__PURE__ */ React107.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React107.createElement(PropProvider, { ...context }, /* @__PURE__ */ React107.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React107.createElement(
     AxisRow,
     {
@@ -8699,7 +8705,7 @@ var Move = () => {
 
 // src/controls/transform-control/functions/rotate.tsx
 import * as React108 from "react";
-import { useRef as useRef27 } from "react";
+import { useRef as useRef28 } from "react";
 import { rotateTransformPropTypeUtil as rotateTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { Arrow360Icon, RotateClockwiseIcon } from "@elementor/icons";
 import { Grid as Grid23 } from "@elementor/ui";
@@ -8724,7 +8730,7 @@ var rotateAxisControls = [
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(rotateTransformPropTypeUtil2);
-  const rowRefs = [useRef27(null), useRef27(null), useRef27(null)];
+  const rowRefs = [useRef28(null), useRef28(null), useRef28(null)];
   return /* @__PURE__ */ React108.createElement(Grid23, { container: true, spacing: 1.5 }, /* @__PURE__ */ React108.createElement(PropProvider, { ...context }, /* @__PURE__ */ React108.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React108.createElement(
     AxisRow,
     {
@@ -8738,7 +8744,7 @@ var Rotate = () => {
 
 // src/controls/transform-control/functions/scale.tsx
 import * as React110 from "react";
-import { useRef as useRef28 } from "react";
+import { useRef as useRef29 } from "react";
 import { scaleTransformPropTypeUtil as scaleTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { ArrowDownLeftIcon as ArrowDownLeftIcon2, ArrowDownSmallIcon as ArrowDownSmallIcon2, ArrowRightIcon as ArrowRightIcon2 } from "@elementor/icons";
 import { Grid as Grid25 } from "@elementor/ui";
@@ -8771,13 +8777,13 @@ var scaleAxisControls = [
 ];
 var Scale = () => {
   const context = useBoundProp(scaleTransformPropTypeUtil2);
-  const rowRefs = [useRef28(null), useRef28(null), useRef28(null)];
+  const rowRefs = [useRef29(null), useRef29(null), useRef29(null)];
   return /* @__PURE__ */ React110.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React110.createElement(PropProvider, { ...context }, /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React110.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
 };
 
 // src/controls/transform-control/functions/skew.tsx
 import * as React111 from "react";
-import { useRef as useRef29 } from "react";
+import { useRef as useRef30 } from "react";
 import { skewTransformPropTypeUtil as skewTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { ArrowLeftIcon, ArrowRightIcon as ArrowRightIcon3 } from "@elementor/icons";
 import { Grid as Grid26 } from "@elementor/ui";
@@ -8797,7 +8803,7 @@ var skewAxisControls = [
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(skewTransformPropTypeUtil2);
-  const rowRefs = [useRef29(null), useRef29(null), useRef29(null)];
+  const rowRefs = [useRef30(null), useRef30(null), useRef30(null)];
   return /* @__PURE__ */ React111.createElement(Grid26, { container: true, spacing: 1.5 }, /* @__PURE__ */ React111.createElement(PropProvider, { ...context }, /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React111.createElement(
     AxisRow,
     {
@@ -8810,7 +8816,7 @@ var Skew = () => {
 };
 
 // src/controls/transform-control/use-transform-tabs-history.tsx
-import { useRef as useRef30 } from "react";
+import { useRef as useRef31 } from "react";
 import {
   moveTransformPropTypeUtil as moveTransformPropTypeUtil2,
   rotateTransformPropTypeUtil as rotateTransformPropTypeUtil3,
@@ -8842,7 +8848,7 @@ var useTransformTabsHistory = ({
     }
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs2(getCurrentTransformType());
-  const valuesHistory = useRef30({
+  const valuesHistory = useRef31({
     move: initialMove,
     scale: initialScale,
     rotate: initialRotate,
@@ -8986,7 +8992,7 @@ import { __ as __60 } from "@wordpress/i18n";
 
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
 import * as React115 from "react";
-import { useRef as useRef31 } from "react";
+import { useRef as useRef32 } from "react";
 import { perspectiveOriginPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid27, Stack as Stack19 } from "@elementor/ui";
 import { __ as __58 } from "@wordpress/i18n";
@@ -9018,13 +9024,13 @@ var PerspectiveOriginControlProvider = () => {
   return /* @__PURE__ */ React115.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React115.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React115.createElement(ControlFields, { control }))));
 };
 var ControlFields = ({ control }) => {
-  const rowRef = useRef31(null);
+  const rowRef = useRef32(null);
   return /* @__PURE__ */ React115.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React115.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React115.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React115.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React115.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
 };
 
 // src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
 import * as React116 from "react";
-import { useRef as useRef32 } from "react";
+import { useRef as useRef33 } from "react";
 import { transformOriginPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid28, Stack as Stack20 } from "@elementor/ui";
 import { __ as __59 } from "@wordpress/i18n";
@@ -9052,7 +9058,7 @@ var TransformOriginControl = () => {
 };
 var ControlFields2 = ({ control }) => {
   const context = useBoundProp(transformOriginPropTypeUtil);
-  const rowRef = useRef32(null);
+  const rowRef = useRef33(null);
   return /* @__PURE__ */ React116.createElement(PropProvider, { ...context }, /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React116.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React116.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React116.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React116.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
 };
 
@@ -9100,7 +9106,7 @@ var SIZE12 = "tiny";
 var TransformRepeaterControl = createControl(
   ({ showChildrenPerspective }) => {
     const context = useBoundProp(transformPropTypeUtil);
-    const headerRef = useRef33(null);
+    const headerRef = useRef34(null);
     const popupState = usePopupState10({ variant: "popover" });
     return /* @__PURE__ */ React118.createElement(PropProvider, { ...context }, /* @__PURE__ */ React118.createElement(
       TransformSettingsControl,
@@ -9192,13 +9198,13 @@ import { __ as __64 } from "@wordpress/i18n";
 
 // src/controls/selection-size-control.tsx
 import * as React119 from "react";
-import { useMemo as useMemo17, useRef as useRef34 } from "react";
+import { useMemo as useMemo17, useRef as useRef35 } from "react";
 import { selectionSizePropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid29 } from "@elementor/ui";
 var SelectionSizeControl = createControl(
   ({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
     const { value, setValue, propType } = useBoundProp(selectionSizePropTypeUtil);
-    const rowRef = useRef34(null);
+    const rowRef = useRef35(null);
     const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
     const currentSizeConfig = useMemo17(() => {
       switch (value.selection.$$type) {
@@ -9413,7 +9419,7 @@ function subscribeToTransitionEvent() {
 
 // src/controls/transition-control/transition-selector.tsx
 import * as React120 from "react";
-import { useMemo as useMemo18, useRef as useRef35 } from "react";
+import { useMemo as useMemo18, useRef as useRef36 } from "react";
 import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
 import { PromotionAlert, PromotionChip } from "@elementor/editor-ui";
 import { ChevronDownIcon as ChevronDownIcon3, VariationsIcon } from "@elementor/icons";
@@ -9459,7 +9465,7 @@ var TransitionSelector = ({
   const {
     key: { value: transitionLabel }
   } = value;
-  const defaultRef = useRef35(null);
+  const defaultRef = useRef36(null);
   const popoverState = usePopupState11({ variant: "popover" });
   const disabledCategories = useMemo18(() => {
     return new Set(
@@ -10009,7 +10015,7 @@ import { Box as Box36, Stack as Stack24 } from "@elementor/ui";
 
 // src/components/inline-editor.tsx
 import * as React127 from "react";
-import { useEffect as useEffect20, useRef as useRef36 } from "react";
+import { useEffect as useEffect20, useRef as useRef37 } from "react";
 import { Box as Box34 } from "@elementor/ui";
 import Bold from "@tiptap/extension-bold";
 import Document from "@tiptap/extension-document";
@@ -10072,8 +10078,8 @@ var InlineEditor = React127.forwardRef((props, ref) => {
     onSelectionEnd,
     mountElement = null
   } = props;
-  const containerRef = useRef36(null);
-  const onBlurRef = useRef36(onBlur);
+  const containerRef = useRef37(null);
+  const onBlurRef = useRef37(onBlur);
   onBlurRef.current = onBlur;
   const documentContentSettings = !!expectedTag ? "block+" : "inline*";
   const onUpdate = ({ editor: updatedEditor }) => {
@@ -10171,7 +10177,7 @@ var InlineEditor = React127.forwardRef((props, ref) => {
   return /* @__PURE__ */ React127.createElement(Box34, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React127.createElement(EditorContent, { ref, editor }));
 });
 var useOnUpdate = (callback, dependencies) => {
-  const hasMounted = useRef36(false);
+  const hasMounted = useRef37(false);
   useEffect20(() => {
     if (hasMounted.current) {
       callback();
@@ -10183,7 +10189,7 @@ var useOnUpdate = (callback, dependencies) => {
 
 // src/components/inline-editor-toolbar.tsx
 import * as React129 from "react";
-import { useEffect as useEffect22, useMemo as useMemo20, useRef as useRef38, useState as useState27 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo20, useRef as useRef39, useState as useState27 } from "react";
 import { getContainer as getContainer2, getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
@@ -10209,7 +10215,7 @@ import { __ as __68 } from "@wordpress/i18n";
 
 // src/components/url-popover.tsx
 import * as React128 from "react";
-import { useEffect as useEffect21, useRef as useRef37 } from "react";
+import { useEffect as useEffect21, useRef as useRef38 } from "react";
 import { ExternalLinkIcon } from "@elementor/icons";
 import { bindPopover as bindPopover8, Popover as Popover9, Stack as Stack23, TextField as TextField12, ToggleButton as ToggleButton3, Tooltip as Tooltip13 } from "@elementor/ui";
 import { __ as __67 } from "@wordpress/i18n";
@@ -10222,7 +10228,7 @@ var UrlPopover = ({
   openInNewTab,
   onToggleNewTab
 }) => {
-  const inputRef = useRef37(null);
+  const inputRef = useRef38(null);
   useEffect21(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
@@ -10280,7 +10286,7 @@ var InlineEditorToolbar = ({
 }) => {
   const [urlValue, setUrlValue] = useState27("");
   const [openInNewTab, setOpenInNewTab] = useState27(false);
-  const toolbarRef = useRef38(null);
+  const toolbarRef = useRef39(null);
   const linkPopupState = usePopupState12({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
   const editorState = useEditorState({
@@ -10964,7 +10970,7 @@ var GridSpanControl = createControl(
 
 // src/components/promotions/display-conditions-control.tsx
 import * as React138 from "react";
-import { useRef as useRef39 } from "react";
+import { useRef as useRef40 } from "react";
 import { SitemapIcon } from "@elementor/icons";
 import { IconButton as IconButton12, Stack as Stack27, Tooltip as Tooltip15 } from "@elementor/ui";
 import { __ as __72 } from "@wordpress/i18n";
@@ -11023,7 +11029,7 @@ var PromotionTrigger = forwardRef14(
 var ARIA_LABEL = __72("Display Conditions", "elementor");
 var TRACKING_DATA2 = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
-  const triggerRef = useRef39(null);
+  const triggerRef = useRef40(null);
   return /* @__PURE__ */ React138.createElement(
     Stack27,
     {
@@ -11055,14 +11061,14 @@ var DisplayConditionsControl = createControl(() => {
 
 // src/components/promotions/attributes-control.tsx
 import * as React139 from "react";
-import { useRef as useRef40 } from "react";
+import { useRef as useRef41 } from "react";
 import { PlusIcon as PlusIcon4 } from "@elementor/icons";
 import { Stack as Stack28, Tooltip as Tooltip16 } from "@elementor/ui";
 import { __ as __73 } from "@wordpress/i18n";
 var ARIA_LABEL2 = __73("Attributes", "elementor");
 var TRACKING_DATA3 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
-  const triggerRef = useRef40(null);
+  const triggerRef = useRef41(null);
   return /* @__PURE__ */ React139.createElement(
     Stack28,
     {