@elementor/editor-editing-panel 4.1.0-838 → 4.1.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.1.0-838",
+  "version": "4.1.0-beta2",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,31 +39,28 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.1.0-838",
-    "@elementor/editor-canvas": "4.1.0-838",
-    "@elementor/editor-controls": "4.1.0-838",
-    "@elementor/editor-documents": "4.1.0-838",
-    "@elementor/editor-elements": "4.1.0-838",
-    "@elementor/editor-interactions": "4.1.0-838",
-    "@elementor/editor-notifications": "4.1.0-838",
-    "@elementor/editor-panels": "4.1.0-838",
-    "@elementor/editor-props": "4.1.0-838",
-    "@elementor/editor-responsive": "4.1.0-838",
-    "@elementor/editor-styles": "4.1.0-838",
-    "@elementor/editor-styles-repository": "4.1.0-838",
-    "@elementor/editor-ui": "4.1.0-838",
-    "@elementor/editor-v1-adapters": "4.1.0-838",
-    "@elementor/http-client": "4.1.0-838",
+    "@elementor/editor": "4.1.0-beta2",
+    "@elementor/editor-canvas": "4.1.0-beta2",
+    "@elementor/editor-controls": "4.1.0-beta2",
+    "@elementor/editor-documents": "4.1.0-beta2",
+    "@elementor/editor-elements": "4.1.0-beta2",
+    "@elementor/editor-interactions": "4.1.0-beta2",
+    "@elementor/editor-panels": "4.1.0-beta2",
+    "@elementor/editor-props": "4.1.0-beta2",
+    "@elementor/editor-responsive": "4.1.0-beta2",
+    "@elementor/editor-styles": "4.1.0-beta2",
+    "@elementor/editor-styles-repository": "4.1.0-beta2",
+    "@elementor/editor-ui": "4.1.0-beta2",
+    "@elementor/editor-v1-adapters": "4.1.0-beta2",
     "@elementor/icons": "~1.75.1",
-    "@elementor/editor-variables": "4.1.0-838",
-    "@elementor/locations": "4.1.0-838",
-    "@elementor/menus": "4.1.0-838",
-    "@elementor/query": "4.1.0-838",
-    "@elementor/schema": "4.1.0-838",
-    "@elementor/session": "4.1.0-838",
+    "@elementor/editor-variables": "4.1.0-beta2",
+    "@elementor/locations": "4.1.0-beta2",
+    "@elementor/menus": "4.1.0-beta2",
+    "@elementor/schema": "4.1.0-beta2",
+    "@elementor/session": "4.1.0-beta2",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.1.0-838",
-    "@elementor/wp-media": "4.1.0-838",
+    "@elementor/utils": "4.1.0-beta2",
+    "@elementor/wp-media": "4.1.0-beta2",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/apply-unapply-actions.ts

@@ -2,6 +2,7 @@ import { setDocumentModifiedStatus } from '@elementor/editor-documents';
 import { getElementSetting, updateElementSettings } from '@elementor/editor-elements';
 import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
 import { type StyleDefinitionID } from '@elementor/editor-styles';
+import { stylesRepository } from '@elementor/editor-styles-repository';
 
 // Externalized for use outside of Hooks
 
@@ -16,6 +17,21 @@ export function doApplyClasses( elementId: string, classIds: StyleDefinitionID[]
 		withHistory: false,
 	} );
 	setDocumentModifiedStatus( true );
+
+	ensureClassesAreLoaded( classIds );
+}
+
+function ensureClassesAreLoaded( classIds: StyleDefinitionID[] ) {
+	const providers = stylesRepository.getProviders();
+
+	classIds.forEach( ( classId ) => {
+		stylesRepository.getProviderByKey( classId )?.actions.get( classId );
+		const owningProvider = providers.find( ( provider ) =>
+			provider.actions.all().some( ( style ) => style.id === classId )
+		);
+
+		owningProvider?.actions.get( classId );
+	} );
 }
 
 export function doUnapplyClass( elementId: string, classId: StyleDefinitionID, classesPropType = 'classes' ) {
@@ -24,7 +40,7 @@ export function doUnapplyClass( elementId: string, classId: StyleDefinitionID, c
 		return false;
 	}
 
-	const updatedClassIds = appliedClasses.filter( ( id ) => id !== classId );
+	const updatedClassIds = appliedClasses.filter( ( id: StyleDefinitionID ) => id !== classId );
 	doApplyClasses( elementId, updatedClassIds, classesPropType );
 	return true;
 }

