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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "4.4.0-1139",
+  "version": "4.4.0-1141",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,23 +40,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.4.0-1139",
-    "@elementor/editor-elements": "4.4.0-1139",
-    "@elementor/editor-props": "4.4.0-1139",
-    "@elementor/editor-responsive": "4.4.0-1139",
-    "@elementor/editor-ui": "4.4.0-1139",
-    "@elementor/editor-v1-adapters": "4.4.0-1139",
-    "@elementor/env": "4.4.0-1139",
-    "@elementor/events": "4.4.0-1139",
-    "@elementor/http-client": "4.4.0-1139",
+    "@elementor/editor-current-user": "4.4.0-1141",
+    "@elementor/editor-elements": "4.4.0-1141",
+    "@elementor/editor-props": "4.4.0-1141",
+    "@elementor/editor-responsive": "4.4.0-1141",
+    "@elementor/editor-ui": "4.4.0-1141",
+    "@elementor/editor-v1-adapters": "4.4.0-1141",
+    "@elementor/env": "4.4.0-1141",
+    "@elementor/events": "4.4.0-1141",
+    "@elementor/http-client": "4.4.0-1141",
     "@elementor/icons": "~1.78.1",
-    "@elementor/locations": "4.4.0-1139",
-    "@elementor/query": "4.4.0-1139",
-    "@elementor/schema": "4.4.0-1139",
-    "@elementor/session": "4.4.0-1139",
+    "@elementor/locations": "4.4.0-1141",
+    "@elementor/query": "4.4.0-1141",
+    "@elementor/schema": "4.4.0-1141",
+    "@elementor/session": "4.4.0-1141",
     "@elementor/ui": "1.41.3",
-    "@elementor/utils": "4.4.0-1139",
-    "@elementor/wp-media": "4.4.0-1139",
+    "@elementor/utils": "4.4.0-1141",
+    "@elementor/wp-media": "4.4.0-1141",
     "@monaco-editor/react": "^4.7.0",
     "@tanstack/react-virtual": "^3.13.3",
     "@tiptap/extension-bold": "^3.11.1",

package/src/controls/icon-library/icon-library-popover.tsx

@@ -25,6 +25,7 @@ import { FontAwesomeGlyph } from './font-awesome-glyph';
 import { IconLibraryFilter } from './icon-library-filter';
 import { IconLibraryGrid } from './icon-library-grid';
 import { useIconLibraryProviderIcons } from './icon-library-providers';
+import { IconLibraryUploadAction, IconLibraryUploadActionSlot } from './icon-library-upload-action';
 import { type IconLibraryView, IconLibraryViewToggle } from './icon-library-view-toggle';
 import { SvgElementIcon } from './svg-element-icon';
 import { useFontAwesome7Catalog } from './use-font-awesome-7-catalog';
