@elementor/editor-controls 0.16.0 → 0.18.0

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,11 +30,14 @@ 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';
 export { ControlActionsProvider, useControlActions } from './control-actions/control-actions-context';
 export { useBoundProp, PropProvider, PropKeyProvider } from './bound-prop-context';
-
+export { ControlAdornmentsProvider } from './control-adornments/control-adornments-context';
+export { ControlAdornments } from './control-adornments/control-adornments';
 // hooks
 export { useSyncExternalState } from './hooks/use-sync-external-state';

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;
+	};
+};