@elementor/editor-components 4.0.0-666 → 4.0.0-667

package/src/extended/components/components-tab/component-item.tsx

@@ -1,180 +0,0 @@
-import * as React from 'react';
-import { useRef, useState } from 'react';
-import { endDragElementFromPanel, startDragElementFromPanel } from '@elementor/editor-canvas';
-import { dropElement, type DropElementParams, type V1ElementData } from '@elementor/editor-elements';
-import { MenuListItem, useEditable, WarningInfotip } from '@elementor/editor-ui';
-import { DotsVerticalIcon } from '@elementor/icons';
-import { bindMenu, bindTrigger, IconButton, Menu, Stack, usePopupState } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import {
-	ComponentItem as CoreComponentItem,
-	type ComponentItemProps,
-	ComponentName,
-} from '../../../components/components-tab/components-item';
-import { useComponentsPermissions } from '../../../hooks/use-components-permissions';
-import { loadComponentsAssets } from '../../../store/actions/load-components-assets';
-import { archiveComponent } from '../../store/actions/archive-component';
-import { renameComponent } from '../../store/actions/rename-component';
-import { validateComponentName } from '../../utils/component-name-validation';
-import { createComponentModel } from '../../utils/create-component-model';
-import { getContainerForNewElement } from '../../utils/get-container-for-new-element';
-import { DeleteConfirmationDialog } from './delete-confirmation-dialog';
-
-export function ComponentItem( { component }: ComponentItemProps ) {
-	const itemRef = useRef< HTMLElement >( null );
-	const [ isDeleteDialogOpen, setIsDeleteDialogOpen ] = useState( false );
-	const { canRename, canDelete } = useComponentsPermissions();
-
-	const shouldShowActions = canRename || canDelete;
-
-	const {
-		ref: editableRef,
-		isEditing,
-		openEditMode,
-		error,
-		getProps: getEditableProps,
-	} = useEditable( {
-		value: component.name,
-		onSubmit: ( newName: string ) => renameComponent( component.uid, newName ),
-		validation: validateComponentTitle,
-	} );
-
-	const componentModel = createComponentModel( component );
-
-	const popupState = usePopupState( {
-		variant: 'popover',
-		disableAutoFocus: true,
-	} );
-
-	const handleClick = () => {
-		addComponentToPage( componentModel );
-	};
-
-	const handleDragEnd = () => {
-		loadComponentsAssets( [ componentModel as V1ElementData ] );
-
-		endDragElementFromPanel();
-	};
-
-	const handleDeleteClick = () => {
-		setIsDeleteDialogOpen( true );
-		popupState.close();
-	};
-
-	const handleDeleteConfirm = () => {
-		if ( ! component.id ) {
-			throw new Error( 'Component ID is required' );
-		}
-
-		setIsDeleteDialogOpen( false );
-		archiveComponent( component.id, component.name );
-	};
-
-	const handleDeleteDialogClose = () => {
-		setIsDeleteDialogOpen( false );
-	};
-
-	return (
-		<Stack>
-			<WarningInfotip
-				open={ Boolean( error ) }
-				text={ error ?? '' }
-				placement="bottom"
-				width={ itemRef.current?.getBoundingClientRect().width }
-				offset={ [ 0, -15 ] }
-			>
-				<CoreComponentItem
-					ref={ itemRef }
-					component={ component }
-					disabled={ false }
-					draggable
-					onDragStart={ ( event: React.DragEvent ) => startDragElementFromPanel( componentModel, event ) }
-					onDragEnd={ handleDragEnd }
-					onClick={ handleClick }
-					isEditing={ isEditing }
-					error={ error }
-					nameSlot={
-						<ComponentName
-							name={ component.name }
-							editable={ { ref: editableRef, isEditing, getProps: getEditableProps } }
-						/>
-					}
-					endSlot={
-						shouldShowActions ? (
-							<IconButton size="tiny" { ...bindTrigger( popupState ) } aria-label="More actions">
-								<DotsVerticalIcon fontSize="tiny" />
-							</IconButton>
-						) : undefined
-					}
-				/>
-			</WarningInfotip>
-			{ shouldShowActions && (
-				<Menu
-					{ ...bindMenu( popupState ) }
-					anchorOrigin={ {
-						vertical: 'bottom',
-						horizontal: 'right',
-					} }
-					transformOrigin={ {
-						vertical: 'top',
-						horizontal: 'right',
-					} }
-				>
-					{ canRename && (
-						<MenuListItem
-							sx={ { minWidth: '160px' } }
-							primaryTypographyProps={ { variant: 'caption', color: 'text.primary' } }
-							onClick={ () => {
-								popupState.close();
-								openEditMode();
-							} }
-						>
-							{ __( 'Rename', 'elementor' ) }
-						</MenuListItem>
-					) }
-					{ canDelete && (
-						<MenuListItem
-							sx={ { minWidth: '160px' } }
-							primaryTypographyProps={ { variant: 'caption', color: 'error.light' } }
-							onClick={ handleDeleteClick }
-						>
-							{ __( 'Delete', 'elementor' ) }
-						</MenuListItem>
-					) }
-				</Menu>
-			) }
-			<DeleteConfirmationDialog
-				open={ isDeleteDialogOpen }
-				onClose={ handleDeleteDialogClose }
-				onConfirm={ handleDeleteConfirm }
-			/>
-		</Stack>
-	);
-}
-
-const addComponentToPage = ( model: DropElementParams[ 'model' ] ) => {
-	const { container, options } = getContainerForNewElement();
-
-	if ( ! container ) {
-		throw new Error( `Can't find container to drop new component instance at` );
-	}
-
-	loadComponentsAssets( [ model as V1ElementData ] );
-
-	dropElement( {
-		containerId: container.id,
-		model,
-		options: { ...options, useHistory: false, scrollIntoView: true },
-	} );
-};
-
-const validateComponentTitle = ( newTitle: string ) => {
-	const result = validateComponentName( newTitle );
-
-	if ( ! result.errorMessage ) {
-		return null;
-	}
-
-	return result.errorMessage;
-};

