@elementor/editor-controls 4.2.0-beta1 → 4.2.3

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import { RefObject, ReactNode, FC, PropsWithChildren, ComponentProps, Dispatch, SetStateAction, ComponentType } from 'react';
 import { SxProps, SelectProps, UnstableColorFieldProps, StackProps, ToggleButtonProps, PopupState, Theme, FormLabelProps, Grid, TextFieldProps } from '@elementor/ui';
-import { StringPropValue, PropTypeUtil, PropValue, PropKey, LinkPropValue, QueryFilterKeyConfig, TransformablePropValue, PropType, CreateOptions, SizePropValue } from '@elementor/editor-props';
+import { SizePropValue, StringPropValue, PropTypeUtil, PropValue, PropKey, LinkPropValue, QueryFilterKeyConfig, TransformablePropValue, PropType, CreateOptions } from '@elementor/editor-props';
 import * as _emotion_styled from '@emotion/styled';
 import { StyleDefinitionState } from '@elementor/editor-styles';
 import { EditorProps, EditorView } from '@tiptap/pm/view';
@@ -50,19 +50,19 @@ type Props$c = {
 };
 declare const MentionTextAreaControl: ControlComponent$1<({ placeholder, ariaLabel, suggestions: allSuggestions, rows, triggerPosition }: Props$c) => React$1.JSX.Element>;
 
+type SizeUnit$1 = SizePropValue['value']['unit'];
+type ExtendedOption = Extract<SizeUnit$1, 'auto' | 'custom'>;
+type Unit = Exclude<SizeUnit$1, ExtendedOption>;
 declare const lengthUnits: readonly ["px", "%", "em", "rem", "vw", "vh", "ch"];
 declare const angleUnits: readonly ["deg", "rad", "grad", "turn"];
 declare const timeUnits: readonly ["s", "ms"];
-declare const defaultExtendedOptions: readonly ["auto", "custom"];
-type LengthUnit$1 = (typeof lengthUnits)[number];
-type AngleUnit$1 = (typeof angleUnits)[number];
-type TimeUnit$1 = (typeof timeUnits)[number];
-type ExtendedOption = (typeof defaultExtendedOptions)[number];
-type Unit$1 = LengthUnit$1 | AngleUnit$1 | TimeUnit$1;
-declare function isUnitExtendedOption(unit: Unit$1 | ExtendedOption): unit is ExtendedOption;
+type LengthUnit = Extract<Unit, (typeof lengthUnits)[number] | 'fr'>;
+type AngleUnit = (typeof angleUnits)[number];
+type TimeUnit = (typeof timeUnits)[number];
+declare function isUnitExtendedOption(unit: SizeUnit$1): unit is ExtendedOption;
 
 type SizeVariant$1 = 'length' | 'angle' | 'time';
-type UnitProps<T extends readonly Unit$1[]> = {
+type UnitProps<T extends readonly Unit[]> = {
     units?: T;
     defaultUnit?: T[number];
 };
@@ -77,13 +77,13 @@ type BaseSizeControlProps = {
     id?: string;
     ariaLabel?: string;
 };
-type LengthSizeControlProps = BaseSizeControlProps & UnitProps<LengthUnit$1[]> & {
+type LengthSizeControlProps = BaseSizeControlProps & UnitProps<LengthUnit[]> & {
     variant: 'length';
 };
-type AngleSizeControlProps = BaseSizeControlProps & UnitProps<AngleUnit$1[]> & {
+type AngleSizeControlProps = BaseSizeControlProps & UnitProps<AngleUnit[]> & {
     variant: 'angle';
 };
-type TimeSizeControlProps = BaseSizeControlProps & UnitProps<TimeUnit$1[]> & {
+type TimeSizeControlProps = BaseSizeControlProps & UnitProps<TimeUnit[]> & {
     variant: 'time';
 };
 type SizeControlProps = LengthSizeControlProps | AngleSizeControlProps | TimeSizeControlProps;
@@ -105,13 +105,18 @@ type SelectOption$1 = {
     value: StringPropValue['value'];
     disabled?: boolean;
 };
-type SelectControlProps = {
+type SelectOptionGroup = {
+    label: string;
     options: SelectOption$1[];
+};
+type SelectControlProps = {
+    options?: SelectOption$1[];
+    groups?: SelectOptionGroup[];
     onChange?: (newValue: string | null, previousValue: string | null | undefined) => void;
     MenuProps?: SelectProps['MenuProps'];
     ariaLabel?: string;
 };
-declare const SelectControl: ControlComponent$1<({ options, onChange, MenuProps, ariaLabel }: SelectControlProps) => React$1.JSX.Element>;
+declare const SelectControl: ControlComponent$1<({ options, groups, onChange, MenuProps, ariaLabel }: SelectControlProps) => React$1.JSX.Element>;
 
 declare const collectionMethods: {
     readonly 'off-canvas': () => SelectOption$1[];
@@ -530,12 +535,6 @@ type EnhancedPropKeyContextValue<T, P> = PropKeyContextValue<T, P> & {
 declare function useBoundProp<T extends PropValue = PropValue, P extends PropType = PropType>(): EnhancedPropKeyContextValue<T, P>;
 declare function useBoundProp<TKey extends string, TValue extends PropValue>(propTypeUtil: PropTypeUtil<TKey, TValue>): UseBoundProp<TValue>;
 
-type LengthUnit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh' | 'ch';
-type AngleUnit = 'deg' | 'rad' | 'grad' | 'turn';
-type TimeUnit = 's' | 'ms';
-type Unit = LengthUnit | AngleUnit | TimeUnit;
-type ExtendedSizeOption = 'auto' | 'custom';
-type SizeUnit$1 = Unit | ExtendedSizeOption;
 type SizeVariant = 'length' | 'angle' | 'time';
 type SetSizeValue<T> = (value: T, options?: CreateOptions, meta?: SetValueMeta) => void;
 
@@ -724,8 +723,8 @@ declare const InlineEditorToolbar: ({ editor, elementId, sx }: InlineEditorToolb
 
 type Props$2<TValue> = {
     value: TValue;
-    units: Unit$1[];
-    defaultUnit?: Unit$1;
+    units: Unit[];
+    defaultUnit?: Unit;
     onChange: (value: TValue) => void;
     onBlur?: (event: React$1.FocusEvent<HTMLInputElement>) => void;
     disabled?: boolean;
@@ -884,4 +883,4 @@ declare function useTypingBuffer(options?: UseTypingBufferOptions): {
     startsWith: (haystack: string, needle: string) => boolean;
 };
 
-export { type AdornmentComponent, type AngleUnit$1 as AngleUnit, AspectRatioControl, AttachmentTypeControl, AttributesControl, BackgroundControl, BoxShadowRepeaterControl, ChipsControl, ClearIconButton, ColorControl, ControlActions, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, type ControlReplacement, ControlReplacementsProvider, ControlToggleButtonGroup, DateRangeControl, DateTimeControl, DisplayConditionsControl, EmailFormActionControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, GridSpanControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, type InlineEditorToolbarProps, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit$1 as LengthUnit, LinkControl, LinkedDimensionsControl, MentionTextAreaControl, NumberControl, NumberInput, PopoverContent, PopoverGridContainer, PositionControl, type PromotionTrackingData, PromotionTrigger, type PromotionTriggerRef, PropKeyProvider, PropProvider, type PropProviderProps, QueryChipsControl, QueryControl, QueryFilterRepeaterControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeComponent, SizeControl, StrokeControl, StyledToggleButton, StyledToggleButtonGroup, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, TimeRangeControl, TimeStringControl, type TimeUnit$1 as TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit$1 as Unit, UnstableSizeControl, UnstableSizeField, UrlControl, type UseTypingBufferOptions, type V4PromotionData, type V4PromotionKey, VideoMediaControl, createControl, createControlReplacementsRegistry, enqueueFont, getControlReplacements, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, isUnitExtendedOption, registerControlReplacement, trackUpgradePromotionClick, trackViewPromotion, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useControlReplacement, useFontFamilies, useSyncExternalState, useTypingBuffer };
+export { type AdornmentComponent, type AngleUnit, AspectRatioControl, AttachmentTypeControl, AttributesControl, BackgroundControl, BoxShadowRepeaterControl, ChipsControl, ClearIconButton, ColorControl, ControlActions, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, type ControlReplacement, ControlReplacementsProvider, ControlToggleButtonGroup, DateRangeControl, DateTimeControl, DisplayConditionsControl, EmailFormActionControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, GridSpanControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, type InlineEditorToolbarProps, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, MentionTextAreaControl, NumberControl, NumberInput, PopoverContent, PopoverGridContainer, PositionControl, type PromotionTrackingData, PromotionTrigger, type PromotionTriggerRef, PropKeyProvider, PropProvider, type PropProviderProps, QueryChipsControl, QueryControl, QueryFilterRepeaterControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeComponent, SizeControl, StrokeControl, StyledToggleButton, StyledToggleButtonGroup, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, TimeRangeControl, TimeStringControl, type TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UnstableSizeControl, UnstableSizeField, UrlControl, type UseTypingBufferOptions, type V4PromotionData, type V4PromotionKey, VideoMediaControl, createControl, createControlReplacementsRegistry, enqueueFont, getControlReplacements, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, isUnitExtendedOption, registerControlReplacement, trackUpgradePromotionClick, trackViewPromotion, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useControlReplacement, useFontFamilies, useSyncExternalState, useTypingBuffer };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import { RefObject, ReactNode, FC, PropsWithChildren, ComponentProps, Dispatch, SetStateAction, ComponentType } from 'react';
 import { SxProps, SelectProps, UnstableColorFieldProps, StackProps, ToggleButtonProps, PopupState, Theme, FormLabelProps, Grid, TextFieldProps } from '@elementor/ui';
-import { StringPropValue, PropTypeUtil, PropValue, PropKey, LinkPropValue, QueryFilterKeyConfig, TransformablePropValue, PropType, CreateOptions, SizePropValue } from '@elementor/editor-props';
+import { SizePropValue, StringPropValue, PropTypeUtil, PropValue, PropKey, LinkPropValue, QueryFilterKeyConfig, TransformablePropValue, PropType, CreateOptions } from '@elementor/editor-props';
 import * as _emotion_styled from '@emotion/styled';
 import { StyleDefinitionState } from '@elementor/editor-styles';
 import { EditorProps, EditorView } from '@tiptap/pm/view';
@@ -50,19 +50,19 @@ type Props$c = {
 };
 declare const MentionTextAreaControl: ControlComponent$1<({ placeholder, ariaLabel, suggestions: allSuggestions, rows, triggerPosition }: Props$c) => React$1.JSX.Element>;
 
+type SizeUnit$1 = SizePropValue['value']['unit'];
+type ExtendedOption = Extract<SizeUnit$1, 'auto' | 'custom'>;
+type Unit = Exclude<SizeUnit$1, ExtendedOption>;
 declare const lengthUnits: readonly ["px", "%", "em", "rem", "vw", "vh", "ch"];
 declare const angleUnits: readonly ["deg", "rad", "grad", "turn"];
 declare const timeUnits: readonly ["s", "ms"];
-declare const defaultExtendedOptions: readonly ["auto", "custom"];
-type LengthUnit$1 = (typeof lengthUnits)[number];
-type AngleUnit$1 = (typeof angleUnits)[number];
-type TimeUnit$1 = (typeof timeUnits)[number];
-type ExtendedOption = (typeof defaultExtendedOptions)[number];
-type Unit$1 = LengthUnit$1 | AngleUnit$1 | TimeUnit$1;
-declare function isUnitExtendedOption(unit: Unit$1 | ExtendedOption): unit is ExtendedOption;
+type LengthUnit = Extract<Unit, (typeof lengthUnits)[number] | 'fr'>;
+type AngleUnit = (typeof angleUnits)[number];
+type TimeUnit = (typeof timeUnits)[number];
+declare function isUnitExtendedOption(unit: SizeUnit$1): unit is ExtendedOption;
 
 type SizeVariant$1 = 'length' | 'angle' | 'time';
-type UnitProps<T extends readonly Unit$1[]> = {
+type UnitProps<T extends readonly Unit[]> = {
     units?: T;
     defaultUnit?: T[number];
 };
@@ -77,13 +77,13 @@ type BaseSizeControlProps = {
     id?: string;
     ariaLabel?: string;
 };
-type LengthSizeControlProps = BaseSizeControlProps & UnitProps<LengthUnit$1[]> & {
+type LengthSizeControlProps = BaseSizeControlProps & UnitProps<LengthUnit[]> & {
     variant: 'length';
 };
-type AngleSizeControlProps = BaseSizeControlProps & UnitProps<AngleUnit$1[]> & {
+type AngleSizeControlProps = BaseSizeControlProps & UnitProps<AngleUnit[]> & {
     variant: 'angle';
 };
-type TimeSizeControlProps = BaseSizeControlProps & UnitProps<TimeUnit$1[]> & {
+type TimeSizeControlProps = BaseSizeControlProps & UnitProps<TimeUnit[]> & {
     variant: 'time';
 };
 type SizeControlProps = LengthSizeControlProps | AngleSizeControlProps | TimeSizeControlProps;
@@ -105,13 +105,18 @@ type SelectOption$1 = {
     value: StringPropValue['value'];
     disabled?: boolean;
 };
-type SelectControlProps = {
+type SelectOptionGroup = {
+    label: string;
     options: SelectOption$1[];
+};
+type SelectControlProps = {
+    options?: SelectOption$1[];
+    groups?: SelectOptionGroup[];
     onChange?: (newValue: string | null, previousValue: string | null | undefined) => void;
     MenuProps?: SelectProps['MenuProps'];
     ariaLabel?: string;
 };
-declare const SelectControl: ControlComponent$1<({ options, onChange, MenuProps, ariaLabel }: SelectControlProps) => React$1.JSX.Element>;
+declare const SelectControl: ControlComponent$1<({ options, groups, onChange, MenuProps, ariaLabel }: SelectControlProps) => React$1.JSX.Element>;
 
 declare const collectionMethods: {
     readonly 'off-canvas': () => SelectOption$1[];
@@ -530,12 +535,6 @@ type EnhancedPropKeyContextValue<T, P> = PropKeyContextValue<T, P> & {
 declare function useBoundProp<T extends PropValue = PropValue, P extends PropType = PropType>(): EnhancedPropKeyContextValue<T, P>;
 declare function useBoundProp<TKey extends string, TValue extends PropValue>(propTypeUtil: PropTypeUtil<TKey, TValue>): UseBoundProp<TValue>;
 
-type LengthUnit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh' | 'ch';
-type AngleUnit = 'deg' | 'rad' | 'grad' | 'turn';
-type TimeUnit = 's' | 'ms';
-type Unit = LengthUnit | AngleUnit | TimeUnit;
-type ExtendedSizeOption = 'auto' | 'custom';
-type SizeUnit$1 = Unit | ExtendedSizeOption;
 type SizeVariant = 'length' | 'angle' | 'time';
 type SetSizeValue<T> = (value: T, options?: CreateOptions, meta?: SetValueMeta) => void;
 
@@ -724,8 +723,8 @@ declare const InlineEditorToolbar: ({ editor, elementId, sx }: InlineEditorToolb
 
 type Props$2<TValue> = {
     value: TValue;
-    units: Unit$1[];
-    defaultUnit?: Unit$1;
+    units: Unit[];
+    defaultUnit?: Unit;
     onChange: (value: TValue) => void;
     onBlur?: (event: React$1.FocusEvent<HTMLInputElement>) => void;
     disabled?: boolean;
@@ -884,4 +883,4 @@ declare function useTypingBuffer(options?: UseTypingBufferOptions): {
     startsWith: (haystack: string, needle: string) => boolean;
 };
 
-export { type AdornmentComponent, type AngleUnit$1 as AngleUnit, AspectRatioControl, AttachmentTypeControl, AttributesControl, BackgroundControl, BoxShadowRepeaterControl, ChipsControl, ClearIconButton, ColorControl, ControlActions, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, type ControlReplacement, ControlReplacementsProvider, ControlToggleButtonGroup, DateRangeControl, DateTimeControl, DisplayConditionsControl, EmailFormActionControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, GridSpanControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, type InlineEditorToolbarProps, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit$1 as LengthUnit, LinkControl, LinkedDimensionsControl, MentionTextAreaControl, NumberControl, NumberInput, PopoverContent, PopoverGridContainer, PositionControl, type PromotionTrackingData, PromotionTrigger, type PromotionTriggerRef, PropKeyProvider, PropProvider, type PropProviderProps, QueryChipsControl, QueryControl, QueryFilterRepeaterControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeComponent, SizeControl, StrokeControl, StyledToggleButton, StyledToggleButtonGroup, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, TimeRangeControl, TimeStringControl, type TimeUnit$1 as TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit$1 as Unit, UnstableSizeControl, UnstableSizeField, UrlControl, type UseTypingBufferOptions, type V4PromotionData, type V4PromotionKey, VideoMediaControl, createControl, createControlReplacementsRegistry, enqueueFont, getControlReplacements, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, isUnitExtendedOption, registerControlReplacement, trackUpgradePromotionClick, trackViewPromotion, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useControlReplacement, useFontFamilies, useSyncExternalState, useTypingBuffer };
+export { type AdornmentComponent, type AngleUnit, AspectRatioControl, AttachmentTypeControl, AttributesControl, BackgroundControl, BoxShadowRepeaterControl, ChipsControl, ClearIconButton, ColorControl, ControlActions, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, type ControlReplacement, ControlReplacementsProvider, ControlToggleButtonGroup, DateRangeControl, DateTimeControl, DisplayConditionsControl, EmailFormActionControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, GridSpanControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, type InlineEditorToolbarProps, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, MentionTextAreaControl, NumberControl, NumberInput, PopoverContent, PopoverGridContainer, PositionControl, type PromotionTrackingData, PromotionTrigger, type PromotionTriggerRef, PropKeyProvider, PropProvider, type PropProviderProps, QueryChipsControl, QueryControl, QueryFilterRepeaterControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeComponent, SizeControl, StrokeControl, StyledToggleButton, StyledToggleButtonGroup, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, TimeRangeControl, TimeStringControl, type TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UnstableSizeControl, UnstableSizeField, UrlControl, type UseTypingBufferOptions, type V4PromotionData, type V4PromotionKey, VideoMediaControl, createControl, createControlReplacementsRegistry, enqueueFont, getControlReplacements, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, isUnitExtendedOption, registerControlReplacement, trackUpgradePromotionClick, trackViewPromotion, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useControlReplacement, useFontFamilies, useSyncExternalState, useTypingBuffer };

package/dist/index.js

@@ -584,14 +584,15 @@ var DEFAULT_MENU_PROPS = {
   }
 };
 var SelectControl = createControl(
-  ({ options, onChange, MenuProps = DEFAULT_MENU_PROPS, ariaLabel }) => {
+  ({ options = [], groups = [], onChange, MenuProps = DEFAULT_MENU_PROPS, ariaLabel }) => {
     const { value, setValue, disabled, placeholder } = useBoundProp(import_editor_props2.stringPropTypeUtil);
     const handleChange = (event) => {
       const newValue = event.target.value || null;
       onChange?.(newValue, value);
       setValue(newValue);
     };
-    const isDisabled = disabled || options.length === 0;
+    const flatOptions = flattenGroupedOptions(options, groups);
+    const isDisabled = disabled || flatOptions.length === 0;
     return /* @__PURE__ */ React12.createElement(ControlActions, null, /* @__PURE__ */ React12.createElement(
       import_ui5.Select,
       {
@@ -600,16 +601,41 @@ var SelectControl = createControl(
         size: "tiny",
         MenuProps,
         "aria-label": ariaLabel || placeholder,
-        renderValue: (selectedValue) => getSelectRenderValue(options, placeholder, selectedValue),
+        renderValue: (selectedValue) => getSelectRenderValue(flatOptions, placeholder, selectedValue),
         value: value ?? "",
         onChange: handleChange,
         disabled: isDisabled,
         fullWidth: true
       },
-      options.map(({ label, ...props }) => /* @__PURE__ */ React12.createElement(import_editor_ui2.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, label))
+      groups.length ? groups.flatMap((group) => renderGroup(group)) : options.map((option) => renderOption(option))
     ));
   }
 );
+var GROUPED_OPTION_INDENT = 3.5;
+function renderGroup(group) {
+  return [
+    /* @__PURE__ */ React12.createElement(import_ui5.MenuSubheader, { key: `group-${group.label}`, sx: { fontWeight: 400, color: "text.tertiary" } }, group.label),
+    ...group.options.map((option) => renderOption(option, true))
+  ];
+}
+function renderOption({ label, ...props }, isGrouped = false) {
+  return /* @__PURE__ */ React12.createElement(
+    import_editor_ui2.MenuListItem,
+    {
+      key: props.value,
+      ...props,
+      value: props.value ?? "",
+      sx: isGrouped ? { pl: GROUPED_OPTION_INDENT } : void 0
+    },
+    label
+  );
+}
+function flattenGroupedOptions(options, groups) {
+  if (!groups.length) {
+    return options;
+  }
+  return groups.flatMap((group) => group.options);
+}
 function getSelectRenderValue(options, placeholder, selectedValue) {
   const optionWithValue = (v) => options.find(({ value }) => value === v);
   if (!isUnsetSelectValue(selectedValue)) {
@@ -902,11 +928,11 @@ function useTypingBuffer(options = {}) {
 var lengthUnits = ["px", "%", "em", "rem", "vw", "vh", "ch"];
 var angleUnits = ["deg", "rad", "grad", "turn"];
 var timeUnits = ["s", "ms"];
-var defaultExtendedOptions = ["auto", "custom"];
 var DEFAULT_UNIT = "px";
 var DEFAULT_SIZE = NaN;
+var extendedOptions = ["auto", "custom"];
 function isUnitExtendedOption(unit) {
-  return defaultExtendedOptions.includes(unit);
+  return extendedOptions.includes(unit);
 }
 
 // src/components/size-control/text-field-inner-selection.tsx
@@ -1236,13 +1262,13 @@ var TextFieldPopover = (props) => {
 var import_react12 = require("react");
 function useSizeExtendedOptions(options, disableCustom) {
   return (0, import_react12.useMemo)(() => {
-    const extendedOptions = [...options];
-    if (!disableCustom && !extendedOptions.includes("custom")) {
-      extendedOptions.push("custom");
+    const extendedOptions2 = [...options];
+    if (!disableCustom && !extendedOptions2.includes("custom")) {
+      extendedOptions2.push("custom");
     } else if (options.includes("custom")) {
-      extendedOptions.splice(extendedOptions.indexOf("custom"), 1);
+      extendedOptions2.splice(extendedOptions2.indexOf("custom"), 1);
     }
-    return extendedOptions;
+    return extendedOptions2;
   }, [options, disableCustom]);
 }
 
@@ -1279,6 +1305,11 @@ var useSyncExternalState = ({
   return [internal, setInternalValue];
 };
 
+// src/controls/size-control/utils/settings/get-prop-type-settings.ts
+var getPropTypeSettings = (propType) => {
+  return propType.settings;
+};
+
 // src/controls/size-control.tsx
 var defaultSelectedUnit = {
   length: "px",
@@ -1299,7 +1330,7 @@ var SizeControl = createControl(
     placeholder,
     startIcon,
     anchorRef,
-    extendedOptions,
+    extendedOptions: extendedOptions2,
     disableCustom,
     min = 0,
     enablePropTypeUnits = false,
@@ -1316,7 +1347,7 @@ var SizeControl = createControl(
     } = useBoundProp(import_editor_props8.sizePropTypeUtil);
     const actualDefaultUnit = defaultUnit ?? externalPlaceholder?.unit ?? defaultSelectedUnit[variant];
     const activeBreakpoint = (0, import_editor_responsive.useActiveBreakpoint)();
-    const actualExtendedOptions = useSizeExtendedOptions(extendedOptions || [], disableCustom ?? false);
+    const actualExtendedOptions = useSizeExtendedOptions(extendedOptions2 || [], disableCustom ?? false);
     const actualUnits = resolveUnits(propType, enablePropTypeUnits, variant, units2, actualExtendedOptions);
     const popupState = (0, import_ui14.usePopupState)({ variant: "popover" });
     const memorizedExternalState = (0, import_react14.useMemo)(
@@ -1405,7 +1436,7 @@ function resolveUnits(propType, enablePropTypeUnits, variant, externalUnits, act
   if (!enablePropTypeUnits) {
     return [...externalUnits ?? fallback, ...actualExtendedOptions || []];
   }
-  return propType.settings?.available_units ?? fallback;
+  return getPropTypeSettings(propType)?.available_units ?? fallback;
 }
 function formatSize(size, unit) {
   if (isUnitExtendedOption(unit)) {
@@ -3712,11 +3743,6 @@ var resolvePlaceholder = (placeholder) => {
   return typeof size === "number" ? size.toString() : size;
 };
 
-// src/controls/size-control/utils/settings/get-prop-type-settings.ts
-var getPropTypeSettings = (propType) => {
-  return propType.settings;
-};
-
 // src/controls/size-control/utils/settings/get-default-unit.ts
 var getDefaultUnit = (propType) => {
   return getPropTypeSettings(propType)?.default_unit;
@@ -5167,7 +5193,7 @@ var GapControl = ({ label }) => {
   const disabled = sizeDisabled || directionDisabled;
   const propProviderProps = {
     propType,
-    value: directionValue ?? (!isLinked ? { row: masterPlaceholder, column: masterPlaceholder } : null),
+    value: directionValue ?? (!isLinked ? { row: directionPlaceholder?.row, column: directionPlaceholder?.column } : null),
     setValue: (directions) => {
       const entries = Object.entries(directions);
       const filtered = entries.filter(([, value]) => Boolean(value));
@@ -8300,6 +8326,10 @@ var CHIP_TRIGGER_KEYS = /* @__PURE__ */ new Set([" ", ","]);
 function isValidEmail(email) {
   return import_schema.z.string().email().safeParse(email).success;
 }
+var FORM_FIELD_SHORTCODE_PATTERN = /^\[[^[\]]+]$/;
+function isFormFieldShortcode(value) {
+  return FORM_FIELD_SHORTCODE_PATTERN.test(value);
+}
 var shouldShowMentionsInfo = () => {
   if (!(0, import_utils9.hasProInstalled)()) {
     return true;
@@ -8312,14 +8342,26 @@ var shouldShowMentionsInfo = () => {
 };
 
 // src/controls/email-form-action-control/email-chips-field.tsx
-var EmailChipsField = ({ fieldLabel, placeholder }) => {
+var isValidRecipient = (address) => isValidEmail(address) || isFormFieldShortcode(address);
+function resolveMention(raw, suggestions) {
+  if (!raw.startsWith("@")) {
+    return raw;
+  }
+  const match = suggestions.find((suggestion) => createMentionPattern(suggestion.value, "start").test(raw));
+  return match ? `[${match.value}]` : raw;
+}
+var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
   const { value, setValue, disabled } = useBoundProp(import_editor_props65.stringArrayPropTypeUtil);
   const [inputValue, setInputValue] = (0, import_react69.useState)("");
   const items2 = value || [];
   const selectedValues = items2.map((item) => import_editor_props65.stringPropTypeUtil.extract(item)).filter((val) => val !== null);
+  const suggestionOptions = (0, import_react69.useMemo)(
+    () => suggestions.map((suggestion) => `[${suggestion.value}]`),
+    [suggestions]
+  );
   const tryAddChip = (raw) => {
-    const address = raw.trim();
-    if (!address || selectedValues.includes(address) || !isValidEmail(address)) {
+    const address = resolveMention(raw.trim(), suggestions);
+    if (!address || selectedValues.includes(address) || !isValidRecipient(address)) {
       return;
     }
     setValue([...items2, import_editor_props65.stringPropTypeUtil.create(address)]);
@@ -8328,8 +8370,8 @@ var EmailChipsField = ({ fieldLabel, placeholder }) => {
   const handleChange = (_, newValue) => {
     const updated = [];
     for (const entry of newValue) {
-      const address = entry.trim();
-      if (!address || !isValidEmail(address)) {
+      const address = resolveMention(entry.trim(), suggestions);
+      if (!address || !isValidRecipient(address)) {
         continue;
       }
       updated.push(import_editor_props65.stringPropTypeUtil.create(address));
@@ -8348,7 +8390,7 @@ var EmailChipsField = ({ fieldLabel, placeholder }) => {
       tryAddChip(inputValue);
     }
   };
-  return /* @__PURE__ */ React116.createElement(import_ui100.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React116.createElement(import_ui100.Grid, { item: true }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React116.createElement(import_ui100.Grid, { item: true }, /* @__PURE__ */ React116.createElement(
+  return /* @__PURE__ */ React116.createElement(ControlActions, null, /* @__PURE__ */ React116.createElement(
     import_ui100.Autocomplete,
     {
       fullWidth: true,
@@ -8364,15 +8406,21 @@ var EmailChipsField = ({ fieldLabel, placeholder }) => {
       },
       value: selectedValues,
       onChange: handleChange,
-      options: [],
+      options: suggestionOptions,
+      filterOptions: (options, state) => {
+        const query = state.inputValue.trim().replace(/^@/, "").toLowerCase();
+        return query ? options.filter((option) => option.toLowerCase().includes(query)) : options;
+      },
+      filterSelectedOptions: true,
       onBlur: handleBlur,
       getOptionLabel: (option) => option,
       isOptionEqualToValue: (option, val) => option === val,
       renderInput: (params) => /* @__PURE__ */ React116.createElement(import_ui100.TextField, { ...params, placeholder, onKeyDown: handleKeyDown }),
       renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React116.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
     }
-  )));
-};
+  ));
+});
+var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React116.createElement(import_ui100.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React116.createElement(import_ui100.Grid, { item: true }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React116.createElement(import_ui100.Grid, { item: true }, /* @__PURE__ */ React116.createElement(EmailChipsControl, { placeholder, suggestions })));
 
 // src/controls/email-form-action-control/email-field.tsx
 var React117 = __toESM(require("react"));
@@ -8380,7 +8428,17 @@ var import_ui101 = require("@elementor/ui");
 var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React117.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React117.createElement(import_ui101.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React117.createElement(import_ui101.Grid, { item: true }, /* @__PURE__ */ React117.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React117.createElement(import_ui101.Grid, { item: true }, /* @__PURE__ */ React117.createElement(TextControl, { placeholder }))));
 
 // src/controls/email-form-action-control/fields.tsx
-var SendToField = ({ placeholder }) => /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: (0, import_i18n57.__)("Send to", "elementor"), placeholder });
+var SendToField = ({ placeholder }) => {
+  const suggestions = useFormFieldSuggestions({ inputType: "email" });
+  return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React118.createElement(import_ui102.Stack, { gap: 0.5 }, /* @__PURE__ */ React118.createElement(
+    EmailChipsField,
+    {
+      fieldLabel: (0, import_i18n57.__)("Send to", "elementor"),
+      placeholder,
+      suggestions
+    }
+  ), shouldShowMentionsInfo() && /* @__PURE__ */ React118.createElement(import_editor_ui15.InfoAlert, null, (0, import_i18n57.__)("Type @ or an email field name to insert its submitted value.", "elementor"))));
+};
 var SubjectField = () => /* @__PURE__ */ React118.createElement(
   EmailField,
   {
@@ -8424,8 +8482,14 @@ var ReplyToField = () => {
     }
   ))));
 };
-var CcField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: (0, import_i18n57.__)("Cc", "elementor") }));
-var BccField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: (0, import_i18n57.__)("Bcc", "elementor") }));
+var CcField = () => {
+  const suggestions = useFormFieldSuggestions({ inputType: "email" });
+  return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: (0, import_i18n57.__)("Cc", "elementor"), suggestions }));
+};
+var BccField = () => {
+  const suggestions = useFormFieldSuggestions({ inputType: "email" });
+  return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: (0, import_i18n57.__)("Bcc", "elementor"), suggestions }));
+};
 var MetaDataField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React118.createElement(import_ui102.Stack, { gap: 0.5 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, (0, import_i18n57.__)("Metadata", "elementor")), /* @__PURE__ */ React118.createElement(
   ChipsControl,
   {
@@ -8452,7 +8516,7 @@ var SendAsField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider,
 var EmailFormActionControl = createControl(
   ({ toPlaceholder, label }) => {
     const { value, setValue, ...propContext } = useBoundProp(import_editor_props66.emailsPropTypeUtil);
-    return /* @__PURE__ */ React119.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React119.createElement(import_ui103.Stack, { gap: 2 }, /* @__PURE__ */ React119.createElement(ControlLabel, null, label ? label + " " + (0, import_i18n58.__)("settings", "elementor") : (0, import_i18n58.__)("Email settings", "elementor")), /* @__PURE__ */ React119.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React119.createElement(SendToField, { placeholder: toPlaceholder })), /* @__PURE__ */ React119.createElement(SubjectField, null), /* @__PURE__ */ React119.createElement(MessageField, null), /* @__PURE__ */ React119.createElement(FromEmailField, null), /* @__PURE__ */ React119.createElement(AdvancedSettings, null)));
+    return /* @__PURE__ */ React119.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React119.createElement(import_ui103.Stack, { gap: 2 }, /* @__PURE__ */ React119.createElement(ControlLabel, null, label ? label + " " + (0, import_i18n58.__)("settings", "elementor") : (0, import_i18n58.__)("Email settings", "elementor")), /* @__PURE__ */ React119.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React119.createElement(SubjectField, null), /* @__PURE__ */ React119.createElement(MessageField, null), /* @__PURE__ */ React119.createElement(FromEmailField, null), /* @__PURE__ */ React119.createElement(AdvancedSettings, null)));
   }
 );
 var AdvancedSettings = () => /* @__PURE__ */ React119.createElement(import_editor_ui16.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React119.createElement(import_ui103.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React119.createElement(import_ui103.Stack, { gap: 2 }, /* @__PURE__ */ React119.createElement(FromNameField, null), /* @__PURE__ */ React119.createElement(ReplyToField, null), /* @__PURE__ */ React119.createElement(CcField, null), /* @__PURE__ */ React119.createElement(BccField, null), /* @__PURE__ */ React119.createElement(import_ui103.Divider, null), /* @__PURE__ */ React119.createElement(MetaDataField, null), /* @__PURE__ */ React119.createElement(SendAsField, null))));