@elementor/editor-controls 3.33.0-150 → 3.33.0-151

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": "3.33.0-150",
+  "version": "3.33.0-151",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "3.33.0-150",
-    "@elementor/editor-elements": "3.33.0-150",
-    "@elementor/editor-props": "3.33.0-150",
-    "@elementor/editor-responsive": "3.33.0-150",
-    "@elementor/editor-ui": "3.33.0-150",
-    "@elementor/editor-v1-adapters": "3.33.0-150",
-    "@elementor/env": "3.33.0-150",
-    "@elementor/http-client": "3.33.0-150",
+    "@elementor/editor-current-user": "3.33.0-151",
+    "@elementor/editor-elements": "3.33.0-151",
+    "@elementor/editor-props": "3.33.0-151",
+    "@elementor/editor-responsive": "3.33.0-151",
+    "@elementor/editor-ui": "3.33.0-151",
+    "@elementor/editor-v1-adapters": "3.33.0-151",
+    "@elementor/env": "3.33.0-151",
+    "@elementor/http-client": "3.33.0-151",
     "@elementor/icons": "^1.51.1",
-    "@elementor/locations": "3.33.0-150",
-    "@elementor/mixpanel": "3.33.0-150",
-    "@elementor/query": "3.33.0-150",
-    "@elementor/session": "3.33.0-150",
+    "@elementor/locations": "3.33.0-151",
+    "@elementor/mixpanel": "3.33.0-151",
+    "@elementor/query": "3.33.0-151",
+    "@elementor/session": "3.33.0-151",
     "@elementor/ui": "1.36.12",
-    "@elementor/utils": "3.33.0-150",
-    "@elementor/wp-media": "3.33.0-150",
+    "@elementor/utils": "3.33.0-151",
+    "@elementor/wp-media": "3.33.0-151",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0"
   },

package/src/components/conditional-control-infotip.tsx

@@ -7,7 +7,7 @@ type Props = {
 	infotipProps?: Partial< InfotipProps >;
 	alertProps?: Partial< AlertProps >;
 	title?: string;
-	description?: string;
+	description?: React.ReactNode | string;
 	isEnabled?: boolean;
 };
 
@@ -45,7 +45,7 @@ export const ConditionalControlInfotip = React.forwardRef(
 									sx={ { width: 300, px: 1.5, py: 2 } }
 									{ ...alertProps }
 								>
-									<Box sx={ { flexDirection: 'column', display: 'flex' } }>
+									<Box sx={ { flexDirection: 'column', display: 'flex', gap: 0.5 } }>
 										<AlertTitle>{ title }</AlertTitle>
 										<Box>{ description }</Box>
 									</Box>

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { useCurrentUserCapabilities } from '@elementor/editor-current-user';
 import {
 	Button,
 	CircularProgress,
@@ -34,11 +33,6 @@ 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' );
 
@@ -51,9 +45,7 @@ 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 );
@@ -75,7 +67,7 @@ export const EnableUnfilteredModal = ( props: EnableUnfilteredModalProps ) => {
 
 	const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
 
-	return canManageOptions ? <AdminDialog { ...dialogProps } /> : <NonAdminDialog { ...dialogProps } />;
+	return <AdminDialog { ...dialogProps } />;
 };
 
 const AdminDialog = ( { open, onClose, handleEnable, isPending, isError }: LocalModalProps ) => (
@@ -111,20 +103,3 @@ const AdminDialog = ( { open, onClose, handleEnable, isPending, isError }: Local
 		</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/controls/svg-media-control.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { useState } from 'react';
+import { useCurrentUserCapabilities } from '@elementor/editor-current-user';
 import { imageSrcPropTypeUtil } from '@elementor/editor-props';
 import { UploadIcon } from '@elementor/icons';
-import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack, styled } from '@elementor/ui';
+import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack, styled, ThemeProvider } 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';
@@ -47,6 +49,8 @@ export const SvgMediaControl = createControl( () => {
 	const src = attachment?.url ?? url?.value ?? null;
 	const { data: allowSvgUpload } = useUnfilteredFilesUpload();
 	const [ unfilteredModalOpenState, setUnfilteredModalOpenState ] = useState( false );
+	const { canUser } = useCurrentUserCapabilities();
+	const canManageOptions = canUser( 'manage_options' );
 
 	const { open } = useWpMediaFrame( {
 		mediaTypes: [ 'svg' ],
@@ -79,6 +83,18 @@ export const SvgMediaControl = createControl( () => {
 		}
 	};
 
+	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: ! canManageOptions,
+	};
+
 	return (
 		<Stack gap={ 1 }>
 			<EnableUnfilteredModal open={ unfilteredModalOpenState } onClose={ onCloseUnfilteredModal } />
@@ -112,15 +128,22 @@ export const SvgMediaControl = createControl( () => {
 							>
 								{ __( 'Select SVG', 'elementor' ) }
 							</Button>
-							<Button
-								size="tiny"
-								variant="text"
-								color="inherit"
-								startIcon={ <UploadIcon /> }
-								onClick={ () => handleClick( MODE_UPLOAD ) }
-							>
-								{ __( 'Upload', 'elementor' ) }
-							</Button>
+							<ConditionalControlInfotip { ...infotipProps }>
+								<span>
+									<ThemeProvider colorScheme={ canManageOptions ? 'light' : 'dark' }>
+										<Button
+											size="tiny"
+											variant="text"
+											color="inherit"
+											startIcon={ <UploadIcon /> }
+											disabled={ canManageOptions ? false : true }
+											onClick={ () => canManageOptions && handleClick( MODE_UPLOAD ) }
+										>
+											{ __( 'Upload', 'elementor' ) }
+										</Button>
+									</ThemeProvider>
+								</span>
+							</ConditionalControlInfotip>
 						</Stack>
 					</CardOverlay>
 				</StyledCard>