@elementor/editor-interactions 4.0.0-528 → 4.0.0-530

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-interactions",
-  "version": "4.0.0-528",
+  "version": "4.0.0-530",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,15 +39,16 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-controls": "4.0.0-528",
-    "@elementor/editor-elements": "4.0.0-528",
-    "@elementor/editor-props": "4.0.0-528",
-    "@elementor/editor-ui": "4.0.0-528",
-    "@elementor/editor-v1-adapters": "4.0.0-528",
+    "@elementor/editor-controls": "4.0.0-530",
+    "@elementor/editor-elements": "4.0.0-530",
+    "@elementor/editor-props": "4.0.0-530",
+    "@elementor/editor-responsive": "4.0.0-530",
+    "@elementor/editor-ui": "4.0.0-530",
+    "@elementor/editor-v1-adapters": "4.0.0-530",
     "@elementor/icons": "^1.63.0",
-    "@elementor/session": "4.0.0-528",
+    "@elementor/session": "4.0.0-530",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-528",
+    "@elementor/utils": "4.0.0-530",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/interaction-settings.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { type SyntheticEvent, useState } from 'react';
+import { type SyntheticEvent, useCallback, useMemo, useState } from 'react';
 import { ControlFormLabel, PopoverContent } from '@elementor/editor-controls';
-import { Autocomplete, Grid, TextField } from '@elementor/ui';
+import { useBreakpoints } from '@elementor/editor-responsive';
+import { Autocomplete, Chip, Grid, Stack, TextField } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import type { InteractionItemValue } from '../types';
@@ -12,63 +13,82 @@ type BreakpointOption = {
 	value: string;
 };
 
-const availableBreakpoints: BreakpointOption[] = [
-	{ label: __( 'Desktop', 'elementor' ), value: 'desktop' },
-	{ label: __( 'Tablet', 'elementor' ), value: 'tablet' },
-	{ label: __( 'Mobile', 'elementor' ), value: 'mobile' },
-];
-
 type InteractionSettingsProps = {
 	interaction: InteractionItemValue;
 	onChange: ( interaction: InteractionItemValue ) => void;
 };
 
+const SIZE = 'tiny';
+
 export const InteractionSettings = ( { interaction, onChange }: InteractionSettingsProps ) => {
+	const breakpoints = useBreakpoints();
+
+	const availableBreakpoints = useMemo(
+		() => breakpoints.map( ( breakpoint ) => ( { label: breakpoint.label, value: String( breakpoint.id ) } ) ),
+		[ breakpoints ]
+	);
+
 	const [ selectedBreakpoints, setSelectedBreakpoints ] = useState< BreakpointOption[] >( () => {
-		const excluded = extractExcludedBreakpoints( interaction.breakpoints );
+		const excluded = extractExcludedBreakpoints( interaction.breakpoints ).filter( ( excludedBreakpoint ) => {
+			return availableBreakpoints.some( ( { value } ) => value === excludedBreakpoint );
+		} );
+
 		return availableBreakpoints.filter( ( { value } ) => {
 			return ! excluded.includes( value );
 		} );
 	} );
 
-	const handleBreakpointChange = ( _: SyntheticEvent, newValue: BreakpointOption[] ) => {
-		setSelectedBreakpoints( newValue );
+	const handleBreakpointChange = useCallback(
+		( _: SyntheticEvent, newValue: BreakpointOption[] ) => {
+			setSelectedBreakpoints( newValue );
 
-		const selectedValues = newValue.map( ( option ) => option.value );
-		const newExcluded = availableBreakpoints
-			.filter( ( bp ) => ! selectedValues.includes( bp.value ) )
-			.map( ( bp ) => bp.value );
+			const selectedValues = newValue.map( ( option ) => option.value );
 
-		const updatedInteraction: InteractionItemValue = {
-			...interaction,
-			...( newExcluded.length > 0 && {
-				breakpoints: createInteractionBreakpoints( newExcluded ),
-			} ),
-		};
+			const newExcluded = availableBreakpoints
+				.filter( ( breakpoint ) => ! selectedValues.includes( breakpoint.value ) )
+				.map( ( breakpoint ) => breakpoint.value );
 
-		if ( newExcluded.length === 0 ) {
-			delete updatedInteraction.breakpoints;
-		}
+			const updatedInteraction: InteractionItemValue = {
+				...interaction,
+				...( newExcluded.length > 0 && {
+					breakpoints: createInteractionBreakpoints( newExcluded ),
+				} ),
+			};
 
-		onChange( updatedInteraction );
-	};
+			if ( newExcluded.length === 0 ) {
+				delete updatedInteraction.breakpoints;
+			}
+
+			onChange( updatedInteraction );
+		},
+		[ interaction, availableBreakpoints, onChange ]
+	);
 
 	return (
 		<PopoverContent p={ 1.5 }>
 			<Grid container spacing={ 1.5 }>
 				<Grid item xs={ 12 }>
-					<ControlFormLabel sx={ { width: '100%' } }>{ __( 'Trigger on', 'elementor' ) }</ControlFormLabel>
-				</Grid>
-				<Grid id="interactions-settings-breakpoints" item xs={ 12 } sx={ { paddingTop: 0 } }>
-					<Autocomplete
-						fullWidth
-						multiple
-						value={ selectedBreakpoints }
-						onChange={ handleBreakpointChange }
-						size="tiny"
-						options={ availableBreakpoints }
-						renderInput={ ( params ) => <TextField { ...params } /> }
-					/>
+					<Stack direction="column" gap={ 1 }>
+						<ControlFormLabel sx={ { width: '100%' } }>
+							{ __( 'Trigger on', 'elementor' ) }
+						</ControlFormLabel>
+						<Autocomplete
+							fullWidth
+							multiple
+							value={ selectedBreakpoints }
+							onChange={ handleBreakpointChange }
+							size={ SIZE }
+							options={ availableBreakpoints }
+							isOptionEqualToValue={ ( option, value ) => option.value === value.value }
+							renderInput={ ( params ) => <TextField { ...params } /> }
+							renderTags={ ( values, getTagProps ) =>
+								values.map( ( option, index ) => {
+									const { key, ...chipProps } = getTagProps( { index } );
+									return <Chip key={ key } size={ SIZE } label={ option.label } { ...chipProps } />;
+								} )
+							}
+						/>
+					</Stack>
 				</Grid>
 			</Grid>
 		</PopoverContent>

package/src/components/interactions-list-item.tsx

@@ -45,7 +45,6 @@ export const InteractionsListItem = ( { index, value }: { index: number; value:
 
 			<TabPanel sx={ { p: 0 } } { ...getTabPanelProps( 'details' ) }>
 				<InteractionDetails
-					key={ `details-${ index }` }
 					interaction={ value.value }
 					onChange={ handleChange }
 					onPlayInteraction={ handlePlayInteraction }
@@ -53,11 +52,7 @@ export const InteractionsListItem = ( { index, value }: { index: number; value:
 			</TabPanel>
 
 			<TabPanel sx={ { p: 0 } } { ...getTabPanelProps( 'settings' ) }>
-				<InteractionSettings
-					key={ `settings-${ index }` }
-					interaction={ value.value }
-					onChange={ handleChange }
-				/>
+				<InteractionSettings interaction={ value.value } onChange={ handleChange } />
 			</TabPanel>
 		</>
 	);