@elementor/editor-controls 0.6.1 → 0.7.0

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

@@ -3,13 +3,18 @@ import { imageSrcPropTypeUtil } from '@elementor/editor-props';
 import { UploadIcon } from '@elementor/icons';
 import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack } from '@elementor/ui';
 import { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
+import { type ImageExtension } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
-export const ImageMediaControl = createControl( () => {
+export type ImageMediaControlProps = {
+	allowedExtensions?: ImageExtension[];
+};
+
+export const ImageMediaControl = createControl( ( props: ImageMediaControlProps ) => {
 	const { value, setValue } = useBoundProp( imageSrcPropTypeUtil );
 	const { id, url } = value ?? {};
 
@@ -18,6 +23,7 @@ export const ImageMediaControl = createControl( () => {
 
 	const { open } = useWpMediaFrame( {
 		types: [ 'image', 'image/svg+xml' ],
+		allowedExtensions: props.allowedExtensions,
 		multiple: false,
 		selected: id?.value || null,
 		onSelect: ( selectedAttachment ) => {
@@ -32,16 +38,18 @@ export const ImageMediaControl = createControl( () => {
 	} );
 
 	return (
-		<Card variant="outlined">
-			<CardMedia image={ src } sx={ { height: 150 } }>
-				{ isFetching ? (
-					<Stack justifyContent="center" alignItems="center" width="100%" height="100%">
-						<CircularProgress />
-					</Stack>
-				) : null }
-			</CardMedia>
-			<CardOverlay>
-				<ControlActions>
+		<ControlActions>
+			<Card variant="outlined">
+				<CardMedia image={ src } sx={ { height: 150 } }>
+					{ isFetching ? (
+						<Stack justifyContent="center" alignItems="center" width="100%" height="100%">
+							<CircularProgress />
+						</Stack>
+					) : (
+						<></>
+					) }
+				</CardMedia>
+				<CardOverlay>
 					<Stack gap={ 1 }>
 						<Button
 							size="tiny"
@@ -61,8 +69,8 @@ export const ImageMediaControl = createControl( () => {
 							{ __( 'Upload Image', 'elementor' ) }
 						</Button>
 					</Stack>
-				</ControlActions>
-			</CardOverlay>
-		</Card>
+				</CardOverlay>
+			</Card>
+		</ControlActions>
 	);
 } );

package/src/controls/linked-dimensions-control.tsx

@@ -1,15 +1,10 @@
 import * as React from 'react';
-import {
-	dimensionsPropTypeUtil,
-	type DimensionsPropValue,
-	type PropKey,
-	sizePropTypeUtil,
-} from '@elementor/editor-props';
+import { dimensionsPropTypeUtil, type PropKey, sizePropTypeUtil } from '@elementor/editor-props';
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
 import { Grid, Stack, ToggleButton } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { PropKeyProvider, PropProvider, type SetValue, useBoundProp } from '../bound-prop-context';
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { ControlLabel } from '../components/control-label';
 import { createControl } from '../create-control';
 import { SizeControl } from './size-control';
@@ -20,18 +15,9 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 
 	const isLinked = ! dimensionsValue && ! sizeValue ? true : !! sizeValue;
 
-	const setValue: SetValue< DimensionsPropValue[ 'value' ] > = ( newValue ) => {
-		if ( ! isLinked ) {
-			setDimensionsValue( newValue );
-			return;
-		}
-
-		setSizeValue( newValue.top );
-	};
-
 	const onLinkToggle = () => {
 		if ( ! isLinked ) {
-			setSizeValue( dimensionsValue?.top.value );
+			setSizeValue( dimensionsValue?.top?.value );
 			return;
 		}
 
@@ -48,7 +34,7 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 	const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
 
 	return (
-		<PropProvider propType={ propType } value={ dimensionsValue } setValue={ setValue }>
+		<PropProvider propType={ propType } value={ dimensionsValue } setValue={ setDimensionsValue }>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 				<ControlLabel>{ label }</ControlLabel>
 				<ToggleButton

package/src/controls/select-control.tsx

@@ -15,15 +15,17 @@ export const SelectControl = createControl( ( { options, onChange }: Props ) =>
 	const { value, setValue } = useBoundProp( stringPropTypeUtil );
 
 	const handleChange = ( event: SelectChangeEvent< StringPropValue[ 'value' ] > ) => {
-		onChange?.( event.target.value, value );
-		setValue( event.target.value );
+		const newValue = event.target.value || null;
+
+		onChange?.( newValue, value );
+		setValue( newValue );
 	};
 
 	return (
 		<ControlActions>
 			<Select displayEmpty size="tiny" value={ value ?? '' } onChange={ handleChange } fullWidth>
 				{ options.map( ( { label, ...props } ) => (
-					<MenuItem key={ props.value } { ...props }>
+					<MenuItem key={ props.value } { ...props } value={ props.value ?? '' }>
 						{ label }
 					</MenuItem>
 				) ) }