@elementor/editor-controls 1.0.0 → 1.2.0

package/src/controls/repeatable-control.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { useMemo } from 'react';
+import { createArrayPropUtils, type PropKey } from '@elementor/editor-props';
+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';
+import { Repeater } from '../components/repeater';
+import { createControl } from '../create-control';
+import {
+	type ChildControlConfig,
+	RepeatableControlContext,
+	useRepeatableControlContext,
+} from '../hooks/use-repeatable-control-context';
+
+type RepeatableControlProps = {
+	label: string;
+	repeaterLabel: string;
+	childControlConfig: ChildControlConfig;
+	showDuplicate?: boolean;
+	showToggle?: boolean;
+	initialValues?: object;
+	patternLabel?: string;
+	placeholder?: string;
+};
+
+export const RepeatableControl = createControl(
+	( {
+		repeaterLabel,
+		childControlConfig,
+		showDuplicate,
+		showToggle,
+		initialValues,
+		patternLabel,
+		placeholder,
+	}: RepeatableControlProps ) => {
+		const { propTypeUtil: childPropTypeUtil } = childControlConfig;
+
+		if ( ! childPropTypeUtil ) {
+			return null;
+		}
+
+		const childArrayPropTypeUtil = useMemo(
+			() => createArrayPropUtils( childPropTypeUtil.key, childPropTypeUtil.schema ),
+			[ childPropTypeUtil.key, childPropTypeUtil.schema ]
+		);
+
+		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 }>
+				<RepeatableControlContext.Provider value={ childControlConfig }>
+					<Repeater
+						openOnAdd
+						values={ value ?? [] }
+						setValues={ setValue }
+						label={ repeaterLabel }
+						isSortable={ false }
+						itemSettings={ {
+							Icon: ItemIcon,
+							Label: ItemLabel,
+							Content: ItemContent,
+							initialValues: childPropTypeUtil.create( initialValues || null ),
+						} }
+						showDuplicate={ showDuplicate }
+						showToggle={ showToggle }
+					/>
+				</RepeatableControlContext.Provider>
+			</PropProvider>
+		);
+	}
+);
+
+const ItemContent = ( { bind }: { bind: PropKey } ) => {
+	return (
+		<PropKeyProvider bind={ bind }>
+			<Content />
+		</PropKeyProvider>
+	);
+};
+
+// TODO: Configurable icon probably can be somehow part of the injected control and bubbled up to the repeater
+const ItemIcon = () => <></>;
+
+const Content = () => {
+	const { component: ChildControl, props = {} } = useRepeatableControlContext();
+
+	return (
+		<PopoverContent p={ 1.5 }>
+			<PopoverGridContainer>
+				<ChildControl { ...props } />
+			</PopoverGridContainer>
+		</PopoverContent>
+	);
+};
+
+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,8 @@ type SizeControlProps = {
 	units?: Unit[];
 	extendedOptions?: ExtendedOption[];
 	disableCustom?: boolean;
-	anchorRef?: MutableRefObject< HTMLElement | undefined >;
+	anchorRef?: RefObject< HTMLDivElement | null >;
+	defaultUnit?: Unit;
 };
 
 type State = {
@@ -33,9 +34,10 @@ type State = {
 };
 
 export const SizeControl = createControl( ( props: SizeControlProps ) => {
+	const defaultUnit = props.defaultUnit ?? DEFAULT_UNIT;
 	const { units = [ ...defaultUnits ], placeholder, startIcon, anchorRef } = props;
 	const { value: sizeValue, setValue: setSizeValue, disabled, restoreValue } = useBoundProp( sizePropTypeUtil );
-	const [ internalState, setInternalState ] = useState( createStateFromSizeProp( sizeValue ) );
+	const [ internalState, setInternalState ] = useState( createStateFromSizeProp( sizeValue, defaultUnit ) );
 	const activeBreakpoint = useActiveBreakpoint();
 
 	const extendedOptions = useSizeExtendedOptions( props.extendedOptions || [], props.disableCustom ?? false );
@@ -56,7 +58,7 @@ export const SizeControl = createControl( ( props: SizeControlProps ) => {
 			return !! newState?.numeric || newState?.numeric === 0;
 		},
 		fallback: ( newState ) => ( {
-			unit: newState?.unit ?? DEFAULT_UNIT,
+			unit: newState?.unit ?? props.defaultUnit ?? DEFAULT_UNIT,
 			numeric: newState?.numeric ?? DEFAULT_SIZE,
 			custom: newState?.custom ?? '',
 		} ),
@@ -101,7 +103,7 @@ export const SizeControl = createControl( ( props: SizeControlProps ) => {
 	};
 
 	useEffect( () => {
-		const newState = createStateFromSizeProp( sizeValue );
+		const newState = createStateFromSizeProp( sizeValue, defaultUnit );
 		const currentUnit = isUnitExtendedOption( state.unit ) ? 'custom' : 'numeric';
 		const mergedStates = { ...state, [ currentUnit ]: newState[ currentUnit ] };
 
@@ -120,7 +122,7 @@ export const SizeControl = createControl( ( props: SizeControlProps ) => {
 	}, [ sizeValue ] );
 
 	useEffect( () => {
-		const newState = createStateFromSizeProp( sizeValue );
+		const newState = createStateFromSizeProp( sizeValue, defaultUnit );
 
 		if ( activeBreakpoint && ! areStatesEqual( newState, state ) ) {
 			setState( newState );
@@ -147,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 }
@@ -165,8 +167,8 @@ function formatSize< TSize extends string | number >( size: TSize, unit: Unit |
 	return size || size === 0 ? ( Number( size ) as TSize ) : ( NaN as TSize );
 }
 
-function createStateFromSizeProp( sizeValue: SizeValue | null ): State {
-	const unit = sizeValue?.unit ?? DEFAULT_UNIT;
+function createStateFromSizeProp( sizeValue: SizeValue | null, defaultUnit: Unit ): State {
+	const unit = sizeValue?.unit ?? defaultUnit;
 	const size = sizeValue?.size ?? '';
 
 	return {

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/hooks/use-repeatable-control-context.ts

@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react';
+import { type PropTypeUtil } from '@elementor/editor-props';
+
+export type ChildControlConfig = {
+	component: React.ComponentType;
+	props?: Record< string, unknown >;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	propTypeUtil: PropTypeUtil< string, any >;
+	label?: string;
+};
+
+const RepeatableControlContext = createContext< ChildControlConfig | undefined >( undefined );
+
+const useRepeatableControlContext = () => {
+	const context = useContext( RepeatableControlContext );
+
+	if ( ! context ) {
+		throw new Error( 'useRepeatableControlContext must be used within RepeatableControl' );
+	}
+
+	return context;
+};
+
+export { RepeatableControlContext, useRepeatableControlContext };

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';
@@ -19,6 +20,10 @@ export { AspectRatioControl } from './controls/aspect-ratio-control';
 export { SvgMediaControl } from './controls/svg-media-control';
 export { BackgroundControl } from './controls/background-control/background-control';
 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';
@@ -32,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';