@elementor/editor-controls 0.15.0 → 0.17.0

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { stringPropTypeUtil } from '@elementor/editor-props';
-import { ChevronDownIcon, EditIcon, PhotoIcon, SearchIcon, XIcon } from '@elementor/icons';
+import { ChevronDownIcon, SearchIcon, TextIcon, XIcon } from '@elementor/icons';
 import {
 	bindPopover,
 	bindTrigger,
@@ -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 ) => {
@@ -72,7 +77,7 @@ export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyCo
 			>
 				<Stack>
 					<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
-						<EditIcon fontSize={ SIZE } sx={ { mr: 0.5 } } />
+						<TextIcon fontSize={ SIZE } sx={ { mr: 0.5 } } />
 						<Typography variant="subtitle2">{ __( 'Font Family', 'elementor' ) }</Typography>
 						<IconButton size={ SIZE } sx={ { ml: 'auto' } } onClick={ handleClose }>
 							<XIcon fontSize={ SIZE } />
@@ -105,24 +110,40 @@ export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyCo
 						/>
 					) : (
 						<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>
-							<Stack alignItems="center" p={ 2.5 } gap={ 1.5 }>
-								<PhotoIcon fontSize="large" />
-								<Typography align="center" variant="caption" color="text.secondary">
-									{ __( 'Sorry, nothing matched', 'elementor' ) }
-									<br />
-									&ldquo;{ searchValue }&rdquo;.
-								</Typography>
+							<Stack alignItems="center" p={ 2.5 } gap={ 1.5 } overflow={ 'hidden' }>
+								<TextIcon fontSize="large" />
+								<Box sx={ { maxWidth: 160, overflow: 'hidden' } }>
+									<Typography align="center" variant="subtitle2" color="text.secondary">
+										{ __( 'Sorry, nothing matched', 'elementor' ) }
+									</Typography>
+									<Typography
+										variant="subtitle2"
+										color="text.secondary"
+										sx={ {
+											display: 'flex',
+											width: '100%',
+											justifyContent: 'center',
+										} }
+									>
+										<span>&ldquo;</span>
+										<span
+											style={ { maxWidth: '80%', overflow: 'hidden', textOverflow: 'ellipsis' } }
+										>
+											{ searchValue }
+										</span>
+										<span>&rdquo;.</span>
+									</Typography>
+								</Box>
 								<Typography align="center" variant="caption" color="text.secondary">
+									{ __( 'Try something else.', 'elementor' ) }
 									<Link
 										color="secondary"
 										variant="caption"
 										component="button"
 										onClick={ () => setSearchValue( '' ) }
 									>
-										{ __( 'Clear the filters', 'elementor' ) }
+										{ __( 'Clear & try again', 'elementor' ) }
 									</Link>
-									&nbsp;
-									{ __( 'and try again.', 'elementor' ) }
 								</Typography>
 							</Stack>
 						</Box>
@@ -262,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>

package/src/controls/toggle-control.tsx

@@ -6,28 +6,54 @@ import { useBoundProp } from '../bound-prop-context';
 import { ControlToggleButtonGroup, type ToggleButtonGroupItem } from '../components/control-toggle-button-group';
 import { createControl } from '../create-control';
 
-type ToggleControlProps< T extends PropValue > = {
-	options: ToggleButtonGroupItem< T >[];
+export type ToggleControlProps< T extends PropValue > = {
+	options: Array< ToggleButtonGroupItem< T > & { exclusive?: boolean } >;
 	fullWidth?: boolean;
 	size?: ToggleButtonProps[ 'size' ];
+	exclusive?: boolean;
 };
 
 export const ToggleControl = createControl(
-	( { options, fullWidth = false, size = 'tiny' }: ToggleControlProps< StringPropValue[ 'value' ] > ) => {
+	( {
+		options,
+		fullWidth = false,
+		size = 'tiny',
+		exclusive = true,
+	}: ToggleControlProps< StringPropValue[ 'value' ] > ) => {
 		const { value, setValue } = useBoundProp( stringPropTypeUtil );
 
-		const handleToggle = ( option: StringPropValue[ 'value' ] | null ) => {
-			setValue( option );
+		const exclusiveValues = options.filter( ( option ) => option.exclusive ).map( ( option ) => option.value );
+
+		const handleNonExclusiveToggle = ( selectedValues: StringPropValue[ 'value' ][] ) => {
+			const newSelectedValue = selectedValues[ selectedValues.length - 1 ];
+			const isNewSelectedValueExclusive = exclusiveValues.includes( newSelectedValue );
+
+			const updatedValues = isNewSelectedValueExclusive
+				? [ newSelectedValue ]
+				: selectedValues?.filter( ( val ) => ! exclusiveValues.includes( val ) );
+
+			setValue( updatedValues?.join( ' ' ) || null );
 		};
 
-		return (
+		const toggleButtonGroupProps = {
+			items: options,
+			fullWidth,
+			size,
+		};
+
+		return exclusive ? (
 			<ControlToggleButtonGroup
-				items={ options }
+				{ ...toggleButtonGroupProps }
 				value={ value ?? null }
-				onChange={ handleToggle }
+				onChange={ setValue }
 				exclusive={ true }
-				fullWidth={ fullWidth }
-				size={ size }
+			/>
+		) : (
+			<ControlToggleButtonGroup
+				{ ...toggleButtonGroupProps }
+				value={ value?.split( ' ' ) ?? [] }
+				onChange={ handleNonExclusiveToggle }
+				exclusive={ false }
 			/>
 		);
 	}

package/src/hooks/use-filtered-font-families.ts

@@ -1,25 +1,24 @@
+import { type FontCategory } from '@elementor/editor-controls';
+
 export type FontListItem = {
 	type: 'font' | 'category';
 	value: string;
 };
 
-export const useFilteredFontFamilies = ( fontFamilies: Record< string, string[] >, searchValue: string ) => {
-	const filteredFontFamilies = Object.entries( fontFamilies ).reduce< FontListItem[] >(
-		( acc, [ category, fonts ] ) => {
-			const filteredFonts = fonts.filter( ( font ) => font.toLowerCase().includes( searchValue.toLowerCase() ) );
-
-			if ( filteredFonts.length ) {
-				acc.push( { type: 'category', value: category } );
+export const useFilteredFontFamilies = ( fontFamilies: FontCategory[], searchValue: string ) => {
+	return fontFamilies.reduce< FontListItem[] >( ( acc, category ) => {
+		const filteredFonts = category.fonts.filter( ( font ) =>
+			font.toLowerCase().includes( searchValue.toLowerCase() )
+		);
 
-				filteredFonts.forEach( ( font ) => {
-					acc.push( { type: 'font', value: font } );
-				} );
-			}
+		if ( filteredFonts.length ) {
+			acc.push( { type: 'category', value: category.label } );
 
-			return acc;
-		},
-		[]
-	);
+			filteredFonts.forEach( ( font ) => {
+				acc.push( { type: 'font', value: font } );
+			} );
+		}
 
-	return [ ...filteredFontFamilies ];
+		return acc;
+	}, [] );
 };

package/src/index.ts

@@ -30,6 +30,8 @@ export type { ControlActionsItems } from './control-actions/control-actions-cont
 export type { PropProviderProps } from './bound-prop-context';
 export type { SetValue } from './bound-prop-context/prop-context';
 export type { ExtendedValue } from './controls/size-control';
+export type { ToggleControlProps } from './controls/toggle-control';
+export type { FontCategory } from './controls/font-family-control/font-family-control';
 
 // providers
 export { createControlReplacement, ControlReplacementProvider } from './create-control-replacement';

package/src/utils/link-restriction.ts

@@ -0,0 +1,47 @@
+import { getContainer } from '@elementor/editor-elements';
+
+type LinkRestriction =
+	| {
+			shouldRestrict: true;
+			restrictReason: 'ancestor' | 'descendant';
+	  }
+	| {
+			shouldRestrict: false;
+			restrictReason?: never;
+	  };
+
+export function getLinkRestriction( elementId: string ): LinkRestriction {
+	if ( getAncestorAnchor( elementId ) ) {
+		return {
+			shouldRestrict: true,
+			restrictReason: 'ancestor',
+		};
+	}
+
+	if ( getDescendantAnchor( elementId ) ) {
+		return {
+			shouldRestrict: true,
+			restrictReason: 'descendant',
+		};
+	}
+
+	return { shouldRestrict: false };
+}
+
+function getAncestorAnchor( elementId: string ) {
+	const element = getElementView( elementId );
+
+	return element?.closest( 'a' ) || null;
+}
+
+function getDescendantAnchor( elementId: string ) {
+	const element = getElementView( elementId );
+
+	return element?.querySelector( 'a' ) || null;
+}
+
+function getElementView( id: string ) {
+	const elementContainer = getContainer( id );
+
+	return elementContainer?.view?.el || null;
+}

package/src/utils/types.ts

@@ -0,0 +1,5 @@
+export type ControlProps< TControlProps = unknown > = TControlProps & {
+	context: {
+		elementId: string;
+	};
+};