@elementor/editor-controls 0.30.0 → 0.31.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @elementor/editor-controls
 
+## 0.31.0
+
+### Minor Changes
+
+- 7c8df3b: Fix color picker to open aligned with the overlay popover.
+- 97fbdf0: Add keyboard-based unit switching to size control
+
+### Patch Changes
+
+- 27c4c1f: Added a separated style inheritance indicator to background-color
+- Updated dependencies [89dfaf2]
+- Updated dependencies [27c4c1f]
+  - @elementor/editor-current-user@0.4.0
+  - @elementor/editor-props@0.12.1
+  - @elementor/editor-elements@0.8.4
+
+## 0.30.1
+
+### Patch Changes
+
+- Updated dependencies [bde1731]
+  - @elementor/editor-ui@0.8.2
+  - @elementor/editor-elements@0.8.3
+
 ## 0.30.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -49,8 +49,9 @@ declare const SelectControl: ControlComponent<({ options, onChange }: Props$5) =
 
 type Props$4 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
     propTypeUtil?: PropTypeUtil<string, string>;
+    anchorEl?: HTMLElement | null;
 };
-declare const ColorControl: ControlComponent<({ propTypeUtil, ...props }: Props$4) => React.JSX.Element>;
+declare const ColorControl: ControlComponent<({ propTypeUtil, anchorEl, slotProps, ...props }: Props$4) => React.JSX.Element>;
 
 type RenderContentProps = {
     size: ToggleButtonProps['size'];

package/dist/index.d.ts

@@ -49,8 +49,9 @@ declare const SelectControl: ControlComponent<({ options, onChange }: Props$5) =
 
 type Props$4 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
     propTypeUtil?: PropTypeUtil<string, string>;
+    anchorEl?: HTMLElement | null;
 };
