@elementor/editor-components 3.33.0-99 → 3.34.2

package/src/components/components-tab/component-search.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { SearchIcon } from '@elementor/icons';
+import { Box, InputAdornment, Stack, TextField } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useSearch } from './search-provider';
+
+export const ComponentSearch = () => {
+	const { inputValue, handleChange } = useSearch();
+
+	return (
+		<Stack direction="row" gap={ 0.5 } sx={ { width: '100%', px: 2, py: 1.5 } }>
+			<Box sx={ { flexGrow: 1 } }>
+				<TextField
+					role={ 'search' }
+					fullWidth
+					size={ 'tiny' }
+					value={ inputValue }
+					placeholder={ __( 'Search', 'elementor' ) }
+					onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => handleChange( e.target.value ) }
+					InputProps={ {
+						startAdornment: (
+							<InputAdornment position="start">
+								<SearchIcon fontSize={ 'tiny' } />
+							</InputAdornment>
+						),
+					} }
+				/>
+			</Box>
+		</Stack>
+	);
+};

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

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { endDragElementFromPanel, startDragElementFromPanel } from '@elementor/editor-canvas';
+import { dropElement, type DropElementParams, type V1ElementData } from '@elementor/editor-elements';
+import { ComponentsIcon } from '@elementor/icons';
+import { Box, ListItemButton, ListItemIcon, ListItemText, Typography } from '@elementor/ui';
+
+import { loadComponentsAssets } from '../../store/load-components-assets';
+import { type Component } from '../../types';
+import { getContainerForNewElement } from '../../utils/get-container-for-new-element';
+import { createComponentModel } from '../create-component-form/utils/replace-element-with-component';
+
+type ComponentItemProps = {
+	component: Omit< Component, 'id' > & { id?: number };
+};
+
+export const ComponentItem = ( { component }: ComponentItemProps ) => {
+	const componentModel = createComponentModel( component );
+
+	const handleClick = () => {
+		addComponentToPage( componentModel );
+	};
+
+	const handleDragEnd = () => {
+		loadComponentsAssets( [ componentModel as V1ElementData ] );
+
+		endDragElementFromPanel();
+	};
+
+	return (
+		<ListItemButton
+			draggable
+			onDragStart={ () => startDragElementFromPanel( componentModel ) }
+			onDragEnd={ handleDragEnd }
+			shape="rounded"
+			sx={ { border: 'solid 1px', borderColor: 'divider', py: 0.5, px: 1 } }
+		>
+			<Box sx={ { display: 'flex', width: '100%', alignItems: 'center', gap: 1 } } onClick={ handleClick }>
+				<ListItemIcon size="tiny">
+					<ComponentsIcon fontSize="tiny" />
+				</ListItemIcon>
+				<ListItemText
+					primary={
+						<Typography variant="caption" sx={ { color: 'text.primary' } }>
+							{ component.name }
+						</Typography>
+					}
+				/>
+			</Box>
+		</ListItemButton>
+	);
+};
+
+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 },
+	} );
+};

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

@@ -0,0 +1,141 @@
+import * as React from 'react';
+import { ComponentsIcon, EyeIcon } from '@elementor/icons';
+import { Box, Divider, Icon, Link, List, Stack, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useComponents } from '../../hooks/use-components';
+import { ComponentItem } from './components-item';
+import { LoadingComponents } from './loading-components';
+import { useSearch } from './search-provider';
+
+export function ComponentsList() {
+	const { components, isLoading, searchValue } = useFilteredComponents();
+
+	if ( isLoading ) {
+		return <LoadingComponents />;
+	}
+	const isEmpty = ! components || components.length === 0;
+	if ( isEmpty ) {
+		if ( searchValue.length > 0 ) {
+			return <EmptySearchResult />;
+		}
+		return <EmptyState />;
+	}
+
+	return (
+		<List sx={ { display: 'flex', flexDirection: 'column', gap: 1, px: 2 } }>
+			{ components.map( ( component ) => (
+				<ComponentItem key={ component.uid } component={ component } />
+			) ) }
+		</List>
+	);
+}
+
+const EmptyState = () => {
+	return (
+		<Stack
+			alignItems="center"
+			justifyContent="center"
+			height="100%"
+			sx={ { px: 2.5, pt: 10 } }
+			gap={ 1.75 }
+			overflow="hidden"
+		>
+			<Icon fontSize="large">
+				<EyeIcon fontSize="large" />
+			</Icon>
+			<Typography align="center" variant="subtitle2" color="text.secondary" fontWeight="bold">
+				{ __( 'Text that explains that there are no Components yet.', 'elementor' ) }
+			</Typography>
+			<Typography variant="caption" align="center" color="text.secondary">
+				{ __(
+					'Once you have Components, this is where you can manage them—rearrange, duplicate, rename and delete irrelevant classes.',
+					'elementor'
+				) }
+			</Typography>
+			<Divider sx={ { width: '100%' } } color="text.secondary" />
+			<Typography align="left" variant="caption" color="text.secondary">
+				{ __( 'To create a component, first design it, then choose one of three options:', 'elementor' ) }
+			</Typography>
+			<Typography
+				align="left"
+				variant="caption"
+				color="text.secondary"
+				sx={ { display: 'flex', flexDirection: 'column' } }
+			>
+				<span>{ __( '1. Right-click and select Create Component', 'elementor' ) }</span>
+				<span>{ __( '2. Use the component icon in the Structure panel', 'elementor' ) }</span>
+				<span>{ __( '3. Use the component icon in the Edit panel header', 'elementor' ) }</span>
+			</Typography>
+		</Stack>
+	);
+};
+
+const EmptySearchResult = () => {
+	const { searchValue, clearSearch } = useSearch();
+	return (
+		<Stack
+			color={ 'text.secondary' }
+			pt={ 5 }
+			alignItems="center"
+			gap={ 1 }
+			overflow={ 'hidden' }
+			justifySelf={ 'center' }
+		>
+			<ComponentsIcon />
+			<Box
+				sx={ {
+					width: '100%',
+				} }
+			>
+				<Typography align="center" variant="subtitle2" color="inherit">
+					{ __( 'Sorry, nothing matched', 'elementor' ) }
+				</Typography>
+				{ searchValue && (
+					<Typography
+						variant="subtitle2"
+						color="inherit"
+						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="inherit">
+				{ __( 'Try something else.', 'elementor' ) }
+			</Typography>
+			<Typography align="center" variant="caption" color="inherit">
+				<Link color="secondary" variant="caption" component="button" onClick={ clearSearch }>
+					{ __( 'Clear & try again', 'elementor' ) }
+				</Link>
+			</Typography>
+		</Stack>
+	);
+};
+
+const useFilteredComponents = () => {
+	const { components, isLoading } = useComponents();
+	const { searchValue } = useSearch();
+
+	return {
+		components: components.filter( ( component ) =>
+			component.name.toLowerCase().includes( searchValue.toLowerCase() )
+		),
+		isLoading,
+		searchValue,
+	};
+};

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ThemeProvider } from '@elementor/editor-ui';
+
+import { ComponentSearch } from './component-search';
+import { ComponentsList } from './components-list';
+import { SearchProvider } from './search-provider';
+
+export const Components = () => {
+	return (
+		<ThemeProvider>
+			<SearchProvider localStorageKey="elementor-components-search">
+				<ComponentSearch />
+				<ComponentsList />
+			</SearchProvider>
+		</ThemeProvider>
+	);
+};

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

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Box, ListItemButton, Skeleton, Stack } from '@elementor/ui';
+const ROWS_COUNT = 6;
+
+const rows = Array.from( { length: ROWS_COUNT }, ( _, index ) => index );
+
+export const LoadingComponents = () => {
+	return (
+		<Stack
+			aria-label="Loading components"
+			gap={ 1 }
+			sx={ {
+				pointerEvents: 'none',
+				position: 'relative',
+				maxHeight: '300px',
+				overflow: 'hidden',
+				'&:after': {
+					position: 'absolute',
+					top: 0,
+					content: '""',
+					left: 0,
+					width: '100%',
+					height: '300px',
+					background: 'linear-gradient(to top, white, transparent)',
+					pointerEvents: 'none',
+				},
+			} }
+		>
+			{ rows.map( ( row ) => (
+				<ListItemButton
+					key={ row }
+					sx={ { border: 'solid 1px', borderColor: 'divider', py: 0.5, px: 1 } }
+					shape="rounded"
+				>
+					<Box display="flex" gap={ 1 } width="100%">
+						<Skeleton variant="text" width={ '24px' } height={ '36px' } />
+						<Skeleton variant="text" width={ '100%' } height={ '36px' } />
+					</Box>
+				</ListItemButton>
+			) ) }
+		</Stack>
+	);
+};

package/src/components/components-tab/search-provider.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { createContext, useContext } from 'react';
+import { useSearchState, type UseSearchStateResult } from '@elementor/utils';
+
+type SearchContextType = Pick< UseSearchStateResult, 'handleChange' | 'inputValue' > & {
+	searchValue: UseSearchStateResult[ 'debouncedValue' ];
+	clearSearch: () => void;
+};
+
+const SearchContext = createContext< SearchContextType | undefined >( undefined );
+
+export const SearchProvider = ( {
+	children,
+	localStorageKey,
+}: {
+	children: React.ReactNode;
+	localStorageKey: string;
+} ) => {
+	const { debouncedValue, handleChange, inputValue } = useSearchState( { localStorageKey } );
+
+	const clearSearch = () => {
+		handleChange( '' );
+	};
+
+	return (
+		<SearchContext.Provider value={ { handleChange, clearSearch, searchValue: debouncedValue, inputValue } }>
+			{ children }
+		</SearchContext.Provider>
+	);
+};
+
+export const useSearch = () => {
+	const context = useContext( SearchContext );
+	if ( ! context ) {
+		throw new Error( 'useSearch must be used within a SearchProvider' );
+	}
+	return context;
+};

package/src/components/consts.ts

@@ -0,0 +1 @@
+export const COMPONENT_DOCUMENT_TYPE = 'elementor_component';

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

@@ -1,22 +1,27 @@
 import * as React from 'react';