package/src/extended/components/components-tab/components.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import { ThemeProvider } from '@elementor/editor-ui';
-import { List } from '@elementor/ui';
-
-import { ComponentSearch } from '../../../components/components-tab/component-search';
-import {
-	EmptySearchResult,
-	EmptyState,
-	useFilteredComponents,
-} from '../../../components/components-tab/components-list';
-import { LoadingComponents } from '../../../components/components-tab/loading-components';
-import { SearchProvider } from '../../../components/components-tab/search-provider';
-import { useComponents } from '../../../hooks/use-components';
-import { ComponentItem } from './component-item';
-
-const ExtendedComponentsList = () => {
-	const { components, isLoading, searchValue } = useFilteredComponents();
-
-	if ( isLoading ) {
-		return <LoadingComponents />;
-	}
-
-	const isEmpty = ! components?.length;
-
-	if ( isEmpty ) {
-		return searchValue.length ? <EmptySearchResult /> : <EmptyState />;
-	}
-
-	return (
-		<List sx={ { display: 'flex', flexDirection: 'column', gap: 1, px: 2 } }>
-			{ components.map( ( component ) => (
-				<ComponentItem key={ component.uid } component={ component } />
-			) ) }
-		</List>
-	);
-};
-
-const ExtendedComponentsContent = () => {
-	const { components, isLoading } = useComponents();
-	const hasComponents = ! isLoading && components.length > 0;
-
-	return (
-		<>
-			{ hasComponents && <ComponentSearch /> }
-			<ExtendedComponentsList />
-		</>
-	);
-};
-
-export const ExtendedComponents = () => {
-	return (
-		<ThemeProvider>
-			<SearchProvider localStorageKey="elementor-components-search">
-				<ExtendedComponentsContent />
-			</SearchProvider>
-		</ThemeProvider>
-	);
-};

package/src/extended/components/components-tab/delete-confirmation-dialog.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { ConfirmationDialog } from '@elementor/editor-ui';
-import { __ } from '@wordpress/i18n';
-
-type DeleteConfirmationDialogProps = {
-	open: boolean;
-	onClose: () => void;
-	onConfirm: () => void;
-};
-
-export function DeleteConfirmationDialog( { open, onClose, onConfirm }: DeleteConfirmationDialogProps ) {
-	return (
-		<ConfirmationDialog open={ open } onClose={ onClose }>
-			<ConfirmationDialog.Title>{ __( 'Delete this component?', 'elementor' ) }</ConfirmationDialog.Title>
-			<ConfirmationDialog.Content>
-				<ConfirmationDialog.ContentText>
-					{ __(
-						'Existing instances on your pages will remain functional. You will no longer find this component in your list.',
-						'elementor'
-					) }
-				</ConfirmationDialog.ContentText>
-			</ConfirmationDialog.Content>
-			<ConfirmationDialog.Actions onClose={ onClose } onConfirm={ onConfirm } />
-		</ConfirmationDialog>
-	);
-}

package/src/extended/components/create-component-form/create-component-form.tsx

