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

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

@@ -14,6 +14,7 @@ export type ToggleControlProps< T extends PropValue > = {
 	exclusive?: boolean;
 	maxItems?: number;
 	convertOptions?: boolean;
+	allowEmpty?: boolean;
 };
 
 export const ToggleControl = createControl(
@@ -24,6 +25,7 @@ export const ToggleControl = createControl(
 		exclusive = true,
 		maxItems,
 		convertOptions = false,
+		allowEmpty = false,
 	}: ToggleControlProps< StringPropValue[ 'value' ] > ) => {
 		const { value, setValue, placeholder, disabled } = useBoundProp( stringPropTypeUtil );
 
@@ -54,11 +56,20 @@ export const ToggleControl = createControl(
 			placeholder,
 		};
 
+		const handleExclusiveToggle = ( selectedValue: StringPropValue[ 'value' ] | null ) => {
+			if ( allowEmpty && ! selectedValue ) {
+				setValue( '' );
+				return;
+			}
+
+			setValue( selectedValue );
+		};
+
 		return exclusive ? (
 			<ControlToggleButtonGroup
 				{ ...toggleButtonGroupProps }
-				value={ value ?? null }
-				onChange={ setValue }
+				value={ allowEmpty ? value || null : value ?? null }
+				onChange={ handleExclusiveToggle }
 				disabled={ disabled }
 				exclusive={ true }
 			/>

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';
@@ -45,6 +51,7 @@ export { TimeRangeControl } from './controls/time-range-control';
 export { InlineEditingControl } from './controls/inline-editing-control';
 export { EmailFormActionControl } from './controls/email-form-action-control';
 export { AttachmentTypeControl } from './controls/attachment-type-control';
+export { NoticeControl } from './controls/notice-control';
 export { UnstableSizeControl } from './controls/size-control/unstable-size-control';
 export { GridSpanControl } from './controls/grid-span-control';