-declare const ColorControl: ControlComponent<({ propTypeUtil, ...props }: Props$4) => React.JSX.Element>;
+declare const ColorControl: ControlComponent<({ propTypeUtil, anchorEl, slotProps, ...props }: Props$4) => React.JSX.Element>;
 
 type RenderContentProps = {
     size: ToggleButtonProps['size'];

package/dist/index.js

@@ -500,6 +500,7 @@ var TextAreaControl = createControl(({ placeholder }) => {
 
 // src/controls/size-control.tsx
 var React14 = __toESM(require("react"));
+var import_react8 = require("react");
 var import_editor_props6 = require("@elementor/editor-props");
 var import_ui10 = require("@elementor/ui");
 
@@ -516,6 +517,7 @@ var TextFieldInnerSelection = (0, import_react6.forwardRef)(
     onChange,
     onBlur,
     onKeyDown,
+    onKeyUp,
     endAdornment,
     startAdornment
   }, ref) => {
@@ -529,6 +531,7 @@ var TextFieldInnerSelection = (0, import_react6.forwardRef)(
         value,
         onChange,
         onKeyDown,
+        onKeyUp,
         onBlur,
         placeholder,
         InputProps: {
@@ -672,6 +675,21 @@ var SizeInput = ({
   size,
   unit
 }) => {
+  const unitInputBufferRef = (0, import_react8.useRef)("");
+  const handleKeyUp = (event) => {
+    const { key } = event;
+    if (!/^[a-zA-Z%]$/.test(key)) {
+      return;
+    }
+    event.preventDefault();
+    const newChar = key.toLowerCase();
+    const updatedBuffer = (unitInputBufferRef.current + newChar).slice(-3);
+    unitInputBufferRef.current = updatedBuffer;
+    const matchedUnit = units2.find((u) => u.includes(updatedBuffer)) || units2.find((u) => u.startsWith(newChar)) || units2.find((u) => u.includes(newChar));
+    if (matchedUnit) {
+      handleUnitChange(matchedUnit);
+    }
+  };
   return /* @__PURE__ */ React14.createElement(ControlActions, null, /* @__PURE__ */ React14.createElement(
     TextFieldInnerSelection,
     {
@@ -688,12 +706,16 @@ var SizeInput = ({
       type: "number",
       value: Number.isNaN(size) ? "" : size,
       onChange: handleSizeChange,
-      onBlur,
+      onBlur: (event) => {
+        unitInputBufferRef.current = "";
+        onBlur?.(event);
+      },
       onKeyDown: (event) => {
         if (RESTRICTED_INPUT_KEYS.includes(event.key)) {
           event.preventDefault();
         }
-      }
+      },
+      onKeyUp: handleKeyUp
     }
   ));
 };
@@ -713,13 +735,38 @@ var SectionContent = ({ gap = 2, sx, children }) => /* @__PURE__ */ React15.crea
 var React16 = __toESM(require("react"));
 var import_editor_props7 = require("@elementor/editor-props");
 var import_ui12 = require("@elementor/ui");
-var ColorControl = createControl(({ propTypeUtil = import_editor_props7.colorPropTypeUtil, ...props }) => {
-  const { value, setValue } = useBoundProp(propTypeUtil);
-  const handleChange = (selectedColor) => {
-    setValue(selectedColor || null);
-  };
-  return /* @__PURE__ */ React16.createElement(ControlActions, null, /* @__PURE__ */ React16.createElement(import_ui12.UnstableColorField, { size: "tiny", ...props, value: value ?? "", onChange: handleChange, fullWidth: true }));
-});
+var ColorControl = createControl(
+  ({ propTypeUtil = import_editor_props7.colorPropTypeUtil, anchorEl, slotProps = {}, ...props }) => {
+    const { value, setValue } = useBoundProp(propTypeUtil);
+    const handleChange = (selectedColor) => {
+      setValue(selectedColor || null);
+    };
+    return /* @__PURE__ */ React16.createElement(ControlActions, null, /* @__PURE__ */ React16.createElement(
+      import_ui12.UnstableColorField,
+      {
+        size: "tiny",
+        fullWidth: true,
+        value: value ?? "",
+        onChange: handleChange,
+        ...props,
+        slotProps: {
+          ...slotProps,
+          colorPicker: {
+            anchorEl,
+            anchorOrigin: {
+              vertical: "top",
+              horizontal: "right"
+            },
+            transformOrigin: {
+              vertical: "top",
+              horizontal: -10
+            }
+          }
+        }
+      }
+    ));
+  }
+);
 
 // src/controls/stroke-control.tsx
 var units = ["px", "em", "rem"];
@@ -752,7 +799,7 @@ var PopoverGridContainer = ({
 
 // src/components/repeater.tsx
 var React23 = __toESM(require("react"));
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_icons3 = require("@elementor/icons");
 var import_ui17 = require("@elementor/ui");
 var import_i18n4 = require("@wordpress/i18n");
@@ -762,11 +809,11 @@ var React21 = __toESM(require("react"));
 
 // src/control-adornments/control-adornments-context.tsx
 var React20 = __toESM(require("react"));
-var import_react8 = require("react");
-var Context2 = (0, import_react8.createContext)(null);
+var import_react9 = require("react");
+var Context2 = (0, import_react9.createContext)(null);
 var ControlAdornmentsProvider = ({ children, items }) => /* @__PURE__ */ React20.createElement(Context2.Provider, { value: { items } }, children);
 var useControlAdornments = () => {
-  const context = (0, import_react8.useContext)(Context2);
+  const context = (0, import_react9.useContext)(Context2);
   return context?.items ?? [];
 };
 
@@ -867,14 +914,14 @@ var Repeater = ({
   values: repeaterValues = [],
   setValues: setRepeaterValues
 }) => {
-  const [openItem, setOpenItem] = (0, import_react9.useState)(EMPTY_OPEN_ITEM);
+  const [openItem, setOpenItem] = (0, import_react10.useState)(EMPTY_OPEN_ITEM);
   const [items, setItems] = useSyncExternalState({
     external: repeaterValues,
     // @ts-expect-error - as long as persistWhen => true, value will never be null
     setExternal: setRepeaterValues,
     persistWhen: () => true
   });
-  const [uniqueKeys, setUniqueKeys] = (0, import_react9.useState)(items.map((_, index) => index));
+  const [uniqueKeys, setUniqueKeys] = (0, import_react10.useState)(items.map((_, index) => index));
   const generateNextKey = (source) => {
     return 1 + Math.max(0, ...source);
   };
@@ -984,7 +1031,7 @@ var RepeaterItem = ({
   openOnMount,
   onOpen
 }) => {
-  const [anchorEl, setAnchorEl] = (0, import_react9.useState)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react10.useState)(null);
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
   const duplicateLabel = (0, import_i18n4.__)("Duplicate", "elementor");
   const toggleLabel = disabled ? (0, import_i18n4.__)("Show", "elementor") : (0, import_i18n4.__)("Hide", "elementor");
@@ -1020,10 +1067,10 @@ var RepeaterItem = ({
   ));
 };
 var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = (0, import_react9.useState)(null);
+  const [ref, setRef] = (0, import_react10.useState)(null);
   const popoverState = (0, import_ui17.usePopupState)({ variant: "popover" });
   const popoverProps = (0, import_ui17.bindPopover)(popoverState);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -1062,24 +1109,7 @@ var ItemContent = ({ anchorEl, bind }) => {
 };
 var Content = ({ anchorEl }) => {
   const { propType, value, setValue } = useBoundProp(import_editor_props9.shadowPropTypeUtil);
-  return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React24.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React24.createElement(PopoverGridContainer, null, /* @__PURE__ */ React24.createElement(Control2, { bind: "color", label: (0, import_i18n5.__)("Color", "elementor") }, /* @__PURE__ */ React24.createElement(
-    ColorControl,
-    {
-      slotProps: {
-        colorPicker: {
-          anchorEl,
-          anchorOrigin: {
-            vertical: "top",
-            horizontal: "right"
-          },
-          transformOrigin: {
-            vertical: "top",
-            horizontal: -10
-          }
-        }
-      }
-    }
-  )), /* @__PURE__ */ React24.createElement(Control2, { bind: "position", label: (0, import_i18n5.__)("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React24.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React24.createElement(PopoverGridContainer, null, /* @__PURE__ */ React24.createElement(Control2, { bind: "color", label: (0, import_i18n5.__)("Color", "elementor") }, /* @__PURE__ */ React24.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React24.createElement(Control2, { bind: "position", label: (0, import_i18n5.__)("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React24.createElement(
     SelectControl,
     {
       options: [
@@ -1143,7 +1173,7 @@ var import_editor_props10 = require("@elementor/editor-props");
 
 // src/components/control-toggle-button-group.tsx
 var React26 = __toESM(require("react"));
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_icons4 = require("@elementor/icons");
 var import_ui20 = require("@elementor/ui");
 
@@ -1191,7 +1221,7 @@ var ControlToggleButtonGroup = ({
   const handleChange = (_, newValue) => {
     onChange(newValue);
   };
-  const getGridTemplateColumns = (0, import_react10.useMemo)(() => {
+  const getGridTemplateColumns = (0, import_react11.useMemo)(() => {
     const isOffLimits = menuItems?.length;
     const itemsCount = isOffLimits ? fixedItems.length + 1 : fixedItems.length;
     const templateColumnsSuffix = isOffLimits ? "auto" : "";
@@ -1240,8 +1270,8 @@ var SplitButtonGroup = ({
   value
 }) => {
   const previewButton = usePreviewButton(items, value);
-  const [isMenuOpen, setIsMenuOpen] = (0, import_react10.useState)(false);
-  const menuButtonRef = (0, import_react10.useRef)(null);
+  const [isMenuOpen, setIsMenuOpen] = (0, import_react11.useState)(false);
+  const menuButtonRef = (0, import_react11.useRef)(null);
   const onMenuToggle = (ev) => {
     setIsMenuOpen((prev) => !prev);
     ev.preventDefault();
@@ -1310,10 +1340,10 @@ var SplitButtonGroup = ({
   ));
 };
 var usePreviewButton = (items, value) => {
-  const [previewButton, setPreviewButton] = (0, import_react10.useState)(
+  const [previewButton, setPreviewButton] = (0, import_react11.useState)(
     items.find((item) => item.value === value) ?? items[0]
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const selectedButton = items.find((item) => item.value === value);
     if (selectedButton) {
       setPreviewButton(selectedButton);
@@ -1411,7 +1441,7 @@ var NumberControl = createControl(
 
 // src/controls/equal-unequal-sizes-control.tsx
 var React30 = __toESM(require("react"));
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_editor_props12 = require("@elementor/editor-props");
 var import_ui23 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
@@ -1441,8 +1471,8 @@ function EqualUnequalSizesControl({
   items,
   multiSizePropTypeUtil
 }) {
-  const popupId = (0, import_react11.useId)();
-  const controlRef = (0, import_react11.useRef)(null);
+  const popupId = (0, import_react12.useId)();
+  const controlRef = (0, import_react12.useRef)(null);
   const popupState = (0, import_ui23.usePopupState)({ variant: "popover", popupId });
   const {
     propType: multiSizePropType,
@@ -1607,7 +1637,7 @@ var Control3 = ({
 
 // src/controls/font-family-control/font-family-control.tsx
 var React32 = __toESM(require("react"));
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_editor_props14 = require("@elementor/editor-props");
 var import_icons6 = require("@elementor/icons");
 var import_ui25 = require("@elementor/ui");
@@ -1640,7 +1670,7 @@ var enqueueFont = (fontFamily, context = "editor") => {
 // src/controls/font-family-control/font-family-control.tsx
 var SIZE2 = "tiny";
 var FontFamilyControl = createControl(({ fontFamilies }) => {
-  const [searchValue, setSearchValue] = (0, import_react12.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react13.useState)("");
   const { value: fontFamily, setValue: setFontFamily } = useBoundProp(import_editor_props14.stringPropTypeUtil);
   const popoverState = (0, import_ui25.usePopupState)({ variant: "popover" });
   const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
@@ -1725,7 +1755,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
 var LIST_ITEM_HEIGHT = 36;
 var LIST_ITEMS_BUFFER = 6;
 var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
-  const containerRef = (0, import_react12.useRef)(null);
+  const containerRef = (0, import_react13.useRef)(null);
   const selectedItem = fontListItems.find((item) => item.value === fontFamily);
   const debouncedVirtualizeChange = useDebounce(({ getVirtualIndexes }) => {
     getVirtualIndexes().forEach((index) => {
@@ -1742,7 +1772,7 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
     overscan: LIST_ITEMS_BUFFER,
     onChange: debouncedVirtualizeChange
   });
-  (0, import_react12.useEffect)(
+  (0, import_react13.useEffect)(
     () => {
       virtualizer.scrollToIndex(fontListItems.findIndex((item) => item.value === fontFamily));
     },
@@ -1850,8 +1880,8 @@ var StyledMenuList = (0, import_ui25.styled)(import_ui25.MenuList)(({ theme }) =
   position: "relative"
 }));
 var useDebounce = (fn, delay) => {
-  const [debouncedFn] = (0, import_react12.useState)(() => (0, import_utils2.debounce)(fn, delay));
-  (0, import_react12.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
+  const [debouncedFn] = (0, import_react13.useState)(() => (0, import_utils2.debounce)(fn, delay));
+  (0, import_react13.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
   return debouncedFn;
 };
 
@@ -1876,7 +1906,7 @@ var UrlControl = createControl(({ placeholder }) => {
 
 // src/controls/link-control.tsx
 var React35 = __toESM(require("react"));
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_editor_elements = require("@elementor/editor-elements");
 var import_editor_props16 = require("@elementor/editor-props");
 var import_editor_ui3 = require("@elementor/editor-ui");
@@ -1889,10 +1919,10 @@ var import_i18n9 = require("@wordpress/i18n");
 
 // src/components/autocomplete.tsx
 var React34 = __toESM(require("react"));
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_icons7 = require("@elementor/icons");
 var import_ui27 = require("@elementor/ui");
-var Autocomplete = (0, import_react13.forwardRef)((props, ref) => {
+var Autocomplete = (0, import_react14.forwardRef)((props, ref) => {
   const {
     options,
     onOptionChange,
@@ -2002,7 +2032,7 @@ var learnMoreButton = {
 var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(import_editor_props16.linkPropTypeUtil);
   const [linkSessionValue, setLinkSessionValue] = (0, import_session.useSessionStorage)(path.join("/"));
-  const [isActive, setIsActive] = (0, import_react14.useState)(!!value);
+  const [isActive, setIsActive] = (0, import_react15.useState)(!!value);
   const {
     allowCustomValues,
     queryOptions: { endpoint = "", requestParams = {} },
@@ -2010,8 +2040,8 @@ var LinkControl = createControl((props) => {
     minInputLength = 2,
     context: { elementId }
   } = props || {};
-  const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, import_react14.useState)((0, import_editor_elements.getLinkInLinkRestriction)(elementId));
-  const [options, setOptions] = (0, import_react14.useState)(
+  const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, import_react15.useState)((0, import_editor_elements.getLinkInLinkRestriction)(elementId));
+  const [options, setOptions] = (0, import_react15.useState)(
     generateFirstLoadedOption(value)
   );
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
@@ -2062,7 +2092,7 @@ var LinkControl = createControl((props) => {
     }
     debounceFetch({ ...requestParams, term: newValue });
   };
-  const debounceFetch = (0, import_react14.useMemo)(
+  const debounceFetch = (0, import_react15.useMemo)(
     () => (0, import_utils3.debounce)(
       (params) => fetchOptions(endpoint, params).then((newOptions) => {
         setOptions(formatOptions(newOptions));
@@ -2230,7 +2260,7 @@ var Control4 = ({ bind, isLinked }) => {
 
 // src/controls/svg-media-control.tsx
 var React38 = __toESM(require("react"));
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_editor_props18 = require("@elementor/editor-props");
 var import_icons10 = require("@elementor/icons");
 var import_ui31 = require("@elementor/ui");
@@ -2239,7 +2269,7 @@ var import_i18n12 = require("@wordpress/i18n");
 
 // src/components/enable-unfiltered-modal.tsx
 var React37 = __toESM(require("react"));
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_editor_current_user = require("@elementor/editor-current-user");
 var import_ui30 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
@@ -2262,7 +2292,7 @@ var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
 var EnableUnfilteredModal = (props) => {
   const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
   const { canUser } = (0, import_editor_current_user.useCurrentUserCapabilities)();
-  const [isError, setIsError] = (0, import_react15.useState)(false);
+  const [isError, setIsError] = (0, import_react16.useState)(false);
   const canManageOptions = canUser("manage_options");
   const onClose = (enabled) => {
     props.onClose(enabled);
@@ -2327,7 +2357,7 @@ var SvgMediaControl = createControl(() => {
   const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
-  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react16.useState)(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react17.useState)(false);
   const { open } = (0, import_wp_media2.useWpMediaFrame)({
     mediaTypes: ["svg"],
     multiple: false,
@@ -2398,6 +2428,7 @@ var SvgMediaControl = createControl(() => {
 // src/controls/background-control/background-control.tsx
 var React45 = __toESM(require("react"));
 var import_editor_props24 = require("@elementor/editor-props");
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var import_ui39 = require("@elementor/ui");
 var import_i18n18 = require("@wordpress/i18n");
 
@@ -2645,7 +2676,7 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_editor_props22 = require("@elementor/editor-props");
 var import_ui37 = require("@elementor/ui");
 var useBackgroundTabsHistory = ({
@@ -2666,7 +2697,7 @@ var useBackgroundTabsHistory = ({
     return "image";
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui37.useTabs)(getCurrentOverlayType());
-  const valuesHistory = (0, import_react17.useRef)({
+  const valuesHistory = (0, import_react18.useRef)({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -2757,10 +2788,10 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
     }
   ));
 });
-var ItemContent2 = ({ bind }) => {
-  return /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React44.createElement(Content2, null));
+var ItemContent2 = ({ anchorEl = null, bind }) => {
+  return /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React44.createElement(Content2, { anchorEl }));
 };
-var Content2 = () => {
+var Content2 = ({ anchorEl }) => {
   const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
     image: getInitialBackgroundOverlay().value,
     color: initialBackgroundColorOverlay.value,
@@ -2777,7 +2808,7 @@ var Content2 = () => {
     /* @__PURE__ */ React44.createElement(import_ui38.Tab, { label: (0, import_i18n17.__)("Image", "elementor"), ...getTabProps("image") }),
     /* @__PURE__ */ React44.createElement(import_ui38.Tab, { label: (0, import_i18n17.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
     /* @__PURE__ */ React44.createElement(import_ui38.Tab, { label: (0, import_i18n17.__)("Color", "elementor"), ...getTabProps("color") })
-  )), /* @__PURE__ */ React44.createElement(import_ui38.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React44.createElement(PopoverContent, null, /* @__PURE__ */ React44.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React44.createElement(import_ui38.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React44.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React44.createElement(import_ui38.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React44.createElement(PopoverContent, null, /* @__PURE__ */ React44.createElement(ColorOverlayContent, null))));
+  )), /* @__PURE__ */ React44.createElement(import_ui38.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React44.createElement(PopoverContent, null, /* @__PURE__ */ React44.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React44.createElement(import_ui38.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React44.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React44.createElement(import_ui38.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React44.createElement(PopoverContent, null, /* @__PURE__ */ React44.createElement(ColorOverlayContent, { anchorEl }))));
 };
 var ItemIcon2 = ({ value }) => {
   switch (value.$$type) {
@@ -2846,9 +2877,9 @@ var ItemLabelGradient = ({ value }) => {
   }
   return /* @__PURE__ */ React44.createElement("span", null, (0, import_i18n17.__)("Radial Gradient", "elementor"));
 };
-var ColorOverlayContent = () => {
+var ColorOverlayContent = ({ anchorEl }) => {
   const propContext = useBoundProp(import_editor_props23.backgroundColorOverlayPropTypeUtil);
-  return /* @__PURE__ */ React44.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React44.createElement(ColorControl, null)));
+  return /* @__PURE__ */ React44.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React44.createElement(ColorControl, { anchorEl })));
 };
 var ImageOverlayContent = () => {
   const propContext = useBoundProp(import_editor_props23.backgroundImageOverlayPropTypeUtil);
@@ -2896,7 +2927,9 @@ var getGradientValue = (value) => {
 // src/controls/background-control/background-control.tsx
 var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(import_editor_props24.backgroundPropTypeUtil);
-  return /* @__PURE__ */ React45.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React45.createElement(SectionContent, null, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React45.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React45.createElement(import_ui39.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React45.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(ControlFormLabel, null, (0, import_i18n18.__)("Color", "elementor"))), /* @__PURE__ */ React45.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(ColorControl, null))))));
+  const isUsingNestedProps = (0, import_editor_v1_adapters.isExperimentActive)("e_v_3_30");
+  const colorLabel = (0, import_i18n18.__)("Color", "elementor");
+  return /* @__PURE__ */ React45.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React45.createElement(SectionContent, null, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React45.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React45.createElement(import_ui39.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React45.createElement(import_ui39.Grid, { item: true, xs: 6 }, isUsingNestedProps ? /* @__PURE__ */ React45.createElement(ControlLabel, null, colorLabel) : /* @__PURE__ */ React45.createElement(ControlFormLabel, null, colorLabel)), /* @__PURE__ */ React45.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(ColorControl, null))))));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {