@elementor/editor-components 4.0.0-manual → 4.0.0

package/src/extended/components/component-properties-panel/use-current-editable-item.ts

@@ -1,73 +0,0 @@
-import { useState } from 'react';
-import type * as React from 'react';
-import { setDocumentModifiedStatus } from '@elementor/editor-documents';
-import { useEditable } from '@elementor/editor-ui';
-import { __ } from '@wordpress/i18n';
-
-import { useCurrentComponentId, useOverridableProps } from '../../../store/store';
-import { renameOverridableGroup } from '../../store/actions/rename-overridable-group';
-import { validateGroupLabel } from './utils/validate-group-label';
-
-export type GroupLabelEditableState = {
-	editableRef: React.RefObject< HTMLElement | null >;
-	isEditing: boolean;
-	error: string | null;
-	getEditableProps: () => { value: string };
-	setEditingGroupId: ( groupId: string ) => void;
-	editingGroupId: string | null;
-};
-
-export function useCurrentEditableItem(): GroupLabelEditableState {
-	const [ editingGroupId, setEditingGroupId ] = useState< string | null >( null );
-	const currentComponentId = useCurrentComponentId();
-	const overridableProps = useOverridableProps( currentComponentId );
-
-	const allGroupsRecord = overridableProps?.groups?.items ?? {};
-	const currentGroup = editingGroupId ? allGroupsRecord[ editingGroupId ] : null;
-
-	const validateLabel = ( newLabel: string ): string | null => {
-		const otherGroups = Object.fromEntries(
-			Object.entries( allGroupsRecord ).filter( ( [ id ] ) => id !== editingGroupId )
-		);
-
-		return validateGroupLabel( newLabel, otherGroups ) || null;
-	};
-
-	const handleSubmit = ( newLabel: string ) => {
-		if ( ! editingGroupId || ! currentComponentId ) {
-			throw new Error( __( 'Group ID or component ID is missing', 'elementor' ) );
-		}
-
-		renameOverridableGroup( {
-			componentId: currentComponentId,
-			groupId: editingGroupId,
-			label: newLabel,
-		} );
-
-		setDocumentModifiedStatus( true );
-	};
-
-	const {
-		ref: editableRef,
-		openEditMode,
-		isEditing,
-		error,
-		getProps: getEditableProps,
-	} = useEditable( {
-		value: currentGroup?.label ?? '',
-		onSubmit: handleSubmit,
-		validation: validateLabel,
-	} );
-
-	return {
-		editableRef,
-		isEditing,
-		error,
-		getEditableProps,
-		setEditingGroupId: ( groupId ) => {
-			setEditingGroupId( groupId );
-			openEditMode();
-		},
-		editingGroupId,
-	};
-}

package/src/extended/components/component-properties-panel/utils/generate-unique-label.ts

@@ -1,21 +0,0 @@
-import { type OverridablePropsGroup } from '../../../../types';
-
-const DEFAULT_NEW_GROUP_LABEL = 'New group';
-
-export function generateUniqueLabel( groups: OverridablePropsGroup[] ): string {
-	const existingLabels = new Set( groups.map( ( group ) => group.label ) );
-
-	if ( ! existingLabels.has( DEFAULT_NEW_GROUP_LABEL ) ) {
-		return DEFAULT_NEW_GROUP_LABEL;
-	}
-
-	let index = 1;
-	let newLabel = `${ DEFAULT_NEW_GROUP_LABEL }-${ index }`;
-
-	while ( existingLabels.has( newLabel ) ) {
-		index++;
-		newLabel = `${ DEFAULT_NEW_GROUP_LABEL }-${ index }`;
-	}
-
-	return newLabel;
-}

package/src/extended/components/component-properties-panel/utils/validate-group-label.ts

@@ -1,24 +0,0 @@
-import { __ } from '@wordpress/i18n';
-
-import { type OverridablePropsGroup } from '../../../../types';
-
-export const ERROR_MESSAGES = {
-	EMPTY_NAME: __( 'Group name is required', 'elementor' ),
-	DUPLICATE_NAME: __( 'Group name already exists', 'elementor' ),
-} as const;
-
-export function validateGroupLabel( label: string, existingGroups: Record< string, OverridablePropsGroup > ): string {
-	const trimmedLabel = label.trim();
-
-	if ( ! trimmedLabel ) {
-		return ERROR_MESSAGES.EMPTY_NAME;
-	}
-
-	const isDuplicate = Object.values( existingGroups ).some( ( group ) => group.label === trimmedLabel );
-
-	if ( isDuplicate ) {
-		return ERROR_MESSAGES.DUPLICATE_NAME;
-	}
-
-	return '';
-}

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,282 +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 { __getState as getState } from '@elementor/store';
-import { Button, FormLabel, Grid, Popover, Stack, TextField, Typography } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { useComponents } from '../../../hooks/use-components';
-import { selectComponentByUid } from '../../../store/store';
-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 = ( selectComponentByUid( getState(), 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>
-	);
-};