@@ -1,281 +0,0 @@
-import * as React from 'react';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { getElementLabel, type V1ElementData } from '@elementor/editor-elements';
-import { type NotificationData, notify } from '@elementor/editor-notifications';
-import { Form as FormElement, ThemeProvider, useTextFieldAutoSelect } from '@elementor/editor-ui';
-import { ComponentsIcon } from '@elementor/icons';
-import { Button, FormLabel, Grid, Popover, Stack, TextField, Typography } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { useComponents } from '../../../hooks/use-components';
-import { componentsSelectors } from '../../../store/selectors';
-import { type ComponentFormValues, type PublishedComponent } from '../../../types';
-import { switchToComponent } from '../../../utils/switch-to-component';
-import { trackComponentEvent } from '../../../utils/tracking';
-import { createUnpublishedComponent } from '../../store/actions/create-unpublished-component';
-import { findNonAtomicElementsInElement } from '../../sync/prevent-non-atomic-nesting';
-import { createBaseComponentSchema, createSubmitComponentSchema } from '../../utils/component-form-schema';
-import { useForm } from './hooks/use-form';
-import {
-	type ComponentEventData,
-	type ContextMenuEventOptions,
-	getComponentEventData,
-} from './utils/get-component-event-data';
-
-type SaveAsComponentEventData = {
-	element: V1ElementData;
-	anchorPosition: { top: number; left: number };
-	options?: ContextMenuEventOptions;
-};
-
-const MAX_COMPONENTS = 100;
-
-export function CreateComponentForm() {
-	const [ element, setElement ] = useState< {
-		element: V1ElementData;
-		elementLabel: string;
-	} | null >( null );
-
-	const [ anchorPosition, setAnchorPosition ] = useState< { top: number; left: number } >();
-	const { components } = useComponents();
-
-	const eventData = useRef< ComponentEventData | null >( null );
-
-	useEffect( () => {
-		const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = 'elementor/editor/open-save-as-component-form';
-
-		const openPopup = ( event: CustomEvent< SaveAsComponentEventData > ) => {
-			const { shouldOpen, notification } = shouldOpenForm( event.detail.element, components?.length ?? 0 );
-
-			if ( ! shouldOpen ) {
-				notify( notification );
-				return;
-			}
-
-			setElement( { element: event.detail.element, elementLabel: getElementLabel( event.detail.element.id ) } );
-			setAnchorPosition( event.detail.anchorPosition );
-
-			eventData.current = getComponentEventData( event.detail.element, event.detail.options );
-			trackComponentEvent( {
-				action: 'createClicked',
-				source: 'user',
-				...eventData.current,
-			} );
-		};
-
-		window.addEventListener( OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup as EventListener );
-
-		return () => {
-			window.removeEventListener( OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup as EventListener );
-		};
-	}, [ components?.length ] );
-
-	const handleSave = async ( values: ComponentFormValues ) => {
-		try {
-			if ( ! element ) {
-				throw new Error( `Can't save element as component: element not found` );
-			}
-
-			const { uid, instanceId } = await createUnpublishedComponent( {
-				name: values.componentName,
-				element: element.element,
-				eventData: eventData.current,
-				source: 'user',
-			} );
-
-			const publishedComponentId = ( componentsSelectors.getComponentByUid( uid ) as PublishedComponent )?.id;
-
-			if ( publishedComponentId ) {
-				switchToComponent( publishedComponentId, instanceId );
-			} else {
-				throw new Error( 'Failed to find published component' );
-			}
-
-			notify( {
-				type: 'success',
-				message: __( 'Component created successfully.', 'elementor' ),
-				id: `component-saved-successfully-${ uid }`,
-			} );
-
-			resetAndClosePopup();
-		} catch {
-			const errorMessage = __( 'Failed to create component. Please try again.', 'elementor' );
-			notify( {
-				type: 'error',
-				message: errorMessage,
-				id: 'component-save-failed',
-			} );
-			resetAndClosePopup();
-		}
-	};
-
-	const resetAndClosePopup = () => {
-		setElement( null );
-		setAnchorPosition( undefined );
-	};
-
-	const cancelSave = () => {
-		resetAndClosePopup();
-
-		trackComponentEvent( {
-			action: 'createCancelled',
-			source: 'user',
-			...eventData.current,
-		} );
-	};
-
-	return (
-		<ThemeProvider>
-			<Popover
-				open={ element !== null }
-				onClose={ cancelSave }
-				anchorReference="anchorPosition"
-				anchorPosition={ anchorPosition }
-				data-testid="create-component-form"
-			>
-				{ element !== null && (
-					<Form
-						initialValues={ { componentName: element.elementLabel } }
-						handleSave={ handleSave }
-						closePopup={ cancelSave }
-					/>
-				) }
-			</Popover>
-		</ThemeProvider>
-	);
-}
-
-type ShouldOpenFormResult =
-	| { shouldOpen: true; notification: null }
-	| { shouldOpen: false; notification: NotificationData };
-
-function shouldOpenForm( element: V1ElementData, componentsCount: number ): ShouldOpenFormResult {
-	const nonAtomicElements = findNonAtomicElementsInElement( element );
-
-	if ( nonAtomicElements.length > 0 ) {
-		return {
-			shouldOpen: false,
-			notification: {
-				type: 'default',
-				message: __(
-					'Components require atomic elements only. Remove widgets to create this component.',
-					'elementor'
-				),
-				id: 'non-atomic-element-save-blocked',
-			},
-		};
-	}
-
-	if ( componentsCount >= MAX_COMPONENTS ) {
-		return {
-			shouldOpen: false,
-			notification: {
-				type: 'default',
-				/* translators: %s is the maximum number of components */
-				message: __(
-					`You've reached the limit of %s components. Please remove an existing one to create a new component.`,
-					'elementor'
-				).replace( '%s', MAX_COMPONENTS.toString() ),
-				id: 'maximum-number-of-components-exceeded',
-			},
-		};
-	}
-
-	return { shouldOpen: true, notification: null };
-}
-
-const FONT_SIZE = 'tiny';
-
-const Form = ( {
-	initialValues,
-	handleSave,
-	closePopup,
-}: {
-	initialValues: ComponentFormValues;
-	handleSave: ( values: ComponentFormValues ) => void;
-	closePopup: () => void;
-} ) => {
-	const { values, errors, isValid, handleChange, validateForm } = useForm< ComponentFormValues >( initialValues );
-	const nameInputRef = useTextFieldAutoSelect();
-
-	const { components } = useComponents();
-
-	const existingComponentNames = useMemo( () => {
-		return components?.map( ( component ) => component.name ) ?? [];
-	}, [ components ] );
-
-	const changeValidationSchema = useMemo(
-		() => createBaseComponentSchema( existingComponentNames ),
-		[ existingComponentNames ]
-	);
-	const submitValidationSchema = useMemo(
-		() => createSubmitComponentSchema( existingComponentNames ),
-		[ existingComponentNames ]
-	);
-
-	const handleSubmit = () => {
-		const { success, parsedValues } = validateForm( submitValidationSchema );
-
-		if ( success ) {
-			handleSave( parsedValues );
-		}
-	};
-
-	const texts = {
-		heading: __( 'Create component', 'elementor' ),
-		name: __( 'Name', 'elementor' ),
-		cancel: __( 'Cancel', 'elementor' ),
-		create: __( 'Create', 'elementor' ),
-	};
-
-	const nameInputId = 'component-name';
-
-	return (
-		<FormElement onSubmit={ handleSubmit }>
-			<Stack alignItems="start" width="268px">
-				<Stack
-					direction="row"
-					alignItems="center"
-					py={ 1 }
-					px={ 1.5 }
-					sx={ { columnGap: 0.5, borderBottom: '1px solid', borderColor: 'divider', width: '100%' } }
-				>
-					<ComponentsIcon fontSize={ FONT_SIZE } />
-					<Typography variant="caption" sx={ { color: 'text.primary', fontWeight: '500', lineHeight: 1 } }>
-						{ texts.heading }
-					</Typography>
-				</Stack>
-				<Grid container gap={ 0.75 } alignItems="start" p={ 1.5 }>
-					<Grid item xs={ 12 }>
-						<FormLabel htmlFor={ nameInputId } size="tiny">
-							{ texts.name }
-						</FormLabel>
-					</Grid>
-					<Grid item xs={ 12 }>
-						<TextField
-							id={ nameInputId }
-							size={ FONT_SIZE }
-							fullWidth
-							value={ values.componentName }
-							onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) =>
-								handleChange( e, 'componentName', changeValidationSchema )
-							}
-							inputProps={ { style: { color: 'text.primary', fontWeight: '600' } } }
-							error={ Boolean( errors.componentName ) }
-							helperText={ errors.componentName }
-							inputRef={ nameInputRef }
-						/>
-					</Grid>
-				</Grid>
-				<Stack direction="row" justifyContent="flex-end" alignSelf="end" py={ 1 } px={ 1.5 }>
-					<Button onClick={ closePopup } color="secondary" variant="text" size="small">
-						{ texts.cancel }
-					</Button>
-					<Button type="submit" disabled={ ! isValid } variant="contained" color="primary" size="small">
-						{ texts.create }
-					</Button>
-				</Stack>
-			</Stack>
-		</FormElement>
-	);
-};