package/src/components/creatable-autocomplete/use-filter-options.ts

@@ -2,6 +2,12 @@ import { createFilterOptions } from '@elementor/ui';
 
 import { type InternalOption, type Option } from './types';
 
+const STRIP_NON_CLASS_CHARS = /[^a-zA-Z0-9_-]/g;
+
+function normalizeClassSearch( value: string ) {
+	return value.replace( STRIP_NON_CLASS_CHARS, '' ).toLowerCase();
+}
+
 export function useFilterOptions< TOption extends Option >( parameters: {
 	options: TOption[];
 	selected: TOption[];
@@ -10,7 +16,9 @@ export function useFilterOptions< TOption extends Option >( parameters: {
 } ) {
 	const { options, selected, onCreate, entityName } = parameters;
 
-	const filter = createFilterOptions< InternalOption< TOption > >();
+	const filter = createFilterOptions< InternalOption< TOption > >( {
+		matchFrom: 'any',
+	} );
 
 	const filterOptions = (
 		optionList: InternalOption< TOption >[],
@@ -23,7 +31,7 @@ export function useFilterOptions< TOption extends Option >( parameters: {
 
 		const filteredOptions = filter(
 			optionList.filter( ( option ) => ! selectedValues.includes( option.value ) ),
-			params
+			{ ...params, inputValue: normalizeClassSearch( params.inputValue ) }
 		);
 
 		const isExisting = options.some( ( option ) => params.inputValue === option.label );

package/src/components/css-classes/css-class-selector.tsx

@@ -11,11 +11,13 @@ import {
 	validateStyleLabel,
 } from '@elementor/editor-styles-repository';
 import { InfoAlert, WarningInfotip } from '@elementor/editor-ui';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { ColorSwatchIcon, MapPinIcon } from '@elementor/icons';
 import { createLocation } from '@elementor/locations';
 import {
 	type AutocompleteChangeReason,
 	Box,
+	Button,
 	Chip,
 	type ChipOwnProps,
 	FormLabel,
@@ -43,6 +45,22 @@ import { useApplyClass, useCreateAndApplyClass, useUnapplyClass } from './use-ap
 const ID = 'elementor-css-class-selector';
 const TAGS_LIMIT = 50;
 
+const EVENT_OPEN_GLOBAL_CLASSES_MANAGER = 'elementor/open-global-classes-manager';
+const EVENT_TOGGLE_DESIGN_SYSTEM = 'elementor/toggle-design-system';
+
+function openClassManagerPanel() {
+	if ( isExperimentActive( 'e_editor_design_system_panel' ) ) {
+		window.dispatchEvent(
+			new CustomEvent( EVENT_TOGGLE_DESIGN_SYSTEM, {
+				detail: { tab: 'classes' as const },
+			} )
+		);
+		return;
+	}
+
+	window.dispatchEvent( new CustomEvent( EVENT_OPEN_GLOBAL_CLASSES_MANAGER ) );
+}
+
 type StyleDefOption = Option & {
 	color: ChipOwnProps[ 'color' ];
 	icon: ReactElement | null;
@@ -74,7 +92,7 @@ export function CssClassSelector() {
 	const [ renameError, setRenameError ] = useState< string | null >( null );
 
 	const handleSelect = useHandleSelect();
-	const { create, validate, entityName } = useCreateAction();
+	const { create, validate, entityName, isAtLimit, limitCount } = useCreateAction();
 
 	const appliedOptions = useAppliedOptions( options );
 	const active = appliedOptions.find( ( option ) => option.value === activeId ) ?? EMPTY_OPTION;
@@ -114,7 +132,13 @@ export function CssClassSelector() {
 					onCreate={ create ?? undefined }
 					validate={ validate ?? undefined }
 					limitTags={ TAGS_LIMIT }
-					renderEmptyState={ EmptyState }
+					renderEmptyState={
+						isAtLimit && typeof limitCount === 'number'
+							? ( props ) => (
+									<LimitReachedEmptyState limitCount={ limitCount } onClear={ props.onClear } />
+							  )
+							: EmptyState
+					}
 					getLimitTagsText={ ( more ) => (
 						<Chip size="tiny" variant="standard" label={ `+${ more }` } clickable />
 					) }
@@ -166,7 +190,9 @@ export function CssClassSelector() {
 	);
 }
 
-const EmptyState = ( { searchValue, onClear }: { searchValue: string; onClear: () => void } ) => (
+type EmptyStateProps = { searchValue: string; onClear: () => void };
+
+const EmptyStateLayout = ( { searchValue, onClear, children }: EmptyStateProps & { children: React.ReactNode } ) => (
 	<Box sx={ { py: 4 } }>
 		<Stack
 			gap={ 1 }
@@ -181,11 +207,7 @@ const EmptyState = ( { searchValue, onClear }: { searchValue: string; onClear: (
 				<br />
 				&ldquo;{ searchValue }&rdquo;.
 			</Typography>
-			<Typography align="center" variant="caption" sx={ { mb: 2 } }>
-				{ __( 'With your current role,', 'elementor' ) }
-				<br />
-				{ __( 'you can only use existing classes.', 'elementor' ) }
-			</Typography>
+			{ children }
 			<Link color="text.secondary" variant="caption" component="button" onClick={ onClear }>
 				{ __( 'Clear & try again', 'elementor' ) }
 			</Link>
@@ -193,6 +215,62 @@ const EmptyState = ( { searchValue, onClear }: { searchValue: string; onClear: (
 	</Box>
 );
 
+const EmptyState = ( props: EmptyStateProps ) => (
+	<EmptyStateLayout { ...props }>
+		<Typography align="center" variant="caption" sx={ { mb: 2 } }>
+			{ __( 'With your current role,', 'elementor' ) }
+			<br />
+			{ __( 'you can only use existing classes.', 'elementor' ) }
+		</Typography>
+	</EmptyStateLayout>
+);
+
+const LimitReachedEmptyState = ( {
+	limitCount,
+	onClear,
+}: Pick< EmptyStateProps, 'onClear' > & { limitCount: number } ) => (
+	<Box sx={ { py: 4 } }>
+		<Stack
+			gap={ 1 }
+			alignItems="center"
+			color="text.secondary"
+			justifyContent="center"
+			sx={ { px: 1, m: 'auto', maxWidth: '260px' } }
+		>
+			<ColorSwatchIcon sx={ { transform: 'rotate(90deg)' } } fontSize="large" />
+			<Typography align="center" variant="subtitle2">
+				{
+					/* translators: %s is the maximum number of classes */
+					__( 'Limit of %s classes reached', 'elementor' ).replace( '%s', String( limitCount ) )
+				}
+			</Typography>
+			<Typography align="center" variant="caption" component="div">
+				{ __( 'Remove a class to create a new one.', 'elementor' ) }{ ' ' }
+				<Link
+					color="inherit"
+					variant="caption"
+					component="button"
+					onClick={ onClear }
+					sx={ { verticalAlign: 'baseline' } }
+				>
+					{ __( 'Clear', 'elementor' ) }
+				</Link>
+			</Typography>
+			<Button
+				variant="outlined"
+				color="secondary"
+				size="small"
+				onClick={ () => {
+					openClassManagerPanel();
+					onClear();
+				} }
+			>
+				{ __( 'Class Manager', 'elementor' ) }
+			</Button>
+		</Stack>
+	</Box>
+);
+
 const updateClassByProvider = ( provider: string | null, data: UpdateActionPayload ) => {
 	if ( ! provider ) {
 		return;
@@ -250,6 +328,18 @@ function useCreateAction() {
 		return {};
 	}
 
+	const entityName =
+		provider.labels.singular && provider.labels.plural
+			? ( provider.labels as CreatableAutocompleteProps< StyleDefOption >[ 'entityName' ] )
+			: undefined;
+
+	const validate = ( newClassLabel: string, event: ValidationEvent ): ValidationResult =>
+		validateStyleLabel( newClassLabel, event );
+
+	if ( hasReachedLimit( provider ) ) {
+		return { entityName, isAtLimit: true as const, limitCount: provider.limit, validate };
+	}
+
 	const create = ( classLabel: string ) => {
 		const { createdId } = createAction( { classLabel } );
 		trackStyles( provider.getKey() ?? '', 'classCreated', {
@@ -259,26 +349,7 @@ function useCreateAction() {
 		} );
 	};
 
-	const validate = ( newClassLabel: string, event: ValidationEvent ): ValidationResult => {
-		if ( hasReachedLimit( provider ) ) {
-			return {
-				isValid: false,
-				/* translators: %s is the maximum number of classes */
-				errorMessage: __(
-					'You’ve reached the limit of %s classes. Please remove an existing one to create a new class.',
-					'elementor'
-				).replace( '%s', provider.limit.toString() ),
-			};
-		}
-		return validateStyleLabel( newClassLabel, event );
-	};
-
-	const entityName =
-		provider.labels.singular && provider.labels.plural
-			? ( provider.labels as CreatableAutocompleteProps< StyleDefOption >[ 'entityName' ] )
-			: undefined;
-
-	return { create, validate, entityName };
+	return { create, validate, entityName, isAtLimit: false as const };
 }
 
 function hasReachedLimit( provider: StylesProvider ) {

package/src/components/design-system-import/components/conflict-options.tsx

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import { Card, CardActionArea, Radio, RadioGroup, Stack, Typography } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { type ConflictStrategy } from '../types';
-
-type Option = {
-	value: ConflictStrategy;
-	title: string;
-	description: string;
-};
-
-const getOptions = (): Option[] => [
-	{
-		value: 'replace',
-		title: __( 'Replace existing values', 'elementor' ),
-		description: __( 'Imported design system values will overwrite existing variables and classes.', 'elementor' ),
-	},
-	{
-		value: 'keep',
-		title: __( 'Keep existing values', 'elementor' ),
-		description: __( 'Existing variables and classes will not change.', 'elementor' ),
-	},
-];
-
-type Props = {
-	value: ConflictStrategy | null;
-	onChange: ( value: ConflictStrategy ) => void;
-};
-
-export const ConflictOptions = ( { value, onChange }: Props ) => {
-	const options = getOptions();
-
-	return (
-		<Stack spacing={ 1 }>
-			<Typography variant="body1">
-				{ __( 'How to handle conflicts with existing variables or classes?', 'elementor' ) }
-			</Typography>
-			<RadioGroup
-				value={ value ?? '' }
-				onChange={ ( _: unknown, next: string ) => onChange( next as ConflictStrategy ) }
-			>
-				<Stack spacing={ 1 }>
-					{ options.map( ( option ) => (
-						<Card key={ option.value } variant="outlined">
-							<CardActionArea onClick={ () => onChange( option.value ) }>
-								<Stack direction="row" alignItems="center" spacing={ 2 } padding={ 2 }>
-									<Radio
-										value={ option.value }
-										checked={ value === option.value }
-										inputProps={ { 'aria-label': option.title } }
-									/>
-									<Stack direction="column" spacing={ 0.5 }>
-										<Typography variant="subtitle2">{ option.title }</Typography>
-										<Typography variant="caption" color="text.secondary">
-											{ option.description }
-										</Typography>
-									</Stack>
-								</Stack>
-							</CardActionArea>
-						</Card>
-					) ) }
-				</Stack>
-			</RadioGroup>
-		</Stack>
-	);
-};

package/src/components/design-system-import/components/trigger-button.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import { closeDialog, openDialog } from '@elementor/editor-ui';
-import { UploadIcon } from '@elementor/icons';
-import { useIsMutating } from '@elementor/query';
-import { IconButton, Tooltip } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { IMPORT_DESIGN_SYSTEM_MUTATION_KEY } from '../hooks/use-import-request';
-import { ImportDesignSystemDialog } from '../import-design-system-dialog';
-
-export const TriggerButton = () => {
-	const isImporting = useIsMutating( { mutationKey: [ ...IMPORT_DESIGN_SYSTEM_MUTATION_KEY ] } ) > 0;
-
-	const label = isImporting
-		? __( 'Importing design system…', 'elementor' )
-		: __( 'Import Design System', 'elementor' );
-
-	const handleClick = () => {
-		openDialog( {
-			component: <ImportDesignSystemDialog onClose={ closeDialog } />,
-		} );
-	};
-
-	return (
-		<Tooltip title={ label } placement="top">
-			<span>
-				<IconButton size="tiny" disabled={ isImporting } aria-label={ label } onClick={ handleClick }>
-					<UploadIcon fontSize="tiny" />
-				</IconButton>
-			</span>
-		</Tooltip>
-	);
-};

package/src/components/design-system-import/hooks/use-dialog-state.ts

@@ -1,24 +0,0 @@
-import { useState } from 'react';
-
-import { type ConflictStrategy } from '../types';
-
-export type DialogState = {
-	file: File | null;
-	conflictStrategy: ConflictStrategy | null;
-};
-
-const initialState: DialogState = {
-	file: null,
-	conflictStrategy: null,
-};
-
-export const useDialogState = () => {
-	const [ state, setState ] = useState< DialogState >( initialState );
-
-	const setFile = ( file: File | null ) => setState( ( prev ) => ( { ...prev, file } ) );
-
-	const setConflictStrategy = ( conflictStrategy: ConflictStrategy ) =>
-		setState( ( prev ) => ( { ...prev, conflictStrategy } ) );
-
-	return { ...state, setFile, setConflictStrategy };
-};

package/src/components/design-system-import/hooks/use-import-request.ts

@@ -1,38 +0,0 @@
-import { GLOBAL_STYLES_IMPORTED_EVENT, type ImportedGlobalStylesPayload } from '@elementor/editor-canvas';
-import { reloadCurrentDocument } from '@elementor/editor-documents';
-import { httpService } from '@elementor/http-client';
-import { useMutation } from '@elementor/query';
-
-import { type ConflictStrategy } from '../types';
-
-const IMPORT_ENDPOINT = '/design-system/import';
-
-export const IMPORT_DESIGN_SYSTEM_MUTATION_KEY = [ 'design-system-import' ] as const;
-
-type ImportRequestArgs = {
-	file: File;
-	conflictStrategy: ConflictStrategy;
-};
-
-export const useImportRequest = () => {
-	return useMutation( {
-		mutationKey: [ ...IMPORT_DESIGN_SYSTEM_MUTATION_KEY ],
-		mutationFn: async ( { file, conflictStrategy }: ImportRequestArgs ): Promise< void > => {
-			const formData = new FormData();
-			formData.append( 'file', file );
-			formData.append( 'conflict_strategy', conflictStrategy );
-
-			const response = await httpService().post< ImportedGlobalStylesPayload >( IMPORT_ENDPOINT, formData, {
-				headers: { 'Content-Type': 'multipart/form-data' },
-			} );
-
-			window.dispatchEvent(
-				new CustomEvent< ImportedGlobalStylesPayload >( GLOBAL_STYLES_IMPORTED_EVENT, {
-					detail: response?.data,
-				} )
-			);
-
-			await reloadCurrentDocument();
-		},
-	} );
-};

package/src/components/design-system-import/import-design-system-dialog.tsx

@@ -1,89 +0,0 @@
-import * as React from 'react';
-import { closeDialog, FileUploadDropzone, FileUploadRow, openDialog } from '@elementor/editor-ui';
-import { Button, DialogActions, DialogContent, DialogHeader, DialogTitle, Stack } from '@elementor/ui';
-import { __, sprintf } from '@wordpress/i18n';
-
-import { ConflictOptions } from './components/conflict-options';
-import { useDialogState } from './hooks/use-dialog-state';
-import { useImportRequest } from './hooks/use-import-request';
-import { notifyImportFailure, notifyImportInProgress, notifyImportSuccess } from './import-notifications';
-
-const ALLOWED_FILE_TYPES: `${ string }/${ string }`[] = [ 'application/zip' ];
-const FILE_INPUT_ACCEPT = 'application/zip,.zip';
-// TODO: Replace with the actual server-enforced limit once finalized.
-const MAX_FILE_SIZE_MB = 3;
-
-type Props = {
-	onClose: () => void;
-};
-
-const reopenSelf = () => {
-	openDialog( {
-		component: <ImportDesignSystemDialog onClose={ closeDialog } />,
-	} );
-};
-
-export const ImportDesignSystemDialog = ( { onClose }: Props ) => {
-	const { file, conflictStrategy, setFile, setConflictStrategy } = useDialogState();
-	const importMutation = useImportRequest();
-
-	const isImportEnabled = Boolean( file && conflictStrategy );
-
-	const handleImport = async () => {
-		if ( ! file || ! conflictStrategy ) {
-			return;
-		}
-
-		notifyImportInProgress();
-		onClose();
-
-		try {
-			await importMutation.mutateAsync( { file, conflictStrategy } );
-			notifyImportSuccess();
-		} catch {
-			notifyImportFailure( reopenSelf );
-		}
-	};
-
-	return (
-		<>
-			<DialogHeader logo={ false }>
-				<DialogTitle>{ __( 'Import Design System', 'elementor' ) }</DialogTitle>
-			</DialogHeader>
-			<DialogContent>
-				<Stack spacing={ 3 }>
-					{ file ? (
-						<FileUploadRow file={ file } onRemove={ () => setFile( null ) } />
-					) : (
-						<FileUploadDropzone
-							onFileSelected={ setFile }
-							allowedFileTypes={ ALLOWED_FILE_TYPES }
-							accept={ FILE_INPUT_ACCEPT }
-							regionLabel={ __( 'Design system file dropzone', 'elementor' ) }
-							helperText={ sprintf(
-								// translators: %d is the maximum file size in megabytes.
-								__( 'zip (max. %dMB)', 'elementor' ),
-								MAX_FILE_SIZE_MB
-							) }
-						/>
-					) }
-					<ConflictOptions value={ conflictStrategy } onChange={ setConflictStrategy } />
-				</Stack>
-			</DialogContent>
-			<DialogActions>
-				<Button size="medium" color="secondary" onClick={ onClose }>
-					{ __( 'Cancel', 'elementor' ) }
-				</Button>
-				<Button
-					size="medium"
-					variant="contained"
-					color="primary"
-					disabled={ ! isImportEnabled }
-					onClick={ handleImport }
-				>
-					{ __( 'Import', 'elementor' ) }
-				</Button>
-			</DialogActions>
-		</>
-	);
-};

package/src/components/design-system-import/import-notifications.tsx

@@ -1,57 +0,0 @@
-import { dismissNotification, notify } from '@elementor/editor-notifications';
-import { getQueryClient } from '@elementor/query';
-import { __ } from '@wordpress/i18n';
-
-import { IMPORT_DESIGN_SYSTEM_MUTATION_KEY } from './hooks/use-import-request';
-
-const IMPORT_STARTED_NOTIFICATION_ID = 'design-system-import-started';
-const SUCCESS_NOTIFICATION_ID = 'design-system-import-succeeded';
-const FAILURE_NOTIFICATION_ID = 'design-system-import-failed';
-
-export const notifyImportInProgress = () => {
-	notify( {
-		id: IMPORT_STARTED_NOTIFICATION_ID,
-		type: 'info',
-		message: __( 'Import in Progress. You will be notified when the import is complete.', 'elementor' ),
-	} );
-};
-
-export const notifyImportSuccess = () => {
-	dismissNotification( IMPORT_STARTED_NOTIFICATION_ID );
-
-	notify( {
-		id: SUCCESS_NOTIFICATION_ID,
-		type: 'success',
-		message: __( 'Design system imported', 'elementor' ),
-	} );
-};
-
-export const notifyImportFailure = ( onRetry: () => void ) => {
-	dismissNotification( IMPORT_STARTED_NOTIFICATION_ID );
-
-	notify( {
-		id: FAILURE_NOTIFICATION_ID,
-		type: 'error',
-		message: __( 'Your design system import failed', 'elementor' ),
-		additionalActionProps: [
-			{
-				size: 'small',
-				variant: 'outlined',
-				color: 'error',
-				children: __( 'Try again', 'elementor' ),
-				onClick: () => {
-					dismissNotification( FAILURE_NOTIFICATION_ID );
-
-					const isImporting =
-						getQueryClient().isMutating( { mutationKey: [ ...IMPORT_DESIGN_SYSTEM_MUTATION_KEY ] } ) > 0;
-
-					if ( isImporting ) {
-						return;
-					}
-
-					onRetry();
-				},
-			},
-		],
-	} );
-};

package/src/components/design-system-import/types.ts

@@ -1 +0,0 @@
-export type ConflictStrategy = 'replace' | 'keep';