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

package/src/components/instance-editing-panel/use-instance-panel-data.ts

@@ -0,0 +1,57 @@
+import { useElement } from '@elementor/editor-editing-panel';
+import { useElementSetting, useSelectedElement } from '@elementor/editor-elements';
+
+import { useSanitizeOverridableProps } from '../../hooks/use-sanitize-overridable-props';
+import { type ComponentInstanceOverridesPropValue } from '../../prop-types/component-instance-overrides-prop-type';
+import {
+	componentInstancePropTypeUtil,
+	type ComponentInstancePropValue,
+} from '../../prop-types/component-instance-prop-type';
+import { useComponent } from '../../store/store';
+import { type Component, type OverridablePropsGroup } from '../../types';
+
+type InstancePanelData = {
+	componentId: number;
+	component: Component;
+	overrides: ComponentInstanceOverridesPropValue;
+	overridableProps: NonNullable< ReturnType< typeof useSanitizeOverridableProps > >;
+	groups: OverridablePropsGroup[];
+	isEmpty: boolean;
+	componentInstanceId: string | undefined;
+};
+
+export function useInstancePanelData(): InstancePanelData | null {
+	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 ) {
+		return null;
+	}
+
+	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 { componentId, component, overrides, overridableProps, groups, isEmpty, componentInstanceId };
+}
+
+function useComponentInstanceSettings() {
+	const { element } = useElement();
+
+	const settings = useElementSetting< ComponentInstancePropValue >( element.id, 'component_instance' );
+
+	return componentInstancePropTypeUtil.extract( settings );
+}

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

@@ -0,0 +1,180 @@
+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

@@ -0,0 +1,58 @@
+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/create-component-form/create-component-form.tsx

@@ -11,11 +11,11 @@ import { __ } from '@wordpress/i18n';
 import { useComponents } from '../../../hooks/use-components';
 import { selectComponentByUid } from '../../../store/store';
 import { type ComponentFormValues, type PublishedComponent } from '../../../types';
-import { createBaseComponentSchema, createSubmitComponentSchema } from '../../../utils/component-form-schema';
 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,

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { PencilIcon } from '@elementor/icons';
+import { Box } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { EmptyState } from '../../../components/instance-editing-panel/empty-state';
+import { InstancePanelBody } from '../../../components/instance-editing-panel/instance-panel-body';
+import {
+	EditComponentAction,
+	InstancePanelHeader,
+} from '../../../components/instance-editing-panel/instance-panel-header';
+import { useInstancePanelData } from '../../../components/instance-editing-panel/use-instance-panel-data';
+import { useComponentsPermissions } from '../../../hooks/use-components-permissions';
+import { ComponentInstanceProvider } from '../../../provider/component-instance-context';
+import { switchToComponent } from '../../../utils/switch-to-component';
+
+export function ExtendedInstanceEditingPanel() {
+	const { canEdit } = useComponentsPermissions();
+	const data = useInstancePanelData();
+
+	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 );
+
+	return (
+		<Box data-testid="instance-editing-panel">
+			<ComponentInstanceProvider
+				componentId={ componentId }
+				overrides={ overrides }
+				overridableProps={ overridableProps }
+			>
+				<InstancePanelHeader
+					componentName={ component.name }
+					actions={
+						canEdit ? (
+							<EditComponentAction
+								label={ panelTitle }
+								onClick={ handleEditComponent }
+								icon={ PencilIcon }
+							/>
+						) : undefined
+					}
+				/>
+				<InstancePanelBody
+					groups={ groups }
+					isEmpty={ isEmpty }
+					emptyState={ <EmptyState onEditComponent={ canEdit ? handleEditComponent : undefined } /> }
+					componentInstanceId={ componentInstanceId }
+				/>
+			</ComponentInstanceProvider>
+		</Box>
+	);
+}

package/src/extended/init.ts

@@ -1,17 +1,26 @@
 import { injectIntoLogic, injectIntoTop } from '@elementor/editor';
 import { registerControlReplacement } from '@elementor/editor-controls';
 import { getV1CurrentDocument } from '@elementor/editor-documents';
