@elementor/editor-controls 0.36.0 → 1.1.0

package/src/controls/position-control.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { useMemo } from 'react';
+import { positionPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
+import { MenuListItem } from '@elementor/editor-ui';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
+import { LetterXIcon, LetterYIcon } from '@elementor/icons';
+import { Grid, Select, type SelectChangeEvent } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
+import { ControlFormLabel } from '../components/control-form-label';
+import { SizeControl } from './size-control';
+
+type Positions =
+	| 'center center'
+	| 'center left'
+	| 'center right'
+	| 'top center'
+	| 'top left'
+	| 'top right'
+	| 'bottom center'
+	| 'bottom left'
+	| 'bottom right'
+	| 'custom';
+
+const positionOptions = [
+	{ label: __( 'Center center', 'elementor' ), value: 'center center' },
+	{ label: __( 'Center left', 'elementor' ), value: 'center left' },
+	{ label: __( 'Center right', 'elementor' ), value: 'center right' },
+	{ label: __( 'Top center', 'elementor' ), value: 'top center' },
+	{ label: __( 'Top left', 'elementor' ), value: 'top left' },
+	{ label: __( 'Top right', 'elementor' ), value: 'top right' },
+	{ label: __( 'Bottom center', 'elementor' ), value: 'bottom center' },
+	{ label: __( 'Bottom left', 'elementor' ), value: 'bottom left' },
+	{ label: __( 'Bottom right', 'elementor' ), value: 'bottom right' },
+];
+
+export const PositionControl = () => {
+	const positionContext = useBoundProp( positionPropTypeUtil );
+	const stringPropContext = useBoundProp( stringPropTypeUtil );
+
+	const isVersion331Active = isExperimentActive( 'e_v_3_31' );
+	const isCustom = !! positionContext.value && isVersion331Active;
+
+	const availablePositionOptions = useMemo( () => {
+		const options = [ ...positionOptions ];
+
+		if ( isVersion331Active ) {
+			options.push( { label: __( 'Custom', 'elementor' ), value: 'custom' } );
+		}
+
+		return options;
+	}, [ isVersion331Active ] );
+
+	const handlePositionChange = ( event: SelectChangeEvent< Positions > ) => {
+		const value = event.target.value || null;
+
+		if ( value === 'custom' && isVersion331Active ) {
+			positionContext.setValue( { x: null, y: null } );
+		} else {
+			stringPropContext.setValue( value );
+		}
+	};
+
+	return (
+		<Grid container spacing={ 1.5 }>
+			<Grid item xs={ 12 }>
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<ControlFormLabel>{ __( 'Object position', 'elementor' ) }</ControlFormLabel>
+					</Grid>
+					<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
+						<Select
+							size="tiny"
+							disabled={ stringPropContext.disabled }
+							value={ ( positionContext.value ? 'custom' : stringPropContext.value ) ?? '' }
+							onChange={ handlePositionChange }
+							fullWidth
+						>
+							{ availablePositionOptions.map( ( { label, value } ) => (
+								<MenuListItem key={ value } value={ value ?? '' }>
+									{ label }
+								</MenuListItem>
+							) ) }
+						</Select>
+					</Grid>
+				</Grid>
+			</Grid>
+			{ isCustom && (
+				<PropProvider { ...positionContext }>
+					<Grid item xs={ 12 }>
+						<Grid container spacing={ 1.5 }>
+							<Grid item xs={ 6 }>
+								<PropKeyProvider bind={ 'x' }>
+									<SizeControl startIcon={ <LetterXIcon fontSize={ 'tiny' } /> } />
+								</PropKeyProvider>
+							</Grid>
+							<Grid item xs={ 6 }>
+								<PropKeyProvider bind={ 'y' }>
+									<SizeControl startIcon={ <LetterYIcon fontSize={ 'tiny' } /> } />
+								</PropKeyProvider>
+							</Grid>
+						</Grid>
+					</Grid>
+				</PropProvider>
+			) }
+		</Grid>
+	);
+};

package/src/controls/repeatable-control.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { useMemo } from 'react';
+import { createArrayPropUtils, type PropKey } from '@elementor/editor-props';
+import { __ } from '@wordpress/i18n';
+
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
+import { PopoverContent } from '../components/popover-content';
+import { PopoverGridContainer } from '../components/popover-grid-container';
+import { Repeater } from '../components/repeater';
+import { createControl } from '../create-control';
+import {
+	type ChildControlConfig,
+	RepeatableControlContext,
+	useRepeatableControlContext,
+} from '../hooks/use-repeatable-control-context';
+
+type RepeatableControlProps = {
+	label: string;
+	childControlConfig: ChildControlConfig;
+	showDuplicate?: boolean;
+	showToggle?: boolean;
+};
+
+export const RepeatableControl = createControl(
+	( { label, childControlConfig, showDuplicate, showToggle }: RepeatableControlProps ) => {
+		const { propTypeUtil: childPropTypeUtil } = childControlConfig;
+
+		if ( ! childPropTypeUtil ) {
+			return null;
+		}
+
+		const childArrayPropTypeUtil = useMemo(
+			() => createArrayPropUtils( childPropTypeUtil.key, childPropTypeUtil.schema ),
+			[ childPropTypeUtil.key, childPropTypeUtil.schema ]
+		);
+
+		const { propType, value, setValue } = useBoundProp( childArrayPropTypeUtil );
+
+		return (
+			<PropProvider propType={ propType } value={ value } setValue={ setValue }>
+				<RepeatableControlContext.Provider value={ childControlConfig }>
+					<Repeater
+						openOnAdd
+						values={ value ?? [] }
+						setValues={ setValue }
+						label={ label }
+						itemSettings={ {
+							Icon: ItemIcon,
+							Label: ItemLabel,
+							Content: ItemContent,
+							initialValues: childPropTypeUtil.create( null ),
+						} }
+						showDuplicate={ showDuplicate }
+						showToggle={ showToggle }
+					/>
+				</RepeatableControlContext.Provider>
+			</PropProvider>
+		);
+	}
+);
+
+const ItemContent = ( { bind }: { bind: PropKey } ) => {
+	return (
+		<PropKeyProvider bind={ bind }>
+			<Content />
+		</PropKeyProvider>
+	);
+};
+
+// TODO: Configurable icon probably can be somehow part of the injected control and bubbled up to the repeater
+const ItemIcon = () => <></>;
+
+const Content = () => {
+	const { component: ChildControl, props = {} } = useRepeatableControlContext();
+
+	return (
+		<PopoverContent p={ 1.5 }>
+			<PopoverGridContainer>
+				<ChildControl { ...props } />
+			</PopoverGridContainer>
+		</PopoverContent>
+	);
+};
+
+const ItemLabel = () => {
+	const { label = __( 'Empty', 'elementor' ) } = useRepeatableControlContext();
+
+	return <span>{ label }</span>;
+};

package/src/controls/size-control.tsx

@@ -1,183 +1,215 @@
 import * as React from 'react';
-import { useRef } from 'react';
-import { sizePropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
-import { Box, InputAdornment } from '@elementor/ui';
+import { type MutableRefObject, useEffect, useState } from 'react';
+import { sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
+import { useActiveBreakpoint } from '@elementor/editor-responsive';
+import { usePopupState } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
-import { SelectionEndAdornment, TextFieldInnerSelection } from '../components/text-field-inner-selection';
-import ControlActions from '../control-actions/control-actions';
+import { SizeInput } from '../components/size-control/size-input';
+import { TextFieldPopover } from '../components/text-field-popover';
 import { createControl } from '../create-control';
+import { useSizeExtendedOptions } from '../hooks/use-size-extended-options';
 import { useSyncExternalState } from '../hooks/use-sync-external-state';
+import { defaultUnits, type ExtendedOption, isUnitExtendedOption, type Unit } from '../utils/size-control';
 
-export type ExtendedValue = 'auto';
-export type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
+const DEFAULT_UNIT = 'px';
+const DEFAULT_SIZE = NaN;
 
-const defaultUnits: Unit[] = [ 'px', '%', 'em', 'rem', 'vw', 'vh' ];
-
-const defaultUnit = 'px';
-const defaultSize = NaN;
+type SizeValue = SizePropValue[ 'value' ];
 
 type SizeControlProps = {
 	placeholder?: string;
 	startIcon?: React.ReactNode;
 	units?: Unit[];
-	extendedValues?: ExtendedValue[];
+	extendedOptions?: ExtendedOption[];
+	disableCustom?: boolean;
+	anchorRef?: MutableRefObject< HTMLElement | undefined >;
+	defaultUnit?: Unit;
 };
 
-export const SizeControl = createControl(
-	( { units = defaultUnits, extendedValues = [], placeholder, startIcon }: SizeControlProps ) => {
-		const { value: sizeValue, setValue: setSizeValue, restoreValue, disabled } = useBoundProp( sizePropTypeUtil );
-
-		const [ state, setState ] = useSyncExternalState( {
-			external: sizeValue,
-			setExternal: setSizeValue,
-			persistWhen: ( controlValue ) => !! controlValue?.size || controlValue?.size === 0,
-			fallback: ( controlValue ) => ( { unit: controlValue?.unit || defaultUnit, size: defaultSize } ),
-		} );
-
-		const handleUnitChange = ( unit: Unit ) => {
-			setState( ( prev ) => ( {
-				size: prev?.size ?? defaultSize,
-				unit,
-			} ) );
-		};
-
-		const handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-			const { value: size } = event.target;
-
-			setState( ( prev ) => ( {
-				...prev,
-				size: size || size === '0' ? parseFloat( size ) : defaultSize,
-			} ) );
-		};
-
-		const Input = extendedValues?.length ? ExtendedSizeInput : SizeInput;
-
-		return (
-			<Input
-				disabled={ disabled }
-				size={ state.size }
-				unit={ state.unit }
-				placeholder={ placeholder }
-				startIcon={ startIcon }
-				units={ units }
-				extendedValues={ extendedValues }
-				handleSizeChange={ handleSizeChange }
-				handleUnitChange={ handleUnitChange }
-				onBlur={ restoreValue }
-			/>
-		);
-	}
-);
+type State = {
+	numeric: number;
+	custom: string;
+	unit: Unit | ExtendedOption;
+};
 
-const ExtendedSizeInput = ( props: SizeInputProps ) => {
-	const { value: stringValue, setValue: setStringValue } = useBoundProp( stringPropTypeUtil );
-	const { extendedValues = [] } = props;
+export const SizeControl = createControl( ( props: SizeControlProps ) => {
+	const defaultUnit = props.defaultUnit ?? DEFAULT_UNIT;
+	const { units = [ ...defaultUnits ], placeholder, startIcon, anchorRef } = props;
+	const { value: sizeValue, setValue: setSizeValue, disabled, restoreValue } = useBoundProp( sizePropTypeUtil );
+	const [ internalState, setInternalState ] = useState( createStateFromSizeProp( sizeValue, defaultUnit ) );
+	const activeBreakpoint = useActiveBreakpoint();
+
+	const extendedOptions = useSizeExtendedOptions( props.extendedOptions || [], props.disableCustom ?? false );
+	const popupState = usePopupState( { variant: 'popover' } );
+
+	const [ state, setState ] = useSyncExternalState( {
+		external: internalState,
+		setExternal: ( newState: State | null ) => setSizeValue( extractValueFromState( newState ) ),
+		persistWhen: ( newState ) => {
+			if ( ! newState?.unit ) {
+				return false;
+			}
+
+			if ( isUnitExtendedOption( newState.unit ) ) {
+				return newState.unit === 'auto' ? true : !! newState.custom;
+			}
+
+			return !! newState?.numeric || newState?.numeric === 0;
+		},
+		fallback: ( newState ) => ( {
+			unit: newState?.unit ?? props.defaultUnit ?? DEFAULT_UNIT,
+			numeric: newState?.numeric ?? DEFAULT_SIZE,
+			custom: newState?.custom ?? '',
+		} ),
+	} );
+
+	const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = DEFAULT_UNIT } = extractValueFromState( state ) || {};
+
+	const handleUnitChange = ( newUnit: Unit | ExtendedOption ) => {
+		if ( newUnit === 'custom' ) {
+			popupState.open( anchorRef?.current );
+		}
 
-	const unit = ( stringValue ?? props.unit ) as Unit;
+		setState( ( prev ) => ( { ...prev, unit: newUnit } ) );
+	};
 
-	const handleUnitChange = ( newUnit: Unit ) => {
-		if ( extendedValues.includes( newUnit as ExtendedValue ) ) {
-			setStringValue( newUnit );
-		} else {
-			props.handleUnitChange( newUnit );
+	const handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		const { value: size } = event.target;
+
+		if ( controlUnit === 'auto' ) {
+			setState( ( prev ) => ( { ...prev, unit: controlUnit } ) );
+
+			return;
 		}
+
+		setState( ( prev ) => ( {
+			...prev,
+			[ controlUnit === 'custom' ? 'custom' : 'numeric' ]: formatSize( size, controlUnit ),
+			unit: controlUnit,
+		} ) );
 	};
 
-	return (
-		<SizeInput
-			{ ...props }
-			units={ [ ...props.units, ...( extendedValues as unknown as Unit[] ) ] }
-			handleUnitChange={ handleUnitChange }
-			unit={ unit }
-		/>
-	);
-};
+	const onInputFocus = ( event: React.FocusEvent< HTMLInputElement > ) => {
+		if ( isUnitExtendedOption( state.unit ) ) {
+			( event.target as HTMLElement )?.blur();
+		}
+	};
 
-type SizeInputProps = {
-	unit: Unit;
-	size: number;
-	placeholder?: string;
-	startIcon?: React.ReactNode;
-	units: Unit[];
-	extendedValues?: ExtendedValue[];
-	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
-	handleUnitChange: ( unit: Unit ) => void;
-	handleSizeChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
-	disabled?: boolean;
-};
+	const onInputClick = ( event: React.MouseEvent ) => {
+		if ( ( event.target as HTMLElement ).closest( 'input' ) && 'custom' === state.unit ) {
+			popupState.open( anchorRef?.current );
+		}
+	};
 
-const RESTRICTED_INPUT_KEYS = [ 'e', 'E', '+', '-' ];
-
-const SizeInput = ( {
-	units,
-	handleUnitChange,
-	handleSizeChange,
-	placeholder,
-	startIcon,
-	onBlur,
-	size,
-	unit,
-	disabled,
-}: SizeInputProps ) => {
-	const unitInputBufferRef = useRef( '' );
-
-	const handleKeyUp = ( event: React.KeyboardEvent< HTMLInputElement > ) => {
-		const { key } = event;
-
-		if ( ! /^[a-zA-Z%]$/.test( key ) ) {
+	useEffect( () => {
+		const newState = createStateFromSizeProp( sizeValue, defaultUnit );
+		const currentUnit = isUnitExtendedOption( state.unit ) ? 'custom' : 'numeric';
+		const mergedStates = { ...state, [ currentUnit ]: newState[ currentUnit ] };
+
+		if ( mergedStates.unit !== 'auto' && areStatesEqual( state, mergedStates ) ) {
 			return;
 		}
 
-		event.preventDefault();
+		if ( state.unit === newState.unit ) {
+			setInternalState( mergedStates );
+
+			return;
+		}
 
-		const newChar = key.toLowerCase();
-		const updatedBuffer = ( unitInputBufferRef.current + newChar ).slice( -3 );
-		unitInputBufferRef.current = updatedBuffer;
+		setState( newState );
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ sizeValue ] );
 
-		const matchedUnit =
-			units.find( ( u ) => u.includes( updatedBuffer ) ) ||
-			units.find( ( u ) => u.startsWith( newChar ) ) ||
-			units.find( ( u ) => u.includes( newChar ) );
+	useEffect( () => {
+		const newState = createStateFromSizeProp( sizeValue, defaultUnit );
 
-		if ( matchedUnit ) {
-			handleUnitChange( matchedUnit );
+		if ( activeBreakpoint && ! areStatesEqual( newState, state ) ) {
+			setState( newState );
 		}
-	};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ activeBreakpoint ] );
 
 	return (
-		<ControlActions>
-			<Box>
-				<TextFieldInnerSelection
-					disabled={ disabled }
-					endAdornment={
-						<SelectionEndAdornment
-							disabled={ disabled }
-							options={ units }
-							onClick={ handleUnitChange }
-							value={ unit ?? defaultUnit }
-						/>
-					}
-					placeholder={ placeholder }
-					startAdornment={
-						startIcon ? (
-							<InputAdornment position="start" disabled={ disabled }>
-								{ startIcon }
-							</InputAdornment>
-						) : undefined
-					}
-					type="number"
-					value={ Number.isNaN( size ) ? '' : size }
+		<>
+			<SizeInput
+				disabled={ disabled }
+				size={ controlSize }
+				unit={ controlUnit }
+				units={ [ ...units, ...( extendedOptions || [] ) ] }
+				placeholder={ placeholder }
+				startIcon={ startIcon }
+				handleSizeChange={ handleSizeChange }
+				handleUnitChange={ handleUnitChange }
+				onBlur={ restoreValue }
+				onFocus={ onInputFocus }
+				onClick={ onInputClick }
+				popupState={ popupState }
+			/>
+			{ anchorRef?.current && (
+				<TextFieldPopover
+					popupState={ popupState }
+					anchorRef={ anchorRef as MutableRefObject< HTMLElement > }
+					restoreValue={ restoreValue }
+					value={ controlSize as string }
 					onChange={ handleSizeChange }
-					onBlur={ onBlur }
-					onKeyDown={ ( event ) => {
-						if ( RESTRICTED_INPUT_KEYS.includes( event.key ) ) {
-							event.preventDefault();
-						}
-					} }
-					onKeyUp={ handleKeyUp }
 				/>
-			</Box>
-		</ControlActions>
+			) }
+		</>
 	);
-};
+} );
+
+function formatSize< TSize extends string | number >( size: TSize, unit: Unit | ExtendedOption ): TSize {
+	if ( isUnitExtendedOption( unit ) ) {
+		return unit === 'auto' ? ( '' as TSize ) : ( String( size ?? '' ) as TSize );
+	}
+
+	return size || size === 0 ? ( Number( size ) as TSize ) : ( NaN as TSize );
+}
+
+function createStateFromSizeProp( sizeValue: SizeValue | null, defaultUnit: Unit ): State {
+	const unit = sizeValue?.unit ?? defaultUnit;
+	const size = sizeValue?.size ?? '';
+
+	return {
+		numeric:
+			! isUnitExtendedOption( unit ) && ! isNaN( Number( size ) ) && ( size || size === 0 )
+				? Number( size )
+				: DEFAULT_SIZE,
+		custom: unit === 'custom' ? String( size ) : '',
+		unit,
+	};
+}
+
+function extractValueFromState( state: State | null ): SizeValue | null {
+	if ( ! state ) {
+		return null;
+	}
+
+	if ( ! state?.unit ) {
+		return { size: DEFAULT_SIZE, unit: DEFAULT_UNIT };
+	}
+
+	const { unit } = state;
+
+	if ( unit === 'auto' ) {
+		return { size: '', unit };
+	}
+
+	return {
+		size: state[ unit === 'custom' ? 'custom' : 'numeric' ],
+		unit,
+	} as SizeValue;
+}
+
+function areStatesEqual( state1: State, state2: State ): boolean {
+	if ( state1.unit !== state2.unit || state1.custom !== state2.custom ) {
+		return false;
+	}
+
+	if ( isUnitExtendedOption( state1.unit ) ) {
+		return state1.custom === state2.custom;
+	}
+
+	return state1.numeric === state2.numeric || ( isNaN( state1.numeric ) && isNaN( state2.numeric ) );
+}

package/src/controls/stroke-control.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { forwardRef, type MutableRefObject, useRef } from 'react';
 import { strokePropTypeUtil } from '@elementor/editor-props';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -7,8 +8,9 @@ import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-conte
 import { ControlFormLabel } from '../components/control-form-label';
 import { SectionContent } from '../components/section-content';
 import { createControl } from '../create-control';
+import { type Unit } from '../utils/size-control';
 import { ColorControl } from './color-control';
-import { SizeControl, type Unit } from './size-control';
+import { SizeControl } from './size-control';
 
 type StrokeProps = {
 	bind: string;
@@ -20,12 +22,13 @@ const units: Unit[] = [ 'px', 'em', 'rem' ];
 
 export const StrokeControl = createControl( () => {
 	const propContext = useBoundProp( strokePropTypeUtil );
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
 
 	return (
 		<PropProvider { ...propContext }>
 			<SectionContent>
-				<Control bind="width" label={ __( 'Stroke width', 'elementor' ) }>
-					<SizeControl units={ units } />
+				<Control bind="width" label={ __( 'Stroke width', 'elementor' ) } ref={ rowRef }>
+					<SizeControl units={ units } anchorRef={ rowRef } />
 				</Control>
 				<Control bind="color" label={ __( 'Stroke color', 'elementor' ) }>
 					<ColorControl />
@@ -35,9 +38,9 @@ export const StrokeControl = createControl( () => {
 	);
 } );
 
-const Control = ( { bind, label, children }: StrokeProps ) => (
+const Control = forwardRef( ( { bind, label, children }: StrokeProps, ref ) => (
 	<PropKeyProvider bind={ bind }>
-		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ ref }>
 			<Grid item xs={ 6 }>
 				<ControlFormLabel>{ label }</ControlFormLabel>
 			</Grid>
@@ -46,4 +49,4 @@ const Control = ( { bind, label, children }: StrokeProps ) => (
 			</Grid>
 		</Grid>
 	</PropKeyProvider>
-);
+) );

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

@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react';
+import { type PropTypeUtil } from '@elementor/editor-props';
+
+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;
+};
+
+const RepeatableControlContext = createContext< ChildControlConfig | undefined >( undefined );
+
+const useRepeatableControlContext = () => {
+	const context = useContext( RepeatableControlContext );
+
+	if ( ! context ) {
+		throw new Error( 'useRepeatableControlContext must be used within RepeatableControl' );
+	}
+
+	return context;
+};
+
+export { RepeatableControlContext, useRepeatableControlContext };

package/src/hooks/use-size-extended-options.ts

@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+import { type ExtendedOption } from '@elementor/editor-controls';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
+
+const EXPERIMENT_ID = 'e_v_3_30';
+
+export function useSizeExtendedOptions( options: ExtendedOption[], disableCustom: boolean ) {
+	return useMemo( () => {
+		const isVersion330Active = isExperimentActive( EXPERIMENT_ID );
+		const shouldDisableCustom = ! isVersion330Active || disableCustom;
+		const extendedOptions = [ ...options ];
+
+		if ( ! shouldDisableCustom && ! extendedOptions.includes( 'custom' ) ) {
+			extendedOptions.push( 'custom' );
+		} else if ( options.includes( 'custom' ) ) {
+			extendedOptions.splice( extendedOptions.indexOf( 'custom' ), 1 );
+		}
+
+		return extendedOptions;
+	}, [ options, disableCustom ] );
+}

package/src/index.ts

@@ -19,6 +19,9 @@ export { AspectRatioControl } from './controls/aspect-ratio-control';
 export { SvgMediaControl } from './controls/svg-media-control';
 export { BackgroundControl } from './controls/background-control/background-control';
 export { SwitchControl } from './controls/switch-control';
+export { RepeatableControl } from './controls/repeatable-control';
+export { KeyValueControl } from './controls/key-value-control';
+export { PositionControl } from './controls/position-control';
 
 // components
 export { ControlFormLabel } from './components/control-form-label';
@@ -32,7 +35,7 @@ export type { EqualUnequalItems } from './controls/equal-unequal-sizes-control';
 export type { ControlActionsItems } from './control-actions/control-actions-context';
 export type { PropProviderProps } from './bound-prop-context';
 export type { SetValue } from './bound-prop-context/prop-context';
-export type { ExtendedValue } from './controls/size-control';
+export type { ExtendedOption } from './utils/size-control';
 export type { ToggleControlProps } from './controls/toggle-control';
 export type { FontCategory } from './controls/font-family-control/font-family-control';