@elementor/editor-controls 3.33.0-98 → 3.35.0-324

package/src/controls/repeatable-control.tsx

@@ -1,26 +1,27 @@
 import * as React from 'react';
 import { useMemo } from 'react';
-import { createArrayPropUtils } from '@elementor/editor-props';
+import { createArrayPropUtils, type SizePropValue } from '@elementor/editor-props';
 import { Box } from '@elementor/ui';
 
 import { PropProvider, useBoundProp } from '../bound-prop-context';
+import { ControlRepeater, Item, TooltipAddItemAction } from '../components/control-repeater';
+import { DisableItemAction } from '../components/control-repeater/actions/disable-item-action';
+import { DuplicateItemAction } from '../components/control-repeater/actions/duplicate-item-action';
+import { RemoveItemAction } from '../components/control-repeater/actions/remove-item-action';
+import { type TooltipAddItemActionProps } from '../components/control-repeater/actions/tooltip-add-item-action';
+import { EditItemPopover } from '../components/control-repeater/items/edit-item-popover';
+import { ItemsContainer } from '../components/control-repeater/items/items-container';
+import { type CollectionPropUtil, type RepeatablePropValue } from '../components/control-repeater/types';
 import { PopoverContent } from '../components/popover-content';
 import { PopoverGridContainer } from '../components/popover-grid-container';
-import { type CollectionPropUtil } from '../components/repeater';
-import { Header, Item, TooltipAddItemAction, UnstableRepeater } from '../components/unstable-repeater';
-import { DisableItemAction } from '../components/unstable-repeater/actions/disable-item-action';
-import { DuplicateItemAction } from '../components/unstable-repeater/actions/duplicate-item-action';
-import { RemoveItemAction } from '../components/unstable-repeater/actions/remove-item-action';
-import { type TooltipAddItemActionProps } from '../components/unstable-repeater/actions/tooltip-add-item-action';
-import { EditItemPopover } from '../components/unstable-repeater/items/edit-item-popover';
-import { ItemsContainer } from '../components/unstable-repeater/items/items-container';
-import { type RepeatablePropValue } from '../components/unstable-repeater/types';
+import { RepeaterHeader } from '../components/repeater/repeater-header';
 import { createControl } from '../create-control';
 import {
 	type ChildControlConfig,
 	RepeatableControlContext,
 	useRepeatableControlContext,
 } from '../hooks/use-repeatable-control-context';
