@elementor/editor-controls 4.3.0-beta1 → 4.3.0-beta3

package/src/controls/icon-library/icon-library-view-toggle.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { useId } from 'react';
+import { CheckIcon, ListIcon, WidgetsIcon } from '@elementor/icons';
+import {
+	bindMenu,
+	bindToggle,
+	Menu,
+	MenuItem,
+	Stack,
+	ToggleButton,
+	Tooltip,
+	Typography,
+	usePopupState,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY } from './icon-library-tooltip';
+
+export type IconLibraryView = 'grid' | 'list';
+
+const VIEW_MENU_WIDTH = 122;
+
+type IconLibraryViewToggleProps = {
+	value: IconLibraryView;
+	onChange: ( value: IconLibraryView ) => void;
+};
+
+export const IconLibraryViewToggle = ( { value, onChange }: IconLibraryViewToggleProps ) => {
+	const popupId = useId();
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId,
+	} );
+	const isGrid = value === 'grid';
+	const ViewIcon = isGrid ? WidgetsIcon : ListIcon;
+	const viewButtonLabel = isGrid ? __( 'Grid view', 'elementor' ) : __( 'List view', 'elementor' );
+
+	return (
+		<>
+			<Tooltip
+				title={ viewButtonLabel }
+				placement="top"
+				enterDelay={ ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY }
+				enterNextDelay={ ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY }
+				disableInteractive
+			>
+				<ToggleButton
+					aria-label={ viewButtonLabel }
+					value="view"
+					size="tiny"
+					selected={ popupState.isOpen }
+					sx={ { flexShrink: 0 } }
+					{ ...bindToggle( popupState ) }
+					aria-expanded={ popupState.isOpen }
+				>
+					<ViewIcon fontSize="tiny" />
+				</ToggleButton>
+			</Tooltip>
+			<Menu
+				{ ...bindMenu( popupState ) }
+				MenuListProps={ {
+					dense: true,
+					autoFocusItem: true,
+					'aria-label': __( 'View', 'elementor' ),
+				} }
+				sx={ { '& .MuiPaper-root': { minWidth: VIEW_MENU_WIDTH } } }
+			>
+				<ViewMenuItem
+					label={ __( 'List', 'elementor' ) }
+					selected={ value === 'list' }
+					onClick={ () => {
+						onChange( 'list' );
+						popupState.close();
+					} }
+				/>
+				<ViewMenuItem
+					label={ __( 'Grid', 'elementor' ) }
+					selected={ value === 'grid' }
+					onClick={ () => {
+						onChange( 'grid' );
+						popupState.close();
+					} }
+				/>
+			</Menu>
+		</>
+	);
+};
+
+type ViewMenuItemProps = {
+	label: string;
+	selected: boolean;
+	onClick: () => void;
+};
+
+const ViewMenuItem = ( { label, selected, onClick }: ViewMenuItemProps ) => (
+	<MenuItem role="menuitemradio" aria-checked={ selected } selected={ selected } onClick={ onClick }>
+		<Stack direction="row" alignItems="center" gap={ 1 } width="100%">
+			<Typography variant="caption" sx={ { flex: 1 } }>
+				{ label }
+			</Typography>
+			{ selected ? <CheckIcon fontSize="tiny" aria-hidden="true" /> : null }
+		</Stack>
+	</MenuItem>
+);

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/notice-control.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { ajax } from '@elementor/editor-v1-adapters';
+import { BulbIcon } from '@elementor/icons';
+import { Alert, AlertAction, type AlertProps, AlertTitle, styled, Typography } from '@elementor/ui';
+
+import { createControl } from '../create-control';
+
+type NoticeType = 'info' | 'success' | 'warning' | 'danger';
+
+// Elementor's `Alert` forces `.MuiAlertTitle-root { marginBottom: 0 }` via a selector scoped to the
+// Alert's own class. Repeating the `.MuiAlertTitle-root` class here matches that selector's specificity
+// so this override applies reliably regardless of stylesheet insertion order.
+const NoticeTitle = styled( AlertTitle )( {
+	'&.MuiAlertTitle-root.MuiAlertTitle-root': {
+		marginBottom: 4,
+		fontStyle: 'italic',
+	},
+} );
+
+type NoticeControlProps = {
+	noticeType?: NoticeType;
+	heading?: string;
+	content?: string;
+	dismissible?: string;
+	buttonText?: string;
+	buttonUrl?: string;
+};
+
+type ExtendedWindow = Window & {
+	elementor?: {
+		config?: {
+			user?: {
+				dismissed_editor_notices?: string[];
+			};
+		};
+	};
+};
+
+const markNoticeAsDismissedInSession = ( dismissId: string ) => {
+	const dismissedNotices = ( window as ExtendedWindow ).elementor?.config?.user?.dismissed_editor_notices;
+
+	if ( dismissedNotices && ! dismissedNotices.includes( dismissId ) ) {
+		dismissedNotices.push( dismissId );
+	}
+};
+
+export const NoticeControl = createControl(
+	( { noticeType = 'info', heading, content, dismissible, buttonText, buttonUrl }: NoticeControlProps ) => {
+		const [ isDismissed, setIsDismissed ] = useState( false );
+
+		if ( isDismissed || ! content ) {
+			return null;
+		}
+
+		const severity: AlertProps[ 'severity' ] = noticeType === 'danger' ? 'error' : noticeType;
+		const icon = noticeType === 'info' ? <BulbIcon fontSize="inherit" /> : undefined;
+
+		const handleDismiss = () => {
+			setIsDismissed( true );
+
+			if ( ! dismissible ) {
+				return;
+			}
+
+			markNoticeAsDismissedInSession( dismissible );
+
+			ajax.load( {
+				action: 'dismissed_editor_notices',
+				unique_id: `dismiss-editor-notice-${ dismissible }`,
+				data: { dismissId: dismissible },
+			} ).catch( () => {} );
+		};
+
+		const handleActionClick = () => {
+			setIsDismissed( true );
+
+			if ( dismissible ) {
+				markNoticeAsDismissedInSession( dismissible );
+			}
+		};
+
+		return (
+			<Alert variant="outlined" severity={ severity } icon={ icon } size="small" onClose={ handleDismiss }>
+				{ heading && <NoticeTitle>{ heading }</NoticeTitle> }
+				<Typography variant="caption" color="textSecondary" sx={ { fontStyle: 'italic' } }>
+					{ content }
+				</Typography>
+				{ buttonText && buttonUrl && (
+					<AlertAction
+						variant="contained"
+						color={ severity }
+						target="_blank"
+						rel="noopener noreferrer"
+						href={ buttonUrl }
+						onClick={ handleActionClick }
+						sx={ { mt: 2 } }
+					>
+						{ buttonText }
+					</AlertAction>
+				) }
+			</Alert>
+		);
+	}
+);

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' ) }
+	</>
+);