-import { useEffect, useMemo, useState } from 'react';
-import { getElementLabel, type V1Element } from '@elementor/editor-elements';
-import { ThemeProvider } from '@elementor/editor-ui';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { getElementLabel, type V1ElementData } from '@elementor/editor-elements';
+import { Form as FormElement, ThemeProvider } from '@elementor/editor-ui';
 import { StarIcon } from '@elementor/icons';
 import { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack, TextField, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { type CreateComponentResponse } from '../../api';
 import { useComponents } from '../../hooks/use-components';
-import { useCreateComponentMutation } from '../../hooks/use-create-component';
+import { createUnpublishedComponent } from '../../store/create-unpublished-component';
 import { type ComponentFormValues } from '../../types';
+import { trackComponentEvent } from '../../utils/tracking';
 import { useForm } from './hooks/use-form';
 import { createBaseComponentSchema, createSubmitComponentSchema } from './utils/component-form-schema';
-import { replaceElementWithComponent } from './utils/replace-element-with-component';
+import {
+	type ComponentEventData,
+	type ContextMenuEventOptions,
+	getComponentEventData,
+} from './utils/get-component-event-data';
 
 type SaveAsComponentEventData = {
-	element: V1Element;
+	element: V1ElementData;
 	anchorPosition: { top: number; left: number };
+	options?: ContextMenuEventOptions;
 };
 
 type ResultNotification = {
@@ -27,7 +32,7 @@ type ResultNotification = {
 
 export function CreateComponentForm() {
 	const [ element, setElement ] = useState< {
-		element: V1Element;
+		element: V1ElementData;
 		elementLabel: string;
 	} | null >( null );
 
@@ -35,7 +40,7 @@ export function CreateComponentForm() {
 
 	const [ resultNotification, setResultNotification ] = useState< ResultNotification | null >( null );
 
-	const { mutate: createComponent, isPending } = useCreateComponentMutation();
+	const eventData = useRef< ComponentEventData | null >( null );
 
 	useEffect( () => {
 		const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = 'elementor/editor/open-save-as-component-form';
@@ -43,6 +48,12 @@ export function CreateComponentForm() {
 		const openPopup = ( event: CustomEvent< SaveAsComponentEventData > ) => {
 			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',
+				...eventData.current,
+			} );
 		};
 
 		window.addEventListener( OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup as EventListener );
@@ -52,45 +63,32 @@ export function CreateComponentForm() {
 		};
 	}, [] );
 
-	const handleSave = async ( values: ComponentFormValues ) => {
-		if ( ! element ) {
-			throw new Error( `Can't save element as component: element not found` );
-		}
-
-		createComponent(
-			{
-				name: values.componentName,
-				content: [ element.element.model.toJSON( { remove: [ 'default' ] } ) ],
-			},
-			{
-				onSuccess: ( result: CreateComponentResponse ) => {
-					if ( ! element ) {
-						throw new Error( `Can't replace element with component: element not found` );
-					}
-
-					replaceElementWithComponent( element.element, result.component_id );
-
-					setResultNotification( {
-						show: true,
-						// Translators: %1$s: Component name, %2$s: Component ID
-						message: __( 'Component saved successfully as: %1$s (ID: %2$s)', 'elementor' )
-							.replace( '%1$s', values.componentName )
-							.replace( '%2$s', result.component_id.toString() ),
-						type: 'success',
-					} );
-
-					resetAndClosePopup();
-				},
-				onError: () => {
-					const errorMessage = __( 'Failed to save component. Please try again.', 'elementor' );
-					setResultNotification( {
-						show: true,
-						message: errorMessage,
-						type: 'error',
-					} );
-				},
+	const handleSave = ( values: ComponentFormValues ) => {
+		try {
+			if ( ! element ) {
+				throw new Error( `Can't save element as component: element not found` );
 			}
-		);
+
+			const uid = createUnpublishedComponent( values.componentName, element.element, eventData.current );
+
+			setResultNotification( {
+				show: true,
+				// Translators: %1$s: Component name, %2$s: Component UID
+				message: __( 'Component saved successfully as: %1$s (UID: %2$s)', 'elementor' )
+					.replace( '%1$s', values.componentName )
+					.replace( '%2$s', uid ),
+				type: 'success',
+			} );
+
+			resetAndClosePopup();
+		} catch {
+			const errorMessage = __( 'Failed to save component. Please try again.', 'elementor' );
+			setResultNotification( {
+				show: true,
+				message: errorMessage,
+				type: 'error',
+			} );
+		}
 	};
 
 	const resetAndClosePopup = () => {
@@ -98,11 +96,20 @@ export function CreateComponentForm() {
 		setAnchorPosition( undefined );
 	};
 
+	const cancelSave = () => {
+		resetAndClosePopup();
+
+		trackComponentEvent( {
+			action: 'createCancelled',
+			...eventData.current,
+		} );
+	};
+
 	return (
 		<ThemeProvider>
 			<Popover
 				open={ element !== null }
-				onClose={ resetAndClosePopup }
+				onClose={ cancelSave }
 				anchorReference="anchorPosition"
 				anchorPosition={ anchorPosition }
 			>
@@ -110,8 +117,7 @@ export function CreateComponentForm() {
 					<Form
 						initialValues={ { componentName: element.elementLabel } }
 						handleSave={ handleSave }
-						isSubmitting={ isPending }
-						closePopup={ resetAndClosePopup }
+						closePopup={ cancelSave }
 					/>
 				) }
 			</Popover>
@@ -133,17 +139,15 @@ const FONT_SIZE = 'tiny';
 const Form = ( {
 	initialValues,
 	handleSave,
-	isSubmitting,
 	closePopup,
 }: {
 	initialValues: ComponentFormValues;
 	handleSave: ( values: ComponentFormValues ) => void;
-	isSubmitting: boolean;
 	closePopup: () => void;
 } ) => {
 	const { values, errors, isValid, handleChange, validateForm } = useForm< ComponentFormValues >( initialValues );
 
-	const { data: components } = useComponents();
+	const { components } = useComponents();
 
 	const existingComponentNames = useMemo( () => {
 		return components?.map( ( component ) => component.name ) ?? [];
@@ -166,55 +170,60 @@ const Form = ( {
 		}
 	};
 
+	const texts = {
+		heading: __( 'Save as a component', 'elementor' ),
+		name: __( 'Name', 'elementor' ),
+		cancel: __( 'Cancel', 'elementor' ),
+		create: __( 'Create', 'elementor' ),
+	};
+
+	const nameInputId = 'component-name';
+
 	return (
-		<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%' } }
-			>
-				<StarIcon fontSize={ FONT_SIZE } />
-				<Typography variant="caption" sx={ { color: 'text.primary', fontWeight: '500', lineHeight: 1 } }>
-					{ __( 'Save as a component', 'elementor' ) }
-				</Typography>
-			</Stack>
-			<Grid container gap={ 0.75 } alignItems="start" p={ 1.5 }>
-				<Grid item xs={ 12 }>
-					<FormLabel htmlFor={ 'component-name' } size="tiny">
-						{ __( 'Name', 'elementor' ) }
-					</FormLabel>
-				</Grid>
-				<Grid item xs={ 12 }>
-					<TextField
-						id={ 'component-name' }
-						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 }
-					/>
-				</Grid>
-			</Grid>
-			<Stack direction="row" justifyContent="flex-end" alignSelf="end" py={ 1 } px={ 1.5 }>
-				<Button onClick={ closePopup } disabled={ isSubmitting } color="secondary" variant="text" size="small">
-					{ __( 'Cancel', 'elementor' ) }
-				</Button>
-				<Button
-					onClick={ handleSubmit }
-					disabled={ isSubmitting || ! isValid }
-					variant="contained"
-					color="primary"
-					size="small"
+		<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%' } }
 				>
-					{ isSubmitting ? __( 'Creating…', 'elementor' ) : __( 'Create', 'elementor' ) }
-				</Button>
+					<StarIcon 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 }
+						/>
+					</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>
-		</Stack>
+		</FormElement>
 	);
 };