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

package/src/controls/font-family-control/font-family-control.tsx

@@ -19,64 +19,75 @@ export type FontCategory = {
 type FontFamilyControlProps = {
 	fontFamilies: FontCategory[];
 	sectionWidth: number;
+	ariaLabel?: string;
 };
 
-export const FontFamilyControl = createControl( ( { fontFamilies, sectionWidth }: FontFamilyControlProps ) => {
-	const { value: fontFamily, setValue: setFontFamily, disabled, placeholder } = useBoundProp( stringPropTypeUtil );
+export const FontFamilyControl = createControl(
+	( { fontFamilies, sectionWidth, ariaLabel }: FontFamilyControlProps ) => {
+		const {
+			value: fontFamily,
+			setValue: setFontFamily,
+			disabled,
+			placeholder,
+		} = useBoundProp( stringPropTypeUtil );
 
-	const popoverState = usePopupState( { variant: 'popover' } );
-	const isShowingPlaceholder = ! fontFamily && placeholder;
+		const popoverState = usePopupState( { variant: 'popover' } );
+		const isShowingPlaceholder = ! fontFamily && placeholder;
 
-	const mapFontSubs = React.useMemo< Category[] >( () => {
-		return fontFamilies.map( ( { label, fonts } ) => ( {
-			label,
-			items: fonts,
-		} ) );
-	}, [ fontFamilies ] );
+		const mapFontSubs = React.useMemo< Category[] >( () => {
+			return fontFamilies.map( ( { label, fonts } ) => ( {
+				label,
+				items: fonts,
+			} ) );
+		}, [ fontFamilies ] );
 
-	return (
-		<>
-			<ControlActions>
-				<UnstableTag
-					variant="outlined"
-					label={ fontFamily || placeholder }
-					endIcon={ <ChevronDownIcon fontSize="tiny" /> }
-					{ ...bindTrigger( popoverState ) }
-					fullWidth
-					disabled={ disabled }
-					sx={
-						isShowingPlaceholder
-							? {
-									'& .MuiTag-label': {
-										color: ( theme ) => theme.palette.text.tertiary,
-									},
-									textTransform: 'capitalize',
-							  }
-							: undefined
-					}
-				/>
-			</ControlActions>
+		return (
+			<>
+				<ControlActions>
+					<UnstableTag
+						id="font-family-control"
+						variant="outlined"
+						label={ fontFamily || placeholder }
+						endIcon={ <ChevronDownIcon fontSize="tiny" /> }
+						{ ...bindTrigger( popoverState ) }
+						fullWidth
+						disabled={ disabled }
+						aria-label={ ariaLabel }
+						sx={
+							isShowingPlaceholder
+								? {
+										'& .MuiTag-label': {
+											color: ( theme ) => theme.palette.text.tertiary,
+										},
+										textTransform: 'capitalize',
+								  }
+								: undefined
+						}
+					/>
+				</ControlActions>
 
-			<Popover
-				disablePortal
-				disableScrollLock
-				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
-				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
-				sx={ { my: 1.5 } }
-				{ ...bindPopover( popoverState ) }
-			>
-				<ItemSelector
-					itemsList={ mapFontSubs }
-					selectedItem={ fontFamily }
-					onItemChange={ setFontFamily }
-					onClose={ popoverState.close }
-					sectionWidth={ sectionWidth }
-					title={ __( 'Font Family', 'elementor' ) }
-					itemStyle={ ( item ) => ( { fontFamily: item.value } ) }
-					onDebounce={ enqueueFont }
-					icon={ TextIcon as React.ElementType< { fontSize: string } > }
-				/>
-			</Popover>
-		</>
-	);
-} );
+				<Popover
+					disablePortal
+					disableScrollLock
+					anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
+					transformOrigin={ { vertical: 'top', horizontal: 'right' } }
+					sx={ { my: 1.5 } }
+					{ ...bindPopover( popoverState ) }
+				>
+					<ItemSelector
+						id="font-family-selector"
+						itemsList={ mapFontSubs }
+						selectedItem={ fontFamily }
+						onItemChange={ setFontFamily }
+						onClose={ popoverState.close }
+						sectionWidth={ sectionWidth }
+						title={ __( 'Font family', 'elementor' ) }
+						itemStyle={ ( item ) => ( { fontFamily: item.value } ) }
+						onDebounce={ enqueueFont }
+						icon={ TextIcon as React.ElementType< { fontSize: string } > }
+					/>
+				</Popover>
+			</>
+		);
+	}
+);

package/src/controls/html-tag-control.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { getElementLabel } from '@elementor/editor-elements';
+import { stringPropTypeUtil, type StringPropValue } from '@elementor/editor-props';
+import { MenuListItem } from '@elementor/editor-ui';
+import { Select, type SelectChangeEvent, styled, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useBoundProp } from '../bound-prop-context';
+import { ConditionalControlInfotip } from '../components/conditional-control-infotip';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+
+export type SelectOption = {
+	label: string;
+	value: StringPropValue[ 'value' ];
+	disabled?: boolean;
+};
+
+type Props = {
+	options: SelectOption[];
+	onChange?: ( newValue: string | null, previousValue: string | null | undefined ) => void;
+	fallbackLabels?: Record< string, string >;
+};
+
+const StyledSelect = styled( Select )( () => ( { '.MuiSelect-select.Mui-disabled': { cursor: 'not-allowed' } } ) );
+
+export const HtmlTagControl = createControl( ( { options, onChange, fallbackLabels = {} }: Props ) => {
+	const { value, setValue, disabled, placeholder } = useBoundProp( stringPropTypeUtil );
+	const handleChange = ( event: SelectChangeEvent< StringPropValue[ 'value' ] > ) => {
+		const newValue = event.target.value || null;
+
+		onChange?.( newValue, value );
+		setValue( newValue );
+	};
+
+	const elementLabel = getElementLabel() ?? 'element';
+	const infoTipProps = {
+		title: __( 'HTML Tag', 'elementor' ),
+		/* translators: %s is the element name. */
+		description: __(
+			`The tag is locked to 'a' tag because this %s has a link. To pick a different tag, remove the link first.`,
+			'elementor'
+		).replace( '%s', elementLabel ),
+		isEnabled: !! disabled,
+	};
+
+	const renderValue = ( selectedValue: string | null ) => {
+		if ( selectedValue ) {
+			return findOptionByValue( selectedValue )?.label || fallbackLabels[ selectedValue ] || selectedValue;
+		}
+
+		if ( ! placeholder ) {
+			return '';
+		}
+
+		const placeholderOption = findOptionByValue( placeholder );
+		const displayText = placeholderOption?.label || placeholder;
+
+		return (
+			<Typography component="span" variant="caption" color="text.tertiary">
+				{ displayText }
+			</Typography>
+		);
+	};
+
+	const findOptionByValue = ( searchValue: string | null ) => options.find( ( opt ) => opt.value === searchValue );
+
+	return (
+		<ControlActions>
+			<ConditionalControlInfotip { ...infoTipProps }>
+				<StyledSelect
+					sx={ { overflow: 'hidden', cursor: disabled ? 'not-allowed' : undefined } }
+					displayEmpty
+					size="tiny"
+					renderValue={ renderValue }
+					value={ value ?? '' }
+					onChange={ handleChange }
+					disabled={ disabled }
+					fullWidth
+				>
+					{ options.map( ( { label, ...props } ) => (
+						<MenuListItem key={ props.value } { ...props } value={ props.value ?? '' }>
+							{ label }
+						</MenuListItem>
+					) ) }
+				</StyledSelect>
+			</ConditionalControlInfotip>
+		</ControlActions>
+	);
+} );

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

@@ -14,7 +14,7 @@ type ImageMediaControlProps = {
 };
 
 export const ImageMediaControl = createControl( ( { mediaTypes = [ 'image' ] }: ImageMediaControlProps ) => {
-	const { value, setValue } = useBoundProp( imageSrcPropTypeUtil );
+	const { value, setValue, propType } = useBoundProp( imageSrcPropTypeUtil );
 	const { id, url } = value ?? {};
 
 	const { data: attachment, isFetching } = useWpMediaAttachment( id?.value || null );
@@ -38,7 +38,7 @@ export const ImageMediaControl = createControl( ( { mediaTypes = [ 'image' ] }:
 	return (
 		<ControlActions>
 			<Card variant="outlined">
-				<CardMedia image={ src } sx={ { height: 150 } }>
+				<CardMedia image={ src } sx={ { height: propType.meta.isDynamic ? 134 : 150 } }>
 					{ isFetching ? (
 						<Stack justifyContent="center" alignItems="center" width="100%" height="100%">
 							<CircularProgress />

package/src/controls/inline-editing-control.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { htmlPropTypeUtil } from '@elementor/editor-props';
+
+import { useBoundProp } from '../bound-prop-context';
+import { InlineEditor } from '../components/inline-editor';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+
+export const InlineEditingControl = createControl( () => {
+	const { value, setValue } = useBoundProp( htmlPropTypeUtil );
+	const handleChange = ( newValue: unknown ) => setValue( newValue as string );
+
+	return (
+		<ControlActions>
+			<InlineEditor value={ value || '' } setValue={ handleChange } />
+		</ControlActions>
+	);
+} );

package/src/controls/key-value-control.tsx

@@ -13,6 +13,7 @@ import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { createControl } from '../create-control';
+import { escapeHtmlAttr } from '../utils/escape-html-attr';
 import { TextControl } from './text-control';
 
 type KeyValueControlProps = {
@@ -21,6 +22,7 @@ type KeyValueControlProps = {
 	regexKey?: string;
 	regexValue?: string;
 	validationErrorMessage?: string;
+	escapeHtml?: boolean;
 	getHelperText?: ( key: string, value: string ) => { keyHelper?: string; valueHelper?: string };
 };
 
@@ -115,7 +117,11 @@ export const KeyValueControl = createControl( ( props: KeyValueControlProps = {}
 						{ keyLabel }
 					</FormLabel>
 					<PropKeyProvider bind={ 'key' }>
-						<TextControl inputValue={ sessionState.key } error={ !! keyError } helperText={ keyHelper } />
+						<TextControl
+							inputValue={ props.escapeHtml ? escapeHtmlAttr( sessionState.key ) : sessionState.key }
+							error={ !! keyError }
+							helperText={ keyHelper }
+						/>
 					</PropKeyProvider>
 					{ !! keyError && <FormHelperText error>{ keyError }</FormHelperText> }
 				</Grid>
@@ -125,7 +131,7 @@ export const KeyValueControl = createControl( ( props: KeyValueControlProps = {}
 					</FormLabel>
 					<PropKeyProvider bind={ 'value' }>
 						<TextControl
-							inputValue={ sessionState.value }
+							inputValue={ props.escapeHtml ? escapeHtmlAttr( sessionState.value ) : sessionState.value }
 							error={ !! valueError }
 							inputDisabled={ !! keyError }
 							helperText={ valueHelper }

package/src/controls/link-control.tsx

@@ -1,44 +1,31 @@
 import * as React from 'react';
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import { getLinkInLinkRestriction } from '@elementor/editor-elements';
-import {
-	linkPropTypeUtil,
-	type LinkPropValue,
-	numberPropTypeUtil,
-	stringPropTypeUtil,
-	urlPropTypeUtil,
-} from '@elementor/editor-props';
-import { type HttpResponse, httpService } from '@elementor/http-client';
+import { linkPropTypeUtil, type LinkPropValue } from '@elementor/editor-props';
 import { MinusIcon, PlusIcon } from '@elementor/icons';
 import { useSessionStorage } from '@elementor/session';
 import { Collapse, Grid, IconButton, Stack } from '@elementor/ui';
-import { debounce } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
-import {
-	Autocomplete,
-	type CategorizedOption,
-	findMatchingOption,
-	type FlatOption,
-	isCategorizedOptionPool,
-} from '../components/autocomplete';
 import { ControlFormLabel } from '../components/control-form-label';
+import { ControlLabel } from '../components/control-label';
 import { RestrictedLinkInfotip } from '../components/restricted-link-infotip';
-import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 import { type ControlProps } from '../utils/types';
+import { QueryControl } from './query-control';
 import { SwitchControl } from './switch-control';
 
 type Props = ControlProps< {
 	queryOptions: {
-		requestParams: Record< string, unknown >;
-		endpoint: string;
+		params: Record< string, unknown >;
+		url: string;
 	};
 	allowCustomValues?: boolean;
 	minInputLength?: number;
 	placeholder?: string;
 	label?: string;
+	ariaLabel?: string;
 } >;
 
 type LinkSessionValue = {
@@ -48,7 +35,7 @@ type LinkSessionValue = {
 	};
 };
 
-type Response = HttpResponse< { value: FlatOption[] | CategorizedOption[] } >;
+export type DestinationProp = LinkPropValue[ 'value' ][ 'destination' ];
 
 const SIZE = 'tiny';
 
@@ -58,18 +45,16 @@ export const LinkControl = createControl( ( props: Props ) => {
 	const [ isActive, setIsActive ] = useState( !! value );
 
 	const {
-		allowCustomValues,
-		queryOptions: { endpoint = '', requestParams = {} },
+		allowCustomValues = true,
+		queryOptions,
 		placeholder,
 		minInputLength = 2,
 		context: { elementId },
 		label = __( 'Link', 'elementor' ),
+		ariaLabel,
 	} = props || {};
 
 	const [ linkInLinkRestriction, setLinkInLinkRestriction ] = useState( getLinkInLinkRestriction( elementId ) );
-	const [ options, setOptions ] = useState< FlatOption[] | CategorizedOption[] >(
-		generateFirstLoadedOption( value )
-	);
 	const shouldDisableAddingLink = ! isActive && linkInLinkRestriction.shouldRestrict;
 
 	const onEnabledChange = () => {
@@ -96,60 +81,17 @@ export const LinkControl = createControl( ( props: Props ) => {
 		} );
 	};
 
-	const onOptionChange = ( newValue: number | null ) => {
+	const onSaveValueToSession = ( newValue: DestinationProp[ 'value' ] | null ) => {
 		const valueToSave: LinkPropValue[ 'value' ] | null = newValue
 			? {
 					...value,
-					destination: numberPropTypeUtil.create( newValue ),
-					label: stringPropTypeUtil.create( findMatchingOption( options, newValue )?.label || null ),
+					destination: newValue,
 			  }
 			: null;
 
-		onSaveNewValue( valueToSave );
+		setLinkSessionValue( { ...linkSessionValue, value: valueToSave } );
 	};
 
-	const onTextChange = ( newValue: string | null ) => {
-		newValue = newValue?.trim() || '';
-
-		const valueToSave: LinkPropValue[ 'value' ] | null = newValue
-			? {
-					...value,
-					destination: urlPropTypeUtil.create( newValue ),
-					label: stringPropTypeUtil.create( '' ),
-			  }
-			: null;
-
-		onSaveNewValue( valueToSave );
-		updateOptions( newValue );
-	};
-
-	const onSaveNewValue = ( newValue: LinkPropValue[ 'value' ] | null ) => {
-		setValue( newValue );
-		setLinkSessionValue( { ...linkSessionValue, value: newValue } );
-	};
-
-	const updateOptions = ( newValue: string | null ) => {
-		setOptions( [] );
-
-		if ( ! newValue || ! endpoint || newValue.length < minInputLength ) {
-			return;
-		}
-
-		debounceFetch( { ...requestParams, term: newValue } );
-	};
-
-	const debounceFetch = useMemo(
-		() =>
-			debounce(
-				( params: FetchOptionsParams ) =>
-					fetchOptions( endpoint, params ).then( ( newOptions ) => {
-						setOptions( formatOptions( newOptions ) );
-					} ),
-				400
-			),
-		[ endpoint ]
-	);
-
 	return (
 		<PropProvider { ...propContext } value={ value } setValue={ setValue }>
 			<Stack gap={ 1.5 }>
@@ -161,7 +103,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 						marginInlineEnd: -0.75,
 					} }
 				>
-					<ControlFormLabel>{ label }</ControlFormLabel>
+					<ControlLabel>{ label }</ControlLabel>
 					<RestrictedLinkInfotip isVisible={ ! isActive } linkInLinkRestriction={ linkInLinkRestriction }>
 						<ToggleIconControl
 							disabled={ shouldDisableAddingLink }
@@ -174,17 +116,14 @@ export const LinkControl = createControl( ( props: Props ) => {
 				<Collapse in={ isActive } timeout="auto" unmountOnExit>
 					<Stack gap={ 1.5 }>
 						<PropKeyProvider bind={ 'destination' }>
-							<ControlActions>
-								<Autocomplete
-									options={ options }
-									allowCustomValues={ allowCustomValues }
-									placeholder={ placeholder }
-									value={ value?.destination?.value?.settings?.label || value?.destination?.value }
-									onOptionChange={ onOptionChange }
-									onTextChange={ onTextChange }
-									minInputLength={ minInputLength }
-								/>
-							</ControlActions>
+							<QueryControl
+								queryOptions={ queryOptions }
+								allowCustomValues={ allowCustomValues }
+								minInputLength={ minInputLength }
+								placeholder={ placeholder }
+								onSetValue={ onSaveValueToSession }
+								ariaLabel={ ariaLabel || label }
+							/>
 						</PropKeyProvider>
 						<PropKeyProvider bind={ 'isTargetBlank' }>
 							<Grid container alignItems="center" flexWrap="nowrap" justifyContent="space-between">
@@ -217,42 +156,3 @@ const ToggleIconControl = ( { disabled, active, onIconClick, label }: ToggleIcon
 		</IconButton>
 	);
 };
-
-type FetchOptionsParams = Record< string, unknown > & { term: string };
-
-async function fetchOptions( ajaxUrl: string, params: FetchOptionsParams ) {
-	if ( ! params || ! ajaxUrl ) {
-		return [];
-	}
-
-	try {
-		const { data: response } = await httpService().get< Response >( ajaxUrl, { params } );
-
-		return response.data.value;
-	} catch {
-		return [];
-	}
-}
-
-function formatOptions( options: FlatOption[] | CategorizedOption[] ): FlatOption[] | CategorizedOption[] {
-	const compareKey = isCategorizedOptionPool( options ) ? 'groupLabel' : 'label';
-
-	return options.sort( ( a, b ) =>
-		a[ compareKey ] && b[ compareKey ] ? a[ compareKey ].localeCompare( b[ compareKey ] ) : 0
-	);
-}
-
-function generateFirstLoadedOption( unionValue: LinkPropValue[ 'value' ] | null ): FlatOption[] {
-	const value = unionValue?.destination?.value;
-	const label = unionValue?.label?.value;
-	const type = unionValue?.destination?.$$type || 'url';
-
-	return value && label && type === 'number'
-		? [
-				{
-					id: value.toString(),
-					label,
-				},
-		  ]
-		: [];
-}

package/src/controls/query-control.tsx

@@ -0,0 +1,168 @@
+import * as React from 'react';
+import { useMemo, useState } from 'react';
+import { numberPropTypeUtil, stringPropTypeUtil, urlPropTypeUtil } from '@elementor/editor-props';
+import { type HttpResponse, httpService } from '@elementor/http-client';
+import { SearchIcon } from '@elementor/icons';
+import { debounce } from '@elementor/utils';
+import { __ } from '@wordpress/i18n';
+
+import { useBoundProp } from '../bound-prop-context';
+import {
+	Autocomplete,
+	type CategorizedOption,
+	findMatchingOption,
+	type FlatOption,
+	isCategorizedOptionPool,
+} from '../components/autocomplete';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+import { type DestinationProp } from './link-control';
+
+type Props = {
+	queryOptions: {
+		params: Record< string, unknown >;
+		url: string;
+	};
+	allowCustomValues?: boolean;
+	minInputLength?: number;
+	placeholder?: string;
+	onSetValue?: ( value: DestinationProp | null ) => void;
+	ariaLabel?: string;
+};
+
+type Response = HttpResponse< { value: FlatOption[] | CategorizedOption[] } >;
+
+type FetchOptionsParams = Record< string, unknown > & { term: string };
+
+export const QueryControl = createControl( ( props: Props ) => {
+	const { value, setValue } = useBoundProp< DestinationProp >();
+
+	const {
+		allowCustomValues = true,
+		queryOptions: { url, params = {} },
+		placeholder,
+		minInputLength = 2,
+		onSetValue,
+		ariaLabel,
+	} = props || {};
+
+	const normalizedPlaceholder = placeholder || __( 'Search', 'elementor' );
+
+	const [ options, setOptions ] = useState< FlatOption[] | CategorizedOption[] >(
+		generateFirstLoadedOption( value?.value )
+	);
+
+	const onOptionChange = ( newValue: number | null ) => {
+		if ( newValue === null ) {
+			setValue( null );
+			onSetValue?.( null );
+
+			return;
+		}
+
+		const valueToSave = {
+			$$type: 'query',
+			value: {
+				id: numberPropTypeUtil.create( newValue ),
+				label: stringPropTypeUtil.create( findMatchingOption( options, newValue )?.label || null ),
+			},
+		};
+
+		setValue( valueToSave );
+		onSetValue?.( valueToSave );
+	};
+
+	const onTextChange = ( newValue: string | null ) => {
+		if ( ! newValue ) {
+			setValue( null );
+			onSetValue?.( null );
+
+			return;
+		}
+
+		const newLinkValue = newValue?.trim() || '';
+		const valueToSave = newLinkValue ? urlPropTypeUtil.create( newLinkValue ) : null;
+
+		setValue( valueToSave );
+		onSetValue?.( valueToSave );
+		updateOptions( newValue );
+	};
+
+	const updateOptions = ( newValue: string | null ) => {
+		setOptions( [] );
+
+		if ( ! newValue || ! url || newValue.length < minInputLength ) {
+			return;
+		}
+
+		debounceFetch( { ...params, term: newValue } );
+	};
+
+	const debounceFetch = useMemo(
+		() =>
+			debounce(
+				( queryParams: FetchOptionsParams ) =>
+					fetchOptions( url, queryParams ).then( ( newOptions ) => {
+						setOptions( formatOptions( newOptions ) );
+					} ),
+				400
+			),
+		[ url ]
+	);
+
+	return (
+		<ControlActions>
+			<Autocomplete
+				options={ options }
+				allowCustomValues={ allowCustomValues }
+				placeholder={ normalizedPlaceholder }
+				startAdornment={ <SearchIcon fontSize="tiny" /> }
+				value={ value?.value?.id?.value || value?.value }
+				onOptionChange={ onOptionChange }
+				onTextChange={ onTextChange }
+				minInputLength={ minInputLength }
+				disablePortal={ false }
+				inputProps={ {
+					...( ariaLabel ? { 'aria-label': ariaLabel } : {} ),
+				} }
+			/>
+		</ControlActions>
+	);
+} );
+
+async function fetchOptions( ajaxUrl: string, params: FetchOptionsParams ) {
+	if ( ! params || ! ajaxUrl ) {
+		return [];
+	}
+
+	try {
+		const { data: response } = await httpService().get< Response >( ajaxUrl, { params } );
+
+		return response.data.value;
+	} catch {
+		return [];
+	}
+}
+
+function formatOptions( options: FlatOption[] | CategorizedOption[] ): FlatOption[] | CategorizedOption[] {
+	const compareKey = isCategorizedOptionPool( options ) ? 'groupLabel' : 'label';
+
+	return options.sort( ( a, b ) =>
+		a[ compareKey ] && b[ compareKey ] ? a[ compareKey ].localeCompare( b[ compareKey ] ) : 0
+	);
+}
+
+function generateFirstLoadedOption( unionValue: DestinationProp | null ): FlatOption[] {
+	const value = unionValue?.id?.value;
+	const label = unionValue?.label?.value;
+	const type = unionValue?.id?.$$type || 'url';
+
+	return value && label && type === 'number'
+		? [
+				{
+					id: value.toString(),
+					label,
+				},
+		  ]
+		: [];
+}