@elementor/editor-controls 1.5.0 → 3.32.0-21

package/src/controls/toggle-control.tsx

@@ -42,12 +42,13 @@ export const ToggleControl = createControl(
 			maxItems,
 			fullWidth,
 			size,
+			placeholder,
 		};
 
 		return exclusive ? (
 			<ControlToggleButtonGroup
 				{ ...toggleButtonGroupProps }
-				value={ value ?? placeholder ?? null }
+				value={ value ?? null }
 				onChange={ setValue }
 				disabled={ disabled }
 				exclusive={ true }
@@ -55,7 +56,7 @@ export const ToggleControl = createControl(
 		) : (
 			<ControlToggleButtonGroup
 				{ ...toggleButtonGroupProps }
-				value={ ( value ?? placeholder )?.split( ' ' ) ?? [] }
+				value={ value?.split( ' ' ) ?? [] }
 				onChange={ handleNonExclusiveToggle }
 				disabled={ disabled }
 				exclusive={ false }

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

@@ -1,5 +1,6 @@
 import { type RefObject } from 'react';
 import * as React from 'react';
+import { type AngleUnit } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 
 import { PropKeyProvider } from '../../../bound-prop-context';
@@ -12,9 +13,10 @@ type TransformAxisRowProps = {
 	bindValue: 'x' | 'y' | 'z';
 	startIcon: React.ReactNode;
 	anchorRef?: RefObject< HTMLDivElement | null >;
+	units?: AngleUnit[];
 };
 
-export const AxisRow = ( { label, bindValue, startIcon, anchorRef }: TransformAxisRowProps ) => {
+export const AxisRow = ( { label, bindValue, startIcon, anchorRef, units }: TransformAxisRowProps ) => {
 	return (
 		<Grid item xs={ 12 }>
 			<PopoverGridContainer ref={ anchorRef }>
@@ -23,7 +25,7 @@ export const AxisRow = ( { label, bindValue, startIcon, anchorRef }: TransformAx
 				</Grid>
 				<Grid item xs={ 6 }>
 					<PropKeyProvider bind={ bindValue }>
-						<SizeControl anchorRef={ anchorRef } startIcon={ startIcon } />
+						<SizeControl anchorRef={ anchorRef } startIcon={ startIcon } units={ units } variant="angle" />
 					</PropKeyProvider>
 				</Grid>
 			</PopoverGridContainer>

package/src/controls/transform-control/functions/move.tsx

@@ -6,6 +6,7 @@ import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
+import { TransformFunctionKeys } from '../types';
 import { AxisRow } from './axis-row';
 
 const moveAxisControls: { label: string; bindValue: 'x' | 'y' | 'z'; startIcon: React.ReactNode }[] = [
@@ -33,7 +34,7 @@ export const Move = () => {
 	return (
 		<Grid container spacing={ 1.5 }>
 			<PropProvider { ...context }>
-				<PropKeyProvider bind={ 'transform-move' }>
+				<PropKeyProvider bind={ TransformFunctionKeys.move }>
 					{ moveAxisControls.map( ( control ) => (
 						<AxisRow key={ control.bindValue } { ...control } anchorRef={ rowRef } />
 					) ) }

package/src/controls/transform-control/functions/rotate.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { rotateTransformPropTypeUtil } from '@elementor/editor-props';
+import { Arrow360Icon, RotateClockwiseIcon } from '@elementor/icons';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
+import { type AngleUnit } from '../../../utils/size-control';
+import { TransformFunctionKeys } from '../types';
+import { AxisRow } from './axis-row';
+
+const rotateAxisControls: { label: string; bindValue: 'x' | 'y' | 'z'; startIcon: React.ReactNode }[] = [
+	{
+		label: __( 'Rotate X', 'elementor' ),
+		bindValue: 'x',
+		startIcon: <Arrow360Icon fontSize={ 'tiny' } />,
+	},
+	{
+		label: __( 'Rotate Y', 'elementor' ),
+		bindValue: 'y',
+		startIcon: <Arrow360Icon fontSize="tiny" style={ { transform: 'scaleX(-1) rotate(-90deg)' } } />,
+	},
+	{
+		label: __( 'Rotate Z', 'elementor' ),
+		bindValue: 'z',
+		startIcon: <RotateClockwiseIcon fontSize={ 'tiny' } />,
+	},
+];
+
+const rotateUnits: AngleUnit[] = [ 'deg', 'rad', 'grad', 'turn' ];
+
+export const Rotate = () => {
+	const context = useBoundProp( rotateTransformPropTypeUtil );
+	const rowRef = useRef< HTMLDivElement >( null );
+
+	return (
+		<Grid container spacing={ 1.5 }>
+			<PropProvider { ...context }>
+				<PropKeyProvider bind={ TransformFunctionKeys.rotate }>
+					{ rotateAxisControls.map( ( control ) => (
+						<AxisRow key={ control.bindValue } { ...control } anchorRef={ rowRef } units={ rotateUnits } />
+					) ) }
+				</PropKeyProvider>
+			</PropProvider>
+		</Grid>
+	);
+};

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

@@ -0,0 +1,32 @@
+import { type RefObject } from 'react';
+import * as React from 'react';
+import { Grid } from '@elementor/ui';
+
+import { PropKeyProvider } from '../../../bound-prop-context';
+import { ControlLabel } from '../../../components/control-label';
+import { PopoverGridContainer } from '../../../components/popover-grid-container';
+import { NumberControl } from '../../number-control';
+
+type ScaleAxisRowProps = {
+	label: string;
+	bindValue: 'x' | 'y' | 'z';
+	startIcon: React.ReactNode;
+	anchorRef?: RefObject< HTMLDivElement | null >;
+};
+
+export const ScaleAxisRow = ( { label, bindValue, startIcon, anchorRef }: ScaleAxisRowProps ) => {
+	return (
+		<Grid item xs={ 12 }>
+			<PopoverGridContainer ref={ anchorRef }>
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ label }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<PropKeyProvider bind={ bindValue }>
+						<NumberControl step={ 0.1 } placeholder="1" startIcon={ startIcon } />
+					</PropKeyProvider>
+				</Grid>
+			</PopoverGridContainer>
+		</Grid>
+	);
+};

package/src/controls/transform-control/functions/scale.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { scaleTransformPropTypeUtil } from '@elementor/editor-props';
+import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from '@elementor/icons';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
+import { TransformFunctionKeys } from '../types';
+import { ScaleAxisRow } from './scale-axis-row';
+
+const scaleAxisControls: { label: string; bindValue: 'x' | 'y' | 'z'; startIcon: React.ReactNode }[] = [
+	{
+		label: __( 'Scale X', 'elementor' ),
+		bindValue: 'x',
+		startIcon: <ArrowRightIcon fontSize={ 'tiny' } />,
+	},
+	{
+		label: __( 'Scale Y', 'elementor' ),
+		bindValue: 'y',
+		startIcon: <ArrowDownSmallIcon fontSize={ 'tiny' } />,
+	},
+	{
+		label: __( 'Scale Z', 'elementor' ),
+		bindValue: 'z',
+		startIcon: <ArrowDownLeftIcon fontSize={ 'tiny' } />,
+	},
+];
+
+export const Scale = () => {
+	const context = useBoundProp( scaleTransformPropTypeUtil );
+	const rowRef = useRef< HTMLDivElement >( null );
+
+	return (
+		<Grid container spacing={ 1.5 }>
+			<PropProvider { ...context }>
+				<PropKeyProvider bind={ TransformFunctionKeys.scale }>
+					{ scaleAxisControls.map( ( control ) => (
+						<ScaleAxisRow key={ control.bindValue } { ...control } anchorRef={ rowRef } />
+					) ) }
+				</PropKeyProvider>
+			</PropProvider>
+		</Grid>
+	);
+};

package/src/controls/transform-control/functions/skew.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { skewTransformPropTypeUtil } from '@elementor/editor-props';
+import { ArrowLeftIcon, ArrowRightIcon } from '@elementor/icons';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
+import { type AngleUnit } from '../../../utils/size-control';
+import { TransformFunctionKeys } from '../types';
+import { AxisRow } from './axis-row';
+
+const skewAxisControls: { label: string; bindValue: 'x' | 'y'; startIcon: React.ReactNode }[] = [
+	{
+		label: __( 'Skew X', 'elementor' ),
+		bindValue: 'x',
+		startIcon: <ArrowRightIcon fontSize={ 'tiny' } />,
+	},
+	{
+		label: __( 'Skew Y', 'elementor' ),
+		bindValue: 'y',
+		startIcon: <ArrowLeftIcon fontSize="tiny" style={ { transform: 'scaleX(-1) rotate(-90deg)' } } />,
+	},
+];
+
+const skewUnits: AngleUnit[] = [ 'deg', 'rad', 'grad', 'turn' ];
+
+export const Skew = () => {
+	const context = useBoundProp( skewTransformPropTypeUtil );
+	const rowRef = useRef< HTMLDivElement >( null );
+
+	return (
+		<Grid container spacing={ 1.5 }>
+			<PropProvider { ...context }>
+				<PropKeyProvider bind={ TransformFunctionKeys.skew }>
+					{ skewAxisControls.map( ( control ) => (
+						<AxisRow key={ control.bindValue } { ...control } anchorRef={ rowRef } units={ skewUnits } />
+					) ) }
+				</PropKeyProvider>
+			</PropProvider>
+		</Grid>
+	);
+};

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

@@ -1,36 +1,73 @@
 import * as React from 'react';
-import type { PropKey } from '@elementor/editor-props';
-import { Box, Tab, TabPanel, Tabs, useTabs } from '@elementor/ui';
+import { type PropKey } from '@elementor/editor-props';
+import { Box, Tab, TabPanel, Tabs } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider } from '../../bound-prop-context';
 import { PopoverContent } from '../../components/popover-content';
 import { Move } from './functions/move';
-
-type TransformTabValue = 'transform-move';
+import { Rotate } from './functions/rotate';
+import { Scale } from './functions/scale';
+import { Skew } from './functions/skew';
+import {
+	initialRotateValue,
+	initialScaleValue,
+	initialSkewValue,
+	initialTransformValue,
+	TransformFunctionKeys,
+} from './types';
+import { useTransformTabsHistory } from './use-transform-tabs-history';
 
 export const TransformContent = ( { bind }: { anchorEl?: HTMLElement | null; bind: PropKey } ) => {
-	const { getTabsProps, getTabProps, getTabPanelProps } = useTabs< TransformTabValue >( 'transform-move' );
-
 	return (
 		<PropKeyProvider bind={ bind }>
-			<PopoverContent>
-				<Box sx={ { width: '100%' } }>
-					<Box sx={ { borderBottom: 1, borderColor: 'divider' } }>
-						<Tabs
-							size="small"
-							variant="fullWidth"
-							{ ...getTabsProps() }
-							aria-label={ __( 'Transform', 'elementor' ) }
-						>
-							<Tab label={ __( 'Move', 'elementor' ) } { ...getTabProps( 'transform-move' ) } />
-						</Tabs>
-					</Box>
-					<TabPanel sx={ { p: 1.5 } } { ...getTabPanelProps( 'transform-move' ) }>
-						<Move />
-					</TabPanel>
-				</Box>
-			</PopoverContent>
+			<Content />
 		</PropKeyProvider>
 	);
 };
+
+const Content = () => {
+	const { getTabsProps, getTabProps, getTabPanelProps } = useTransformTabsHistory( {
+		move: initialTransformValue.value,
+		scale: initialScaleValue.value,
+		rotate: initialRotateValue.value,
+		skew: initialSkewValue.value,
+	} );
+
+	return (
+		<PopoverContent>
+			<Box sx={ { width: '100%' } }>
+				<Box sx={ { borderBottom: 1, borderColor: 'divider' } }>
+					<Tabs
+						size="small"
+						variant="fullWidth"
+						sx={ {
+							'& .MuiTab-root': {
+								minWidth: '62px',
+							},
+						} }
+						{ ...getTabsProps() }
+						aria-label={ __( 'Transform', 'elementor' ) }
+					>
+						<Tab label={ __( 'Move', 'elementor' ) } { ...getTabProps( TransformFunctionKeys.move ) } />
+						<Tab label={ __( 'Scale', 'elementor' ) } { ...getTabProps( TransformFunctionKeys.scale ) } />
+						<Tab label={ __( 'Rotate', 'elementor' ) } { ...getTabProps( TransformFunctionKeys.rotate ) } />
+						<Tab label={ __( 'Skew', 'elementor' ) } { ...getTabProps( TransformFunctionKeys.skew ) } />
+					</Tabs>
+				</Box>
+				<TabPanel sx={ { p: 1.5 } } { ...getTabPanelProps( TransformFunctionKeys.move ) }>
+					<Move />
+				</TabPanel>
+				<TabPanel sx={ { p: 1.5 } } { ...getTabPanelProps( TransformFunctionKeys.scale ) }>
+					<Scale />
+				</TabPanel>
+				<TabPanel sx={ { p: 1.5 } } { ...getTabPanelProps( TransformFunctionKeys.rotate ) }>
+					<Rotate />
+				</TabPanel>
+				<TabPanel sx={ { p: 1.5 } } { ...getTabPanelProps( TransformFunctionKeys.skew ) }>
+					<Skew />
+				</TabPanel>
+			</Box>
+		</PopoverContent>
+	);
+};

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

@@ -1,11 +1,19 @@
 import * as React from 'react';
 import { type TransformItemPropValue } from '@elementor/editor-props';
-import { ArrowsMaximizeIcon } from '@elementor/icons';
+import { ArrowsMaximizeIcon, ExpandIcon, RotateClockwise2Icon, SkewXIcon } from '@elementor/icons';
+
+import { TransformFunctionKeys } from './types';
 
 export const TransformIcon = ( { value }: { value: TransformItemPropValue } ) => {
 	switch ( value.$$type ) {
-		case 'transform-move':
+		case TransformFunctionKeys.move:
 			return <ArrowsMaximizeIcon fontSize="tiny" />;
+		case TransformFunctionKeys.scale:
+			return <ExpandIcon fontSize="tiny" />;
+		case TransformFunctionKeys.rotate:
+			return <RotateClockwise2Icon fontSize="tiny" />;
+		case TransformFunctionKeys.skew:
+			return <SkewXIcon fontSize="tiny" />;
 		default:
 			return null;
 	}

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

@@ -3,16 +3,53 @@ import type { TransformItemPropValue } from '@elementor/editor-props';
 import { Box } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { defaultValues, TransformFunctionKeys } from './types';
+
 const transformMoveValue = ( value: TransformItemPropValue[ 'value' ] ) =>
 	Object.values( value )
-		.map( ( axis ) => `${ axis?.value.size }${ axis?.value.unit }` )
+		.map( ( axis ) => {
+			const size = axis?.value?.size ?? defaultValues.move.size;
+			const unit = axis?.value?.unit ?? defaultValues.move.unit;
+
+			return `${ size }${ unit }`;
+		} )
+		.join( ', ' );
+
+const transformScaleValue = ( value: TransformItemPropValue[ 'value' ] ) =>
+	Object.values( value )
+		.map( ( axis ) => axis?.value || defaultValues.scale )
+		.join( ', ' );
+
+const transformRotateValue = ( value: TransformItemPropValue[ 'value' ] ) =>
+	Object.values( value )
+		.map( ( axis ) => {
+			const size = axis?.value?.size ?? defaultValues.rotate.size;
+			const unit = axis?.value?.unit ?? defaultValues.rotate.unit;
+
+			return `${ size }${ unit }`;
+		} )
+		.join( ', ' );
+const transformSkewValue = ( value: TransformItemPropValue[ '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 }`;
+		} )
 		.join( ', ' );
 
 export const TransformLabel = ( props: { value: TransformItemPropValue } ) => {
 	const { $$type, value } = props.value;
 	switch ( $$type ) {
-		case 'transform-move':
+		case TransformFunctionKeys.move:
 			return <Label label={ __( 'Move', 'elementor' ) } value={ transformMoveValue( value ) } />;
+		case TransformFunctionKeys.scale:
+			return <Label label={ __( 'Scale', 'elementor' ) } value={ transformScaleValue( value ) } />;
+		case TransformFunctionKeys.rotate:
+			return <Label label={ __( 'Rotate', 'elementor' ) } value={ transformRotateValue( value ) } />;
+		case TransformFunctionKeys.skew:
+			return <Label label={ __( 'Skew', 'elementor' ) } value={ transformSkewValue( value ) } />;
 		default:
 			return '';
 	}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type TransformItemPropValue, transformPropTypeUtil } from '@elementor/editor-props';
+import { transformPropTypeUtil } from '@elementor/editor-props';
 import { __ } from '@wordpress/i18n';
 
 import { PropProvider, useBoundProp } from '../../bound-prop-context';
@@ -8,15 +8,7 @@ import { createControl } from '../../create-control';
 import { TransformContent } from './transform-content';
 import { TransformIcon } from './transform-icon';
 import { TransformLabel } from './transform-label';
-
-const initialTransformValue: TransformItemPropValue = {
-	$$type: 'transform-move',
-	value: {
-		x: { $$type: 'size', value: { size: 0, unit: 'px' } },
-		y: { $$type: 'size', value: { size: 0, unit: 'px' } },
-		z: { $$type: 'size', value: { size: 0, unit: 'px' } },
-	},
-};
+import { initialTransformValue } from './types';
 
 export const TransformRepeaterControl = createControl( () => {
 	const { propType, value: transformValues, setValue, disabled } = useBoundProp( transformPropTypeUtil );

package/src/controls/transform-control/types.ts

@@ -0,0 +1,58 @@
+import {
+	numberPropTypeUtil,
+	rotateTransformPropTypeUtil,
+	scaleTransformPropTypeUtil,
+	skewTransformPropTypeUtil,
+	type TransformItemPropValue,
+} from '@elementor/editor-props';
+
+export type TransformFunction = 'transform-move' | 'transform-scale' | 'transform-rotate' | 'transform-skew';
+
+export const TransformFunctionKeys: Record< string, TransformFunction > = {
+	move: 'transform-move',
+	scale: 'transform-scale',
+	rotate: 'transform-rotate',
+	skew: 'transform-skew',
+};
+
+export const defaultValues = {
+	move: {
+		size: 0,
+		unit: 'px',
+	},
+	scale: 1,
+	rotate: {
+		size: 0,
+		unit: 'deg',
+	},
+	skew: {
+		size: 0,
+		unit: 'deg',
+	},
+};
+
+export const initialTransformValue: TransformItemPropValue = {
+	$$type: TransformFunctionKeys.move,
+	value: {
+		x: { $$type: 'size', value: { size: defaultValues.move.size, unit: defaultValues.move.unit as 'px' } },
+		y: { $$type: 'size', value: { size: defaultValues.move.size, unit: defaultValues.move.unit as 'px' } },
+		z: { $$type: 'size', value: { size: defaultValues.move.size, unit: defaultValues.move.unit as 'px' } },
+	},
+};
+
+export const initialScaleValue = scaleTransformPropTypeUtil.create( {
+	x: numberPropTypeUtil.create( defaultValues.scale ),
+	y: numberPropTypeUtil.create( defaultValues.scale ),
+	z: numberPropTypeUtil.create( defaultValues.scale ),
+} );
+
+export const initialRotateValue = rotateTransformPropTypeUtil.create( {
+	x: { $$type: 'size', value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit as 'deg' } },
+	y: { $$type: 'size', value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit as 'deg' } },
+	z: { $$type: 'size', value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit as 'deg' } },
+} );
+
+export const initialSkewValue = skewTransformPropTypeUtil.create( {
+	x: { $$type: 'size', value: { size: defaultValues.skew.size, unit: defaultValues.skew.unit as 'deg' } },
+	y: { $$type: 'size', value: { size: defaultValues.skew.size, unit: defaultValues.skew.unit as 'deg' } },
+} );

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

@@ -0,0 +1,107 @@
+import { useRef } from 'react';
+import {
+	moveTransformPropTypeUtil,
+	type MoveTransformPropValue,
+	rotateTransformPropTypeUtil,
+	type RotateTransformPropValue,
+	scaleTransformPropTypeUtil,
+	type ScaleTransformPropValue,
+	skewTransformPropTypeUtil,
+	type SkewTransformPropValue,
+	type TransformItemPropValue,
+} from '@elementor/editor-props';
+import { useTabs } from '@elementor/ui';
+
+import { useBoundProp } from '../../bound-prop-context';
+import { type TransformFunction, TransformFunctionKeys } from './types';
+
+type InitialTransformValues = {
+	move: TransformItemPropValue[ 'value' ];
+	scale: TransformItemPropValue[ 'value' ];
+	rotate: TransformItemPropValue[ 'value' ];
+	skew: TransformItemPropValue[ 'value' ];
+};
+
+export const useTransformTabsHistory = ( {
+	move: initialMove,
+	scale: initialScale,
+	rotate: initialRotate,
+	skew: initialSkew,
+}: InitialTransformValues ) => {
+	const { value: moveValue, setValue: setMoveValue } = useBoundProp( moveTransformPropTypeUtil );
+	const { value: scaleValue, setValue: setScaleValue } = useBoundProp( scaleTransformPropTypeUtil );
+	const { value: rotateValue, setValue: setRotateValue } = useBoundProp( rotateTransformPropTypeUtil );
+	const { value: skewValue, setValue: setSkewValue } = useBoundProp( skewTransformPropTypeUtil );
+
+	const getCurrentTransformType = (): TransformFunction => {
+		switch ( true ) {
+			case !! scaleValue:
+				return TransformFunctionKeys.scale;
+			case !! rotateValue:
+				return TransformFunctionKeys.rotate;
+			case !! skewValue:
+				return TransformFunctionKeys.skew;
+			default:
+				return TransformFunctionKeys.move;
+		}
+	};
+
+	const { getTabsProps, getTabProps, getTabPanelProps } = useTabs< TransformFunction >( getCurrentTransformType() );
+
+	const valuesHistory = useRef< InitialTransformValues >( {
+		move: initialMove,
+		scale: initialScale,
+		rotate: initialRotate,
+		skew: initialSkew,
+	} );
+
+	const saveToHistory = ( key: keyof InitialTransformValues, value: TransformItemPropValue[ 'value' ] ) => {
+		if ( value ) {
+			valuesHistory.current[ key ] = value;
+		}
+	};
+
+	const onTabChange = ( e: React.SyntheticEvent, tabName: TransformFunction ) => {
+		switch ( tabName ) {
+			case TransformFunctionKeys.move:
+				setMoveValue( valuesHistory.current.move as MoveTransformPropValue[ 'value' ] );
+				saveToHistory( 'scale', scaleValue );
+				saveToHistory( 'rotate', rotateValue );
+				saveToHistory( 'skew', skewValue );
+
+				break;
+
+			case TransformFunctionKeys.scale:
+				setScaleValue( valuesHistory.current.scale as ScaleTransformPropValue[ 'value' ] );
+				saveToHistory( 'move', moveValue );
+				saveToHistory( 'rotate', rotateValue );
+				saveToHistory( 'skew', skewValue );
+
+				break;
+
+			case TransformFunctionKeys.rotate:
+				setRotateValue( valuesHistory.current.rotate as RotateTransformPropValue[ 'value' ] );
+				saveToHistory( 'move', moveValue );
+				saveToHistory( 'scale', scaleValue );
+				saveToHistory( 'skew', skewValue );
+
+				break;
+
+			case TransformFunctionKeys.skew:
+				setSkewValue( valuesHistory.current.skew as SkewTransformPropValue[ 'value' ] );
+				saveToHistory( 'move', moveValue );
+				saveToHistory( 'scale', scaleValue );
+				saveToHistory( 'rotate', rotateValue );
+
+				break;
+		}
+
+		return getTabsProps().onChange( e, tabName );
+	};
+
+	return {
+		getTabProps,
+		getTabPanelProps,
+		getTabsProps: () => ( { ...getTabsProps(), onChange: onTabChange } ),
+	};
+};

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

@@ -0,0 +1,34 @@
+export type TransitionProperty = {
+	label: string;
+	value: string;
+};
+
+export type TransitionCategory = {
+	label: string;
+	type: 'category';
+	properties: TransitionProperty[];
+};
+
+export const initialTransitionValue = {
+	selection: {
+		$$type: 'key-value',
+		value: {
+			key: { value: 'All properties', $$type: 'string' },
+			value: { value: 'all', $$type: 'string' },
+		},
+	},
+	size: { $$type: 'size', value: { size: 200, unit: 'ms' } },
+};
+
+export const transitionProperties: TransitionCategory[] = [
+	{
+		label: 'Common',
+		type: 'category',
+		properties: [ { label: 'All properties', value: 'all' } ],
+	},
+];
+
+export const transitionsItemsList = transitionProperties.map( ( category ) => ( {
+	label: category.label,
+	items: category.properties.map( ( property ) => property.label ),
+} ) );