package/src/extended/components/create-component-form/hooks/use-form.ts

@@ -1,72 +0,0 @@
-import { useMemo, useState } from 'react';
-import { type z } from '@elementor/schema';
-
-export const useForm = < TValues extends Record< string, unknown > >( initialValues: TValues ) => {
-	const [ values, setValues ] = useState< TValues >( initialValues );
-	const [ errors, setErrors ] = useState< Partial< Record< keyof TValues, string > > >( {} );
-
-	const isValid = useMemo( () => {
-		return ! Object.values( errors ).some( ( error ) => error );
-	}, [ errors ] );
-
-	const handleChange = (
-		e: React.ChangeEvent< HTMLInputElement >,
-		field: keyof TValues,
-		validationSchema: z.ZodType< TValues >
-	) => {
-		const updated = { ...values, [ field ]: e.target.value };
-		setValues( updated );
-
-		const { success, errors: validationErrors } = validateForm( updated, validationSchema );
-
-		if ( ! success ) {
-			setErrors( validationErrors );
-		} else {
-			setErrors( {} );
-		}
-	};
-
-	const validate = (
-		validationSchema: z.ZodType< TValues >
-	): { success: true; parsedValues: TValues } | { success: false; parsedValues?: never } => {
-		const { success, errors: validationErrors, parsedValues } = validateForm( values, validationSchema );
-
-		if ( ! success ) {
-			setErrors( validationErrors );
-			return { success };
-		}
-		setErrors( {} );
-		return { success, parsedValues };
-	};
-
-	return {
-		values,
-		errors,
-		isValid,
-		handleChange,
-		validateForm: validate,
-	};
-};
-
-const validateForm = < TValues extends Record< string, unknown > >(
-	values: TValues,
-	schema: z.ZodType< TValues >
-):
-	| { success: false; parsedValues?: never; errors: Partial< Record< keyof TValues, string > > }
-	| { success: true; parsedValues: TValues; errors?: never } => {
-	const result = schema.safeParse( values );
-
-	if ( result.success ) {
-		return { success: true, parsedValues: result.data };
-	}
-
-	const errors = {} as Partial< Record< keyof TValues, string > >;
-
-	( Object.entries( result.error.formErrors.fieldErrors ) as Array< [ keyof TValues, string[] ] > ).forEach(
-		( [ field, error ] ) => {
-			errors[ field ] = error[ 0 ];
-		}
-	);
-
-	return { success: false, errors };
-};

