@elementor/editor-controls 3.33.0-99 → 3.34.3

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:

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

@@ -3,53 +3,36 @@ import type { TransformFunctionsItemPropValue } from '@elementor/editor-props';
 import { Box } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { CUSTOM_SIZE_LABEL } from '../size-control';
 import { defaultValues, TransformFunctionKeys } from './initial-values';
 
-const transformMoveValue = ( value: TransformFunctionsItemPropValue[ 'value' ] ) =>
-	Object.values( value )
+const formatLabel = ( value: TransformFunctionsItemPropValue[ 'value' ], functionType: keyof typeof defaultValues ) => {
+	return Object.values( value )
 		.map( ( axis ) => {
-			const size = axis?.value?.size ?? defaultValues.move.size;
-			const unit = axis?.value?.unit ?? defaultValues.move.unit;
+			if ( functionType === 'scale' ) {
+				return axis?.value || defaultValues[ functionType ];
+			}
 
-			return `${ size }${ unit }`;
-		} )
-		.join( ', ' );
-
-const transformScaleValue = ( value: TransformFunctionsItemPropValue[ 'value' ] ) =>
-	Object.values( value )
-		.map( ( axis ) => axis?.value || defaultValues.scale )
-		.join( ', ' );
-
-const transformRotateValue = ( value: TransformFunctionsItemPropValue[ 'value' ] ) =>
-	Object.values( value )
-		.map( ( axis ) => {
-			const size = axis?.value?.size ?? defaultValues.rotate.size;
-			const unit = axis?.value?.unit ?? defaultValues.rotate.unit;
+			const defaults = defaultValues[ functionType ];
+			const size = axis?.value?.size ?? defaults.size;
+			const unit = axis?.value?.unit ?? defaults.unit;
 
-			return `${ size }${ unit }`;
-		} )
-		.join( ', ' );
-const transformSkewValue = ( value: TransformFunctionsItemPropValue[ 'value' ] ) =>
-	Object.values( value )
-		.map( ( axis ) => {
-			const size = axis?.value?.size ?? defaultValues.skew.size;
-			const unit = axis?.value?.unit ?? defaultValues.skew.unit;
-
-			return `${ size }${ unit }`;
+			return unit === 'custom' ? size || CUSTOM_SIZE_LABEL : `${ size }${ unit }`;
 		} )
 		.join( ', ' );
+};
 
 export const TransformLabel = ( props: { value: TransformFunctionsItemPropValue } ) => {
 	const { $$type, value } = props.value;
 	switch ( $$type ) {
 		case TransformFunctionKeys.move:
-			return <Label label={ __( 'Move', 'elementor' ) } value={ transformMoveValue( value ) } />;
+			return <Label label={ __( 'Move', 'elementor' ) } value={ formatLabel( value, 'move' ) } />;
 		case TransformFunctionKeys.scale:
-			return <Label label={ __( 'Scale', 'elementor' ) } value={ transformScaleValue( value ) } />;
+			return <Label label={ __( 'Scale', 'elementor' ) } value={ formatLabel( value, 'scale' ) } />;
 		case TransformFunctionKeys.rotate:
-			return <Label label={ __( 'Rotate', 'elementor' ) } value={ transformRotateValue( value ) } />;
+			return <Label label={ __( 'Rotate', 'elementor' ) } value={ formatLabel( value, 'rotate' ) } />;
 		case TransformFunctionKeys.skew:
-			return <Label label={ __( 'Skew', 'elementor' ) } value={ transformSkewValue( value ) } />;
+			return <Label label={ __( 'Skew', 'elementor' ) } value={ formatLabel( value, 'skew' ) } />;
 		default:
 			return '';
 	}

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

@@ -2,28 +2,22 @@ import * as React from 'react';
 import { useRef } from 'react';
 import { type PropType, transformFunctionsPropTypeUtil, transformPropTypeUtil } from '@elementor/editor-props';
 import { AdjustmentsIcon, InfoCircleFilledIcon } from '@elementor/icons';
-import { bindTrigger, Box, IconButton, type PopupState, Typography, usePopupState } from '@elementor/ui';
+import { bindTrigger, Box, IconButton, type PopupState, Tooltip, Typography, usePopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../bound-prop-context';
-import {
-	Header,
-	Item,
-	ItemsContainer,
-	TooltipAddItemAction,
-	UnstableRepeater,
-} from '../../components/unstable-repeater';
-import { DisableItemAction } from '../../components/unstable-repeater/actions/disable-item-action';
-import { RemoveItemAction } from '../../components/unstable-repeater/actions/remove-item-action';
-import { EditItemPopover } from '../../components/unstable-repeater/items/edit-item-popover';
-import { injectIntoRepeaterHeaderActions } from '../../components/unstable-repeater/locations';
+import { ControlRepeater, Item, ItemsContainer, TooltipAddItemAction } from '../../components/control-repeater';
+import { DisableItemAction } from '../../components/control-repeater/actions/disable-item-action';
+import { RemoveItemAction } from '../../components/control-repeater/actions/remove-item-action';
+import { EditItemPopover } from '../../components/control-repeater/items/edit-item-popover';
+import { RepeaterHeader } from '../../components/repeater/repeater-header';
 import { ControlAdornments } from '../../control-adornments/control-adornments';
 import { createControl } from '../../create-control';
 import { initialRotateValue, initialScaleValue, initialSkewValue, initialTransformValue } from './initial-values';
-import { TransformBaseControl } from './transform-base-control';
 import { TransformContent } from './transform-content';
 import { TransformIcon } from './transform-icon';
 import { TransformLabel } from './transform-label';
+import { TransformSettingsControl } from './transform-settings-control';
 
 const SIZE = 'tiny';
 
@@ -32,19 +26,11 @@ export const TransformRepeaterControl = createControl( () => {
 	const headerRef = useRef< HTMLDivElement >( null );
 	const popupState = usePopupState( { variant: 'popover' } );
 
-	const repeaterBindKey = 'transform-functions';
-
-	injectIntoRepeaterHeaderActions( {
-		id: 'transform-base-control',
-		component: () => <TransformBasePopoverTrigger popupState={ popupState } repeaterBindKey={ repeaterBindKey } />,
-		options: { overwrite: true },
-	} );
-
 	return (
 		<PropProvider { ...context }>
-			<TransformBaseControl popupState={ popupState } anchorRef={ headerRef } />
-			<PropKeyProvider bind={ repeaterBindKey }>
-				<Repeater headerRef={ headerRef } propType={ context.propType } />
+			<TransformSettingsControl popupState={ popupState } anchorRef={ headerRef } />
+			<PropKeyProvider bind={ 'transform-functions' }>
+				<Repeater headerRef={ headerRef } propType={ context.propType } popupState={ popupState } />
 			</PropKeyProvider>
 		</PropProvider>
 	);
@@ -63,10 +49,18 @@ const ToolTip = (
 	</Box>
 );
 
-const Repeater = ( { headerRef, propType }: { headerRef: React.RefObject< HTMLDivElement >; propType: PropType } ) => {
+const Repeater = ( {
+	headerRef,
+	propType,
+	popupState,
+}: {
+	headerRef: React.RefObject< HTMLDivElement >;
+	propType: PropType;
+	popupState: PopupState;
+} ) => {
 	const transformFunctionsContext = useBoundProp( transformFunctionsPropTypeUtil );
 	const availableValues = [ initialTransformValue, initialScaleValue, initialRotateValue, initialSkewValue ];
-	const { value: transformValues } = transformFunctionsContext;
+	const { value: transformValues, bind } = transformFunctionsContext;
 
 	const getInitialValue = () => {
 		return availableValues.find( ( value ) => ! transformValues?.some( ( item ) => item.$$type === value.$$type ) );
@@ -76,30 +70,39 @@ const Repeater = ( { headerRef, propType }: { headerRef: React.RefObject< HTMLDi
 
 	return (
 		<PropProvider { ...transformFunctionsContext }>
-			<UnstableRepeater
+			<ControlRepeater
 				initial={ getInitialValue() ?? initialTransformValue }
 				propTypeUtil={ transformFunctionsPropTypeUtil }
 			>
-				<Header
+				<RepeaterHeader
 					label={ __( 'Transform', 'elementor' ) }
 					adornment={ () => <ControlAdornments customContext={ { path: [ 'transform' ], propType } } /> }
 					ref={ headerRef }
 				>
+					<TransformBasePopoverTrigger popupState={ popupState } repeaterBindKey={ bind } />
 					<TooltipAddItemAction
 						disabled={ shouldDisableAddItem }
 						tooltipContent={ ToolTip }
 						enableTooltip={ shouldDisableAddItem }
 						ariaLabel={ 'transform' }
 					/>
-				</Header>
-				<ItemsContainer itemTemplate={ <Item Icon={ TransformIcon } Label={ TransformLabel } /> }>
-					<DisableItemAction />
-					<RemoveItemAction />
+				</RepeaterHeader>
+				<ItemsContainer>
+					<Item
+						Icon={ TransformIcon }
+						Label={ TransformLabel }
+						actions={
+							<>
+								<DisableItemAction />
+								<RemoveItemAction />
+							</>
+						}
+					/>
 				</ItemsContainer>
 				<EditItemPopover>
 					<TransformContent />
 				</EditItemPopover>
-			</UnstableRepeater>
+			</ControlRepeater>
 		</PropProvider>
 	);
 };
@@ -112,10 +115,13 @@ const TransformBasePopoverTrigger = ( {
 	repeaterBindKey: string;
 } ) => {
 	const { bind } = useBoundProp();
+	const titleLabel = __( 'Transform settings', 'elementor' );
 
 	return bind !== repeaterBindKey ? null : (
-		<IconButton size={ SIZE } aria-label={ __( 'Base Transform', 'elementor' ) } { ...bindTrigger( popupState ) }>
-			<AdjustmentsIcon fontSize={ SIZE } />
-		</IconButton>
+		<Tooltip title={ titleLabel } placement="top">
+			<IconButton size={ SIZE } aria-label={ titleLabel } { ...bindTrigger( popupState ) }>
+				<AdjustmentsIcon fontSize={ SIZE } />
+			</IconButton>
+		</Tooltip>
 	);
 };

package/src/controls/transform-control/{transform-base-control.tsx → transform-settings-control.tsx}

@@ -11,7 +11,7 @@ import { TransformOriginControl } from './transform-base-controls/transform-orig
 
 const SIZE = 'tiny';
 
-export const TransformBaseControl = ( {
+export const TransformSettingsControl = ( {
 	popupState,
 	anchorRef,
 }: {
@@ -38,7 +38,7 @@ export const TransformBaseControl = ( {
 			{ ...popupProps }
 		>
 			<PopoverHeader
-				title={ __( 'Base Transform', 'elementor' ) }
+				title={ __( 'Transform settings', 'elementor' ) }
 				onClose={ popupState.close }
 				icon={ <AdjustmentsIcon fontSize={ SIZE } /> }
 			/>

package/src/controls/transform-control/use-transform-tabs-history.tsx

@@ -13,7 +13,7 @@ import {
 import { useTabs } from '@elementor/ui';
 
 import { useBoundProp } from '../../bound-prop-context';
-import { useRepeaterContext } from '../../components/unstable-repeater/context/repeater-context';
+import { useRepeaterContext } from '../../components/control-repeater/context/repeater-context';
 import { type TransformFunction, TransformFunctionKeys } from './initial-values';
 
 type InitialTransformValues = {

package/src/controls/transition-control/data.ts

@@ -1,9 +1,11 @@
+import { type KeyValuePropValue, type SizePropValue } from '@elementor/editor-props';
 import { __ } from '@wordpress/i18n';
 
 export type TransitionProperty = {
 	label: string;
 	value: string;
 	unavailable?: boolean;
+	isDisabled?: boolean;
 };
 
 export type TransitionCategory = {
@@ -12,7 +14,20 @@ export type TransitionCategory = {
 	properties: TransitionProperty[];
 };
 
-export const initialTransitionValue = {
+export type TransitionValue = {
+	selection: KeyValuePropValue;
+	size: SizePropValue;
+};
+
+export type TransitionItem = {
+	$$type: 'selection-size';
+	value: {
+		$$type: 'key-value';
+		value: TransitionValue;
+	};
+};
+
+export const initialTransitionValue: TransitionValue = {
 	selection: {
 		$$type: 'key-value',
 		value: {

package/src/controls/transition-control/trainsition-events.ts

@@ -1,5 +1,5 @@
 import { getSelectedElements } from '@elementor/editor-elements';
-import { sendMixpanelEvent } from '@elementor/utils';
+import { trackEvent } from '@elementor/mixpanel';
 
 import { eventBus } from '../../services/event-bus';
 import { type initialTransitionValue } from './data';
@@ -19,7 +19,7 @@ export function subscribeToTransitionEvent() {
 		const value = payload?.itemValue?.selection?.value?.value?.value;
 		const selectedElements = getSelectedElements();
 		const widgetType = selectedElements[ 0 ]?.type ?? null;
-		sendMixpanelEvent( {
+		trackEvent( {
 			transition_type: value ?? 'unknown',
 			...transitionRepeaterMixpanelEvent,
 			widget_type: widgetType,