@elementor/editor-controls 3.33.0-98 → 3.34.2

package/src/controls/transition-control/transition-repeater-control.tsx

@@ -1,17 +1,30 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
-import { selectionSizePropTypeUtil } from '@elementor/editor-props';
+import { useEffect, useMemo, useState } from 'react';
+import {
+	createArrayPropUtils,
+	type KeyValuePropValue,
+	selectionSizePropTypeUtil,
+	type SelectionSizePropValue,
+} from '@elementor/editor-props';
 import { type StyleDefinitionState } from '@elementor/editor-styles';
 import { InfoCircleFilledIcon } from '@elementor/icons';
 import { Alert, AlertTitle, Box, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { useBoundProp } from '../../bound-prop-context';
+import { type Item, type RepeatablePropValue } from '../../components/control-repeater/types';
 import { createControl } from '../../create-control';
 import { RepeatableControl } from '../repeatable-control';
 import { SelectionSizeControl } from '../selection-size-control';
-import { initialTransitionValue, transitionProperties } from './data';
+import {
+	initialTransitionValue,
+	type TransitionItem,
+	transitionProperties,
+	type TransitionProperty,
+	type TransitionValue,
+} from './data';
 import { subscribeToTransitionEvent } from './trainsition-events';
-import { TransitionSelector } from './transition-selector';
+import { getTransitionPropertyByValue, TransitionSelector } from './transition-selector';
 
 const DURATION_CONFIG = {
 	variant: 'time',
@@ -19,9 +32,34 @@ const DURATION_CONFIG = {
 	defaultUnit: 'ms',
 };
 
+const childArrayPropTypeUtil = createArrayPropUtils(
+	selectionSizePropTypeUtil.key,
+	selectionSizePropTypeUtil.schema,
+	'transition'
+);
+
+subscribeToTransitionEvent();
+
+const areAllPropertiesUsed = ( value: SelectionSizePropValue[] = [] ) => {
+	return value?.length
+		? transitionProperties.every( ( category ) => {
+				return category.properties.every( ( property ) => {
+					return (
+						property.isDisabled ||
+						!! value?.find( ( item ) => {
+							return (
+								( item.value?.selection?.value as KeyValuePropValue )?.value?.value === property.value
+							);
+						} )
+					);
+				} );
+		  } )
+		: false;
+};
+
 // this config needs to be loaded at runtime/render since it's the transitionProperties object will be mutated by the pro plugin.
 // See: https://elementor.atlassian.net/browse/ED-20285
-const getSelectionSizeProps = ( recentlyUsedList: string[] ) => {
+const getSelectionSizeProps = ( recentlyUsedList: string[], disabledItems?: string[] ) => {
 	return {
 		selectionLabel: __( 'Type', 'elementor' ),
 		sizeLabel: __( 'Duration', 'elementor' ),
@@ -29,8 +67,10 @@ const getSelectionSizeProps = ( recentlyUsedList: string[] ) => {
 			component: TransitionSelector,
 			props: {
 				recentlyUsedList,
+				disabledItems,
 			},
 		},
+		isRepeaterControl: true,
 		sizeConfigMap: {
 			...transitionProperties.reduce(
 				( acc, category ) => {
@@ -45,13 +85,69 @@ const getSelectionSizeProps = ( recentlyUsedList: string[] ) => {
 	};
 };
 
-function getChildControlConfig( recentlyUsedList: string[] ) {
+const isItemDisabled = ( item: TransitionItem[ 'value' ] ) => {
+	const property = getTransitionPropertyByValue( item.value.selection.value?.value );
+
+	return ! property ? false : !! property.isDisabled;
+};
+
+const getChildControlConfig = ( recentlyUsedList: string[], disabledItems?: string[] ) => {
 	return {
 		propTypeUtil: selectionSizePropTypeUtil,
 		component: SelectionSizeControl as unknown as React.ComponentType< Record< string, unknown > >,
-		props: getSelectionSizeProps( recentlyUsedList ),
+		props: getSelectionSizeProps( recentlyUsedList, disabledItems ),
+		isItemDisabled: isItemDisabled as ( item: Item< RepeatablePropValue > ) => boolean,
 	};
-}
+};
+
+const isPropertyUsed = ( value: SelectionSizePropValue[], property: TransitionProperty ) => {
+	return ( value ?? [] ).some( ( item ) => {
+		return ( item?.value?.selection?.value as KeyValuePropValue )?.value?.value === property.value;
+	} );
+};
+
+const getDisabledItemLabels = ( values: SelectionSizePropValue[] = [] ) => {
+	const disabledLabels: string[] = ( values || [] ).map(
+		( item ) => ( item.value?.selection as KeyValuePropValue )?.value?.key?.value
+	);
+
+	transitionProperties.forEach( ( category ) => {
+		const disabledProperties = category.properties
+			.filter( ( property ) => property.isDisabled && ! disabledLabels.includes( property.label ) )
+			.map( ( property ) => property.label );
+
+		disabledLabels.push( ...disabledProperties );
+	} );
+
+	return disabledLabels;
+};
+
+const getInitialValue = ( values: SelectionSizePropValue[] = [] ): TransitionValue => {
+	if ( ! values?.length ) {
+		return initialTransitionValue;
+	}
+
+	for ( const category of transitionProperties ) {
+		for ( const property of category.properties ) {
+			if ( isPropertyUsed( values, property ) ) {
+				continue;
+			}
+
+			return {
+				...initialTransitionValue,
+				selection: {
+					$$type: 'key-value',
+					value: {
+						key: { value: property.label, $$type: 'string' },
+						value: { value: property.value, $$type: 'string' },
+					},
+				},
+			};
+		}
+	}
+
+	return initialTransitionValue;
+};
 
 const disableAddItemTooltipContent = (
 	<Alert
@@ -71,8 +167,6 @@ const disableAddItemTooltipContent = (
 	</Alert>
 );
 
-subscribeToTransitionEvent();
-
 export const TransitionRepeaterControl = createControl(
 	( {
 		recentlyUsedListGetter,
@@ -84,10 +178,40 @@ export const TransitionRepeaterControl = createControl(
 		const currentStyleIsNormal = currentStyleState === null;
 		const [ recentlyUsedList, setRecentlyUsedList ] = useState< string[] >( [] );
 
+		const { value, setValue } = useBoundProp( childArrayPropTypeUtil );
+		const disabledItems = useMemo( () => getDisabledItemLabels( value ), [ value ] );
+
+		const allowedTransitionSet = useMemo( () => {
+			const set = new Set< string >();
+			transitionProperties.forEach( ( category ) => {
+				category.properties.forEach( ( prop ) => set.add( prop.value ) );
+			} );
+			return set;
+		}, [] );
+
+		useEffect( () => {
+			if ( ! value || value.length === 0 ) {
+				return;
+			}
+
+			const sanitized = value.filter( ( item ) => {
+				const selectionValue = ( item?.value?.selection?.value as KeyValuePropValue )?.value?.value ?? '';
+				return allowedTransitionSet.has( selectionValue );
+			} );
+
+			if ( sanitized.length !== value.length ) {
+				setValue( sanitized );
+			}
+			// eslint-disable-next-line react-hooks/exhaustive-deps
+		}, [ allowedTransitionSet ] );
+
 		useEffect( () => {
 			recentlyUsedListGetter().then( setRecentlyUsedList );
 		}, [ recentlyUsedListGetter ] );
 
+		const allPropertiesUsed = useMemo( () => areAllPropertiesUsed( value ), [ value ] );
+		const isAddItemDisabled = ! currentStyleIsNormal || allPropertiesUsed;
+
 		return (
 			<RepeatableControl
 				label={ __( 'Transitions', 'elementor' ) }
@@ -96,11 +220,11 @@ export const TransitionRepeaterControl = createControl(
 				placeholder={ __( 'Empty Transition', 'elementor' ) }
 				showDuplicate={ false }
 				showToggle={ true }
-				initialValues={ initialTransitionValue }
-				childControlConfig={ getChildControlConfig( recentlyUsedList ) }
+				initialValues={ getInitialValue( value ) }
+				childControlConfig={ getChildControlConfig( recentlyUsedList, disabledItems ) }
 				propKey="transition"
 				addItemTooltipProps={ {
-					disabled: ! currentStyleIsNormal,
+					disabled: isAddItemDisabled,
 					enableTooltip: ! currentStyleIsNormal,
 					tooltipContent: disableAddItemTooltipContent,
 				} }

package/src/controls/transition-control/transition-selector.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { useRef } from 'react';
-import { keyValuePropTypeUtil } from '@elementor/editor-props';
+import { keyValuePropTypeUtil, type KeyValuePropValue, type StringPropValue } from '@elementor/editor-props';
 import { ChevronDownIcon, VariationsIcon } from '@elementor/icons';
 import { bindPopover, bindTrigger, Box, Popover, UnstableTag, usePopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../../bound-prop-context';
 import { ItemSelector } from '../../components/item-selector';
+import ControlActions from '../../control-actions/control-actions';
 import { transitionProperties, transitionsItemsList } from './data';
 
 const toTransitionSelectorValue = ( label: string ) => {
@@ -23,16 +24,35 @@ const toTransitionSelectorValue = ( label: string ) => {
 	return null;
 };
 
-const findByValue = ( value: string ) => {
+export function getTransitionPropertyByValue( item?: StringPropValue | null ) {
+	if ( ! item?.value ) {
+		return null;
+	}
+
 	for ( const category of transitionProperties ) {
-		const property = category.properties.find( ( prop ) => prop.value === value );
-		if ( property ) {
-			return property.label;
+		for ( const property of category.properties ) {
+			if ( property.value === item.value ) {
+				return property;
+			}
 		}
 	}
+
+	return null;
+}
+
+const includeCurrentValueInOptions = ( value: KeyValuePropValue[ 'value' ], disabledItems: string[] ) => {
+	return disabledItems.filter( ( item ) => {
+		return item !== value.key.value;
+	} );
 };
 
-export const TransitionSelector = ( { recentlyUsedList = [] }: { recentlyUsedList: string[] } ) => {
+export const TransitionSelector = ( {
+	recentlyUsedList = [],
+	disabledItems = [],
+}: {
+	recentlyUsedList: string[];
+	disabledItems?: string[];
+} ) => {
 	const { value, setValue } = useBoundProp( keyValuePropTypeUtil );
 	const {
 		key: { value: transitionLabel },
@@ -42,7 +62,7 @@ export const TransitionSelector = ( { recentlyUsedList = [] }: { recentlyUsedLis
 
 	const getItemList = () => {
 		const recentItems = recentlyUsedList
-			.map( ( item ) => findByValue( item ) )
+			.map( ( item ) => getTransitionPropertyByValue( { value: item, $$type: 'string' } )?.label )
 			.filter( ( item ) => !! item ) as string[];
 		const filteredItems = transitionsItemsList.map( ( category ) => {
 			return {
@@ -89,13 +109,15 @@ export const TransitionSelector = ( { recentlyUsedList = [] }: { recentlyUsedLis
 
 	return (
 		<Box ref={ defaultRef }>
-			<UnstableTag
-				variant="outlined"
-				label={ transitionLabel }
-				endIcon={ <ChevronDownIcon fontSize="tiny" /> }
-				{ ...bindTrigger( popoverState ) }
-				fullWidth
-			/>
+			<ControlActions>
+				<UnstableTag
+					variant="outlined"
+					label={ transitionLabel }
+					endIcon={ <ChevronDownIcon fontSize="tiny" /> }
+					{ ...bindTrigger( popoverState ) }
+					fullWidth
+				/>
+			</ControlActions>
 			<Popover
 				disablePortal
 				disableScrollLock
@@ -113,6 +135,7 @@ export const TransitionSelector = ( { recentlyUsedList = [] }: { recentlyUsedLis
 					sectionWidth={ 268 }
 					title={ __( 'Transition Property', 'elementor' ) }
 					icon={ VariationsIcon as React.ElementType< { fontSize: string } > }
+					disabledItems={ includeCurrentValueInOptions( value, disabledItems ) }
 				/>
 			</Popover>
 		</Box>

package/src/controls/url-control.tsx

@@ -6,20 +6,25 @@ import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
-export const UrlControl = createControl( ( { placeholder }: { placeholder?: string } ) => {
-	const { value, setValue, disabled } = useBoundProp( urlPropTypeUtil );
-	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
+export const UrlControl = createControl(
+	( { placeholder, ariaLabel }: { placeholder?: string; ariaLabel?: string } ) => {
+		const { value, setValue, disabled } = useBoundProp( urlPropTypeUtil );
+		const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
 
-	return (
-		<ControlActions>
-			<TextField
-				size="tiny"
-				fullWidth
-				value={ value ?? '' }
-				disabled={ disabled }
-				onChange={ handleChange }
-				placeholder={ placeholder }
-			/>
-		</ControlActions>
-	);
-} );
+		return (
+			<ControlActions>
+				<TextField
+					size="tiny"
+					fullWidth
+					value={ value ?? '' }
+					disabled={ disabled }
+					onChange={ handleChange }
+					placeholder={ placeholder }
+					inputProps={ {
+						...( ariaLabel ? { 'aria-label': ariaLabel } : {} ),
+					} }
+				/>
+			</ControlActions>
+		);
+	}
+);

package/src/hooks/use-filtered-items-list.ts

@@ -3,9 +3,10 @@ import { type Category } from '../components/item-selector';
 export type SelectableItem = {
 	type: 'item' | 'category';
 	value: string;
+	disabled?: boolean;
 };
 
-export const useFilteredItemsList = ( itemsList: Category[], searchValue: string ) => {
+export const useFilteredItemsList = ( itemsList: Category[], searchValue: string, disabledItems?: string[] ) => {
 	return itemsList.reduce< SelectableItem[] >( ( acc, category ) => {
 		const filteredItems = category.items.filter( ( item ) =>
 			item.toLowerCase().includes( searchValue.toLowerCase() )
@@ -15,7 +16,7 @@ export const useFilteredItemsList = ( itemsList: Category[], searchValue: string
 			acc.push( { type: 'category', value: category.label } );
 
 			filteredItems.forEach( ( item ) => {
-				acc.push( { type: 'item', value: item } );
+				acc.push( { type: 'item', value: item, disabled: disabledItems?.includes( item ) ?? false } );
 			} );
 		}
 

package/src/hooks/use-repeatable-control-context.ts

@@ -1,12 +1,15 @@
 import { createContext, useContext } from 'react';
 import { type PropTypeUtil } from '@elementor/editor-props';
 
+import type { Item, RepeatablePropValue } from '../components/control-repeater/types';
+
 export type ChildControlConfig = {
 	component: React.ComponentType;
 	props?: Record< string, unknown >;
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	propTypeUtil: PropTypeUtil< string, any >;
 	label?: string;
+	isItemDisabled?: ( item: Item< RepeatablePropValue > ) => boolean;
 };
 
 type RepeatableControlContextType = ChildControlConfig & {

package/src/hooks/use-sync-external-state.tsx

@@ -37,7 +37,6 @@ export const useSyncExternalState = < TValue, >( {
 	useEffect( () => {
 		setInternal( ( prevInternal ) => toInternal( external, prevInternal ) );
 
-		// eslint-disable-next-line react-compiler/react-compiler
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ external ] );
 

package/src/index.ts

@@ -7,6 +7,7 @@ export { StrokeControl } from './controls/stroke-control';
 export { BoxShadowRepeaterControl } from './controls/box-shadow-repeater-control';
 export { FilterRepeaterControl } from './controls/filter-control/filter-repeater-control';
 export { SelectControl } from './controls/select-control';
+export { SelectControlWrapper } from './controls/select-control-wrapper';
 export { ColorControl } from './controls/color-control';
 export { ToggleControl } from './controls/toggle-control';
 export { NumberControl } from './controls/number-control';
@@ -16,6 +17,8 @@ export { FontFamilyControl } from './controls/font-family-control/font-family-co
 export { ItemSelector } from './components/item-selector';
 export { UrlControl } from './controls/url-control';
 export { LinkControl } from './controls/link-control';
+export { HtmlTagControl } from './controls/html-tag-control';
+export { QueryControl } from './controls/query-control';
 export { GapControl } from './controls/gap-control';
 export { AspectRatioControl } from './controls/aspect-ratio-control';
 export { SvgMediaControl } from './controls/svg-media-control';
@@ -25,24 +28,38 @@ export { RepeatableControl } from './controls/repeatable-control';
 export { KeyValueControl } from './controls/key-value-control';
 export { PositionControl } from './controls/position-control';
 export { TransformRepeaterControl } from './controls/transform-control/transform-repeater-control';
-export { TransformBaseControl } from './controls/transform-control/transform-base-control';
+export { TransformSettingsControl } from './controls/transform-control/transform-settings-control';
 export { TransitionRepeaterControl } from './controls/transition-control/transition-repeater-control';
 export { PopoverContent } from './components/popover-content';
 export { enqueueFont } from './controls/font-family-control/enqueue-font';
 export { transitionProperties, transitionsItemsList } from './controls/transition-control/data';
+export { DateTimeControl } from './controls/date-time-control';
+export { InlineEditingControl } from './controls/inline-editing-control';
+export { InlineEditor } from './components/inline-editor';
+export { InlineEditorToolbar } from './components/inline-editor-toolbar';
 
 // components
 export { ControlFormLabel } from './components/control-form-label';
 export { ControlToggleButtonGroup } from './components/control-toggle-button-group';
-export { CssEditor } from './components/css-code-editor/css-editor';
+export { ToggleButtonGroupUi } from './components/control-toggle-button-group';
+export { ClearIconButton } from './components/icon-buttons/clear-icon-button';
+export {
+	Repeater,
+	type SetRepeaterValuesMeta,
+	type ItemsActionPayload,
+	type RepeaterItem,
+} from './components/repeater/repeater';
+export { FloatingActionsBar } from './components/floating-bar';
+export { PopoverGridContainer } from './components/popover-grid-container';
 
 // types
 export type { ControlComponent } from './create-control';
 export type { ToggleButtonGroupItem } from './components/control-toggle-button-group';
 export type { EqualUnequalItems } from './controls/equal-unequal-sizes-control';
 export type { ControlActionsItems } from './control-actions/control-actions-context';
+export type { AdornmentComponent } from './control-adornments/control-adornments-context';
 export type { PropProviderProps } from './bound-prop-context';
-export type { SetValue } from './bound-prop-context/prop-context';
+export type { SetValue, SetValueMeta } from './bound-prop-context/prop-context';
 export type { ExtendedOption, Unit, LengthUnit, AngleUnit, TimeUnit } from './utils/size-control';
 export type { ToggleControlProps } from './controls/toggle-control';
 export type { FontCategory } from './controls/font-family-control/font-family-control';
@@ -59,9 +76,8 @@ export { createControl } from './create-control';
 export {
 	injectIntoRepeaterItemIcon,
 	injectIntoRepeaterItemLabel,
-	injectIntoRepeaterHeaderActions,
 	injectIntoRepeaterItemActions,
-} from './components/unstable-repeater/locations';
+} from './components/control-repeater/locations';
 
 // hooks
 export { useSyncExternalState } from './hooks/use-sync-external-state';

package/src/utils/convert-toggle-options-to-atomic.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { ToggleButtonGroupItem } from '@elementor/editor-controls';
+import * as Icons from '@elementor/icons';
+
+export type DynamicToggleOption = {
+	value: string;
+	label: string;
+	icon?: string;
+	showTooltip?: boolean;
+	exclusive?: boolean;
+};
+
+export const convertToggleOptionsToAtomic = (
+	options: DynamicToggleOption[]
+): Array< ToggleButtonGroupItem< string > & { exclusive?: boolean } > => {
+	return options.map( ( option ) => {
+		const iconName = option.icon;
+		const IconComponent = Icons[ iconName as keyof typeof Icons ];
+
+		return {
+			value: option.value,
+			label: option.label,
+			renderContent: ( { size } ) => {
+				if ( IconComponent ) {
+					return <IconComponent fontSize={ size } />;
+				}
+				return option.label;
+			},
+			showTooltip: option.showTooltip,
+			exclusive: option.exclusive,
+		};
+	} );
+};

package/src/utils/escape-html-attr.ts

@@ -0,0 +1,11 @@
+export const escapeHtmlAttr = ( value: string ): string => {
+	const specialChars: Record< string, string > = {
+		'&': '&amp;',
+		'<': '&lt;',
+		'>': '&gt;',
+		"'": '&#39;',
+		'"': '&quot;',
+	};
+
+	return value.replace( /[&<>'"]/g, ( char ) => specialChars[ char ] || char );
+};

package/src/components/css-code-editor/css-editor.styles.ts

@@ -1,52 +0,0 @@
-import { Box, Button, styled } from '@elementor/ui';
-
-export const EditorWrapper = styled( Box )`
-	border: 1px solid var( --e-a-border-color );
-	border-radius: 8px;
-	padding: 10px 12px;
-	position: relative;
-	height: 200px;
-
-	.monaco-editor .suggest-widget {
-		width: 220px !important;
-		max-width: 220px !important;
-	}
-
-	.visual-content-dimmed {
-		opacity: 0.6;
-		color: #aaa !important;
-		pointer-events: none;
-	}
-`;
-
-export const ResizeHandle = styled( Button )`
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	height: 6px;
-	cursor: ns-resize;
-	background: transparent;
-	border: none;
-	padding: 0;
-
-	&:hover {
-		background: rgba( 0, 0, 0, 0.05 );
-	}
-
-	&:active {
-		background: rgba( 0, 0, 0, 0.1 );
-	}
-
-	&::after {
-		content: '';
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate( -50%, -50% );
-		width: 30px;
-		height: 2px;
-		background: var( --e-a-border-color );
-		border-radius: 1px;
-	}
-`;