@elementor/editor-components 4.0.0-607 → 4.0.0-609

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "4.0.0-607",
+  "version": "4.0.0-609",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,31 +40,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.0.0-607",
-    "@elementor/editor-canvas": "4.0.0-607",
-    "@elementor/editor-controls": "4.0.0-607",
-    "@elementor/editor-documents": "4.0.0-607",
-    "@elementor/editor-editing-panel": "4.0.0-607",
-    "@elementor/editor-elements": "4.0.0-607",
-    "@elementor/editor-elements-panel": "4.0.0-607",
-    "@elementor/editor-mcp": "4.0.0-607",
-    "@elementor/editor-templates": "4.0.0-607",
-    "@elementor/editor-panels": "4.0.0-607",
-    "@elementor/editor-props": "4.0.0-607",
-    "@elementor/editor-styles-repository": "4.0.0-607",
-    "@elementor/editor-ui": "4.0.0-607",
-    "@elementor/editor-v1-adapters": "4.0.0-607",
-    "@elementor/http-client": "4.0.0-607",
+    "@elementor/editor": "4.0.0-609",
+    "@elementor/editor-canvas": "4.0.0-609",
+    "@elementor/editor-controls": "4.0.0-609",
+    "@elementor/editor-documents": "4.0.0-609",
+    "@elementor/editor-editing-panel": "4.0.0-609",
+    "@elementor/editor-elements": "4.0.0-609",
+    "@elementor/editor-elements-panel": "4.0.0-609",
+    "@elementor/editor-mcp": "4.0.0-609",
+    "@elementor/editor-templates": "4.0.0-609",
+    "@elementor/editor-panels": "4.0.0-609",
+    "@elementor/editor-props": "4.0.0-609",
+    "@elementor/editor-styles-repository": "4.0.0-609",
+    "@elementor/editor-ui": "4.0.0-609",
+    "@elementor/editor-v1-adapters": "4.0.0-609",
+    "@elementor/http-client": "4.0.0-609",
     "@elementor/icons": "^1.68.0",
