@elementor/editor-components 3.33.0-99 → 3.35.0-325

package/src/api.ts

@@ -1,22 +1,35 @@
-import { type V1ElementModelProps } from '@elementor/editor-elements';
+import { type V1ElementData } from '@elementor/editor-elements';
+import { ajax } from '@elementor/editor-v1-adapters';
 import { type HttpResponse, httpService } from '@elementor/http-client';
 
+import { type DocumentSaveStatus, type OverridableProps, type PublishedComponent } from './types';
+
 const BASE_URL = 'elementor/v1/components';
 
-type CreateComponentPayload = {
-	name: string;
-	content: V1ElementModelProps[];
+export type CreateComponentPayload = {
+	status: DocumentSaveStatus;
+	items: Array< {
+		uid: string;
+		title: string;
+		elements: V1ElementData[];
+	} >;
 };
 
-type GetComponentResponse = Array< {
-	component_id: number;
-	name: string;
-} >;
-
-export type CreateComponentResponse = {
-	component_id: number;
+type ComponentLockStatusResponse = {
+	is_current_user_allow_to_edit: boolean;
+	locked_by: string;
 };
 
+type GetComponentResponse = Array< PublishedComponent >;
+
+export type CreateComponentResponse = Record< string, number >;
+
+export const getParams = ( id: number ) => ( {
+	action: 'get_document_config',
+	unique_id: `document-config-${ id }`,
+	data: { id },
+} );
+
 export const apiClient = {
 	get: () =>
 		httpService()
@@ -26,4 +39,51 @@ export const apiClient = {
 		httpService()
 			.post< HttpResponse< CreateComponentResponse > >( `${ BASE_URL }`, payload )
 			.then( ( res ) => res.data.data ),
+	updateStatuses: ( ids: number[], status: DocumentSaveStatus ) =>
+		httpService().put( `${ BASE_URL }/status`, {
+			ids,
+			status,
+		} ),
+	getComponentConfig: ( id: number ) => ajax.load< { id: number }, V1ElementData >( getParams( id ) ),
+	invalidateComponentConfigCache: ( id: number ) => ajax.invalidateCache< { id: number } >( getParams( id ) ),
+	getComponentLockStatus: async ( componentId: number ) =>
+		await httpService()
+			.get< { data: ComponentLockStatusResponse } >( `${ BASE_URL }/lock-status`, {
+				params: {
+					componentId,
+				},
+			} )
+			.then( ( res ) => {
+				const { is_current_user_allow_to_edit: isAllowedToSwitchDocument, locked_by: lockedBy } = res.data.data;
+				return { isAllowedToSwitchDocument, lockedBy: lockedBy || '' };
+			} ),
+	lockComponent: async ( componentId: number ) =>
+		await httpService()
+			.post< { success: boolean } >( `${ BASE_URL }/lock`, {
+				componentId,
+			} )
+			.then( ( res ) => res.data ),
+	unlockComponent: async ( componentId: number ) =>
+		await httpService()
+			.post< { success: boolean } >( `${ BASE_URL }/unlock`, {
+				componentId,
+			} )
+			.then( ( res ) => res.data ),
+	getOverridableProps: async ( componentId: number ) =>
+		await httpService()
+			.get< HttpResponse< OverridableProps > >( `${ BASE_URL }/overridable-props`, {
+				params: {
+					componentId: componentId.toString(),
+				},
+			} )
+			.then( ( res ) => res.data.data ),
+	updateArchivedComponents: async ( componentIds: number[] ) =>
+		await httpService()
+			.post< { data: { failedIds: number[]; successIds: number[]; success: boolean } } >(
+				`${ BASE_URL }/archive`,
+				{
+					componentIds,
+				}
+			)
+			.then( ( res ) => res.data.data ),
 };

package/src/component-instance-transformer.ts

@@ -0,0 +1,24 @@
+import { createTransformer } from '@elementor/editor-canvas';
+import { __getState as getState } from '@elementor/store';
+
+import { selectUnpublishedComponents } from './store/store';
+import { getComponentDocumentData } from './utils/component-document-data';
+
+export const componentInstanceTransformer = createTransformer(
+	async ( { component_id: id }: { component_id: number | string } ) => {
+		const unpublishedComponents = selectUnpublishedComponents( getState() );
+
+		const unpublishedComponent = unpublishedComponents.find( ( { uid } ) => uid === id );
+		if ( unpublishedComponent ) {
+			return structuredClone( unpublishedComponent.elements );
+		}
+
+		if ( typeof id !== 'number' ) {
+			throw new Error( `Component ID "${ id }" not found.` );
+		}
+
+		const data = await getComponentDocumentData( id );
+
+		return data?.elements ?? [];
+	}
+);

package/src/component-overridable-transformer.ts

@@ -0,0 +1,28 @@
+import { createTransformer, settingsTransformersRegistry } from '@elementor/editor-canvas';
+
+import { type ComponentOverridable } from './types';
+
+export const componentOverridableTransformer = createTransformer(
+	async ( value: ComponentOverridable, options: { key: string; signal?: AbortSignal } ) => {
+		// todo: render component overrides
+		return await transformOriginValue( value, options );
+	}
+);
+
+async function transformOriginValue( value: ComponentOverridable, options: { key: string; signal?: AbortSignal } ) {
+	if ( ! value.origin_value || ! value.origin_value.value || ! value.origin_value.$$type ) {
+		return null;
+	}
+
+	const transformer = settingsTransformersRegistry.get( value.origin_value.$$type );
+
+	if ( ! transformer ) {
+		return null;
+	}
+
+	try {
+		return await transformer( value.origin_value.value, options );
+	} catch {
+		return null;
+	}
+}

package/src/components/component-panel-header/component-badge.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { useEffect, useRef } from 'react';
+import { SettingsIcon } from '@elementor/icons';
+import { Badge, Box, keyframes, styled, ToggleButton } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+export const ComponentsBadge = ( { overridesCount }: { overridesCount: number } ) => {
+	const prevCount = usePrevious( overridesCount );
+
+	const isFirstOverride = prevCount === 0 && overridesCount === 1;
+
+	return (
+		<StyledBadge
+			color="primary"
+			key={ overridesCount }
+			invisible={ overridesCount === 0 }
+			animate={ isFirstOverride }
+			anchorOrigin={ { vertical: 'top', horizontal: 'right' } }
+			badgeContent={
+				<Box sx={ { animation: ! isFirstOverride ? `${ slideUp } 300ms ease-out` : 'none' } }>
+					{ overridesCount }
+				</Box>
+			}
+		>
+			<ToggleButton value="overrides" size="tiny" aria-label={ __( 'View overrides', 'elementor' ) }>
+				<SettingsIcon fontSize="tiny" />
+			</ToggleButton>
+		</StyledBadge>
+	);
+};
+
+const StyledBadge = styled( Badge, { shouldForwardProp: ( prop ) => prop !== 'animate' } )(
+	( { theme, animate } ) => ( {
+		'& .MuiBadge-badge': {
+			minWidth: theme.spacing( 2 ),
+			height: theme.spacing( 2 ),
+			minHeight: theme.spacing( 2 ),
+			maxWidth: theme.spacing( 2 ),
+			fontSize: theme.typography.caption.fontSize as string,
+			animation: animate ? `${ bounceIn } 300ms ease-out` : 'none',
+		},
+	} )
+);
+
+function usePrevious< T >( value: T ) {
+	const ref = useRef< T >( value );
+	useEffect( () => {
+		ref.current = value;
+	}, [ value ] );
+	return ref.current;
+}
+
+const bounceIn = keyframes`
+	0% { transform: scale(0) translate(50%, 50%); opacity: 0; }
+	70% { transform: scale(1.1) translate(50%, -50%); opacity: 1; }
+	100% { transform: scale(1) translate(50%, -50%); opacity: 1; }
+`;
+
+const slideUp = keyframes`
+	from { transform: translateY(100%); opacity: 0; }
+	to { transform: translateY(0); opacity: 1; }
+`;

package/src/components/component-panel-header/component-panel-header.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { getV1DocumentsManager } from '@elementor/editor-documents';
+import { ArrowLeftIcon, ComponentsIcon } from '@elementor/icons';
+import { __useSelector as useSelector } from '@elementor/store';
+import { Box, Divider, IconButton, Stack, Tooltip, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useNavigateBack } from '../../hooks/use-navigate-back';
+import { selectCurrentComponentId } from '../../store/store';
+import { ComponentsBadge } from './component-badge';
+import { useOverridableProps } from './use-overridable-props';
+
+export const ComponentPanelHeader = () => {
+	const currentComponentId = useSelector( selectCurrentComponentId );
+	const overridableProps = useOverridableProps( currentComponentId );
+	const onBack = useNavigateBack();
+	const componentName = getComponentName();
+
+	const overridesCount = overridableProps ? Object.keys( overridableProps.props ).length : 0;
+
+	if ( ! currentComponentId ) {
+		return null;
+	}
+
+	return (
+		<Box>
+			<Stack
+				direction="row"
+				alignItems="center"
+				justifyContent="space-between"
+				sx={ { height: 48, pl: 1.5, pr: 2, py: 1 } }
+			>
+				<Stack direction="row" alignItems="center" gap={ 0.5 }>
+					<Tooltip title={ __( 'Back', 'elementor' ) }>
+						<IconButton size="tiny" onClick={ onBack } aria-label={ __( 'Back', 'elementor' ) }>
+							<ArrowLeftIcon />
+						</IconButton>
+					</Tooltip>
+					<Stack direction="row" alignItems="center" gap={ 0.5 }>
+						<ComponentsIcon color="secondary" fontSize="tiny" />
+						<Typography variant="caption" sx={ { fontWeight: 500 } }>
+							{ componentName }
+						</Typography>
+					</Stack>
+				</Stack>
+				<ComponentsBadge overridesCount={ overridesCount } />
+			</Stack>
+			<Divider />
+		</Box>
+	);
+};
+
+function getComponentName() {
+	const documentsManager = getV1DocumentsManager();
+	const currentDocument = documentsManager.getCurrent();
+
+	return currentDocument?.container?.settings?.get( 'post_title' ) ?? '';
+}

package/src/components/component-panel-header/use-overridable-props.ts

@@ -0,0 +1,14 @@
+import { __useSelector as useSelector } from '@elementor/store';
+
+import { type ComponentsSlice, selectOverridableProps } from '../../store/store';
+import { type ComponentId, type OverridableProps } from '../../types';
+
+export function useOverridableProps( componentId: ComponentId | null ): OverridableProps | undefined {
+	return useSelector( ( state: ComponentsSlice ) => {
+		if ( ! componentId ) {
+			return undefined;
+		}
+
+		return selectOverridableProps( state, componentId );
+	} );
+}

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,115 @@
+import * as React from 'react';
+import { endDragElementFromPanel, startDragElementFromPanel } from '@elementor/editor-canvas';
+import { dropElement, type DropElementParams, type V1ElementData } from '@elementor/editor-elements';
+import { MenuListItem } from '@elementor/editor-ui';
+import { ComponentsIcon, DotsVerticalIcon } from '@elementor/icons';
+import {
+	bindMenu,
+	bindTrigger,
+	Box,
+	IconButton,
+	ListItemButton,
+	ListItemIcon,
+	ListItemText,
+	Menu,
+	Typography,
+	usePopupState,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { archiveComponent } from '../../store/actions/archive-component';
+import { loadComponentsAssets } from '../../store/actions/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 popupState = usePopupState( {
+		variant: 'popover',
+		disableAutoFocus: true,
+	} );
+
+	const handleClick = () => {
+		addComponentToPage( componentModel );
+	};
+
+	const handleDragEnd = () => {
+		loadComponentsAssets( [ componentModel as V1ElementData ] );
+
+		endDragElementFromPanel();
+	};
+
+	const handleArchiveClick = () => {
+		popupState.close();
+
+		if ( ! component.id ) {
+			throw new Error( 'Component ID is required' );
+		}
+
+		archiveComponent( component.id );
+	};
+
+	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>
+				<IconButton size="tiny" { ...bindTrigger( popupState ) } aria-label="More actions">
+					<DotsVerticalIcon fontSize="tiny" />
+				</IconButton>
+			</ListItemButton>
+			<Menu
+				{ ...bindMenu( popupState ) }
+				anchorOrigin={ {
+					vertical: 'bottom',
+					horizontal: 'right',
+				} }
+				transformOrigin={ {
+					vertical: 'top',
+					horizontal: 'right',
+				} }
+			>
+				<MenuListItem sx={ { minWidth: '160px' } } onClick={ handleArchiveClick }>
+					{ __( 'Archive', 'elementor' ) }
+				</MenuListItem>
+			</Menu>
+		</>
+	);
+};
+
+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';