@elementor/editor-controls 4.2.0-beta1 → 4.2.3

package/dist/index.mjs

@@ -452,7 +452,7 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
 import * as React12 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil2 } from "@elementor/editor-props";
 import { MenuListItem } from "@elementor/editor-ui";
-import { Select, Typography } from "@elementor/ui";
+import { MenuSubheader, Select, Typography } from "@elementor/ui";
 var DEFAULT_MENU_PROPS = {
   MenuListProps: {
     sx: {
@@ -461,14 +461,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(stringPropTypeUtil2);
     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(
       Select,
       {
@@ -477,16 +478,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(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(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(
+    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)) {
@@ -779,11 +805,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
@@ -1121,13 +1147,13 @@ var TextFieldPopover = (props) => {
 import { useMemo } from "react";
 function useSizeExtendedOptions(options, disableCustom) {
   return 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]);
 }
 
@@ -1164,6 +1190,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",
@@ -1184,7 +1215,7 @@ var SizeControl = createControl(
     placeholder,
     startIcon,
     anchorRef,
-    extendedOptions,
+    extendedOptions: extendedOptions2,
     disableCustom,
     min = 0,
     enablePropTypeUnits = false,
@@ -1201,7 +1232,7 @@ var SizeControl = createControl(
     } = useBoundProp(sizePropTypeUtil2);
     const actualDefaultUnit = defaultUnit ?? externalPlaceholder?.unit ?? defaultSelectedUnit[variant];
     const activeBreakpoint = useActiveBreakpoint();
-    const actualExtendedOptions = useSizeExtendedOptions(extendedOptions || [], disableCustom ?? false);
+    const actualExtendedOptions = useSizeExtendedOptions(extendedOptions2 || [], disableCustom ?? false);
     const actualUnits = resolveUnits(propType, enablePropTypeUnits, variant, units2, actualExtendedOptions);
     const popupState = usePopupState2({ variant: "popover" });
     const memorizedExternalState = useMemo2(
@@ -1290,7 +1321,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)) {
@@ -3626,11 +3657,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;
@@ -5105,7 +5131,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));
@@ -8276,7 +8302,7 @@ function useFormFieldSuggestions(options) {
 
 // src/controls/email-form-action-control/email-chips-field.tsx
 import * as React116 from "react";
-import { useState as useState19 } from "react";
+import { useMemo as useMemo18, useState as useState19 } from "react";
 import { stringArrayPropTypeUtil as stringArrayPropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil22 } from "@elementor/editor-props";
 import { Autocomplete as Autocomplete4, Grid as Grid32, TextField as TextField11 } from "@elementor/ui";
 
@@ -8288,6 +8314,10 @@ var CHIP_TRIGGER_KEYS = /* @__PURE__ */ new Set([" ", ","]);
 function isValidEmail(email) {
   return z.string().email().safeParse(email).success;
 }
+var FORM_FIELD_SHORTCODE_PATTERN = /^\[[^[\]]+]$/;
+function isFormFieldShortcode(value) {
+  return FORM_FIELD_SHORTCODE_PATTERN.test(value);
+}
 var shouldShowMentionsInfo = () => {
   if (!hasProInstalled3()) {
     return true;
@@ -8300,14 +8330,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(stringArrayPropTypeUtil3);
   const [inputValue, setInputValue] = useState19("");
   const items2 = value || [];
   const selectedValues = items2.map((item) => stringPropTypeUtil22.extract(item)).filter((val) => val !== null);
+  const suggestionOptions = useMemo18(
+    () => 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, stringPropTypeUtil22.create(address)]);
@@ -8316,8 +8358,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(stringPropTypeUtil22.create(address));
@@ -8336,7 +8378,7 @@ var EmailChipsField = ({ fieldLabel, placeholder }) => {
       tryAddChip(inputValue);
     }
   };
-  return /* @__PURE__ */ React116.createElement(Grid32, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React116.createElement(Grid32, { item: true }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React116.createElement(Grid32, { item: true }, /* @__PURE__ */ React116.createElement(
+  return /* @__PURE__ */ React116.createElement(ControlActions, null, /* @__PURE__ */ React116.createElement(
     Autocomplete4,
     {
       fullWidth: true,
@@ -8352,15 +8394,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(TextField11, { ...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(Grid32, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React116.createElement(Grid32, { item: true }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React116.createElement(Grid32, { item: true }, /* @__PURE__ */ React116.createElement(EmailChipsControl, { placeholder, suggestions })));
 
 // src/controls/email-form-action-control/email-field.tsx
 import * as React117 from "react";
@@ -8368,7 +8416,17 @@ import { Grid as Grid33 } from "@elementor/ui";
 var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React117.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React117.createElement(Grid33, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React117.createElement(Grid33, { item: true }, /* @__PURE__ */ React117.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React117.createElement(Grid33, { item: true }, /* @__PURE__ */ React117.createElement(TextControl, { placeholder }))));
 
 // src/controls/email-form-action-control/fields.tsx
-var SendToField = ({ placeholder }) => /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: __57("Send to", "elementor"), placeholder });
+var SendToField = ({ placeholder }) => {
+  const suggestions = useFormFieldSuggestions({ inputType: "email" });
+  return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React118.createElement(Stack19, { gap: 0.5 }, /* @__PURE__ */ React118.createElement(
+    EmailChipsField,
+    {
+      fieldLabel: __57("Send to", "elementor"),
+      placeholder,
+      suggestions
+    }
+  ), shouldShowMentionsInfo() && /* @__PURE__ */ React118.createElement(InfoAlert2, null, __57("Type @ or an email field name to insert its submitted value.", "elementor"))));
+};
 var SubjectField = () => /* @__PURE__ */ React118.createElement(
   EmailField,
   {
@@ -8412,8 +8470,14 @@ var ReplyToField = () => {
     }
   ))));
 };
-var CcField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: __57("Cc", "elementor") }));
-var BccField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: __57("Bcc", "elementor") }));
+var CcField = () => {
+  const suggestions = useFormFieldSuggestions({ inputType: "email" });
+  return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: __57("Cc", "elementor"), suggestions }));
+};
+var BccField = () => {
+  const suggestions = useFormFieldSuggestions({ inputType: "email" });
+  return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: __57("Bcc", "elementor"), suggestions }));
+};
 var MetaDataField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React118.createElement(Stack19, { gap: 0.5 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, __57("Metadata", "elementor")), /* @__PURE__ */ React118.createElement(
   ChipsControl,
   {
@@ -8440,7 +8504,7 @@ var SendAsField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider,
 var EmailFormActionControl = createControl(
   ({ toPlaceholder, label }) => {
     const { value, setValue, ...propContext } = useBoundProp(emailsPropTypeUtil);
-    return /* @__PURE__ */ React119.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React119.createElement(Stack20, { gap: 2 }, /* @__PURE__ */ React119.createElement(ControlLabel, null, label ? label + " " + __58("settings", "elementor") : __58("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(Stack20, { gap: 2 }, /* @__PURE__ */ React119.createElement(ControlLabel, null, label ? label + " " + __58("settings", "elementor") : __58("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(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React119.createElement(Box26, { sx: { pt: 2 } }, /* @__PURE__ */ React119.createElement(Stack20, { 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(Divider5, null), /* @__PURE__ */ React119.createElement(MetaDataField, null), /* @__PURE__ */ React119.createElement(SendAsField, null))));
@@ -8862,7 +8926,7 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
 
 // src/components/inline-editor-toolbar.tsx
 import * as React128 from "react";
-import { useEffect as useEffect21, useMemo as useMemo18, useRef as useRef32, useState as useState22 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo19, useRef as useRef32, useState as useState22 } from "react";
 import { getContainer as getContainer3, getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
@@ -8961,7 +9025,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = useMemo18(() => {
+  const formatButtonsList = useMemo19(() => {
     const buttons = Object.values(formatButtons);
     if (isElementClickable) {
       return buttons.filter((button) => button.action !== "link");
@@ -9308,7 +9372,7 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-import { useMemo as useMemo19 } from "react";
+import { useMemo as useMemo20 } from "react";
 import { getElementorConfig } from "@elementor/editor-v1-adapters";
 var getFontControlConfig = () => {
   const { controls } = getElementorConfig();
@@ -9316,7 +9380,7 @@ var getFontControlConfig = () => {
 };
 var useFontFamilies = () => {
   const { groups, options } = getFontControlConfig();
-  return useMemo19(() => {
+  return useMemo20(() => {
     if (!groups || !options) {
       return [];
     }