@elementor/editor-controls 4.4.0-1141 → 4.4.0-1143

package/dist/index.js

@@ -6647,6 +6647,8 @@ var IconLibraryGrid = ({
 
 // src/controls/icon-library/icon-library-providers.ts
 var import_react54 = require("react");
+var import_query2 = require("@elementor/query");
+var PROVIDER_ICON_SVG_QUERY_KEY = "icon-library-provider-svg";
 var providers = /* @__PURE__ */ new Map();
 function registerIconLibraryProvider(provider) {
   providers.set(provider.id, provider);
@@ -6677,6 +6679,14 @@ async function resolveProviderIconSvg(library, iconValue, signal) {
   }
   return null;
 }
+function useProviderIconSvg(library, iconValue, enabled) {
+  return (0, import_query2.useQuery)({
+    queryKey: [PROVIDER_ICON_SVG_QUERY_KEY, library, iconValue],
+    queryFn: ({ signal }) => resolveProviderIconSvg(library, iconValue, signal),
+    enabled: enabled && Boolean(library && iconValue),
+    staleTime: Infinity
+  });
+}
 
 // src/controls/icon-library/icon-library-upload-action.tsx
 var React87 = __toESM(require("react"));
@@ -6835,10 +6845,10 @@ var SvgElementIcon = React89.forwardRef(
 );
 
 // src/controls/icon-library/use-font-awesome-7-catalog.ts
-var import_query2 = require("@elementor/query");
+var import_query3 = require("@elementor/query");
 var FONT_AWESOME_7_CATALOG_QUERY_KEY = ["font-awesome-7-catalog"];
 function useFontAwesome7Catalog(enabled) {
-  return (0, import_query2.useQuery)({
+  return (0, import_query3.useQuery)({
     queryKey: FONT_AWESOME_7_CATALOG_QUERY_KEY,
     queryFn: ({ signal }) => loadFontAwesome7Catalog(signal),
     enabled,
@@ -7071,6 +7081,7 @@ function createIconPropValue(icon, library) {
 
 // src/controls/svg-media-overlay.tsx
 var React91 = __toESM(require("react"));
+var import_editor_ui13 = require("@elementor/editor-ui");
 var import_icons27 = require("@elementor/icons");
 var import_ui74 = require("@elementor/ui");
 var import_i18n39 = require("@wordpress/i18n");
@@ -7125,7 +7136,7 @@ var UploadControl = ({ isAdmin, onUpload }) => {
   if (isAdmin) {
     return /* @__PURE__ */ React91.createElement(MediaUploadButton, { onClick: onUpload });
   }
-  return /* @__PURE__ */ React91.createElement(import_ui74.ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React91.createElement(MediaUploadButton, { disabled: true }));
+  return /* @__PURE__ */ React91.createElement(import_editor_ui13.ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React91.createElement(MediaUploadButton, { disabled: true }));
 };
 
 // src/controls/svg-media-preview.tsx
@@ -7141,17 +7152,37 @@ var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
   const icons = [...fontAwesomeIcons, ...providerIcons];
   const selectedIcon = findFontAwesome7Icon(icons, iconClassName, iconLibrary);
   const isLoadingCatalog = shouldLoadIconCatalog && (isFontAwesomeLoading || isProviderLoading);
-  if (isFetching || isLoadingCatalog) {
+  const { data: savedIconSvg, isLoading: isSavedIconLoading } = useProviderIconSvg(
+    iconLibrary,
+    iconClassName,
+    shouldLoadIconCatalog && !isLoadingCatalog && !selectedIcon
+  );
+  if (isFetching || isLoadingCatalog || isSavedIconLoading) {
     return /* @__PURE__ */ React92.createElement(import_ui75.CircularProgress, { role: "progressbar" });
   }
   if (selectedIcon) {
     return /* @__PURE__ */ React92.createElement(IconPreview, { icon: selectedIcon });
   }
+  if (savedIconSvg) {
+    return /* @__PURE__ */ React92.createElement(IconPreview, { icon: toSvgMarkupIcon(savedIconSvg, iconLibrary, iconClassName) });
+  }
   if (shouldLoadIconCatalog) {
     return /* @__PURE__ */ React92.createElement(IconPreviewPlaceholder, null);
   }
   return /* @__PURE__ */ React92.createElement(SvgPreview, { src });
 };
+var toSvgMarkupIcon = (svgMarkup, library, value) => ({
+  id: `${library}:${value}`,
+  label: value ?? "",
+  library: library ?? "",
+  value: value ?? "",
+  name: value ?? "",
+  aliases: [],
+  width: 0,
+  height: 0,
+  paths: [],
+  svgMarkup
+});
 var IconPreview = ({ icon }) => /* @__PURE__ */ React92.createElement(import_ui75.Box, { sx: { color: ICON_PREVIEW_COLOR } }, /* @__PURE__ */ React92.createElement(
   FontAwesomeGlyph,
   {
@@ -7561,7 +7592,7 @@ var BackgroundImageOverlayAttachment = () => {
 var React97 = __toESM(require("react"));
 var import_react58 = require("react");
 var import_editor_props38 = require("@elementor/editor-props");
-var import_editor_ui13 = require("@elementor/editor-ui");
+var import_editor_ui14 = require("@elementor/editor-ui");
 var import_icons29 = require("@elementor/icons");
 var import_ui80 = require("@elementor/ui");
 var import_i18n44 = require("@wordpress/i18n");
@@ -7599,7 +7630,7 @@ var BackgroundImageOverlayPosition = () => {
       disabled: stringPropContext.disabled,
       value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React97.createElement(import_editor_ui13.MenuListItem, { key: value, value: value ?? "" }, label))
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React97.createElement(import_editor_ui14.MenuListItem, { key: value, value: value ?? "" }, label))
   ))))), isCustom ? /* @__PURE__ */ React97.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React97.createElement(import_ui80.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React97.createElement(import_ui80.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React97.createElement(import_ui80.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React97.createElement(
     SizeControl,
     {
@@ -8262,7 +8293,7 @@ var KeyValueControl = createControl((props = {}) => {
 // src/controls/position-control.tsx
 var React104 = __toESM(require("react"));
 var import_editor_props45 = require("@elementor/editor-props");
-var import_editor_ui14 = require("@elementor/editor-ui");
+var import_editor_ui15 = require("@elementor/editor-ui");
 var import_icons32 = require("@elementor/icons");
 var import_ui88 = require("@elementor/ui");
 var import_i18n50 = require("@wordpress/i18n");
@@ -8302,7 +8333,7 @@ var PositionControl = () => {
       renderValue: (selectedValue) => getSelectRenderValue(positionOptions, placeholder, selectedValue),
       fullWidth: true
     },
-    positionOptions.map(({ label, value }) => /* @__PURE__ */ React104.createElement(import_editor_ui14.MenuListItem, { key: value, value: value ?? "" }, label))
+    positionOptions.map(({ label, value }) => /* @__PURE__ */ React104.createElement(import_editor_ui15.MenuListItem, { key: value, value: value ?? "" }, label))
   )))), isCustom && /* @__PURE__ */ React104.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React104.createElement(import_ui88.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React104.createElement(import_ui88.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React104.createElement(import_ui88.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React104.createElement(
     SizeControl,
     {
@@ -8716,7 +8747,7 @@ var Label2 = ({ label, value }) => {
 
 // src/controls/transform-control/transform-settings-control.tsx
 var React116 = __toESM(require("react"));
-var import_editor_ui15 = require("@elementor/editor-ui");
+var import_editor_ui16 = require("@elementor/editor-ui");
 var import_icons38 = require("@elementor/icons");
 var import_ui100 = require("@elementor/ui");
 var import_i18n59 = require("@wordpress/i18n");
@@ -8820,7 +8851,7 @@ var TransformSettingsControl = ({
       ...popupProps
     },
     /* @__PURE__ */ React116.createElement(
-      import_editor_ui15.PopoverHeader,
+      import_editor_ui16.PopoverHeader,
       {
         title: (0, import_i18n59.__)("Transform settings", "elementor"),
         onClose: popupState.close,
@@ -9149,7 +9180,7 @@ function subscribeToTransitionEvent() {
 var React119 = __toESM(require("react"));
 var import_react72 = require("react");
 var import_editor_props56 = require("@elementor/editor-props");
-var import_editor_ui16 = require("@elementor/editor-ui");
+var import_editor_ui17 = require("@elementor/editor-ui");
 var import_icons40 = require("@elementor/icons");
 var import_ui103 = require("@elementor/ui");
 var import_i18n62 = require("@wordpress/i18n");
@@ -9281,10 +9312,10 @@ var TransitionSelector = ({
             }
           },
           /* @__PURE__ */ React119.createElement("span", null, item.value),
-          showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React119.createElement(import_editor_ui16.PromotionChip, null)
+          showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React119.createElement(import_editor_ui17.PromotionChip, null)
         ),
         footer: showPromotion ? /* @__PURE__ */ React119.createElement(
-          import_editor_ui16.PromotionAlert,
+          import_editor_ui17.PromotionAlert,
           {
             message: (0, import_i18n62.__)(
               "Upgrade to customize transition properties and control effects.",
@@ -10313,13 +10344,13 @@ var InlineEditingControl = createControl(
 // src/controls/email-form-action-control/index.tsx
 var React133 = __toESM(require("react"));
 var import_editor_props68 = require("@elementor/editor-props");
-var import_editor_ui18 = require("@elementor/editor-ui");
+var import_editor_ui19 = require("@elementor/editor-ui");
 var import_ui117 = require("@elementor/ui");
 var import_i18n69 = require("@wordpress/i18n");
 
 // src/controls/email-form-action-control/fields.tsx
 var React132 = __toESM(require("react"));
-var import_editor_ui17 = require("@elementor/editor-ui");
+var import_editor_ui18 = require("@elementor/editor-ui");
 var import_ui116 = require("@elementor/ui");
 var import_i18n68 = require("@wordpress/i18n");
 
@@ -10542,7 +10573,7 @@ var SendToField = ({ placeholder }) => {
       placeholder,
       suggestions
     }
-  ), shouldShowMentionsInfo() && /* @__PURE__ */ React132.createElement(import_editor_ui17.InfoAlert, null, (0, import_i18n68.__)("Type @ or an email field name to insert its submitted value.", "elementor"))));
+  ), shouldShowMentionsInfo() && /* @__PURE__ */ React132.createElement(import_editor_ui18.InfoAlert, null, (0, import_i18n68.__)("Type @ or an email field name to insert its submitted value.", "elementor"))));
 };
 var SubjectField = () => /* @__PURE__ */ React132.createElement(
   FieldValueMentionField,
@@ -10554,7 +10585,7 @@ var SubjectField = () => /* @__PURE__ */ React132.createElement(
 );
 var MessageField = () => {
   const suggestions = useFormFieldSuggestions();
-  return /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React132.createElement(import_ui116.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React132.createElement(import_ui116.Grid, { item: true }, /* @__PURE__ */ React132.createElement(ControlFormLabel, null, (0, import_i18n68.__)("Message", "elementor"))), /* @__PURE__ */ React132.createElement(import_ui116.Grid, { item: true }, /* @__PURE__ */ React132.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React132.createElement(import_ui116.Grid, { item: true }, /* @__PURE__ */ React132.createElement(import_editor_ui17.InfoAlert, null, shouldShowMentionsInfo() ? (0, import_i18n68.__)(
+  return /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React132.createElement(import_ui116.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React132.createElement(import_ui116.Grid, { item: true }, /* @__PURE__ */ React132.createElement(ControlFormLabel, null, (0, import_i18n68.__)("Message", "elementor"))), /* @__PURE__ */ React132.createElement(import_ui116.Grid, { item: true }, /* @__PURE__ */ React132.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React132.createElement(import_ui116.Grid, { item: true }, /* @__PURE__ */ React132.createElement(import_editor_ui18.InfoAlert, null, shouldShowMentionsInfo() ? (0, import_i18n68.__)(
     "[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
     "elementor"
   ) : (0, import_i18n68.__)("[all-fields] shortcode sends all fields.", "elementor")))));
@@ -10624,15 +10655,15 @@ var EmailFormActionControl = createControl(
     return /* @__PURE__ */ React133.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React133.createElement(import_ui117.Stack, { gap: 2 }, /* @__PURE__ */ React133.createElement(ControlLabel, null, label ? label + " " + (0, import_i18n69.__)("settings", "elementor") : (0, import_i18n69.__)("Email settings", "elementor")), /* @__PURE__ */ React133.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React133.createElement(SubjectField, null), /* @__PURE__ */ React133.createElement(MessageField, null), /* @__PURE__ */ React133.createElement(FromEmailField, null), /* @__PURE__ */ React133.createElement(AdvancedSettings, null)));
   }
 );
-var AdvancedSettings = () => /* @__PURE__ */ React133.createElement(import_editor_ui18.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React133.createElement(import_ui117.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React133.createElement(import_ui117.Stack, { gap: 2 }, /* @__PURE__ */ React133.createElement(FromNameField, null), /* @__PURE__ */ React133.createElement(ReplyToField, null), /* @__PURE__ */ React133.createElement(CcField, null), /* @__PURE__ */ React133.createElement(BccField, null), /* @__PURE__ */ React133.createElement(import_ui117.Divider, null), /* @__PURE__ */ React133.createElement(MetaDataField, null), /* @__PURE__ */ React133.createElement(SendAsField, null))));
+var AdvancedSettings = () => /* @__PURE__ */ React133.createElement(import_editor_ui19.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React133.createElement(import_ui117.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React133.createElement(import_ui117.Stack, { gap: 2 }, /* @__PURE__ */ React133.createElement(FromNameField, null), /* @__PURE__ */ React133.createElement(ReplyToField, null), /* @__PURE__ */ React133.createElement(CcField, null), /* @__PURE__ */ React133.createElement(BccField, null), /* @__PURE__ */ React133.createElement(import_ui117.Divider, null), /* @__PURE__ */ React133.createElement(MetaDataField, null), /* @__PURE__ */ React133.createElement(SendAsField, null))));
 
 // src/controls/attachment-type-control.tsx
 var React134 = __toESM(require("react"));
-var import_editor_ui19 = require("@elementor/editor-ui");
+var import_editor_ui20 = require("@elementor/editor-ui");
 var import_ui118 = require("@elementor/ui");
 var import_i18n70 = require("@wordpress/i18n");
 var AttachmentTypeControl = createControl(({ label, options }) => {
-  return /* @__PURE__ */ React134.createElement(import_ui118.Grid, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React134.createElement(import_ui118.Grid, { item: true }, /* @__PURE__ */ React134.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React134.createElement(import_ui118.Grid, { item: true }, /* @__PURE__ */ React134.createElement(SelectControl, { options })), /* @__PURE__ */ React134.createElement(import_ui118.Grid, { item: true }, /* @__PURE__ */ React134.createElement(import_editor_ui19.InfoAlert, null, (0, import_i18n70.__)(
+  return /* @__PURE__ */ React134.createElement(import_ui118.Grid, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React134.createElement(import_ui118.Grid, { item: true }, /* @__PURE__ */ React134.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React134.createElement(import_ui118.Grid, { item: true }, /* @__PURE__ */ React134.createElement(SelectControl, { options })), /* @__PURE__ */ React134.createElement(import_ui118.Grid, { item: true }, /* @__PURE__ */ React134.createElement(import_editor_ui20.InfoAlert, null, (0, import_i18n70.__)(
     "Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
     "elementor"
   ))));
@@ -10688,7 +10719,7 @@ var import_i18n71 = require("@wordpress/i18n");
 // src/components/promotions/promotion-trigger.tsx
 var React136 = __toESM(require("react"));
 var import_react81 = require("react");
-var import_editor_ui20 = require("@elementor/editor-ui");
+var import_editor_ui21 = require("@elementor/editor-ui");
 var import_ui120 = require("@elementor/ui");
 function getV4Promotion(key) {
   return window.elementor?.config?.v4Promotions?.[key];
@@ -10707,7 +10738,7 @@ var PromotionTrigger = (0, import_react81.forwardRef)(
     }, [trackingData]);
     (0, import_react81.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
     return /* @__PURE__ */ React136.createElement(React136.Fragment, null, promotion && /* @__PURE__ */ React136.createElement(
-      import_editor_ui20.PromotionInfotip,
+      import_editor_ui21.PromotionInfotip,
       {
         title: promotion.title,
         content: promotion.content,
@@ -10729,7 +10760,7 @@ var PromotionTrigger = (0, import_react81.forwardRef)(
           },
           sx: { cursor: "pointer", display: "inline-flex" }
         },
-        children ?? /* @__PURE__ */ React136.createElement(import_editor_ui20.PromotionChip, null)
+        children ?? /* @__PURE__ */ React136.createElement(import_editor_ui21.PromotionChip, null)
       )
     ));
   }
@@ -11080,7 +11111,7 @@ var differsFromExternal = (newState, externalState) => {
 // src/components/size/unit-select.tsx
 var React141 = __toESM(require("react"));
 var import_react85 = require("react");
-var import_editor_ui21 = require("@elementor/editor-ui");
+var import_editor_ui22 = require("@elementor/editor-ui");
 var import_ui125 = require("@elementor/ui");
 var menuItemContentStyles2 = {
   display: "flex",
@@ -11097,7 +11128,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
     popupState.close();
   };
   return /* @__PURE__ */ React141.createElement(React141.Fragment, null, /* @__PURE__ */ React141.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui125.bindTrigger)(popupState) }, value), /* @__PURE__ */ React141.createElement(import_ui125.Menu, { MenuListProps: { dense: true }, ...(0, import_ui125.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React141.createElement(
-    import_editor_ui21.MenuListItem,
+    import_editor_ui22.MenuListItem,
     {
       key: option,
       onClick: () => handleMenuItemClick(index),