package/src/extended/components/create-component-form/utils/get-component-event-data.ts

@@ -1,54 +0,0 @@
-import { type V1ElementData } from '@elementor/editor-elements';
-
-export type ComponentEventData = {
-	nested_elements_count: number;
-	nested_components_count: number;
-	top_element_type: string;
-	location?: string;
-	secondary_location?: string;
-	trigger?: string;
-};
-
-export type ContextMenuEventOptions = Record< string, unknown > & {
-	location: string;
-	secondaryLocation: string;
-	trigger: string;
-};
-
-export const getComponentEventData = (
-	containerElement: V1ElementData,
-	options?: ContextMenuEventOptions
-): ComponentEventData => {
-	const { elementsCount, componentsCount } = countNestedElements( containerElement );
-
-	return {
-		nested_elements_count: elementsCount,
-		nested_components_count: componentsCount,
-		top_element_type: containerElement.elType,
-		location: options?.location,
-		secondary_location: options?.secondaryLocation,
-		trigger: options?.trigger,
-	};
-};
-
-function countNestedElements( container: V1ElementData ): { elementsCount: number; componentsCount: number } {
-	if ( ! container.elements || container.elements.length === 0 ) {
-		return { elementsCount: 0, componentsCount: 0 };
-	}
-
-	let elementsCount = container.elements.length;
-	let componentsCount = 0;
-
-	for ( const element of container.elements ) {
-		if ( element.widgetType === 'e-component' ) {
-			componentsCount++;
-		}
-
-		const { elementsCount: nestedElementsCount, componentsCount: nestedComponentsCount } =
-			countNestedElements( element );
-		elementsCount += nestedElementsCount;
-		componentsCount += nestedComponentsCount;
-	}
-
-	return { elementsCount, componentsCount };
-}