@@ -127,7 +128,12 @@ export const IconLibraryPopover = ( {
 				title={ __( 'Icon library', 'elementor' ) }
 				onClose={ handleClose }
 				icon={ <LibraryIcon fontSize="tiny" /> }
-				actions={ [ <IconLibraryViewToggle key="view" value={ view } onChange={ setStoredView } /> ] }
+				actions={ [
+					<IconLibraryViewToggle key="view" value={ view } onChange={ setStoredView } />,
+					<IconLibraryUploadActionSlot key="upload">
+						<IconLibraryUploadAction />
+					</IconLibraryUploadActionSlot>,
+				] }
 				sx={ {
 					pl: ICON_LIBRARY_INLINE_SPACING,
 					pr: 1,

package/src/controls/icon-library/icon-library-upload-action.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { forwardRef, type MouseEvent, useRef, useState } from 'react';
+import { PromotionPopover, useCanvasClickHandler } from '@elementor/editor-ui';
+import { UploadIcon } from '@elementor/icons';
+import { createReplaceableLocation } from '@elementor/locations';
+import { Box, IconButton, Tooltip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { trackUpgradePromotionClick, trackViewPromotion } from '../../utils/tracking';
+
+export const ICON_LIBRARY_UPLOAD_UPGRADE_URL = 'https://go.elementor.com/go-pro-svg-library-upload-upgrade/';
+
+const TRACKING_DATA = { target_name: 'icon_library_upload', location_l2: 'general' } as const;
+
+export const { Slot: IconLibraryUploadActionSlot, inject: injectIntoIconLibraryUploadAction } =
+	createReplaceableLocation();
+
+type IconLibraryUploadButtonProps = {
+	onClick: () => void;
+	'aria-haspopup'?: 'dialog';
+	'aria-expanded'?: boolean;
+};
+
+export const IconLibraryUploadButton = forwardRef< HTMLButtonElement, IconLibraryUploadButtonProps >(
+	( props, ref ) => {
+		const label = __( 'Upload library', 'elementor' );
+
+		return (
+			<Tooltip title={ label } placement="top">
+				<IconButton ref={ ref } size="tiny" aria-label={ label } { ...props }>
+					<UploadIcon fontSize="tiny" />
+				</IconButton>
+			</Tooltip>
+		);
+	}
+);
+
+type IconLibraryUploadPromotionProps = {
+	ctaUrl?: string;
+	ctaText?: string;
+	title?: string;
+	content?: string;
+};
+
+export const IconLibraryUploadPromotion = ( {
+	ctaUrl = ICON_LIBRARY_UPLOAD_UPGRADE_URL,
+	ctaText = __( 'Upgrade now', 'elementor' ),
+	title = __( 'Upload custom icons', 'elementor' ),
+	content = __( 'Add your own icon font library to use across your site.', 'elementor' ),
+}: IconLibraryUploadPromotionProps ) => {
+	const [ isOpen, setIsOpen ] = useState( false );
+	const triggerRef = useRef< HTMLButtonElement >( null );
+
+	const canSeePromotions = !! window.elementor?.config?.v4Promotions;
+
+	const close = () => {
+		setIsOpen( false );
+		triggerRef.current?.focus();
+	};
+
+	useCanvasClickHandler( isOpen, close );
+
+	const toggle = () => {
+		if ( ! isOpen ) {
+			trackViewPromotion( TRACKING_DATA );
+		}
+
+		setIsOpen( ! isOpen );
+	};
+
+	if ( ! canSeePromotions ) {
+		return null;
+	}
+
+	return (
+		<PromotionPopover
+			open={ isOpen }
+			placement="top"
+			arrow
+			title={ title }
+			content={ content }
+			ctaText={ ctaText }
+			ctaUrl={ ctaUrl }
+			onClose={ ( event: MouseEvent ) => {
+				event.stopPropagation();
+				close();
+			} }
+			onCtaClick={ () => trackUpgradePromotionClick( TRACKING_DATA ) }
+		>
+			<Box component="span" sx={ { display: 'inline-flex' } }>
+				<IconLibraryUploadButton
+					ref={ triggerRef }
+					aria-haspopup="dialog"
+					aria-expanded={ isOpen }
+					onClick={ toggle }
+				/>
+			</Box>
+		</PromotionPopover>
+	);
+};
+
+export const IconLibraryUploadAction = () => {
+	if ( window.elementorPro ) {
+		return null;
+	}
+
+	return <IconLibraryUploadPromotion />;
+};

package/src/index.ts

@@ -44,6 +44,11 @@ export {
 	type IconLibraryProvider,
 } from './controls/icon-library/icon-library-providers';
 export { enqueueIconFonts } from './controls/open-icon-library';
+export {
+	IconLibraryUploadButton,
+	IconLibraryUploadPromotion,
+	injectIntoIconLibraryUploadAction,
+} from './controls/icon-library/icon-library-upload-action';
 export { type FontAwesome7Icon } from './controls/icon-library/font-awesome-7-catalog';
 export {
 	getFontAwesome7IconName,