@elementor/editor-controls 0.16.0 → 0.17.0

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": "0.16.0",
+  "version": "0.17.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,7 +40,9 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-props": "0.10.0",
+    "@elementor/editor-current-user": "0.3.0",
+    "@elementor/editor-elements": "0.6.3",
+    "@elementor/editor-props": "0.11.0",
     "@elementor/env": "0.3.5",
     "@elementor/http": "0.1.4",
     "@elementor/icons": "1.37.0",
@@ -48,9 +50,9 @@
     "@elementor/session": "0.1.0",
     "@elementor/ui": "1.26.0",
     "@elementor/utils": "0.4.0",
-    "@elementor/wp-media": "0.5.0",
-    "@wordpress/i18n": "^5.13.0",
-    "@tanstack/react-virtual": "3.13.3"
+    "@elementor/wp-media": "0.6.0",
+    "@tanstack/react-virtual": "3.13.3",
+    "@wordpress/i18n": "^5.13.0"
   },
   "devDependencies": {
     "tsup": "^8.3.5"

package/src/components/control-toggle-button-group.tsx

@@ -43,6 +43,8 @@ type Props< TValue > = {
 	  }
 );
 
+// The maximum number of buttons that can be displayed in the group
+const MAX_VISIBLE_ITEMS = 4;
 export const ControlToggleButtonGroup = < TValue, >( {
 	justify = 'end',
 	size = 'tiny',
@@ -69,6 +71,9 @@ export const ControlToggleButtonGroup = < TValue, >( {
 			exclusive={ exclusive }
 			sx={ {
 				direction: isRtl ? 'rtl /* @noflip */' : 'ltr /* @noflip */',
+				display: 'grid',
+				gridTemplateColumns: `repeat(${ items.length }, 1fr)`,
+				width: `${ ( items.length / MAX_VISIBLE_ITEMS ) * 100 }%`,
 			} }
 		>
 			{ items.map( ( { label, value: buttonValue, renderContent: Content, showTooltip } ) =>

package/src/components/enable-unfiltered-modal.tsx

@@ -0,0 +1,130 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { useCurrentUserCapabilities } from '@elementor/editor-current-user';
+import {
+	Button,
+	CircularProgress,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogContentText,
+	DialogHeader,
+	DialogTitle,
+	Divider,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useUpdateUnfilteredFilesUpload } from '../hooks/use-unfiltered-files-upload';
+
+type EnableUnfilteredModalProps = {
+	open: boolean;
+	onClose: ( enabled: boolean ) => void;
+};
+
+type LocalModalProps = {
+	open: boolean;
+	onClose: ( enabled: boolean ) => void;
+	isPending?: boolean;
+	isError?: boolean;
+	handleEnable: () => void;
+};
+
+const ADMIN_TITLE_TEXT = __( 'Enable Unfiltered Uploads', 'elementor' );
+const ADMIN_CONTENT_TEXT = __(
+	'Before you enable unfiltered files upload, note that such files include a security risk. Elementor does run a process to remove possible malicious code, but there is still risk involved when using such files.',
+	'elementor'
+);
+const NON_ADMIN_TITLE_TEXT = __( "Sorry, you can't upload that file yet", 'elementor' );
+const NON_ADMIN_CONTENT_TEXT = __(
+	'This is because this file type may pose a security risk. To upload them anyway, ask the site administrator to enable unfiltered file uploads.',
+	'elementor'
+);
+
+const ADMIN_FAILED_CONTENT_TEXT_PT1 = __( 'Failed to enable unfiltered files upload.', 'elementor' );
+
+const ADMIN_FAILED_CONTENT_TEXT_PT2 = __(
+	'You can try again, if the problem persists, please contact support.',
+	'elementor'
+);
+
+const WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
+
+export const EnableUnfilteredModal = ( props: EnableUnfilteredModalProps ) => {
+	const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
+	const { canUser } = useCurrentUserCapabilities();
+	const [ isError, setIsError ] = useState( false );
+	const canManageOptions = canUser( 'manage_options' );
+
+	const onClose = ( enabled: boolean ) => {
+		props.onClose( enabled );
+		setTimeout( () => setIsError( false ), WAIT_FOR_CLOSE_TIMEOUT_MS );
+	};
+
+	const handleEnable = async () => {
+		try {
+			const response = await mutateAsync( { allowUnfilteredFilesUpload: true } );
+			if ( response?.data?.success === false ) {
+				setIsError( true );
+			} else {
+				props.onClose( true );
+			}
+		} catch {
+			setIsError( true );
+		}
+	};
+
+	const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
+
+	return canManageOptions ? <AdminDialog { ...dialogProps } /> : <NonAdminDialog { ...dialogProps } />;
+};
+
+const AdminDialog = ( { open, onClose, handleEnable, isPending, isError }: LocalModalProps ) => (
+	<Dialog open={ open } maxWidth={ 'sm' } onClose={ () => onClose( false ) }>
+		<DialogHeader logo={ false }>
+			<DialogTitle>{ ADMIN_TITLE_TEXT }</DialogTitle>
+		</DialogHeader>
+		<Divider />
+		<DialogContent>
+			<DialogContentText>
+				{ isError ? (
+					<>
+						{ ADMIN_FAILED_CONTENT_TEXT_PT1 } <br /> { ADMIN_FAILED_CONTENT_TEXT_PT2 }
+					</>
+				) : (
+					ADMIN_CONTENT_TEXT
+				) }
+			</DialogContentText>
+		</DialogContent>
+		<DialogActions>
+			<Button size={ 'medium' } color="secondary" onClick={ () => onClose( false ) }>
+				{ __( 'Cancel', 'elementor' ) }
+			</Button>
+			<Button
+				size={ 'medium' }
+				onClick={ () => handleEnable() }
+				variant="contained"
+				color="primary"
+				disabled={ isPending }
+			>
+				{ isPending ? <CircularProgress size={ 24 } /> : __( 'Enable', 'elementor' ) }
+			</Button>
+		</DialogActions>
+	</Dialog>
+);
+
+const NonAdminDialog = ( { open, onClose }: LocalModalProps ) => (
+	<Dialog open={ open } maxWidth={ 'sm' } onClose={ () => onClose( false ) }>
+		<DialogHeader logo={ false }>
+			<DialogTitle>{ NON_ADMIN_TITLE_TEXT }</DialogTitle>
+		</DialogHeader>
+		<Divider />
+		<DialogContent>
+			<DialogContentText>{ NON_ADMIN_CONTENT_TEXT }</DialogContentText>
+		</DialogContent>
+		<DialogActions>
+			<Button size={ 'medium' } onClick={ () => onClose( false ) } variant="contained" color="primary">
+				{ __( 'Got it', 'elementor' ) }
+			</Button>
+		</DialogActions>
+	</Dialog>
+);

package/src/components/repeater.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { type PropKey } from '@elementor/editor-props';
 import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon, XIcon } from '@elementor/icons';
 import {
@@ -33,6 +33,7 @@ type RepeaterProps< T > = {
 	label: string;
 	values?: T[];
 	addToBottom?: boolean;
+	openOnAdd?: boolean;
 	setValues: ( newValue: T[] ) => void;
 	itemSettings: {
 		initialValues: T;
@@ -49,10 +50,13 @@ type RepeaterProps< T > = {
 export const Repeater = < T, >( {
 	label,
 	itemSettings,
+	openOnAdd = false,
 	addToBottom = false,
 	values: repeaterValues = [],
 	setValues: setRepeaterValues,
 }: RepeaterProps< Item< T > > ) => {
+	const [ openItem, setOpenItem ] = useState( -1 );
+
 	const [ items, setItems ] = useSyncExternalState( {
 		external: repeaterValues,
 		// @ts-expect-error - as long as persistWhen => true, value will never be null
@@ -77,6 +81,10 @@ export const Repeater = < T, >( {
 			setItems( [ newItem, ...items ] );
 			setUniqueKeys( [ newKey, ...uniqueKeys ] );
 		}
+
+		if ( openOnAdd ) {
+			setOpenItem( newKey );
+		}
 	};
 
 	const duplicateRepeaterItem = ( index: number ) => {
@@ -158,6 +166,7 @@ export const Repeater = < T, >( {
 									removeItem={ () => removeRepeaterItem( index ) }
 									duplicateItem={ () => duplicateRepeaterItem( index ) }
 									toggleDisableItem={ () => toggleDisableRepeaterItem( index ) }
+									openOnMount={ openOnAdd && openItem === key }
 								>
 									{ ( props ) => (
 										<itemSettings.Content { ...props } value={ value } bind={ String( index ) } />
@@ -181,25 +190,21 @@ type RepeaterItemProps = {
 	duplicateItem: () => void;
 	toggleDisableItem: () => void;
 	children: ( { anchorEl }: { anchorEl: AnchorEl } ) => React.ReactNode;
+	openOnMount: boolean;
 };
 
 const RepeaterItem = ( {
 	label,
-	bind,
 	disabled,
 	startIcon,
 	children,
 	removeItem,
 	duplicateItem,
 	toggleDisableItem,
+	openOnMount,
 }: RepeaterItemProps ) => {
-	const popupId = `repeater-popup-${ bind }`;
-	const controlRef = useRef< HTMLElement >( null );
 	const [ anchorEl, setAnchorEl ] = useState< AnchorEl >( null );
-
-	const popoverState = usePopupState( { popupId, variant: 'popover' } );
-
-	const popoverProps = bindPopover( popoverState );
+	const { popoverState, popoverProps, ref, setRef } = usePopover( openOnMount );
 
 	const duplicateLabel = __( 'Duplicate', 'elementor' );
 	const toggleLabel = disabled ? __( 'Show', 'elementor' ) : __( 'Hide', 'elementor' );
@@ -211,7 +216,7 @@ const RepeaterItem = ( {
 				label={ label }
 				showActionsOnHover
 				fullWidth
-				ref={ controlRef }
+				ref={ setRef }
 				variant="outlined"
 				aria-label={ __( 'Open item', 'elementor' ) }
 				{ ...bindTrigger( popoverState ) }
@@ -242,14 +247,38 @@ const RepeaterItem = ( {
 				slotProps={ {
 					paper: {
 						ref: setAnchorEl,
-						sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width },
+						sx: { mt: 0.5, width: ref?.getBoundingClientRect().width },
 					},
 				} }
 				anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
 				{ ...popoverProps }
+				anchorEl={ ref }
 			>
 				<Box>{ children( { anchorEl } ) }</Box>
 			</Popover>
 		</>
 	);
 };
+
+const usePopover = ( openOnMount: boolean ) => {
+	const [ ref, setRef ] = useState< HTMLElement | null >( null );
+
+	const popoverState = usePopupState( { variant: 'popover' } );
+
+	const popoverProps = bindPopover( popoverState );
+
+	useEffect( () => {
+		if ( openOnMount && ref ) {
+			popoverState.open( ref );
+		}
+		// eslint-disable-next-line react-compiler/react-compiler
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ ref ] );
+
+	return {
+		popoverState,
+		ref,
+		setRef,
+		popoverProps,
+	};
+};

package/src/components/sortable.tsx

@@ -14,13 +14,8 @@ import {
 
 export const SortableProvider = < T extends number >( props: UnstableSortableProviderProps< T > ) => {
 	return (
-		<List sx={ { p: 0, m: 0 } }>
-			<UnstableSortableProvider
-				restrictAxis={ true }
-				disableDragOverlay={ false }
-				variant={ 'static' }
-				{ ...props }
-			/>
+		<List sx={ { p: 0, my: -0.5, mx: 0 } }>
+			<UnstableSortableProvider restrictAxis disableDragOverlay={ false } variant={ 'static' } { ...props } />
 		</List>
 	);
 };

package/src/controls/background-control/background-gradient-color-control.tsx

@@ -90,7 +90,7 @@ export const initialBackgroundGradientOverlay: BackgroundOverlayItemPropValue =
 		angle: numberPropTypeUtil.create( 180 ),
 		stops: gradientColorStopPropTypeUtil.create( [
 			colorStopPropTypeUtil.create( {
-				color: stringPropTypeUtil.create( 'var(--primary-color)' ),
+				color: colorPropTypeUtil.create( 'rgb(0,0,0)' ),
 				offset: numberPropTypeUtil.create( 0 ),
 			} ),
 			colorStopPropTypeUtil.create( {

package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx

@@ -4,6 +4,7 @@ import {
 	backgroundImageOverlayPropTypeUtil,
 	type BackgroundOverlayItemPropValue,
 	backgroundOverlayPropTypeUtil,
+	colorPropTypeUtil,
 	type PropKey,
 } from '@elementor/editor-props';
 import { Box, CardMedia, Grid, Tab, TabPanel, Tabs, UnstableColorIndicator } from '@elementor/ui';
@@ -29,10 +30,13 @@ import { BackgroundImageOverlaySize } from './background-image-overlay/backgroun
 import { type BackgroundImageOverlay } from './types';
 import { useBackgroundTabsHistory } from './use-background-tabs-history';
 
-export const initialBackgroundColorOverlay: BackgroundOverlayItemPropValue = {
-	$$type: 'background-color-overlay',
-	value: '#00000033',
-};
+const DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR = '#00000033';
+
+export const initialBackgroundColorOverlay: BackgroundOverlayItemPropValue = backgroundColorOverlayPropTypeUtil.create(
+	{
+		color: colorPropTypeUtil.create( DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR ),
+	}
+);
 
 export const getInitialBackgroundOverlay = (): BackgroundOverlayItemPropValue => ( {
 	$$type: 'background-image-overlay',
@@ -72,6 +76,7 @@ export const BackgroundOverlayRepeaterControl = createControl( () => {
 	return (
 		<PropProvider propType={ propType } value={ overlayValues } setValue={ setValue }>
 			<Repeater
+				openOnAdd
 				values={ overlayValues ?? [] }
 				setValues={ setValue }
 				label={ __( 'Overlay', 'elementor' ) }
@@ -118,8 +123,10 @@ const Content = () => {
 			<TabPanel sx={ { p: 1.5 } } { ...getTabPanelProps( 'gradient' ) }>
 				<BackgroundGradientColorControl />
 			</TabPanel>
-			<TabPanel { ...getTabPanelProps( 'color' ) } sx={ { p: 1.5 } }>
-				<ColorControl propTypeUtil={ backgroundColorOverlayPropTypeUtil } />
+			<TabPanel sx={ { p: 1.5 } } { ...getTabPanelProps( 'color' ) }>
+				<PopoverContent>
+					<ColorOverlayContent />
+				</PopoverContent>
 			</TabPanel>
 		</Box>
 	);
@@ -138,8 +145,17 @@ const ItemIcon = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
 	}
 };
 
-const ItemIconColor = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
-	return <UnstableColorIndicator size="inherit" component="span" value={ value.value } />;
+const extractColorFrom = ( prop: BackgroundOverlayItemPropValue ) => {
+	if ( prop?.value?.color?.value ) {
+		return prop.value.color.value;
+	}
+
+	return '';
+};
+
+const ItemIconColor = ( { value: prop }: { value: BackgroundOverlayItemPropValue } ) => {
+	const color = extractColorFrom( prop );
+	return <UnstableColorIndicator size="inherit" component="span" value={ color } />;
 };
 
 const ItemIconImage = ( { value }: { value: BackgroundImageOverlay } ) => {
@@ -167,8 +183,9 @@ const ItemLabel = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
 	}
 };
 
-const ItemLabelColor = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
-	return <span>{ value.value }</span>;
+const ItemLabelColor = ( { value: prop }: { value: BackgroundOverlayItemPropValue } ) => {
+	const color = extractColorFrom( prop );
+	return <span>{ color }</span>;
 };
 
 const ItemLabelImage = ( { value }: { value: BackgroundImageOverlay } ) => {
@@ -185,6 +202,17 @@ const ItemLabelGradient = ( { value }: { value: BackgroundOverlayItemPropValue }
 	return <span>{ __( 'Radial Gradient', 'elementor' ) }</span>;
 };
 
+const ColorOverlayContent = () => {
+	const propContext = useBoundProp( backgroundColorOverlayPropTypeUtil );
+	return (
+		<PropProvider { ...propContext }>
+			<PropKeyProvider bind={ 'color' }>
+				<ColorControl />
+			</PropKeyProvider>
+		</PropProvider>
+	);
+};
+
 const ImageOverlayContent = () => {
 	const propContext = useBoundProp( backgroundImageOverlayPropTypeUtil );
 

package/src/controls/box-shadow-repeater-control.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { boxShadowPropTypeUtil, type PropKey, shadowPropTypeUtil, type ShadowPropValue } from '@elementor/editor-props';
-import { Grid, Typography, UnstableColorIndicator } from '@elementor/ui';
+import { Grid, type SxProps, type Theme, Typography, UnstableColorIndicator } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
@@ -18,6 +18,7 @@ export const BoxShadowRepeaterControl = createControl( () => {
 	return (
 		<PropProvider propType={ propType } value={ value } setValue={ setValue }>
 			<Repeater
+				openOnAdd
 				values={ value ?? [] }
 				setValues={ setValue }
 				label={ __( 'Box shadow', 'elementor' ) }
@@ -68,7 +69,7 @@ const Content = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
 							} }
 						/>
 					</Control>
-					<Control bind="position" label={ __( 'Position', 'elementor' ) }>
+					<Control bind="position" label={ __( 'Position', 'elementor' ) } sx={ { overflow: 'hidden' } }>
 						<SelectControl
 							options={ [
 								{ label: __( 'Inset', 'elementor' ), value: 'inset' },
@@ -98,9 +99,19 @@ const Content = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
 	);
 };
 
-const Control = ( { label, bind, children }: { bind: string; label: string; children: React.ReactNode } ) => (
+const Control = ( {
+	label,
+	bind,
+	children,
+	sx,
+}: {
+	bind: string;
+	label: string;
+	children: React.ReactNode;
+	sx?: SxProps< Theme >;
+} ) => (
 	<PropKeyProvider bind={ bind }>
-		<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
+		<Grid item xs={ 6 } sx={ sx }>
 			<Grid container gap={ 1 } alignItems="center">
 				<Grid item xs={ 12 }>
 					<Typography component="label" variant="caption" color="text.secondary">

package/src/controls/equal-unequal-sizes-control.tsx

@@ -144,8 +144,8 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 							<MultiSizeValueControl item={ items[ 1 ] } />
 						</PopoverGridContainer>
 						<PopoverGridContainer>
-							<MultiSizeValueControl item={ items[ 3 ] } />
 							<MultiSizeValueControl item={ items[ 2 ] } />
+							<MultiSizeValueControl item={ items[ 3 ] } />
 						</PopoverGridContainer>
 					</PopoverContent>
 				</PropProvider>

package/src/controls/font-family-control/font-family-control.tsx

@@ -31,8 +31,13 @@ import { enqueueFont } from './enqueue-font';
 
 const SIZE = 'tiny';
 
+export type FontCategory = {
+	label: string;
+	fonts: string[];
+};
+
 type FontFamilyControlProps = {
-	fontFamilies: Record< string, string[] >;
+	fontFamilies: FontCategory[];
 };
 
 export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyControlProps ) => {
@@ -278,7 +283,7 @@ const StyledMenuList = styled( MenuList )( ( { theme } ) => ( {
 	'& > [role="option"]': {
 		...theme.typography.caption,
 		lineHeight: 'inherit',
-		padding: theme.spacing( 0.75, 2 ),
+		padding: theme.spacing( 0.75, 2, 0.75, 4 ),
 		'&:hover, &:focus': {
 			backgroundColor: theme.palette.action.hover,
 		},

package/src/controls/link-control.tsx

@@ -26,8 +26,10 @@ import {
 import { ControlLabel } from '../components/control-label';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
+import { getLinkRestriction } from '../utils/link-restriction';
+import { type ControlProps } from '../utils/types';
 
-type Props = {
+type Props = ControlProps< {
 	queryOptions: {
 		requestParams: Record< string, unknown >;
 		endpoint: string;
@@ -35,7 +37,7 @@ type Props = {
 	allowCustomValues?: boolean;
 	minInputLength?: number;
 	placeholder?: string;
-};
+} >;
 
 type LinkSessionValue = {
 	value?: LinkPropValue[ 'value' ] | null;
@@ -58,6 +60,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 		queryOptions: { endpoint = '', requestParams = {} },
 		placeholder,
 		minInputLength = 2,
+		context: { elementId },
 	} = props || {};
 
 	const [ options, setOptions ] = useState< FlatOption[] | CategorizedOption[] >(
@@ -65,6 +68,12 @@ export const LinkControl = createControl( ( props: Props ) => {
 	);
 
 	const onEnabledChange = () => {
+		const { shouldRestrict } = getLinkRestriction( elementId );
+
+		if ( shouldRestrict && ! isEnabled ) {
+			return;
+		}
+
 		setIsEnabled( ( prevState ) => ! prevState );
 		setValue( isEnabled ? null : linkSessionValue?.value ?? null );
 		setLinkSessionValue( { value, meta: { isEnabled: ! isEnabled } } );

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useState } from 'react';
 import { imageSrcPropTypeUtil } from '@elementor/editor-props';
 import { UploadIcon } from '@elementor/icons';
 import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack, styled } from '@elementor/ui';
@@ -7,6 +8,7 @@ import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../bound-prop-context';
 import { ControlLabel } from '../components/control-label';
+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';
@@ -36,12 +38,16 @@ const StyledCardMediaContainer = styled( Stack )`
 	background-color: rgba( 255, 255, 255, 0.37 );
 `;
 
+const MODE_BROWSE: OpenOptions = { mode: 'browse' };
+const MODE_UPLOAD: OpenOptions = { mode: 'upload' };
+
 export const SvgMediaControl = createControl( () => {
 	const { value, setValue } = useBoundProp( imageSrcPropTypeUtil );
 	const { id, url } = value ?? {};
 	const { data: attachment, isFetching } = useWpMediaAttachment( id?.value || null );
 	const src = attachment?.url ?? url?.value ?? null;
 	const { data: allowSvgUpload } = useUnfilteredFilesUpload();
+	const [ unfilteredModalOpenState, setUnfilteredModalOpenState ] = useState( false );
 
 	const { open } = useWpMediaFrame( {
 		mediaTypes: [ 'svg' ],
@@ -58,16 +64,25 @@ export const SvgMediaControl = createControl( () => {
 		},
 	} );
 
+	const onCloseUnfilteredModal = ( enabled: boolean ) => {
+		setUnfilteredModalOpenState( false );
+
+		if ( enabled ) {
+			open( MODE_UPLOAD );
+		}
+	};
+
 	const handleClick = ( openOptions?: OpenOptions ) => {
-		if ( allowSvgUpload ) {
-			open( openOptions );
+		if ( ! allowSvgUpload && openOptions === MODE_UPLOAD ) {
+			setUnfilteredModalOpenState( true );
 		} else {
-			// TODO open upload SVG confirmation modal
+			open( openOptions );
 		}
 	};
 
 	return (
 		<Stack gap={ 1 }>
+			<EnableUnfilteredModal open={ unfilteredModalOpenState } onClose={ onCloseUnfilteredModal } />
 			<ControlLabel> { __( 'SVG', 'elementor' ) } </ControlLabel>
 			<ControlActions>
 				<StyledCard variant="outlined">
@@ -95,7 +110,7 @@ export const SvgMediaControl = createControl( () => {
 								size="tiny"
 								color="inherit"
 								variant="outlined"
-								onClick={ () => handleClick( { mode: 'browse' } ) }
+								onClick={ () => handleClick( MODE_BROWSE ) }
 							>
 								{ __( 'Select SVG', 'elementor' ) }
 							</Button>
@@ -104,7 +119,7 @@ export const SvgMediaControl = createControl( () => {
 								variant="text"
 								color="inherit"
 								startIcon={ <UploadIcon /> }
-								onClick={ () => handleClick( { mode: 'upload' } ) }
+								onClick={ () => handleClick( MODE_UPLOAD ) }
 							>
 								{ __( 'Upload', 'elementor' ) }
 							</Button>