@elementor/editor-controls 0.3.0 → 0.4.0

package/src/controls/background-control/background-control.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import {
+	type BackgroundColorOverlayPropValue,
+	backgroundPropTypeUtil,
+	type ColorPropValue,
+	type PropValue,
+} from '@elementor/editor-props';
+import { Grid, Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { BoundPropProvider, useBoundProp } from '../../bound-prop-context';
+import { ControlLabel } from '../../components/control-label';
+import { createControl } from '../../create-control';
+import { ColorControl } from '../color-control';
+import { BackgroundOverlayRepeaterControl } from './background-overlay/background-overlay-repeater-control';
+
+type SetContextValue = ( v: PropValue ) => void;
+
+export const BackgroundControl = createControl( () => {
+	const { value, setValue } = useBoundProp( backgroundPropTypeUtil );
+
+	const setColor = ( newValue: ColorPropValue ) => {
+		setValue( {
+			...value,
+			color: newValue,
+		} );
+	};
+
+	const setBackgroundColorOverlay = ( newValue: BackgroundColorOverlayPropValue ) => {
+		setValue( {
+			...value,
+			'background-overlay': newValue,
+		} );
+	};
+
+	return (
+		<Stack gap={ 1.5 }>
+			<BoundPropProvider
+				bind="background-overlay"
+				value={ value?.[ 'background-overlay' ] }
+				setValue={ setBackgroundColorOverlay as SetContextValue }
+			>
+				<BackgroundOverlayRepeaterControl />
+			</BoundPropProvider>
+			<BoundPropProvider bind="color" value={ value?.color } setValue={ setColor as SetContextValue }>
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ __( 'Color', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 }>
+						<ColorControl />
+					</Grid>
+				</Grid>
+			</BoundPropProvider>
+		</Stack>
+	);
+} );

package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import {
+	type BackgroundColorOverlayPropValue,
+	type BackgroundOverlayItemPropValue,
+	backgroundOverlayPropTypeUtil,
+	type BackgroundOverlayPropValue,
+	type PropValue,
+} from '@elementor/editor-props';
+import { Grid, Stack, UnstableColorIndicator } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { BoundPropProvider, useBoundProp } from '../../../bound-prop-context';
+import { ControlLabel } from '../../../components/control-label';
+import { Repeater } from '../../../components/repeater';
+import { createControl } from '../../../create-control';
+import { ColorControl } from '../../color-control';
+
+type SetContextValue = ( v: PropValue ) => void;
+
+const initialBackgroundOverlay: BackgroundOverlayItemPropValue = {
+	$$type: 'background-color-overlay',
+	value: 'rgba(0, 0, 0, 0.2)',
+};
+
+export const BackgroundOverlayRepeaterControl = createControl( () => {
+	const { value: overlayValues, setValue } = useBoundProp( backgroundOverlayPropTypeUtil );
+
+	const setColorOverlay = ( newValue: BackgroundOverlayPropValue[ 'value' ] ) => {
+		setValue( newValue );
+	};
+
+	return (
+		<Repeater
+			values={ overlayValues ?? [] }
+			setValues={ setColorOverlay }
+			label={ __( 'Overlay', 'elementor' ) }
+			itemSettings={ {
+				Icon: ItemIcon,
+				Label: ItemLabel,
+				Content: ItemContent,
+				initialValues: initialBackgroundOverlay,
+			} }
+		/>
+	);
+} );
+
+const ItemIcon = ( { value }: { value: BackgroundOverlayItemPropValue } ) => (
+	<UnstableColorIndicator size="inherit" component="span" value={ value.value } />
+);
+
+const ItemContent = ( {
+	value,
+	setValue,
+}: {
+	value: BackgroundOverlayItemPropValue;
+	setValue: ( newValue: BackgroundOverlayItemPropValue ) => void;
+} ) => {
+	const setBackgroundColorOverlay = ( newValue: BackgroundColorOverlayPropValue ) => {
+		setValue( {
+			$$type: 'background-color-overlay',
+			value: newValue.value,
+		} );
+	};
+
+	return (
+		<Stack gap={ 1.5 }>
+			<BoundPropProvider
+				bind="background-color-overlay"
+				value={ value }
+				setValue={ setBackgroundColorOverlay as SetContextValue }
+			>
+				<Grid container spacing={ 1 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<ControlLabel>{ __( 'Color', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<ColorControl />
+					</Grid>
+				</Grid>
+			</BoundPropProvider>
+		</Stack>
+	);
+};
+
+const ItemLabel = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
+	const color = value.value;
+
+	return <span>{ color }</span>;
+};

package/src/controls/color-control.tsx

@@ -16,7 +16,13 @@ export const ColorControl = createControl(
 
 		return (
 			<ControlActions>
-				<UnstableColorField size="tiny" { ...props } value={ value } onChange={ handleChange } fullWidth />
+				<UnstableColorField
+					size="tiny"
+					{ ...props }
+					value={ value ?? '' }
+					onChange={ handleChange }
+					fullWidth
+				/>
 			</ControlActions>
 		);
 	}

package/src/controls/equal-unequal-sizes-control.tsx

@@ -59,7 +59,11 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 	const { value: multiSizeValue, setValue: setMultiSizeValue } = useBoundProp( multiSizePropTypeUtil );
 
 	const splitEqualValue = () => {
-		return items.reduce( ( acc, item ) => ( { ...acc, [ item.bind ]: sizePropTypeUtil.create( sizeValue ) } ), {} );
+		if ( ! sizeValue ) {
+			return {};
+		}
+
+		return items.reduce( ( acc, { bind } ) => ( { ...acc, [ bind ]: sizePropTypeUtil.create( sizeValue ) } ), {} );
 	};
 
 	const setNestedProp = ( item: Item, newValue: SizePropValue ) => {

package/src/controls/select-control.tsx

@@ -8,12 +8,14 @@ import { createControl } from '../create-control';
 
 type Props = {
 	options: Array< { label: string; value: StringPropValue[ 'value' ]; disabled?: boolean } >;
+	onChange?: ( newValue: string | null, previousValue: string | null | undefined ) => void;
 };
 
-export const SelectControl = createControl( ( { options }: Props ) => {
+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 );
 	};
 

package/src/controls/text-area-control.tsx

@@ -24,7 +24,7 @@ export const TextAreaControl = createControl( ( { placeholder }: Props ) => {
 				multiline
 				fullWidth
 				rows={ 5 }
-				value={ value }
+				value={ value ?? '' }
 				onChange={ handleChange }
 				placeholder={ placeholder }
 			/>

package/src/controls/text-control.tsx

@@ -13,7 +13,13 @@ export const TextControl = createControl( ( { placeholder }: { placeholder?: str
 
 	return (
 		<ControlActions>
-			<TextField size="tiny" fullWidth value={ value } onChange={ handleChange } placeholder={ placeholder } />
+			<TextField
+				size="tiny"
+				fullWidth
+				value={ value ?? '' }
+				onChange={ handleChange }
+				placeholder={ placeholder }
+			/>
 		</ControlActions>
 	);
 } );

package/src/index.ts

@@ -5,7 +5,6 @@ export { TextAreaControl } from './controls/text-area-control';
 export { SizeControl } from './controls/size-control';
 export { StrokeControl } from './controls/stroke-control';
 export { BoxShadowRepeaterControl } from './controls/box-shadow-repeater-control';
-export { BackgroundOverlayRepeaterControl } from './controls/background-overlay-repeater-control';
 export { SelectControl } from './controls/select-control';
 export { ColorControl } from './controls/color-control';
 export { ToggleControl } from './controls/toggle-control';
@@ -16,6 +15,7 @@ export { FontFamilyControl } from './controls/font-family-control';
 export { UrlControl } from './controls/url-control';
 export { LinkControl } from './controls/link-control';
 export { GapControl } from './controls/gap-control';
+export { BackgroundControl } from './controls/background-control/background-control';
 
 // components
 export { ControlLabel } from './components/control-label';
@@ -25,6 +25,8 @@ export { ControlToggleButtonGroup } from './components/control-toggle-button-gro
 export type { ControlComponent } from './create-control';
 export type { ToggleButtonGroupItem } from './components/control-toggle-button-group';
 export type { EqualUnequalItems } from './controls/equal-unequal-sizes-control';
+export type { ControlActionsItems } from './control-actions/control-actions-context';
+export type { BoundPropProviderProps } from './bound-prop-context';
 
 // providers
 export { createControlReplacement, ControlReplacementProvider } from './create-control-replacement';

package/src/controls/background-overlay-repeater-control.tsx

@@ -1,115 +0,0 @@
-import * as React from 'react';
-import {
-	backgroundImagePropTypeUtil,
-	type backgroundImageTypePropValue,
-	type ColorGradientPropValue,
-	type PropValue,
-} from '@elementor/editor-props';
-import { Grid, Stack, Typography, UnstableColorIndicator } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
-import { Repeater } from '../components/repeater';
-import { createControl } from '../create-control';
-import { ColorControl } from './color-control';
-
-type SetContextValue = ( v: PropValue ) => void;
-
-export const BackgroundOverlayRepeaterControl = createControl( () => {
-	const { value: colorOverlayValues, setValue } = useBoundProp( backgroundImagePropTypeUtil );
-
-	const setColorOverlay = ( newValue: backgroundImageTypePropValue[ 'value' ] ) => {
-		setValue( newValue );
-	};
-
-	return (
-		<Repeater
-			values={ colorOverlayValues }
-			setValues={ setColorOverlay }
-			label={ __( 'Overlay', 'elementor' ) }
-			itemSettings={ {
-				Icon: ItemIcon,
-				Label: ItemLabel,
-				Content: ItemContent,
-				initialValues: initialGradient,
-			} }
-		/>
-	);
-} );
-
-const ItemIcon = ( { value }: { value: ColorGradientPropValue } ) => (
-	<UnstableColorIndicator size="inherit" component="span" value={ value.value.color.value } />
-);
-
-const ItemContent = ( {
-	value,
-	setValue,
-}: {
-	value: ColorGradientPropValue;
-	setValue: ( newValue: ColorGradientPropValue ) => void;
-} ) => {
-	const setColor = ( newValue: ColorGradientPropValue[ 'value' ] ) => {
-		setValue( {
-			$$type: 'background-overlay',
-			value: newValue,
-		} );
-	};
-
-	return (
-		<Stack gap={ 1.5 }>
-			<Control
-				bind="color"
-				value={ value.value.color }
-				label={ __( 'Color', 'elementor' ) }
-				setValue={ ( v: ColorGradientPropValue[ 'value' ][ 'color' ] ) =>
-					setColor( { ...value.value, color: v } )
-				}
-			>
-				<ColorControl />
-			</Control>
-		</Stack>
-	);
-};
-
-const Control = < T extends PropValue >( {
-	value,
-	setValue,
-	label,
-	bind,
-	children,
-}: {
-	value: T;
-	bind: string;
-	label: string;
-	children: React.ReactNode;
-	setValue: ( v: T ) => void;
-} ) => (
-	<BoundPropProvider value={ value } setValue={ setValue as SetContextValue } bind={ bind }>
-		<Grid container spacing={ 1 } alignItems="center">
-			<Grid item xs={ 12 }>
-				<Typography component="label" variant="caption" color="text.secondary">
-					{ label }
-				</Typography>
-			</Grid>
-			<Grid item xs={ 12 }>
-				{ children }
-			</Grid>
-		</Grid>
-	</BoundPropProvider>
-);
-
-const ItemLabel = ( { value }: { value: ColorGradientPropValue } ) => {
-	const color = value.value.color.value;
-
-	return <span>{ color }</span>;
-};
-
-const initialGradient: ColorGradientPropValue = {
-	$$type: 'background-overlay',
-	value: {
-		color: {
-			$$type: 'color',
-			value: 'rgba(0, 0, 0, 0.2)',
-		},
-	},
-};