-    "@elementor/events": "4.0.0-607",
-    "@elementor/query": "4.0.0-607",
-    "@elementor/schema": "4.0.0-607",
-    "@elementor/store": "4.0.0-607",
+    "@elementor/events": "4.0.0-609",
+    "@elementor/query": "4.0.0-609",
+    "@elementor/schema": "4.0.0-609",
+    "@elementor/store": "4.0.0-609",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-607",
+    "@elementor/utils": "4.0.0-609",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "4.0.0-607",
-    "@elementor/editor-current-user": "4.0.0-607"
+    "@elementor/editor-notifications": "4.0.0-609",
+    "@elementor/editor-current-user": "4.0.0-609"
   },
   "peerDependencies": {
     "react": "^18.3.1",

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

@@ -1,230 +1,80 @@
 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 { EditableField, EllipsisWithTooltip, MenuListItem, useEditable, WarningInfotip } from '@elementor/editor-ui';
-import { ComponentsIcon, DotsVerticalIcon } from '@elementor/icons';
-import {
-	bindMenu,
-	bindTrigger,
-	Box,
-	IconButton,
-	ListItemButton,
-	ListItemIcon,
-	Menu,
-	Stack,
-	styled,
-	type Theme,
-	Typography,
-	usePopupState,
-} from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
+import { forwardRef } from 'react';
+import { EditableField, EllipsisWithTooltip } from '@elementor/editor-ui';
+import { ComponentsIcon } from '@elementor/icons';
+import { Box, ListItemButton, ListItemIcon, styled, type Theme, Typography } from '@elementor/ui';
 
-import { useComponentsPermissions } from '../../hooks/use-components-permissions';
-import { archiveComponent } from '../../store/actions/archive-component';
-import { loadComponentsAssets } from '../../store/actions/load-components-assets';
-import { renameComponent } from '../../store/actions/rename-component';
 import { type Component } from '../../types';
-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';
 
-type ComponentItemProps = {
+export type ComponentItemProps = {
 	component: Omit< Component, 'id' > & { id?: number };
+	disabled?: boolean;
+	draggable?: boolean;
+	onDragStart?: React.DragEventHandler;
+	onDragEnd?: React.DragEventHandler;
+	onClick?: () => void;
+	isEditing?: boolean;
+	error?: string | null;
+	nameSlot?: React.ReactNode;
+	endSlot?: React.ReactNode;
 };
 
-export const 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 ] }
+export const ComponentItem = forwardRef< HTMLElement, ComponentItemProps >(
+	(
+		{
+			component,
+			disabled = true,
+			draggable,
+			onDragStart,
+			onDragEnd,
+			onClick,
+			isEditing = false,
+			error = null,
+			nameSlot,
+			endSlot,
+			...props
+		},
+		ref
+	) => {
+		return (
+			<ListItemButton
+				disabled={ disabled }
+				draggable={ draggable }
+				onDragStart={ onDragStart }
+				onDragEnd={ onDragEnd }
+				shape="rounded"
+				ref={ ref }
+				sx={ {
+					border: 'solid 1px',
+					borderColor: 'divider',
+					py: 0.5,
+					px: 1,
+					display: 'flex',
+					width: '100%',
+					alignItems: 'center',
+					gap: 1,
+				} }
+				{ ...props }
 			>
-				<ListItemButton
-					draggable
-					onDragStart={ ( event: React.DragEvent ) => startDragElementFromPanel( componentModel, event ) }
-					onDragEnd={ handleDragEnd }
-					shape="rounded"
-					ref={ itemRef }
-					sx={ {
-						border: 'solid 1px',
-						borderColor: 'divider',
-						py: 0.5,
-						px: 1,
-						display: 'flex',
-						width: '100%',
-						alignItems: 'center',
-						gap: 1,
-					} }
-				>
-					<Box
-						display="flex"
-						alignItems="center"
-						gap={ 1 }
-						minWidth={ 0 }
-						flexGrow={ 1 }
-						onClick={ handleClick }
-					>
-						<ListItemIcon size="tiny">
-							<ComponentsIcon fontSize="tiny" />
-						</ListItemIcon>
-						<Indicator isActive={ isEditing } isError={ !! error }>
-							<Box display="flex" flex={ 1 } minWidth={ 0 } flexGrow={ 1 }>
-								{ isEditing ? (
-									<EditableField
-										ref={ editableRef }
-										as={ Typography }
-										variant="caption"
-										{ ...getEditableProps() }
-									/>
-								) : (
-									<EllipsisWithTooltip
-										title={ component.name }
-										as={ Typography }
-										variant="caption"
-										color="text.primary"
-									/>
-								) }
-							</Box>
-						</Indicator>
-					</Box>
-					{ shouldShowActions && (
-						<IconButton size="tiny" { ...bindTrigger( popupState ) } aria-label="More actions">
-							<DotsVerticalIcon fontSize="tiny" />
-						</IconButton>
-					) }
-				</ListItemButton>
-			</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` );
+				<Box display="flex" alignItems="center" gap={ 1 } minWidth={ 0 } flexGrow={ 1 } onClick={ onClick }>
+					<ListItemIcon size="tiny">
+						<ComponentsIcon fontSize="tiny" />
+					</ListItemIcon>
+					<Indicator isActive={ isEditing } isError={ !! error }>
+						<Box display="flex" flex={ 1 } minWidth={ 0 } flexGrow={ 1 }>
+							{ nameSlot ?? <ComponentName name={ component.name } /> }
+						</Box>
+					</Indicator>
+				</Box>
+				{ endSlot }
+			</ListItemButton>
+		);
 	}
-
-	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;
-};
+);
 
 const Indicator = styled( Box, {
 	shouldForwardProp: ( prop ) => prop !== 'isActive' && prop !== 'isError',
-} )( ( { theme, isActive, isError } ) => ( {
+} )( ( { theme, isActive, isError }: { theme: Theme; isActive: boolean; isError: boolean } ) => ( {
 	display: 'flex',
 	width: '100%',
 	flexGrow: 1,
@@ -246,3 +96,22 @@ const getIndicatorBorder = ( { isActive, isError, theme }: { isActive: boolean;
 
 	return 'none';
 };
+
+type EditableConfig = {
+	ref: React.Ref< HTMLElement >;
+	isEditing: boolean;
+	getProps: () => Record< string, unknown >;
+};
+
+export type ComponentNameProps = {
+	name: string;
+	editable?: EditableConfig;
+};
+
+export function ComponentName( { name, editable }: ComponentNameProps ) {
+	if ( editable?.isEditing ) {
+		return <EditableField ref={ editable.ref } as={ Typography } variant="caption" { ...editable.getProps() } />;
+	}
+
+	return <EllipsisWithTooltip title={ name } as={ Typography } variant="caption" color="text.primary" />;
+}

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

@@ -40,7 +40,7 @@ export function ComponentsList() {
 	);
 }
 
-const EmptyState = () => {
+export const EmptyState = () => {
 	const { canCreate } = useComponentsPermissions();
 
 	return (
@@ -106,7 +106,7 @@ const EmptyState = () => {
 	);
 };
 
-const EmptySearchResult = () => {
+export const EmptySearchResult = () => {
 	const { searchValue, clearSearch } = useSearch();
 	return (
 		<Stack
@@ -163,7 +163,7 @@ const EmptySearchResult = () => {
 	);
 };
 
-const useFilteredComponents = () => {
+export const useFilteredComponents = () => {
 	const { components, isLoading } = useComponents();
 	const { searchValue } = useSearch();
 

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { ThemeProvider } from '@elementor/editor-ui';
 
 import { useComponents } from '../../hooks/use-components';
-import { isProUser } from '../../utils/is-pro-user';
 import { ComponentSearch } from './component-search';
 import { ComponentsList } from './components-list';
 import { ComponentsProNotification } from './components-pro-notification';
@@ -15,7 +14,7 @@ const ComponentsContent = () => {
 	return (
 		<>
 			{ hasComponents && <ComponentSearch /> }
-			{ hasComponents && ! isProUser() && <ComponentsProNotification /> }
+			{ hasComponents && <ComponentsProNotification /> }
 			<ComponentsList />
 		</>
 	);

package/src/components/instance-editing-panel/empty-state.tsx

@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 
 import { useComponentsPermissions } from '../../hooks/use-components-permissions';
 
-export const EmptyState = ( { onEditComponent }: { onEditComponent: () => void } ) => {
+export const EmptyState = ( { onEditComponent }: { onEditComponent?: () => void } ) => {
 	const { canEdit } = useComponentsPermissions();
 
 	const message = canEdit
@@ -34,7 +34,7 @@ export const EmptyState = ( { onEditComponent }: { onEditComponent: () => void }
 			<Typography align="center" variant="caption" maxWidth="170px">
 				{ message }
 			</Typography>
-			{ canEdit && (
+			{ canEdit && !! onEditComponent && (
 				<Button variant="outlined" color="secondary" size="small" sx={ { mt: 1 } } onClick={ onEditComponent }>
 					<PencilIcon fontSize="small" />
 					{ __( 'Edit component', 'elementor' ) }

package/src/components/instance-editing-panel/instance-editing-panel.tsx

@@ -1,58 +1,26 @@
 import * as React from 'react';
-import { ControlAdornmentsProvider } from '@elementor/editor-controls';
-import { getFieldIndicators, useElement } from '@elementor/editor-editing-panel';
-import { useElementSetting, useSelectedElement } from '@elementor/editor-elements';
-import { PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
-import { EllipsisWithTooltip } from '@elementor/editor-ui';
-import { ComponentsIcon, PencilIcon } from '@elementor/icons';
-import { Box, Divider, IconButton, Stack, Tooltip } from '@elementor/ui';
+import { PencilIcon } from '@elementor/icons';
+import { Box } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { useComponentsPermissions } from '../../hooks/use-components-permissions';
-import { useSanitizeOverridableProps } from '../../hooks/use-sanitize-overridable-props';
-import {
-	componentInstancePropTypeUtil,
-	type ComponentInstancePropValue,
-} from '../../prop-types/component-instance-prop-type';
 import { ComponentInstanceProvider } from '../../provider/component-instance-context';
-import { useComponent } from '../../store/store';
-import { type OverridablePropsGroup } from '../../types';
-import { switchToComponent } from '../../utils/switch-to-component';
 import { EmptyState } from './empty-state';
-import { OverridePropsGroup } from './override-props-group';
+import { InstancePanelBody } from './instance-panel-body';
+import { EditComponentAction, InstancePanelHeader } from './instance-panel-header';
+import { useInstancePanelData } from './use-instance-panel-data';
 
 export function InstanceEditingPanel() {
-	const { canEdit } = useComponentsPermissions();
+	const data = useInstancePanelData();
 
-	const settings = useComponentInstanceSettings();
-
-	const componentId = settings?.component_id?.value;
-
-	const overrides = settings?.overrides?.value;
-
-	const component = useComponent( componentId ?? null );
-
-	const componentInstanceId = useSelectedElement()?.element?.id;
-
-	const overridableProps = useSanitizeOverridableProps( componentId ?? null, componentInstanceId );
-
-	if ( ! componentId || ! overridableProps || ! component ) {
+	if ( ! data ) {
 		return null;
 	}
 
+	const { componentId, component, overrides, overridableProps, groups, isEmpty, componentInstanceId } = data;
+
 	/* translators: %s: component name. */
 	const panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', component.name );
 
-	const handleEditComponent = () => switchToComponent( componentId, componentInstanceId );
-
-	const isNonEmptyGroup = ( group: OverridablePropsGroup | null ) => group !== null && group.props.length > 0;
-
-	const groups = overridableProps.groups.order
-		.map( ( groupId ) => overridableProps.groups.items[ groupId ] ?? null )
-		.filter( isNonEmptyGroup );
-
-	const isEmpty = groups.length === 0 || Object.keys( overridableProps.props ).length === 0;
-
 	return (
 		<Box data-testid="instance-editing-panel">
 			<ComponentInstanceProvider
@@ -60,44 +28,17 @@ export function InstanceEditingPanel() {
 				overrides={ overrides }
 				overridableProps={ overridableProps }
 			>
-				<PanelHeader sx={ { justifyContent: 'start', px: 2 } }>
-					<Stack direction="row" alignItems="center" flexGrow={ 1 } gap={ 1 } maxWidth="100%">
-						<ComponentsIcon fontSize="small" sx={ { color: 'text.tertiary' } } />
-						<EllipsisWithTooltip title={ component.name } as={ PanelHeaderTitle } sx={ { flexGrow: 1 } } />
-						{ canEdit && (
-							<Tooltip title={ panelTitle }>
-								<IconButton size="tiny" onClick={ handleEditComponent } aria-label={ panelTitle }>
-									<PencilIcon fontSize="tiny" />
-								</IconButton>
-							</Tooltip>
-						) }
-					</Stack>
-				</PanelHeader>
-				<PanelBody>
-					<ControlAdornmentsProvider items={ getFieldIndicators( 'settings' ) }>
-						{ isEmpty ? (
-							<EmptyState onEditComponent={ handleEditComponent } />
-						) : (
-							<Stack direction="column" alignItems="stretch">
-								{ groups.map( ( group ) => (
-									<React.Fragment key={ group.id + componentInstanceId }>
-										<OverridePropsGroup group={ group } />
-										<Divider />
-									</React.Fragment>
-								) ) }
-							</Stack>
-						) }
-					</ControlAdornmentsProvider>
-				</PanelBody>
+				<InstancePanelHeader
+					componentName={ component.name }
+					actions={ <EditComponentAction disabled label={ panelTitle } icon={ PencilIcon } /> }
+				/>
+				<InstancePanelBody
+					groups={ groups }
+					isEmpty={ isEmpty }
+					emptyState={ <EmptyState /> }
+					componentInstanceId={ componentInstanceId }
+				/>
 			</ComponentInstanceProvider>
 		</Box>
 	);
 }
-
-function useComponentInstanceSettings() {
-	const { element } = useElement();
-
-	const settings = useElementSetting< ComponentInstancePropValue >( element.id, 'component_instance' );
-
-	return componentInstancePropTypeUtil.extract( settings );
-}

package/src/components/instance-editing-panel/instance-panel-body.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { ControlAdornmentsProvider } from '@elementor/editor-controls';
+import { getFieldIndicators } from '@elementor/editor-editing-panel';
+import { PanelBody } from '@elementor/editor-panels';
+import { Divider, Stack } from '@elementor/ui';
+
+import { type OverridablePropsGroup } from '../../types';
+import { OverridePropsGroup } from './override-props-group';
+
+type InstancePanelBodyProps = {
+	groups: OverridablePropsGroup[];
+	isEmpty: boolean;
+	emptyState: React.ReactNode;
+	componentInstanceId?: string;
+};
+
+export function InstancePanelBody( { groups, isEmpty, emptyState, componentInstanceId }: InstancePanelBodyProps ) {
+	return (
+		<PanelBody>
+			<ControlAdornmentsProvider items={ getFieldIndicators( 'settings' ) }>
+				{ isEmpty ? (
+					emptyState
+				) : (
+					<Stack direction="column" alignItems="stretch">
+						{ groups.map( ( group ) => (
+							<React.Fragment key={ group.id + componentInstanceId }>
+								<OverridePropsGroup group={ group } />
+								<Divider />
+							</React.Fragment>
+						) ) }
+					</Stack>
+				) }
+			</ControlAdornmentsProvider>
+		</PanelBody>
+	);
+}

package/src/components/instance-editing-panel/instance-panel-header.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { type ElementType } from 'react';
+import { PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
+import { EllipsisWithTooltip } from '@elementor/editor-ui';
+import { ComponentsIcon } from '@elementor/icons';
+import { IconButton, Stack, Tooltip } from '@elementor/ui';
+
+type InstancePanelHeaderProps = {
+	componentName: string;
+	actions?: React.ReactNode;
+};
+
+export function InstancePanelHeader( { componentName, actions }: InstancePanelHeaderProps ) {
+	return (
+		<PanelHeader sx={ { justifyContent: 'start', px: 2 } }>
+			<Stack direction="row" alignItems="center" flexGrow={ 1 } gap={ 1 } maxWidth="100%">
+				<ComponentsIcon fontSize="small" sx={ { color: 'text.tertiary' } } />
+				<EllipsisWithTooltip title={ componentName } as={ PanelHeaderTitle } sx={ { flexGrow: 1 } } />
+				{ actions }
+			</Stack>
+		</PanelHeader>
+	);
+}
+
+type EditComponentActionProps = {
+	label: string;
+	onClick?: () => void;
+	disabled?: boolean;
+	icon: ElementType;
+};
+
+export function EditComponentAction( { label, onClick, disabled = false, icon: Icon }: EditComponentActionProps ) {
+	return (
+		<Tooltip title={ label }>
+			<IconButton size="tiny" onClick={ onClick } aria-label={ label } disabled={ disabled }>
+				<Icon fontSize="tiny" />
+			</IconButton>
+		</Tooltip>
+	);
+}