+import { CUSTOM_SIZE_LABEL } from './size-control';
 
 type RepeatableControlProps = {
 	label: string;
@@ -49,7 +50,7 @@ export const RepeatableControl = createControl(
 		propKey,
 		addItemTooltipProps,
 	}: RepeatableControlProps ) => {
-		const { propTypeUtil: childPropTypeUtil } = childControlConfig;
+		const { propTypeUtil: childPropTypeUtil, isItemDisabled } = childControlConfig;
 
 		if ( ! childPropTypeUtil ) {
 			return null;
@@ -74,29 +75,35 @@ export const RepeatableControl = createControl(
 		return (
 			<PropProvider propType={ propType } value={ value } setValue={ setValue }>
 				<RepeatableControlContext.Provider value={ contextValue }>
-					<UnstableRepeater
+					<ControlRepeater
 						initial={ childPropTypeUtil.create( initialValues || null ) }
 						propTypeUtil={ childArrayPropTypeUtil as CollectionPropUtil< RepeatablePropValue > }
+						isItemDisabled={ isItemDisabled }
 					>
-						<Header label={ repeaterLabel }>
+						<RepeaterHeader label={ repeaterLabel }>
 							<TooltipAddItemAction
 								{ ...addItemTooltipProps }
 								newItemIndex={ 0 }
 								ariaLabel={ repeaterLabel }
 							/>
-						</Header>
-						<ItemsContainer
-							isSortable={ false }
-							itemTemplate={ <Item Icon={ ItemIcon } Label={ ItemLabel } /> }
-						>
-							{ showDuplicate && <DuplicateItemAction /> }
-							{ showToggle && <DisableItemAction /> }
-							<RemoveItemAction />
+						</RepeaterHeader>
+						<ItemsContainer isSortable={ false }>
+							<Item
+								Icon={ ItemIcon }
+								Label={ ItemLabel }
+								actions={
+									<>
+										{ showDuplicate && <DuplicateItemAction /> }
+										{ showToggle && <DisableItemAction /> }
+										<RemoveItemAction />
+									</>
+								}
+							/>
 						</ItemsContainer>
 						<EditItemPopover>
 							<Content />
 						</EditItemPopover>
-					</UnstableRepeater>
+					</ControlRepeater>
 				</RepeatableControlContext.Provider>
 			</PropProvider>
 		);
@@ -126,7 +133,7 @@ const interpolate = ( template: string, data: Record< string, unknown > ) => {
 		const value = getNestedValue( data, path );
 
 		if ( typeof value === 'object' && value !== null && ! Array.isArray( value ) ) {
-			if ( value.name ) {
+			if ( 'name' in value && value.name ) {
 				return value.name as string;
 			}
 
@@ -142,12 +149,32 @@ const interpolate = ( template: string, data: Record< string, unknown > ) => {
 };
 
 const getNestedValue = ( obj: Record< string, unknown >, path: string ) => {
-	return path.split( '.' ).reduce( ( current: Record< string, unknown >, key ) => {
+	let parentObj: Record< string, unknown > = {};
+	const pathKeys = path.split( '.' );
+	const key = pathKeys.slice( -1 )[ 0 ];
+
+	let value: unknown = pathKeys.reduce( ( current: Record< string, unknown >, currentKey, currentIndex ) => {
+		if ( currentIndex === pathKeys.length - 2 ) {
+			parentObj = current;
+		}
+
 		if ( current && typeof current === 'object' ) {
-			return current[ key ] as Record< string, unknown >;
+			return current[ currentKey ] as Record< string, unknown >;
 		}
+
 		return {};
 	}, obj );
+
+	value = !! value ? value : '';
+	const propType = parentObj?.$$type;
+	const propValue = parentObj?.value as SizePropValue[ 'value' ];
+	const doesValueRepresentCustomSize = key === 'unit' && propType === 'size' && propValue?.unit === 'custom';
+
+	if ( ! doesValueRepresentCustomSize ) {
+		return value;
+	}
+
+	return propValue?.size ? '' : CUSTOM_SIZE_LABEL;
 };
 
 const isEmptyValue = ( val: unknown ) => {
@@ -190,11 +217,19 @@ const shouldShowPlaceholder = ( pattern: string, data: Record< string, unknown >
 	return false;
 };
 
+const getTextColor = ( isReadOnly: boolean, showPlaceholder: boolean ): string => {
+	if ( isReadOnly ) {
+		return 'text.disabled';
+	}
+	return showPlaceholder ? 'text.tertiary' : 'text.primary';
+};
+
 const ItemLabel = ( { value }: { value: Record< string, unknown > } ) => {
-	const { placeholder, patternLabel } = useRepeatableControlContext();
+	const { placeholder, patternLabel, props: childProps } = useRepeatableControlContext();
 	const showPlaceholder = shouldShowPlaceholder( patternLabel, value );
 	const label = showPlaceholder ? placeholder : interpolate( patternLabel, value );
-	const color = showPlaceholder ? 'text.tertiary' : 'text.primary';
+	const isReadOnly = !! childProps?.readOnly;
+	const color = getTextColor( isReadOnly, showPlaceholder );
 
 	return (
 		<Box component="span" color={ color }>

package/src/controls/select-control-wrapper.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+
+import { createControl } from '../create-control';
+import { SelectControl, type SelectOption } from './select-control';
+
+type ExtendedWindow = Window & {
+	elementor: { $previewContents: [ HTMLIFrameElement ]; config: { document: { id: string } } };
+};
+
+const getOffCanvasElements = () => {
+	const extendedWindow = window as unknown as ExtendedWindow;
+	const documentId = extendedWindow.elementor.config.document.id;
+	const offCanvasElements = extendedWindow.elementor.$previewContents[ 0 ].querySelectorAll(
+		`[data-elementor-id="${ documentId }"] .elementor-widget-off-canvas.elementor-element-edit-mode`
+	);
+
+	return Array.from( offCanvasElements as unknown as HTMLElement[] ).map( ( offCanvasElement ) => {
+		return {
+			label: offCanvasElement.querySelector( '.e-off-canvas' )?.getAttribute( 'aria-label' ) ?? '',
+			value: offCanvasElement.dataset.id,
+		} as SelectOption;
+	} );
+};
+
+const collectionMethods = {
+	'off-canvas': getOffCanvasElements,
+} as const;
+
+type SelectControlWrapperProps = Parameters< typeof SelectControl >[ 0 ] & {
+	collectionId?: keyof typeof collectionMethods;
+};
+
+const useDynamicOptions = (
+	collectionId?: keyof typeof collectionMethods,
+	initialOptions?: SelectControlWrapperProps[ 'options' ]
+) => {
+	const [ options, setOptions ] = useState< SelectControlWrapperProps[ 'options' ] >( initialOptions ?? [] );
+
+	useEffect( () => {
+		if ( ! collectionId || ! collectionMethods[ collectionId ] ) {
+			setOptions( initialOptions ?? [] );
+			return;
+		}
+		setOptions( collectionMethods[ collectionId ]() );
+	}, [ collectionId, initialOptions ] );
+
+	return options;
+};
+
+export const SelectControlWrapper = createControl(
+	( { collectionId, options, ...props }: SelectControlWrapperProps ) => {
+		const actualOptions = useDynamicOptions( collectionId, options );
+
+		return <SelectControl options={ actualOptions } { ...props } />;
+	}
+);

package/src/controls/select-control.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { stringPropTypeUtil, type StringPropValue } from '@elementor/editor-props';
 import { MenuListItem } from '@elementor/editor-ui';
-import { Select, type SelectChangeEvent, Typography } from '@elementor/ui';
+import { Select, type SelectChangeEvent, type SelectProps, Typography } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
@@ -13,12 +13,13 @@ export type SelectOption = {
 	disabled?: boolean;
 };
 
-type Props = {
+type SelectControlProps = {
 	options: SelectOption[];
 	onChange?: ( newValue: string | null, previousValue: string | null | undefined ) => void;
+	MenuProps?: SelectProps[ 'MenuProps' ];
+	ariaLabel?: string;
 };
-
-export const SelectControl = createControl( ( { options, onChange }: Props ) => {
+export const SelectControl = createControl( ( { options, onChange, MenuProps, ariaLabel }: SelectControlProps ) => {
 	const { value, setValue, disabled, placeholder } = useBoundProp( stringPropTypeUtil );
 	const handleChange = ( event: SelectChangeEvent< StringPropValue[ 'value' ] > ) => {
 		const newValue = event.target.value || null;
@@ -26,6 +27,7 @@ export const SelectControl = createControl( ( { options, onChange }: Props ) =>
 		onChange?.( newValue, value );
 		setValue( newValue );
 	};
+	const isDisabled = disabled || options.length === 0;
 
 	return (
 		<ControlActions>
@@ -33,6 +35,8 @@ export const SelectControl = createControl( ( { options, onChange }: Props ) =>
 				sx={ { overflow: 'hidden' } }
 				displayEmpty
 				size="tiny"
+				MenuProps={ MenuProps }
+				aria-label={ ariaLabel || placeholder }
 				renderValue={ ( selectedValue: string | null ) => {
 					const findOptionByValue = ( searchValue: string | null ) =>
 						options.find( ( opt ) => opt.value === searchValue );
@@ -55,7 +59,7 @@ export const SelectControl = createControl( ( { options, onChange }: Props ) =>
 				} }
 				value={ value ?? '' }
 				onChange={ handleChange }
-				disabled={ disabled }
+				disabled={ isDisabled }
 				fullWidth
 			>
 				{ options.map( ( { label, ...props } ) => (

package/src/controls/selection-size-control.tsx

@@ -20,13 +20,22 @@ type SelectionSizeControlProps = {
 	sizeLabel: string;
 	selectionConfig: SelectionComponentConfig;
 	sizeConfigMap: Record< string, SizeControlConfig >;
+	isRepeaterControl?: boolean;
 };
 
 export const SelectionSizeControl = createControl(
-	( { selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }: SelectionSizeControlProps ) => {
+	( {
+		selectionLabel,
+		sizeLabel,
+		selectionConfig,
+		sizeConfigMap,
+		isRepeaterControl = false,
+	}: SelectionSizeControlProps ) => {
 		const { value, setValue, propType } = useBoundProp( selectionSizePropTypeUtil );
 		const rowRef = useRef< HTMLDivElement >( null );
 
+		const sizeFieldId = sizeLabel.replace( /\s+/g, '-' ).toLowerCase();
+
 		const currentSizeConfig = useMemo( () => {
 			switch ( value.selection.$$type ) {
 				case 'key-value':
@@ -53,7 +62,7 @@ export const SelectionSizeControl = createControl(
 					{ currentSizeConfig && (
 						<>
 							<Grid item xs={ 6 } sx={ { display: 'flex', alignItems: 'center' } }>
-								<ControlFormLabel>{ sizeLabel }</ControlFormLabel>
+								<ControlFormLabel htmlFor={ sizeFieldId }>{ sizeLabel }</ControlFormLabel>
 							</Grid>
 							<Grid item xs={ 6 }>
 								<PropKeyProvider bind="size">
@@ -62,6 +71,8 @@ export const SelectionSizeControl = createControl(
 										variant={ currentSizeConfig.variant }
 										units={ currentSizeConfig.units }
 										defaultUnit={ currentSizeConfig.defaultUnit }
+										id={ sizeFieldId }
+										isRepeaterControl={ isRepeaterControl }
 									/>
 								</PropKeyProvider>
 							</Grid>

package/src/controls/size-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type RefObject, useEffect, useState } from 'react';
+import { type RefObject, useEffect, useMemo } from 'react';
 import { type PropType, sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
 import { usePopupState } from '@elementor/ui';
@@ -42,6 +42,8 @@ type BaseSizeControlProps = {
 	min?: number;
 	enablePropTypeUnits?: boolean;
 	id?: string;
+	ariaLabel?: string;
+	isRepeaterControl?: boolean;
 };
 
 type LengthSizeControlProps = BaseSizeControlProps &
@@ -79,6 +81,8 @@ const defaultUnits: Record< SizeControlProps[ 'variant' ], Unit[] > = {
 	time: [ ...timeUnits ] as TimeUnit[],
 } as const;
 
+export const CUSTOM_SIZE_LABEL = 'fx';
+
 export const SizeControl = createControl(
 	( {
 		variant = 'length' as SizeControlProps[ 'variant' ],
@@ -92,6 +96,8 @@ export const SizeControl = createControl(
 		min = 0,
 		enablePropTypeUnits = false,
 		id,
+		ariaLabel,
+		isRepeaterControl = false,
 	}: Omit< SizeControlProps, 'variant' > & { variant?: SizeVariant } ) => {
 		const {
 			value: sizeValue,
@@ -102,28 +108,22 @@ export const SizeControl = createControl(
 			propType,
 		} = useBoundProp( sizePropTypeUtil );
 		const actualDefaultUnit = defaultUnit ?? externalPlaceholder?.unit ?? defaultSelectedUnit[ variant ];
-		const [ internalState, setInternalState ] = useState( createStateFromSizeProp( sizeValue, actualDefaultUnit ) );
 		const activeBreakpoint = useActiveBreakpoint();
-		const actualUnits = resolveUnits( propType, enablePropTypeUnits, variant, units );
-
 		const actualExtendedOptions = useSizeExtendedOptions( extendedOptions || [], disableCustom ?? false );
+		const actualUnits = resolveUnits( propType, enablePropTypeUnits, variant, units, actualExtendedOptions );
+
 		const popupState = usePopupState( { variant: 'popover' } );
 
+		const memorizedExternalState = useMemo(
+			() => createStateFromSizeProp( sizeValue, actualDefaultUnit ),
+			[ sizeValue, actualDefaultUnit ]
+		);
+
 		const [ state, setState ] = useSyncExternalState( {
-			external: internalState,
+			external: memorizedExternalState,
 			setExternal: ( newState: State | null, options, meta ) =>
 				setSizeValue( extractValueFromState( newState ), options, meta ),
-			persistWhen: ( newState ) => {
-				if ( ! newState?.unit ) {
-					return false;
-				}
-
-				if ( isUnitExtendedOption( newState.unit ) ) {
-					return newState.unit === 'auto' ? true : !! newState.custom;
-				}
-
-				return !! newState?.numeric || newState?.numeric === 0;
-			},
+			persistWhen: ( newState ) => !! extractValueFromState( newState ),
 			fallback: ( newState ) => ( {
 				unit: newState?.unit ?? actualDefaultUnit,
 				numeric: newState?.numeric ?? DEFAULT_SIZE,
@@ -132,7 +132,7 @@ export const SizeControl = createControl(
 		} );
 
 		const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = actualDefaultUnit } =
-			extractValueFromState( state ) || {};
+			extractValueFromState( state, true ) || {};
 
 		const handleUnitChange = ( newUnit: Unit | ExtendedOption ) => {
 			if ( newUnit === 'custom' ) {
@@ -169,7 +169,7 @@ export const SizeControl = createControl(
 			}
 		};
 
-		useEffect( () => {
+		const handleLinkedSizeControlChanges = () => {
 			const newState = createStateFromSizeProp(
 				sizeValue,
 				state.unit === 'custom' ? state.unit : actualDefaultUnit,
@@ -188,12 +188,18 @@ export const SizeControl = createControl(
 			}
 
 			if ( state.unit === newState.unit ) {
-				setInternalState( mergedStates );
+				setState( mergedStates );
 
 				return;
 			}
 
 			setState( newState );
+		};
+
+		useEffect( () => {
+			if ( ! isRepeaterControl ) {
+				handleLinkedSizeControlChanges();
+			}
 			// eslint-disable-next-line react-hooks/exhaustive-deps
 		}, [ sizeValue ] );
 
@@ -212,7 +218,7 @@ export const SizeControl = createControl(
 					disabled={ disabled }
 					size={ controlSize }
 					unit={ controlUnit }
-					units={ [ ...actualUnits, ...( actualExtendedOptions || [] ) ] }
+					units={ [ ...actualUnits ] }
 					placeholder={ placeholder }
 					startIcon={ startIcon }
 					handleSizeChange={ handleSizeChange }
@@ -222,6 +228,7 @@ export const SizeControl = createControl(
 					popupState={ popupState }
 					min={ min }
 					id={ id }
+					ariaLabel={ ariaLabel }
 				/>
 				{ anchorRef?.current && popupState.isOpen && (
 					<TextFieldPopover
@@ -241,12 +248,13 @@ function resolveUnits(
 	propType: PropType,
 	enablePropTypeUnits: boolean,
 	variant: SizeVariant,
-	externalUnits?: Unit[]
+	externalUnits?: Unit[],
+	actualExtendedOptions?: ExtendedOption[]
 ) {
 	const fallback = [ ...defaultUnits[ variant ] ];
 
 	if ( ! enablePropTypeUnits ) {
-		return externalUnits ?? fallback;
+		return [ ...( externalUnits ?? fallback ), ...( actualExtendedOptions || [] ) ];
 	}
 
 	return ( propType.settings?.available_units as Unit[] ) ?? fallback;
@@ -279,7 +287,7 @@ function createStateFromSizeProp(
 	};
 }
 
-function extractValueFromState( state: State | null ): SizeValue | null {
+function extractValueFromState( state: State | null, allowEmpty: boolean = false ): SizeValue | null {
 	if ( ! state ) {
 		return null;
 	}
@@ -294,10 +302,20 @@ function extractValueFromState( state: State | null ): SizeValue | null {
 		return { size: '', unit };
 	}
 
+	if ( unit === 'custom' ) {
+		return { size: state.custom ?? '', unit: 'custom' };
+	}
+
+	const numeric = state.numeric;
+
+	if ( ! allowEmpty && ( numeric === undefined || numeric === null || Number.isNaN( numeric ) ) ) {
+		return null;
+	}
+
 	return {
-		size: state[ unit === 'custom' ? 'custom' : 'numeric' ],
+		size: numeric,
 		unit,
-	} as SizeValue;
+	};
 }
 
 function areStatesEqual( state1: State, state2: State ): boolean {

package/src/controls/svg-media-control.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { useState } from 'react';
+import { useCurrentUserCapabilities } from '@elementor/editor-current-user';
 import { imageSrcPropTypeUtil } from '@elementor/editor-props';
 import { UploadIcon } from '@elementor/icons';
-import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack, styled } from '@elementor/ui';
+import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack, styled, ThemeProvider } from '@elementor/ui';
 import { type OpenOptions, useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../bound-prop-context';
+import { ConditionalControlInfotip } from '../components/conditional-control-infotip';
 import { EnableUnfilteredModal } from '../components/enable-unfiltered-modal';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
@@ -47,6 +49,8 @@ export const SvgMediaControl = createControl( () => {
 	const src = attachment?.url ?? url?.value ?? null;
 	const { data: allowSvgUpload } = useUnfilteredFilesUpload();
 	const [ unfilteredModalOpenState, setUnfilteredModalOpenState ] = useState( false );
+	const { canUser } = useCurrentUserCapabilities();
+	const canManageOptions = canUser( 'manage_options' );
 
 	const { open } = useWpMediaFrame( {
 		mediaTypes: [ 'svg' ],
@@ -79,6 +83,18 @@ export const SvgMediaControl = createControl( () => {
 		}
 	};
 
+	const infotipProps = {
+		title: __( "Sorry, you can't upload that file yet.", 'elementor' ),
+		description: (
+			<>
+				{ __( 'To upload them anyway, ask the site administrator to enable unfiltered', 'elementor' ) }
+				<br />
+				{ __( 'file uploads.', 'elementor' ) }
+			</>
+		),
+		isEnabled: ! canManageOptions,
+	};
+
 	return (
 		<Stack gap={ 1 }>
 			<EnableUnfilteredModal open={ unfilteredModalOpenState } onClose={ onCloseUnfilteredModal } />
@@ -112,15 +128,22 @@ export const SvgMediaControl = createControl( () => {
 							>
 								{ __( 'Select SVG', 'elementor' ) }
 							</Button>
-							<Button
-								size="tiny"
-								variant="text"
-								color="inherit"
-								startIcon={ <UploadIcon /> }
-								onClick={ () => handleClick( MODE_UPLOAD ) }
-							>
-								{ __( 'Upload', 'elementor' ) }
-							</Button>
+							<ConditionalControlInfotip { ...infotipProps }>
+								<span>
+									<ThemeProvider colorScheme={ canManageOptions ? 'light' : 'dark' }>
+										<Button
+											size="tiny"
+											variant="text"
+											color="inherit"
+											startIcon={ <UploadIcon /> }
+											disabled={ canManageOptions ? false : true }
+											onClick={ () => canManageOptions && handleClick( MODE_UPLOAD ) }
+										>
+											{ __( 'Upload', 'elementor' ) }
+										</Button>
+									</ThemeProvider>
+								</span>
+							</ConditionalControlInfotip>
 						</Stack>
 					</CardOverlay>
 				</StyledCard>

package/src/controls/text-area-control.tsx

@@ -8,9 +8,10 @@ import { createControl } from '../create-control';
 
 type Props = {
 	placeholder?: string;
+	ariaLabel?: string;
 };
 
-export const TextAreaControl = createControl( ( { placeholder }: Props ) => {
+export const TextAreaControl = createControl( ( { placeholder, ariaLabel }: Props ) => {
 	const { value, setValue, disabled } = useBoundProp( stringPropTypeUtil );
 
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
@@ -28,6 +29,9 @@ export const TextAreaControl = createControl( ( { placeholder }: Props ) => {
 				value={ value ?? '' }
 				onChange={ handleChange }
 				placeholder={ placeholder }
+				inputProps={ {
+					...( ariaLabel ? { 'aria-label': ariaLabel } : {} ),
+				} }
 			/>
 		</ControlActions>
 	);

package/src/controls/text-control.tsx

@@ -14,6 +14,7 @@ export const TextControl = createControl(
 		inputDisabled,
 		helperText,
 		sx,
+		ariaLabel,
 	}: {
 		placeholder?: string;
 		error?: boolean;
@@ -21,6 +22,7 @@ export const TextControl = createControl(
 		inputDisabled?: boolean;
 		helperText?: string;
 		sx?: SxProps;
+		ariaLabel?: string;
 	} ) => {
 		const { value, setValue, disabled } = useBoundProp( stringPropTypeUtil );
 		const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
@@ -37,6 +39,9 @@ export const TextControl = createControl(
 					error={ error }
 					helperText={ helperText }
 					sx={ sx }
+					inputProps={ {
+						...( ariaLabel ? { 'aria-label': ariaLabel } : {} ),
+					} }
 				/>
 			</ControlActions>
 		);

package/src/controls/toggle-control.tsx

@@ -5,6 +5,7 @@ import { type ToggleButtonProps } from '@elementor/ui';
 import { useBoundProp } from '../bound-prop-context';
 import { ControlToggleButtonGroup, type ToggleButtonGroupItem } from '../components/control-toggle-button-group';
 import { createControl } from '../create-control';
+import { convertToggleOptionsToAtomic, type DynamicToggleOption } from '../utils/convert-toggle-options-to-atomic';
 
 export type ToggleControlProps< T extends PropValue > = {
 	options: Array< ToggleButtonGroupItem< T > & { exclusive?: boolean } >;
@@ -12,6 +13,7 @@ export type ToggleControlProps< T extends PropValue > = {
 	size?: ToggleButtonProps[ 'size' ];
 	exclusive?: boolean;
 	maxItems?: number;
+	convertOptions?: boolean;
 };
 
 export const ToggleControl = createControl(
@@ -21,10 +23,17 @@ export const ToggleControl = createControl(
 		size = 'tiny',
 		exclusive = true,
 		maxItems,
+		convertOptions = false,
 	}: ToggleControlProps< StringPropValue[ 'value' ] > ) => {
 		const { value, setValue, placeholder, disabled } = useBoundProp( stringPropTypeUtil );
 
-		const exclusiveValues = options.filter( ( option ) => option.exclusive ).map( ( option ) => option.value );
+		const processedOptions = convertOptions
+			? convertToggleOptionsToAtomic( options as DynamicToggleOption[] )
+			: ( options as Array< ToggleButtonGroupItem< StringPropValue[ 'value' ] > & { exclusive?: boolean } > );
+
+		const exclusiveValues = processedOptions
+			.filter( ( option ) => option.exclusive )
+			.map( ( option ) => option.value );
 
 		const handleNonExclusiveToggle = ( selectedValues: StringPropValue[ 'value' ][] ) => {
 			const newSelectedValue = selectedValues[ selectedValues.length - 1 ];
@@ -38,7 +47,7 @@ export const ToggleControl = createControl(
 		};
 
 		const toggleButtonGroupProps = {
-			items: options,
+			items: processedOptions,
 			maxItems,
 			fullWidth,
 			size,

package/src/controls/transform-control/functions/axis-row.tsx

@@ -33,6 +33,7 @@ export const AxisRow = ( { label, bind, startIcon, anchorRef, units, variant = '
 							units={ units }
 							variant={ variant }
 							min={ -Number.MAX_SAFE_INTEGER }
+							isRepeaterControl
 							id={ safeId }
 						/>
 					</PropKeyProvider>

package/src/controls/transform-control/transform-icon.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type TransformFunctionsItemPropValue } from '@elementor/editor-props';
-import { ArrowsMaximizeIcon, ExpandIcon, RotateClockwise2Icon, SkewXIcon } from '@elementor/icons';
+import { ArrowAutofitHeightIcon, ArrowsMaximizeIcon, RotateClockwise2Icon, SkewXIcon } from '@elementor/icons';
 
 import { TransformFunctionKeys } from './initial-values';
 
@@ -9,7 +9,7 @@ export const TransformIcon = ( { value }: { value: TransformFunctionsItemPropVal
 		case TransformFunctionKeys.move:
 			return <ArrowsMaximizeIcon fontSize="tiny" />;
 		case TransformFunctionKeys.scale:
-			return <ExpandIcon fontSize="tiny" />;
+			return <ArrowAutofitHeightIcon fontSize="tiny" />;
 		case TransformFunctionKeys.rotate:
 			return <RotateClockwise2Icon fontSize="tiny" />;
 		case TransformFunctionKeys.skew: