@elementor/editor-controls 4.4.0-1077 → 4.4.0-1078

package/src/controls/icon-library/use-font-awesome-7-catalog.ts

@@ -0,0 +1,14 @@
+import { useQuery } from '@elementor/query';
+
+import { type FontAwesome7Icon, loadFontAwesome7Catalog } from './font-awesome-7-catalog';
+
+const FONT_AWESOME_7_CATALOG_QUERY_KEY = [ 'font-awesome-7-catalog' ];
+
+export function useFontAwesome7Catalog( enabled: boolean ) {
+	return useQuery< FontAwesome7Icon[] >( {
+		queryKey: FONT_AWESOME_7_CATALOG_QUERY_KEY,
+		queryFn: ( { signal } ) => loadFontAwesome7Catalog( signal ),
+		enabled,
+		staleTime: Infinity,
+	} );
+}

package/src/controls/svg-media-control.tsx

@@ -1,43 +1,29 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useCurrentUserCapabilities } from '@elementor/editor-current-user';
 import { iconPropTypeUtil, svgSrcPropTypeUtil, urlPropTypeUtil } from '@elementor/editor-props';
-import { UploadIcon } from '@elementor/icons';
-import {
-	Box,
-	Button,
-	Card,
-	CardMedia,
-	CardOverlay,
-	CircularProgress,
-	Stack,
-	styled,
-	ThemeProvider,
-} from '@elementor/ui';
+import { Box, Card, CardOverlay, Popover, Stack, styled, usePopupState } from '@elementor/ui';
 import { type OpenOptions, useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../bound-prop-context';
-import { ConditionalControlInfotip } from '../components/conditional-control-infotip';
 import { EnableUnfilteredModal } from '../components/enable-unfiltered-modal';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 import { useUnfilteredFilesUpload } from '../hooks/use-unfiltered-files-upload';
-import {
-	createIconPropValue,
-	enqueueIconFonts,
-	type IconLibrarySelection,
-	isSvgLibrarySelection,
-	openIconLibrary,
-} from './open-icon-library';
+import { type IconLibraryAnchor, measureIconLibraryAnchor } from './icon-library/get-icon-library-anchor';
+import { ICON_LIBRARY_POPOVER_WIDTH, IconLibraryPopover } from './icon-library/icon-library-popover';
+import { createIconPropValue } from './open-icon-library';
+import { SVG_MEDIA_CONTROL_CONTAINER_TEST_ID, SvgMediaOverlay } from './svg-media-overlay';
+import { SvgMediaPreview } from './svg-media-preview';
 
 const TILE_SIZE = 8;
 const TILE_WHITE = 'transparent';
 const TILE_BLACK = '#c1c1c1';
-const ICON_PREVIEW_FONT_SIZE = 50;
 export const TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${ TILE_BLACK } 25%, ${ TILE_WHITE } 0, ${ TILE_WHITE } 75%, ${ TILE_BLACK } 0, ${ TILE_BLACK })`;
 
 const StyledCard = styled( Card )`
+	position: relative;
 	background-color: white;
 	background-image: ${ TILES_GRADIENT_FORMULA }, ${ TILES_GRADIENT_FORMULA };
 	background-size: ${ TILE_SIZE }px ${ TILE_SIZE }px;
@@ -47,6 +33,8 @@ const StyledCard = styled( Card )`
 	border: none;
 `;
 
+const PREVIEW_ICON_COLOR = '#000000';
+
 const StyledCardMediaContainer = styled( Stack )`
 	position: relative;
 	height: 140px;
@@ -55,6 +43,7 @@ const StyledCardMediaContainer = styled( Stack )`
 	justify-content: center;
 	align-items: center;
 	background-color: rgba( 255, 255, 255, 0.37 );
