@elementor/editor-controls 0.1.0 → 0.1.1

package/src/controls/number-control.tsx

@@ -8,24 +8,48 @@ import { createControl } from '../create-control';
 const isEmptyOrNaN = ( value?: string | number ) =>
 	value === undefined || value === '' || Number.isNaN( Number( value ) );
 
-export const NumberControl = createControl( ( { placeholder }: { placeholder?: string } ) => {
-	const { value, setValue } = useBoundProp< number | undefined >();
-
-	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		const eventValue: string = event.target.value;
-		setValue( isEmptyOrNaN( eventValue ) ? undefined : Number( eventValue ) );
-	};
-
-	return (
-		<ControlActions>
-			<TextField
-				size="tiny"
-				type="number"
-				fullWidth
-				value={ isEmptyOrNaN( value ) ? '' : value }
-				onChange={ handleChange }
-				placeholder={ placeholder }
-			/>
-		</ControlActions>
-	);
-} );
+export const NumberControl = createControl(
+	( {
+		placeholder,
+		max = Number.MAX_VALUE,
+		min = -Number.MAX_VALUE,
+		step = 1,
+		shouldForceInt = false,
+	}: {
+		placeholder?: string;
+		max?: number;
+		min?: number;
+		step?: number;
+		shouldForceInt?: boolean;
+	} ) => {
+		const { value, setValue } = useBoundProp< number | undefined >();
+
+		const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+			const eventValue: string = event.target.value;
+
+			if ( isEmptyOrNaN( eventValue ) ) {
+				setValue( undefined );
+
+				return;
+			}
+
+			const formattedValue = shouldForceInt ? +parseFloat( eventValue ) : Number( eventValue );
+
+			setValue( Math.min( Math.max( formattedValue, min ), max ) );
+		};
+
+		return (
+			<ControlActions>
+				<TextField
+					size="tiny"
+					type="number"
+					fullWidth
+					value={ isEmptyOrNaN( value ) ? '' : value }
+					onChange={ handleChange }
+					placeholder={ placeholder }
+					inputProps={ { step } }
+				/>
+			</ControlActions>
+		);
+	}
+);

package/src/controls/stroke-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type PropValue, type StrokePropValue, type TransformablePropValue } from '@elementor/editor-props';
+import { type ColorPropValue, type PropValue, type SizePropValue, type StrokePropValue } from '@elementor/editor-props';
 import { Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -11,31 +11,22 @@ import { SizeControl, type Unit } from './size-control';
 
 type SetContextValue = ( v: PropValue ) => void;
 
-const defaultStrokeControlValue: StrokePropValue = {
-	$$type: 'stroke',
-	value: {
-		color: {
-			$$type: 'color',
-			value: '#000000',
-		},
-		width: {
-			$$type: 'size',
-			value: {
-				unit: 'px',
-				size: NaN,
-			},
-		},
-	},
+export type StrokeProps< T > = {
+	bind: string;
+	value: T;
+	setValue: ( v: T ) => void;
+	label: string;
+	children: React.ReactNode;
 };
 
 const units: Unit[] = [ 'px', 'em', 'rem' ];
 
 export const StrokeControl = createControl( () => {
-	const { value, setValue } = useBoundProp< StrokePropValue >( defaultStrokeControlValue );
+	const { value, setValue } = useBoundProp< StrokePropValue >();
 
-	const setStrokeWidth = ( newValue: TransformablePropValue< 'size', { unit: Unit; size: number } > ) => {
+	const setStrokeWidth = ( newValue: SizePropValue ) => {
 		const updatedValue = {
-			...( value?.value ?? defaultStrokeControlValue.value ),
+			...value?.value,
 			width: newValue,
 		};
 
@@ -45,9 +36,9 @@ export const StrokeControl = createControl( () => {
 		} );
 	};
 
-	const setStrokeColor = ( newValue: TransformablePropValue< 'color', string > ) => {
+	const setStrokeColor = ( newValue: ColorPropValue ) => {
 		const updatedValue = {
-			...( value?.value ?? defaultStrokeControlValue.value ),
+			...value?.value,
 			color: newValue,
 		};
 
@@ -62,7 +53,7 @@ export const StrokeControl = createControl( () => {
 			<Control
 				bind="width"
 				label={ __( 'Stroke Width', 'elementor' ) }
-				value={ value?.value.width ?? defaultStrokeControlValue.value.width }
+				value={ value?.value.width }
 				setValue={ setStrokeWidth }
 			>
 				<SizeControl units={ units } />
@@ -71,7 +62,7 @@ export const StrokeControl = createControl( () => {
 			<Control
 				bind="color"
 				label={ __( 'Stroke Color', 'elementor' ) }
-				value={ value?.value.color ?? defaultStrokeControlValue.value.color }
+				value={ value?.value.color }
 				setValue={ setStrokeColor }
 			>
 				<ColorControl />
@@ -80,19 +71,7 @@ export const StrokeControl = createControl( () => {
 	);
 } );
 
-const Control = < T extends PropValue >( {
-	bind,
-	value,
-	setValue,
-	label,
-	children,
-}: {
-	bind: string;
-	value: T;
-	setValue: ( v: T ) => void;
-	label: string;
-	children: React.ReactNode;
-} ) => (
+const Control = < T extends PropValue >( { bind, value, setValue, label, children }: StrokeProps< T > ) => (
 	<BoundPropProvider bind={ bind } value={ value } setValue={ setValue as SetContextValue }>
 		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 			<Grid item xs={ 6 }>

package/src/index.ts

@@ -16,6 +16,7 @@ export { FontFamilyControl } from './controls/font-family-control';
 
 // components
 export { ControlLabel } from './components/control-label';
+export { ControlToggleButtonGroup } from './components/control-toggle-button-group';
 
 // types
 export type { ControlComponent } from './create-control';