-import { FIELD_TYPE, injectIntoPanelHeaderTop, registerFieldIndicator } from '@elementor/editor-editing-panel';
+import {
+	FIELD_TYPE,
+	injectIntoPanelHeaderTop,
+	registerEditingPanelReplacement,
+	registerFieldIndicator,
+} from '@elementor/editor-editing-panel';
+import { registerTab } from '@elementor/editor-elements-panel';
 import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { registerDataHook } from '@elementor/editor-v1-adapters';
+import { __ } from '@wordpress/i18n';
 
 import { componentOverridablePropTypeUtil } from '../prop-types/component-overridable-prop-type';
 import { type ExtendedWindow } from '../types';
 import { onElementDrop } from '../utils/tracking';
 import { ComponentPanelHeader } from './components/component-panel-header/component-panel-header';
 import { panel as componentPropertiesPanel } from './components/component-properties-panel/component-properties-panel';
+import { ExtendedComponents } from './components/components-tab/components';
 import { CreateComponentForm } from './components/create-component-form/create-component-form';
 import { EditComponent } from './components/edit-component/edit-component';
+import { ExtendedInstanceEditingPanel } from './components/instance-editing-panel/instance-editing-panel';
 import { OverridablePropControl } from './components/overridable-props/overridable-prop-control';
 import { OverridablePropIndicator } from './components/overridable-props/overridable-prop-indicator';
 import { COMPONENT_DOCUMENT_TYPE, OVERRIDABLE_PROP_REPLACEMENT_ID } from './consts';
@@ -24,6 +33,18 @@ import { initRevertOverridablesOnCopyOrDuplicate } from './sync/revert-overridab
 import { SanitizeOverridableProps } from './sync/sanitize-overridable-props';
 
 export function initExtended() {
+	registerEditingPanelReplacement( {
+		id: 'component-instance-edit-panel',
+		condition: ( _, elementType ) => elementType.key === 'e-component',
+		component: ExtendedInstanceEditingPanel,
+	} );
+
+	registerTab( {
+		id: 'components',
+		label: __( 'Components', 'elementor' ),
+		component: ExtendedComponents,
+	} );
+
 	registerPanel( componentPropertiesPanel );
 
 	registerDataHook( 'dependency', 'editor/documents/close', ( args ) => {

package/src/{store → extended/store}/actions/archive-component.ts

@@ -3,7 +3,7 @@ import { type NotificationData, notify } from '@elementor/editor-notifications';
 import { __dispatch as dispatch } from '@elementor/store';
 import { __ } from '@wordpress/i18n';
 
-import { slice } from '../store';
+import { slice } from '../../../store/store';
 
 const successNotification = ( componentId: number, componentName: string ): NotificationData => ( {
 	type: 'success',

package/src/{store → extended/store}/actions/rename-component.ts

@@ -2,8 +2,8 @@ import { getV1DocumentsManager, setDocumentModifiedStatus } from '@elementor/edi
 import { getAllDescendants, type V1Element } from '@elementor/editor-elements';
 import { __dispatch as dispatch } from '@elementor/store';
 
-import { COMPONENT_WIDGET_TYPE } from '../../create-component-type';
-import { slice } from '../store';
+import { COMPONENT_WIDGET_TYPE } from '../../../create-component-type';
+import { slice } from '../../../store/store';
 
 const TITLE_EXTERNAL_CHANGE_COMMAND = 'title_external_change';
 

package/src/{utils → extended/utils}/component-name-validation.ts

@@ -1,6 +1,6 @@
 import { __getState as getState } from '@elementor/store';
 
-import { selectComponents } from '../store/store';
+import { selectComponents } from '../../store/store';
 import { createSubmitComponentSchema } from './component-form-schema';
 
 type ValidationResult = { isValid: true; errorMessage: null } | { isValid: false; errorMessage: string };

package/src/extended/utils/replace-element-with-component.ts

@@ -1,6 +1,6 @@
 import { replaceElement, type V1ElementData } from '@elementor/editor-elements';
 
-import { type ComponentInstanceParams, createComponentModel } from '../../utils/create-component-model';
+import { type ComponentInstanceParams, createComponentModel } from './create-component-model';
 
 export const replaceElementWithComponent = async ( element: V1ElementData, component: ComponentInstanceParams ) => {
 	return await replaceElement( {