+	color: ${ PREVIEW_ICON_COLOR };
 `;
 
 const MODE_BROWSE: OpenOptions = { mode: 'browse' };
@@ -73,6 +62,10 @@ export const SvgMediaControl = createControl( ( { showIconLibrary = false }: Svg
 	const src = attachment?.url ?? url?.value ?? null;
 	const { data: allowSvgUpload } = useUnfilteredFilesUpload();
 	const [ unfilteredModalOpenState, setUnfilteredModalOpenState ] = useState( false );
+	const iconLibraryPopoverState = usePopupState( { variant: 'popover' } );
+	const controlContainerRef = useRef< HTMLDivElement >( null );
+	const buttonGroupRef = useRef< HTMLDivElement >( null );
+	const [ iconLibraryAnchor, setIconLibraryAnchor ] = useState< IconLibraryAnchor | null >( null );
 	const { isAdmin } = useCurrentUserCapabilities();
 	const selectedIconClass =
 		showIconLibrary && typeof iconValue?.value?.value === 'string' ? iconValue.value.value : null;
@@ -94,7 +87,7 @@ export const SvgMediaControl = createControl( ( { showIconLibrary = false }: Svg
 		},
 	} );
 
-	const onCloseUnfilteredModal = ( enabled: boolean ) => {
+	const handleCloseUnfilteredModal = ( enabled: boolean ) => {
 		setUnfilteredModalOpenState( false );
 
 		if ( enabled ) {
@@ -110,152 +103,132 @@ export const SvgMediaControl = createControl( ( { showIconLibrary = false }: Svg
 		}
 	};
 
-	const handleIconLibrarySelect = ( icon: IconLibrarySelection ) => {
-		if ( ! showIconLibrary ) {
-			return;
-		}
-		if ( isSvgLibrarySelection( icon ) ) {
-			setSvgValue( {
-				id: icon.value.id
-					? {
-							$$type: 'image-attachment-id',
-							value: icon.value.id,
-					  }
-					: null,
-				url: icon.value.url ? urlPropTypeUtil.create( icon.value.url ) : null,
-			} );
-			return;
-		}
+	const handleSelectSvg = () => {
+		handleClick( MODE_BROWSE );
+	};
 
-		if ( typeof icon.value === 'string' ) {
-			setIconValue( createIconPropValue( icon.value, icon.library ) );
-		}
+	const handleUpload = () => {
+		handleClick( MODE_UPLOAD );
 	};
 
-	const infotipProps = {
-		title: __( "Sorry, you can't upload that file yet.", 'elementor' ),
-		description: (
-			<>
-				{ __( 'To upload them anyway, ask the site administrator to enable unfiltered', 'elementor' ) }
-				<br />
-				{ __( 'file uploads.', 'elementor' ) }
-			</>
-		),
-		isEnabled: ! isAdmin,
+	const handleCloseIconLibrary = () => {
+		iconLibraryPopoverState.close();
+		setIconLibraryAnchor( null );
 	};
 
-	return (
-		<Stack gap={ 1 } aria-label="SVG Control">
-			<EnableUnfilteredModal open={ unfilteredModalOpenState } onClose={ onCloseUnfilteredModal } />
-			<ControlActions>
-				<StyledCard variant="outlined">
-					<StyledCardMediaContainer>
-						<SvgMediaPreview
-							isFetching={ isFetching }
-							src={ src }
-							iconClassName={ selectedIconClass }
-							iconLibrary={ selectedIconLibrary }
-						/>
-					</StyledCardMediaContainer>
-					<CardOverlay
-						sx={ {
-							'&:hover': {
-								backgroundColor: 'rgba( 0, 0, 0, 0.75 )',
-							},
-						} }
-					>
-						<Stack gap={ 1 }>
-							<Button
-								size="tiny"
-								color="inherit"
-								variant="outlined"
-								onClick={ () => handleClick( MODE_BROWSE ) }
-								aria-label="Select SVG"
-							>
-								{ __( 'Select SVG', 'elementor' ) }
-							</Button>
-							{ showIconLibrary ? (
-								<Button
-									size="tiny"
-									variant="text"
-									color="inherit"
-									onClick={ () =>
-										openIconLibrary( {
-											selected:
-												selectedIconClass && selectedIconLibrary
-													? { value: selectedIconClass, library: selectedIconLibrary }
-													: undefined,
-											onSelect: handleIconLibrarySelect,
-										} )
-									}
-									aria-label={ __( 'Icon library', 'elementor' ) }
-								>
-									{ __( 'Icon library', 'elementor' ) }
-								</Button>
-							) : null }
-							<ConditionalControlInfotip { ...infotipProps }>
-								<span>
-									<ThemeProvider colorScheme={ isAdmin ? 'light' : 'dark' }>
-										<Button
-											size="tiny"
-											variant="text"
-											color="inherit"
-											startIcon={ <UploadIcon /> }
-											disabled={ ! isAdmin }
-											onClick={ () => isAdmin && handleClick( MODE_UPLOAD ) }
-											aria-label="Upload SVG"
-										>
-											{ __( 'Upload', 'elementor' ) }
-										</Button>
-									</ThemeProvider>
-								</span>
-							</ConditionalControlInfotip>
-						</Stack>
-					</CardOverlay>
-				</StyledCard>
-			</ControlActions>
-		</Stack>
-	);
-} );
+	const handleIconLibrarySelect = ( icon: { value: string; library: string } ) => {
+		setIconValue( createIconPropValue( icon.value, icon.library ) );
+	};
+
+	const handleOpenIconLibrary = ( event: React.MouseEvent< HTMLElement > ) => {
+		const anchor = measureIconLibraryAnchor( controlContainerRef.current, buttonGroupRef.current );
+
+		if ( ! anchor ) {
+			return;
+		}
+
+		setIconLibraryAnchor( anchor );
+		iconLibraryPopoverState.open( event );
+	};
 
-function SvgMediaPreview( {
-	isFetching,
-	src,
-	iconClassName,
-	iconLibrary,
-}: {
-	isFetching: boolean;
-	src: string | null;
-	iconClassName: string | null;
-	iconLibrary: string | null;
-} ) {
 	useEffect( () => {
-		if ( iconLibrary ) {
-			enqueueIconFonts( iconLibrary );
+		if ( ! iconLibraryPopoverState.isOpen ) {
+			return;
 		}
-	}, [ iconLibrary ] );
 
-	if ( isFetching ) {
-		return <CircularProgress role="progressbar" />;
-	}
+		const handleResize = () => {
+			const nextAnchor = measureIconLibraryAnchor( controlContainerRef.current, buttonGroupRef.current );
 
-	if ( iconClassName ) {
-		return (
-			<Box
-				component="i"
-				className={ iconClassName }
-				aria-label={ __( 'Preview icon', 'elementor' ) }
-				sx={ { fontSize: ICON_PREVIEW_FONT_SIZE } }
-			/>
-		);
-	}
+			if ( nextAnchor ) {
+				setIconLibraryAnchor( nextAnchor );
+			}
+		};
+
+		window.addEventListener( 'resize', handleResize );
+
+		return () => {
+			window.removeEventListener( 'resize', handleResize );
+		};
+	}, [ iconLibraryPopoverState.isOpen ] );
+
+	const iconLibraryWidth = iconLibraryAnchor?.width ?? ICON_LIBRARY_POPOVER_WIDTH;
 
 	return (
-		<CardMedia
-			component="img"
-			image={ src }
-			alt={ __( 'Preview SVG', 'elementor' ) }
-			sx={ { maxHeight: '140px', width: `${ ICON_PREVIEW_FONT_SIZE }px` } }
-		/>
+		<Stack gap={ 1 } aria-label={ __( 'SVG control', 'elementor' ) }>
+			<EnableUnfilteredModal open={ unfilteredModalOpenState } onClose={ handleCloseUnfilteredModal } />
+			{ showIconLibrary && iconLibraryAnchor ? (
+				<Popover
+					disableScrollLock
+					open={ iconLibraryPopoverState.isOpen }
+					onClose={ handleCloseIconLibrary }
+					anchorReference="anchorPosition"
+					anchorPosition={ { top: iconLibraryAnchor.top, left: iconLibraryAnchor.left } }
+					anchorOrigin={ { vertical: 'top', horizontal: 'left' } }
+					transformOrigin={ { vertical: 'top', horizontal: 'left' } }
+					marginThreshold={ 0 }
+					PaperProps={ {
+						sx: {
+							width: iconLibraryWidth,
+							minWidth: iconLibraryWidth,
+							maxWidth: iconLibraryWidth,
+							m: 0,
+						},
+					} }
+				>
+					<IconLibraryPopover
+						open={ iconLibraryPopoverState.isOpen }
+						selectedIconClass={ selectedIconClass }
+						selectedIconLibrary={ selectedIconLibrary }
+						onSelect={ handleIconLibrarySelect }
+						onClose={ handleCloseIconLibrary }
+						width={ iconLibraryWidth }
+					/>
+				</Popover>
+			) : null }
+			<Box
+				ref={ controlContainerRef }
+				data-testid={ SVG_MEDIA_CONTROL_CONTAINER_TEST_ID }
+				sx={ { width: '100%' } }
+			>
+				<ControlActions>
+					<StyledCard variant="outlined">
+						<StyledCardMediaContainer>
+							<SvgMediaPreview
+								isFetching={ isFetching }
+								src={ src }
+								iconClassName={ selectedIconClass }
+								iconLibrary={ selectedIconLibrary }
+							/>
+						</StyledCardMediaContainer>
+						<CardOverlay
+							sx={ {
+								'&:hover': {
+									backgroundColor: 'rgba( 0, 0, 0, 0.75 )',
+								},
+							} }
+						>
+							<SvgMediaOverlay
+								isAdmin={ isAdmin }
+								showIconLibrary={ showIconLibrary }
+								buttonGroupRef={ buttonGroupRef }
+								onSelectSvg={ handleSelectSvg }
+								onUpload={ handleUpload }
+								onOpenIconLibrary={ handleOpenIconLibrary }
+								infotipTitle={ __( "Sorry, you can't upload that file yet.", 'elementor' ) }
+								infotipDescription={ <UnfilteredUploadInfotipDescription /> }
+							/>
+						</CardOverlay>
+					</StyledCard>
+				</ControlActions>
+			</Box>
+		</Stack>
 	);
-}
+} );
+
+const UnfilteredUploadInfotipDescription = () => (
+	<>
+		{ __( 'To upload them anyway, ask the site administrator to enable unfiltered', 'elementor' ) }
+		<br />
+		{ __( 'file uploads.', 'elementor' ) }
+	</>
+);

package/src/controls/svg-media-overlay.tsx

@@ -0,0 +1,137 @@
+import * as React from 'react';
+import { LibraryIcon, UploadIcon } from '@elementor/icons';
+import { Box, Button, Stack, styled, type SxProps, ThemeProvider, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { ConditionalControlInfotip } from '../components/conditional-control-infotip';
+
+export const SVG_MEDIA_CONTROL_CONTAINER_TEST_ID = 'svg-media-control-container';
+export const SVG_MEDIA_ACTION_GROUP_TEST_ID = 'svg-media-action-group';
+
+const MEDIA_ACTION_PADDING_Y = 0.75;
+const MEDIA_ACTION_PADDING_X = 2;
+const ICON_LIBRARY_PADDING = 0.625;
+
+const svgButtonSx = {
+	px: MEDIA_ACTION_PADDING_X,
+	py: MEDIA_ACTION_PADDING_Y,
+};
+
+const MediaActionGroup = styled( Stack )( ( { theme } ) => ( {
+	display: 'inline-flex',
+	flexDirection: 'row',
+	alignItems: 'stretch',
+	border: '1px solid currentColor',
+	borderRadius: theme.shape.borderRadius,
+	overflow: 'hidden',
+	'& .MuiButton-root': {
+		border: 'none',
+		borderRadius: 0,
+		lineHeight: 1,
+	},
+} ) );
+
+type SvgMediaOverlayProps = {
+	isAdmin: boolean;
+	showIconLibrary: boolean;
+	buttonGroupRef: React.Ref< HTMLDivElement >;
+	onSelectSvg: () => void;
+	onUpload: () => void;
+	onOpenIconLibrary: ( event: React.MouseEvent< HTMLElement > ) => void;
+	infotipTitle: string;
+	infotipDescription: React.ReactNode;
+};
+
+export const SvgMediaOverlay = ( {
+	isAdmin,
+	showIconLibrary,
+	buttonGroupRef,
+	onSelectSvg,
+	onUpload,
+	onOpenIconLibrary,
+	infotipTitle,
+	infotipDescription,
+}: SvgMediaOverlayProps ) => (
+	<Stack alignItems="center" gap={ 1 }>
+		<MediaActionGroup ref={ buttonGroupRef } direction="row" data-testid={ SVG_MEDIA_ACTION_GROUP_TEST_ID }>
+			<Button
+				size="tiny"
+				color="inherit"
+				variant="text"
+				onClick={ onSelectSvg }
+				aria-label={ __( 'Select', 'elementor' ) }
+				sx={ svgButtonSx }
+			>
+				{ __( 'Select', 'elementor' ) }
+			</Button>
+			<Box
+				sx={ {
+					width: '1px',
+					alignSelf: 'stretch',
+					bgcolor: 'currentColor',
+					flexShrink: 0,
+				} }
+			/>
+			<ConditionalControlInfotip
+				title={ infotipTitle }
+				description={ infotipDescription }
+				isEnabled={ ! isAdmin }
+			>
+				<Box component="span" sx={ { display: 'inline-flex' } }>
+					<UploadControl isAdmin={ isAdmin } onUpload={ onUpload } />
+				</Box>
+			</ConditionalControlInfotip>
+		</MediaActionGroup>
+		{ showIconLibrary ? (
+			<Button
+				size="tiny"
+				color="inherit"
+				variant="text"
+				startIcon={ <LibraryIcon sx={ { height: '18px', width: '16px' } } /> }
+				aria-label={ __( 'Icon library', 'elementor' ) }
+				onClick={ onOpenIconLibrary }
+				sx={ {
+					height: '28px',
+					p: ICON_LIBRARY_PADDING,
+					'.MuiButton-icon': { ml: 0 },
+				} }
+			>
+				<Typography>{ __( 'Icon library', 'elementor' ) }</Typography>
+			</Button>
+		) : null }
+	</Stack>
+);
+
+const UploadControl = ( { isAdmin, onUpload }: { isAdmin: boolean; onUpload: () => void } ) => {
+	if ( isAdmin ) {
+		return <UploadButton sx={ svgButtonSx } onClick={ onUpload } />;
+	}
+
+	return (
+		<ThemeProvider colorScheme="dark">
+			<UploadButton disabled sx={ svgButtonSx } />
+		</ThemeProvider>
+	);
+};
+
+const UploadButton = ( {
+	disabled = false,
+	sx,
+	onClick,
+}: {
+	disabled?: boolean;
+	sx?: SxProps;
+	onClick?: () => void;
+} ) => (
+	<Button
+		sx={ sx }
+		size="tiny"
+		color="inherit"
+		variant="text"
+		disabled={ disabled }
+		onClick={ onClick }
+		aria-label={ __( 'Upload', 'elementor' ) }
+	>
+		<UploadIcon />
+	</Button>
+);

package/src/controls/svg-media-preview.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { Box, CardMedia, CircularProgress } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { findFontAwesome7Icon, type FontAwesome7Icon } from './icon-library/font-awesome-7-catalog';
+import { FontAwesomeGlyph } from './icon-library/font-awesome-glyph';
+import { useFontAwesome7Catalog } from './icon-library/use-font-awesome-7-catalog';
+
+const ICON_PREVIEW_SIZE = 50;
+const ICON_PREVIEW_COLOR = '#000000';
+
+type SvgMediaPreviewProps = {
+	isFetching: boolean;
+	src: string | null;
+	iconClassName: string | null;
+	iconLibrary: string | null;
+};
+
+export const SvgMediaPreview = ( { isFetching, src, iconClassName, iconLibrary }: SvgMediaPreviewProps ) => {
+	const shouldLoadIconCatalog = Boolean( iconClassName && iconLibrary );
+	const { data: icons = [], isLoading } = useFontAwesome7Catalog( shouldLoadIconCatalog );
+	const selectedIcon = findFontAwesome7Icon( icons, iconClassName, iconLibrary );
+
+	if ( isFetching || ( shouldLoadIconCatalog && isLoading ) ) {
+		return <CircularProgress role="progressbar" />;
+	}
+
+	if ( selectedIcon ) {
+		return <IconPreview icon={ selectedIcon } />;
+	}
+
+	if ( shouldLoadIconCatalog ) {
+		return <IconPreviewPlaceholder />;
+	}
+
+	return <SvgPreview src={ src } />;
+};
+
+const IconPreview = ( { icon }: { icon: FontAwesome7Icon } ) => (
+	<Box sx={ { color: ICON_PREVIEW_COLOR } }>
+		<FontAwesomeGlyph
+			icon={ icon }
+			size={ ICON_PREVIEW_SIZE }
+			color={ ICON_PREVIEW_COLOR }
+			label={ __( 'Preview icon', 'elementor' ) }
+		/>
+	</Box>
+);
+
+const IconPreviewPlaceholder = () => (
+	<Box
+		aria-hidden
+		sx={ {
+			width: ICON_PREVIEW_SIZE,
+			height: ICON_PREVIEW_SIZE,
+			color: ICON_PREVIEW_COLOR,
+		} }
+	/>
+);
+
+const SvgPreview = ( { src }: { src: string | null } ) => (
+	<CardMedia
+		component="img"
+		image={ src }
+		alt={ __( 'Preview SVG', 'elementor' ) }
+		sx={ { maxHeight: '140px', width: `${ ICON_PREVIEW_SIZE }px`, color: ICON_PREVIEW_COLOR } }
+	/>
+);

package/src/index.ts

@@ -37,6 +37,12 @@ export { TransformSettingsControl } from './controls/transform-control/transform
 export { TransitionRepeaterControl } from './controls/transition-control/transition-repeater-control';
 export { PopoverContent } from './components/popover-content';
 export { enqueueFont } from './controls/font-family-control/enqueue-font';
+export {
+	getFontAwesome7IconName,
+	resetFontAwesome7IconsCache,
+	resolveFontAwesome7Icon,
+	type FontAwesome7IconDefinition,
+} from './controls/icon-library/font-awesome-7-data';
 export { transitionProperties, transitionsItemsList } from './controls/transition-control/data';
 export { DateTimeControl } from './controls/date-time-control';
 export { DateRangeControl } from './controls/date-range-control';