@elementor/editor-controls 3.33.0-149 → 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-149",
+  "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-149",
-    "@elementor/editor-elements": "3.33.0-149",
-    "@elementor/editor-props": "3.33.0-149",
-    "@elementor/editor-responsive": "3.33.0-149",
-    "@elementor/editor-ui": "3.33.0-149",
-    "@elementor/editor-v1-adapters": "3.33.0-149",
-    "@elementor/env": "3.33.0-149",
-    "@elementor/http-client": "3.33.0-149",
+    "@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-149",
-    "@elementor/mixpanel": "3.33.0-149",
-    "@elementor/query": "3.33.0-149",
-    "@elementor/session": "3.33.0-149",
+    "@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-149",
-    "@elementor/wp-media": "3.33.0-149",
+    "@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

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { InfoAlert } from '@elementor/editor-ui';
+import { type AlertProps, AlertTitle, Box, Infotip, type InfotipProps, useTheme } from '@elementor/ui';
+import { DirectionProvider } from '@elementor/ui';
+
+type Props = {
+	infotipProps?: Partial< InfotipProps >;
+	alertProps?: Partial< AlertProps >;
+	title?: string;
+	description?: React.ReactNode | string;
+	isEnabled?: boolean;
+};
+
+const DEFAULT_COLOR = 'secondary';
+
+export const ConditionalControlInfotip = React.forwardRef(
+	( { children, title, description, alertProps, infotipProps, ...props }: React.PropsWithChildren< Props >, ref ) => {
+		const theme = useTheme();
+		const isUiRtl = 'rtl' === theme.direction;
+		const isEnabled = props.isEnabled && ( title || description );
+
+		return (
+			<Box ref={ ref }>
+				{ isEnabled ? (
+					<DirectionProvider rtl={ isUiRtl }>
+						<Infotip
+							placement={ 'right' }
+							color={ DEFAULT_COLOR }
+							slotProps={ {
+								popper: {
+									modifiers: [
+										{
+											name: 'offset',
+											options: {
+												offset: [ 0, 10 ],
+											},
+										},
+									],
+								},
+							} }
+							{ ...infotipProps }
+							content={
+								<InfoAlert
+									color={ DEFAULT_COLOR }
+									sx={ { width: 300, px: 1.5, py: 2 } }
+									{ ...alertProps }
+								>
+									<Box sx={ { flexDirection: 'column', display: 'flex', gap: 0.5 } }>
+										<AlertTitle>{ title }</AlertTitle>
+										<Box>{ description }</Box>
+									</Box>
+								</InfoAlert>
+							}
+						>
+							{ children }
+						</Infotip>
+					</DirectionProvider>
+				) : (
+					children
+				) }
+			</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/html-tag-control.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { getElementLabel } from '@elementor/editor-elements';
+import { stringPropTypeUtil, type StringPropValue } from '@elementor/editor-props';
+import { MenuListItem } from '@elementor/editor-ui';
+import { Select, type SelectChangeEvent, styled, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useBoundProp } from '../bound-prop-context';
+import { ConditionalControlInfotip } from '../components/conditional-control-infotip';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+
+export type SelectOption = {
+	label: string;
+	value: StringPropValue[ 'value' ];
+	disabled?: boolean;
+};
+
+type Props = {
+	options: SelectOption[];
+	onChange?: ( newValue: string | null, previousValue: string | null | undefined ) => void;
+	fallbackLabels?: Record< string, string >;
+};
+
+const StyledSelect = styled( Select )( () => ( { '.MuiSelect-select.Mui-disabled': { cursor: 'not-allowed' } } ) );
+
+export const HtmlTagControl = createControl( ( { options, onChange, fallbackLabels = {} }: Props ) => {
+	const { value, setValue, disabled, placeholder } = useBoundProp( stringPropTypeUtil );
+	const handleChange = ( event: SelectChangeEvent< StringPropValue[ 'value' ] > ) => {
+		const newValue = event.target.value || null;
+
+		onChange?.( newValue, value );
+		setValue( newValue );
+	};
+
+	const elementLabel = getElementLabel() ?? 'element';
+	const infoTipProps = {
+		title: __( 'HTML Tag', 'elementor' ),
+		/* translators: %s is the element name. */
+		description: __(
+			`The tag is locked to 'a' tag because this %s has a link. To pick a different tag, remove the link first.`,
+			'elementor'
+		).replace( '%s', elementLabel ),
+		isEnabled: !! disabled,
+	};
+
+	const renderValue = ( selectedValue: string | null ) => {
+		if ( selectedValue ) {
+			return findOptionByValue( selectedValue )?.label || fallbackLabels[ selectedValue ] || selectedValue;
+		}
+
+		if ( ! placeholder ) {
+			return '';
+		}
+
+		const placeholderOption = findOptionByValue( placeholder );
+		const displayText = placeholderOption?.label || placeholder;
+
+		return (
+			<Typography component="span" variant="caption" color="text.tertiary">
+				{ displayText }
+			</Typography>
+		);
+	};
+
+	const findOptionByValue = ( searchValue: string | null ) => options.find( ( opt ) => opt.value === searchValue );
+
+	return (
+		<ControlActions>
+			<ConditionalControlInfotip { ...infoTipProps }>
+				<StyledSelect
+					sx={ { overflow: 'hidden', cursor: disabled ? 'not-allowed' : undefined } }
+					displayEmpty
+					size="tiny"
+					renderValue={ renderValue }
+					value={ value ?? '' }
+					onChange={ handleChange }
+					disabled={ disabled }
+					fullWidth
+				>
+					{ options.map( ( { label, ...props } ) => (
+						<MenuListItem key={ props.value } { ...props } value={ props.value ?? '' }>
+							{ label }
+						</MenuListItem>
+					) ) }
+				</StyledSelect>
+			</ConditionalControlInfotip>
+		</ControlActions>
+	);
+} );

package/src/controls/query-control.tsx

@@ -67,6 +67,13 @@ export const QueryControl = createControl( ( props: Props ) => {
 	};
 
 	const onTextChange = ( newValue: string | null ) => {
+		if ( ! newValue ) {
+			setValue( null );
+			onSetValue?.( null );
+
+			return;
+		}
+
 		const newLinkValue = newValue?.trim() || '';
 		const valueToSave = newLinkValue ? urlPropTypeUtil.create( newLinkValue ) : null;
 

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>

package/src/index.ts

@@ -17,6 +17,7 @@ export { FontFamilyControl } from './controls/font-family-control/font-family-co
 export { ItemSelector } from './components/item-selector';
 export { UrlControl } from './controls/url-control';
 export { LinkControl } from './controls/link-control';
+export { HtmlTagControl } from './controls/html-tag-control';
 export { QueryControl } from './controls/query-control';
 export { GapControl } from './controls/gap-control';
 export { AspectRatioControl } from './controls/aspect-ratio-control';