@elementor/editor-controls 1.1.0 → 1.2.0

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type ChangeEvent, useMemo, useState } from 'react';
 import { keyValuePropTypeUtil } from '@elementor/editor-props';
-import { FormHelperText, FormLabel, Grid, type SxProps, TextField, type Theme } from '@elementor/ui';
+import { FormHelperText, FormLabel, Grid, TextField } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../bound-prop-context';
@@ -13,7 +13,6 @@ type FieldType = 'key' | 'value';
 type KeyValueControlProps = {
 	keyName?: string;
 	valueName?: string;
-	sx?: SxProps< Theme >;
 	regexKey?: string;
 	regexValue?: string;
 	validationErrorMessage?: string;
@@ -23,12 +22,15 @@ export const KeyValueControl = createControl( ( props: KeyValueControlProps = {}
 	const { value, setValue } = useBoundProp( keyValuePropTypeUtil );
 	const [ keyError, setKeyError ] = useState< string | null >( null );
 	const [ valueError, setValueError ] = useState< string | null >( null );
+
+	const [ sessionState, setSessionState ] = useState( {
+		key: value?.key?.value || '',
+		value: value?.value?.value || '',
+	} );
+
 	const keyLabel = props.keyName || __( 'Key', 'elementor' );
 	const valueLabel = props.valueName || __( 'Value', 'elementor' );
 
-	const keyValue = value?.key?.value || '';
-	const valueValue = value?.value?.value || '';
-
 	const [ keyRegex, valueRegex, errMsg ] = useMemo< [ RegExp | undefined, RegExp | undefined, string ] >(
 		() => [
 			props.regexKey ? new RegExp( props.regexKey ) : undefined,
@@ -38,28 +40,44 @@ export const KeyValueControl = createControl( ( props: KeyValueControlProps = {}
 		[ props.regexKey, props.regexValue, props.validationErrorMessage ]
 	);
 
-	const validate = ( newValue: string, FieldType: string ): void => {
-		if ( FieldType === 'key' && keyRegex ) {
+	const validate = ( newValue: string, fieldType: string ): boolean => {
+		if ( fieldType === 'key' && keyRegex ) {
 			const isValid = keyRegex.test( newValue );
 			setKeyError( isValid ? null : errMsg );
-		} else if ( FieldType === 'value' && valueRegex ) {
+			return isValid;
+		} else if ( fieldType === 'value' && valueRegex ) {
 			const isValid = valueRegex.test( newValue );
 			setValueError( isValid ? null : errMsg );
+			return isValid;
 		}
+		return true;
 	};
 
 	const handleChange = ( event: ChangeEvent< HTMLInputElement >, fieldType: FieldType ) => {
 		const newValue = event.target.value;
 
-		validate( newValue, fieldType );
+		setSessionState( ( prev ) => ( {
+			...prev,
+			[ fieldType ]: newValue,
+		} ) );
 
-		setValue( {
-			...value,
-			[ fieldType ]: {
-				value: newValue,
-				$$type: 'string',
-			},
-		} );
+		if ( validate( newValue, fieldType ) ) {
+			setValue( {
+				...value,
+				[ fieldType ]: {
+					value: newValue,
+					$$type: 'string',
+				},
+			} );
+		} else {
+			setValue( {
+				...value,
+				[ fieldType ]: {
+					value: '',
+					$$type: 'string',
+				},
+			} );
+		}
 	};
 
 	const isKeyInvalid = keyError !== null;
@@ -67,14 +85,16 @@ export const KeyValueControl = createControl( ( props: KeyValueControlProps = {}
 
 	return (
 		<ControlActions>
-			<Grid container gap={ 1.5 } p={ 1.5 } sx={ props.sx }>
+			<Grid container gap={ 1.5 }>
 				<Grid item xs={ 12 }>
 					<FormLabel size="tiny">{ keyLabel }</FormLabel>
 					<TextField
+						// eslint-disable-next-line jsx-a11y/no-autofocus
+						autoFocus
 						sx={ { pt: 1 } }
 						size="tiny"
 						fullWidth
-						value={ keyValue }
+						value={ sessionState.key }
 						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => handleChange( e, 'key' ) }
 						error={ isKeyInvalid }
 					/>
@@ -86,7 +106,7 @@ export const KeyValueControl = createControl( ( props: KeyValueControlProps = {}
 						sx={ { pt: 1 } }
 						size="tiny"
 						fullWidth
-						value={ valueValue }
+						value={ sessionState.value }
 						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => handleChange( e, 'value' ) }
 						disabled={ isKeyInvalid }
 						error={ isValueInvalid }

package/src/controls/link-control.tsx

@@ -38,6 +38,7 @@ type Props = ControlProps< {
 	allowCustomValues?: boolean;
 	minInputLength?: number;
 	placeholder?: string;
+	label?: string;
 } >;
 
 type LinkSessionValue = {
@@ -66,6 +67,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 		placeholder,
 		minInputLength = 2,
 		context: { elementId },
+		label = __( 'Link', 'elementor' ),
 	} = props || {};
 
 	const [ linkInLinkRestriction, setLinkInLinkRestriction ] = useState( getLinkInLinkRestriction( elementId ) );
@@ -163,7 +165,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 						marginInlineEnd: -0.75,
 					} }
 				>
-					<ControlFormLabel>{ __( 'Link', 'elementor' ) }</ControlFormLabel>
+					<ControlFormLabel>{ label }</ControlFormLabel>
 					<ConditionalInfoTip isVisible={ ! isActive } linkInLinkRestriction={ linkInLinkRestriction }>
 						<ToggleIconControl
 							disabled={ shouldDisableAddingLink }

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MutableRefObject, useRef } from 'react';
+import { type RefObject, useRef } from 'react';
 import { dimensionsPropTypeUtil, type PropKey, sizePropTypeUtil } from '@elementor/editor-props';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
@@ -24,7 +24,7 @@ export const LinkedDimensionsControl = createControl(
 		extendedOptions?: ExtendedOption[];
 	} ) => {
 		const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp( sizePropTypeUtil );
-		const gridRowRefs: MutableRefObject< HTMLElement | undefined >[] = [ useRef(), useRef() ];
+		const gridRowRefs: RefObject< HTMLDivElement >[] = [ useRef( null ), useRef( null ) ];
 
 		const {
 			value: dimensionsValue,
@@ -127,7 +127,7 @@ const Control = ( {
 	startIcon: React.ReactNode;
 	isLinked: boolean;
 	extendedOptions?: ExtendedOption[];
-	anchorRef: MutableRefObject< HTMLElement | undefined >;
+	anchorRef: RefObject< HTMLDivElement >;
 } ) => {
 	if ( isLinked ) {
 		return <SizeControl startIcon={ startIcon } extendedOptions={ extendedOptions } anchorRef={ anchorRef } />;

package/src/controls/number-control.tsx

@@ -13,7 +13,7 @@ const RESTRICTED_INPUT_KEYS = [ 'e', 'E', '+', '-' ];
 
 export const NumberControl = createControl(
 	( {
-		placeholder,
+		placeholder: labelPlaceholder,
 		max = Number.MAX_VALUE,
 		min = -Number.MAX_VALUE,
 		step = 1,
@@ -25,7 +25,7 @@ export const NumberControl = createControl(
 		step?: number;
 		shouldForceInt?: boolean;
 	} ) => {
-		const { value, setValue, disabled } = useBoundProp( numberPropTypeUtil );
+		const { value, setValue, placeholder, disabled } = useBoundProp( numberPropTypeUtil );
 
 		const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 			const eventValue: string = event.target.value;
@@ -50,7 +50,7 @@ export const NumberControl = createControl(
 					disabled={ disabled }
 					value={ isEmptyOrNaN( value ) ? '' : value }
 					onChange={ handleChange }
-					placeholder={ placeholder }
+					placeholder={ labelPlaceholder ?? ( placeholder ? String( placeholder ) : '' ) }
 					inputProps={ { step } }
 					onKeyDown={ ( event: KeyboardEvent ) => {
 						if ( RESTRICTED_INPUT_KEYS.includes( event.key ) ) {

package/src/controls/repeatable-control.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { useMemo } from 'react';
 import { createArrayPropUtils, type PropKey } from '@elementor/editor-props';
-import { __ } from '@wordpress/i18n';
+import { Box } from '@elementor/ui';
 
+/* eslint-disable */
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { PopoverContent } from '../components/popover-content';
 import { PopoverGridContainer } from '../components/popover-grid-container';
@@ -16,13 +17,25 @@ import {
 
 type RepeatableControlProps = {
 	label: string;
+	repeaterLabel: string;
 	childControlConfig: ChildControlConfig;
 	showDuplicate?: boolean;
 	showToggle?: boolean;
+	initialValues?: object;
+	patternLabel?: string;
+	placeholder?: string;
 };
 
 export const RepeatableControl = createControl(
-	( { label, childControlConfig, showDuplicate, showToggle }: RepeatableControlProps ) => {
+	( {
+		repeaterLabel,
+		childControlConfig,
+		showDuplicate,
+		showToggle,
+		initialValues,
+		patternLabel,
+		placeholder,
+	}: RepeatableControlProps ) => {
 		const { propTypeUtil: childPropTypeUtil } = childControlConfig;
 
 		if ( ! childPropTypeUtil ) {
@@ -35,6 +48,20 @@ export const RepeatableControl = createControl(
 		);
 
 		const { propType, value, setValue } = useBoundProp( childArrayPropTypeUtil );
+		const ItemLabel = ( { value: itemValue }: { value: any } ) => {
+			const pattern = patternLabel || '';
+			const finalLabel = interpolate( pattern, itemValue.value );
+
+			if ( finalLabel ) {
+				return <span>{ finalLabel }</span>;
+			}
+
+			return (
+				<Box component="span" color="text.tertiary">
+					{ placeholder }
+				</Box>
+			);
+		};
 
 		return (
 			<PropProvider propType={ propType } value={ value } setValue={ setValue }>
@@ -43,12 +70,13 @@ export const RepeatableControl = createControl(
 						openOnAdd
 						values={ value ?? [] }
 						setValues={ setValue }
-						label={ label }
+						label={ repeaterLabel }
+						isSortable={ false }
 						itemSettings={ {
 							Icon: ItemIcon,
 							Label: ItemLabel,
 							Content: ItemContent,
-							initialValues: childPropTypeUtil.create( null ),
+							initialValues: childPropTypeUtil.create( initialValues || null ),
 						} }
 						showDuplicate={ showDuplicate }
 						showToggle={ showToggle }
@@ -82,8 +110,10 @@ const Content = () => {
 	);
 };
 
-const ItemLabel = () => {
-	const { label = __( 'Empty', 'elementor' ) } = useRepeatableControlContext();
-
-	return <span>{ label }</span>;
+const interpolate = ( template: string, data: object ) => {
+	//remove it to be generic
+	if ( Object.values( data ).some( ( value ) => value.value === '' || value === '' ) ) {
+		return null;
+	}
+	return new Function( ...Object.keys( data ), `return \`${ template }\`;` )( ...Object.values( data ) );
 };

package/src/controls/size-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MutableRefObject, useEffect, useState } from 'react';
+import { type RefObject, useEffect, useState } from 'react';
 import { sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
 import { usePopupState } from '@elementor/ui';
@@ -23,7 +23,7 @@ type SizeControlProps = {
 	units?: Unit[];
 	extendedOptions?: ExtendedOption[];
 	disableCustom?: boolean;
-	anchorRef?: MutableRefObject< HTMLElement | undefined >;
+	anchorRef?: RefObject< HTMLDivElement | null >;
 	defaultUnit?: Unit;
 };
 
@@ -149,7 +149,7 @@ export const SizeControl = createControl( ( props: SizeControlProps ) => {
 			{ anchorRef?.current && (
 				<TextFieldPopover
 					popupState={ popupState }
-					anchorRef={ anchorRef as MutableRefObject< HTMLElement > }
+					anchorRef={ anchorRef }
 					restoreValue={ restoreValue }
 					value={ controlSize as string }
 					onChange={ handleSizeChange }

package/src/controls/stroke-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { forwardRef, type MutableRefObject, useRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { strokePropTypeUtil } from '@elementor/editor-props';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -22,7 +22,7 @@ const units: Unit[] = [ 'px', 'em', 'rem' ];
 
 export const StrokeControl = createControl( () => {
 	const propContext = useBoundProp( strokePropTypeUtil );
-	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+	const rowRef = useRef< HTMLDivElement >( null );
 
 	return (
 		<PropProvider { ...propContext }>

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

@@ -7,7 +7,6 @@ import { type OpenOptions, useWpMediaAttachment, useWpMediaFrame } from '@elemen
 import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../bound-prop-context';
-import { ControlFormLabel } from '../components/control-form-label';
 import { EnableUnfilteredModal } from '../components/enable-unfiltered-modal';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
@@ -83,7 +82,6 @@ export const SvgMediaControl = createControl( () => {
 	return (
 		<Stack gap={ 1 }>
 			<EnableUnfilteredModal open={ unfilteredModalOpenState } onClose={ onCloseUnfilteredModal } />
-			<ControlFormLabel> { __( 'SVG', 'elementor' ) } </ControlFormLabel>
 			<ControlActions>
 				<StyledCard variant="outlined">
 					<StyledCardMediaContainer>

package/src/index.ts

@@ -5,6 +5,7 @@ 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 { FilterRepeaterControl } from './controls/filter-repeater-control';
 export { SelectControl } from './controls/select-control';
 export { ColorControl } from './controls/color-control';
 export { ToggleControl } from './controls/toggle-control';
@@ -22,6 +23,7 @@ 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';
+export { PopoverContent } from './components/popover-content';
 
 // components
 export { ControlFormLabel } from './components/control-form-label';
@@ -35,7 +37,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 { ExtendedOption } from './utils/size-control';
+export type { ExtendedOption, Unit } from './utils/size-control';
 export type { ToggleControlProps } from './controls/toggle-control';
 export type { FontCategory } from './controls/font-family-control/font-family-control';