@elementor/editor-controls 0.12.1 → 0.14.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "0.12.1",
+  "version": "0.14.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,14 +40,14 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-props": "0.9.2",
+    "@elementor/editor-props": "0.9.3",
     "@elementor/env": "0.3.5",
     "@elementor/http": "0.1.3",
     "@elementor/icons": "1.31.0",
     "@elementor/session": "0.1.0",
     "@elementor/ui": "1.26.0",
-    "@elementor/utils": "0.3.1",
-    "@elementor/wp-media": "0.4.1",
+    "@elementor/utils": "0.4.0",
+    "@elementor/wp-media": "0.4.2",
     "@wordpress/i18n": "^5.13.0"
   },
   "devDependencies": {

package/src/components/repeater.tsx

@@ -16,7 +16,9 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { useSyncExternalState } from '../hooks/use-sync-external-state';
 import { SectionContent } from './section-content';
+import { SortableItem, SortableProvider } from './sortable';
 
 const SIZE = 'tiny';
 
@@ -50,32 +52,61 @@ export const Repeater = < T, >( {
 	values: repeaterValues = [],
 	setValues: setRepeaterValues,
 }: RepeaterProps< Item< T > > ) => {
+	const [ items, setItems ] = useSyncExternalState( {
+		external: repeaterValues,
+		// @ts-expect-error - as long as persistWhen => true, value will never be null
+		setExternal: setRepeaterValues,
+		persistWhen: () => true,
+	} );
+
+	const [ uniqueKeys, setUniqueKeys ] = useState( items.map( ( _, index ) => index ) );
+
+	const generateNextKey = ( source: number[] ) => {
+		return 1 + Math.max( 0, ...source );
+	};
+
 	const addRepeaterItem = () => {
 		const newItem = structuredClone( itemSettings.initialValues );
+		const newKey = generateNextKey( uniqueKeys );
 
 		if ( addToBottom ) {
-			return setRepeaterValues( [ ...repeaterValues, newItem ] );
+			setItems( [ ...items, newItem ] );
+			setUniqueKeys( [ ...uniqueKeys, newKey ] );
+		} else {
+			setItems( [ newItem, ...items ] );
+			setUniqueKeys( [ newKey, ...uniqueKeys ] );
 		}
-
-		setRepeaterValues( [ newItem, ...repeaterValues ] );
 	};
 
 	const duplicateRepeaterItem = ( index: number ) => {
-		setRepeaterValues( [
-			...repeaterValues.slice( 0, index ),
-			structuredClone( repeaterValues[ index ] ),
-			...repeaterValues.slice( index ),
-		] );
+		const newItem = structuredClone( items[ index ] );
+		const newKey = generateNextKey( uniqueKeys );
+
+		// Insert the new (cloned item) at the next spot (after the current index)
+		const atPosition = 1 + index;
+
+		setItems( [ ...items.slice( 0, atPosition ), newItem, ...items.slice( atPosition ) ] );
+		setUniqueKeys( [ ...uniqueKeys.slice( 0, atPosition ), newKey, ...uniqueKeys.slice( atPosition ) ] );
 	};
 
 	const removeRepeaterItem = ( index: number ) => {
-		setRepeaterValues( repeaterValues.filter( ( _, i ) => i !== index ) );
+		setUniqueKeys(
+			uniqueKeys.filter( ( _, pos ) => {
+				return pos !== index;
+			} )
+		);
+
+		setItems(
+			items.filter( ( _, pos ) => {
+				return pos !== index;
+			} )
+		);
 	};
 
 	const toggleDisableRepeaterItem = ( index: number ) => {
-		setRepeaterValues(
-			repeaterValues.map( ( value, i ) => {
-				if ( i === index ) {
+		setItems(
+			items.map( ( value, pos ) => {
+				if ( pos === index ) {
 					const { disabled, ...rest } = value;
 
 					// If the items should not be disabled, remove the disabled property.
@@ -87,6 +118,16 @@ export const Repeater = < T, >( {
 		);
 	};
 
+	const onChangeOrder = ( reorderedKeys: number[] ) => {
+		setUniqueKeys( reorderedKeys );
+		setItems( ( prevItems ) => {
+			return reorderedKeys.map( ( keyValue ) => {
+				const index = uniqueKeys.indexOf( keyValue );
+				return prevItems[ index ];
+			} );
+		} );
+	};
+
 	return (
 		<SectionContent>
 			<Stack direction="row" justifyContent="space-between" alignItems="center">
@@ -97,22 +138,35 @@ export const Repeater = < T, >( {
 					<PlusIcon fontSize={ SIZE } />
 				</IconButton>
 			</Stack>
-			<Stack gap={ 1 } sx={ { '&:empty': { display: 'none' } } }>
-				{ repeaterValues.map( ( value, index ) => (
-					<RepeaterItem
-						key={ index }
-						bind={ String( index ) }
-						disabled={ value.disabled }
-						label={ <itemSettings.Label value={ value } /> }
-						startIcon={ <itemSettings.Icon value={ value } /> }
-						removeItem={ () => removeRepeaterItem( index ) }
-						duplicateItem={ () => duplicateRepeaterItem( index ) }
-						toggleDisableItem={ () => toggleDisableRepeaterItem( index ) }
-					>
-						{ ( props ) => <itemSettings.Content { ...props } value={ value } bind={ String( index ) } /> }
-					</RepeaterItem>
-				) ) }
-			</Stack>
+			{ 0 < uniqueKeys.length && (
+				<SortableProvider value={ uniqueKeys } onChange={ onChangeOrder }>
+					{ uniqueKeys.map( ( key, index ) => {
+						const value = items[ index ];
+
+						if ( ! value ) {
+							return null;
+						}
+
+						return (
+							<SortableItem id={ key } key={ `sortable-${ key }` }>
+								<RepeaterItem
+									bind={ String( index ) }
+									disabled={ value?.disabled }
+									label={ <itemSettings.Label value={ value } /> }
+									startIcon={ <itemSettings.Icon value={ value } /> }
+									removeItem={ () => removeRepeaterItem( index ) }
+									duplicateItem={ () => duplicateRepeaterItem( index ) }
+									toggleDisableItem={ () => toggleDisableRepeaterItem( index ) }
+								>
+									{ ( props ) => (
+										<itemSettings.Content { ...props } value={ value } bind={ String( index ) } />
+									) }
+								</RepeaterItem>
+							</SortableItem>
+						);
+					} ) }
+				</SortableProvider>
+			) }
 		</SectionContent>
 	);
 };
@@ -151,6 +205,7 @@ const RepeaterItem = ( {
 			<UnstableTag
 				label={ label }
 				showActionsOnHover
+				fullWidth
 				ref={ controlRef }
 				variant="outlined"
 				aria-label={ __( 'Open item', 'elementor' ) }
@@ -183,6 +238,7 @@ const RepeaterItem = ( {
 						</IconButton>
 					</>
 				}
+				sx={ { backgroundColor: 'background.paper' } }
 			/>
 			<Popover
 				disablePortal

package/src/components/sortable.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { GripVerticalIcon } from '@elementor/icons';
+import {
+	Divider,
+	List,
+	ListItem,
+	styled,
+	UnstableSortableItem,
+	type UnstableSortableItemProps,
+	type UnstableSortableItemRenderProps,
+	UnstableSortableProvider,
+	type UnstableSortableProviderProps,
+} from '@elementor/ui';
+
+export const SortableProvider = < T extends number >( props: UnstableSortableProviderProps< T > ) => {
+	return (
+		<List sx={ { p: 0, m: 0 } }>
+			<UnstableSortableProvider
+				restrictAxis={ true }
+				disableDragOverlay={ false }
+				variant={ 'static' }
+				{ ...props }
+			/>
+		</List>
+	);
+};
+
+type SortableItemProps = {
+	id: UnstableSortableItemProps[ 'id' ];
+	children: React.ReactNode;
+};
+
+export const SortableItem = ( { id, children }: SortableItemProps ): React.ReactNode => {
+	return (
+		<UnstableSortableItem
+			id={ id }
+			render={ ( {
+				itemProps,
+				triggerProps,
+				itemStyle,
+				triggerStyle,
+				isDragOverlay,
+				showDropIndication,
+				dropIndicationStyle,
+			}: UnstableSortableItemRenderProps ) => {
+				return (
+					<StyledListItem
+						{ ...itemProps }
+						style={ itemStyle }
+						sx={ { backgroundColor: isDragOverlay ? 'background.paper' : undefined } }
+					>
+						<SortableTrigger { ...triggerProps } style={ triggerStyle } />
+						{ children }
+						{ showDropIndication && <StyledDivider style={ dropIndicationStyle } /> }
+					</StyledListItem>
+				);
+			} }
+		/>
+	);
+};
+
+const StyledListItem = styled( ListItem )`
+	position: relative;
+	margin-inline: 0px;
+	padding-inline: 0px;
+	padding-block: ${ ( { theme } ) => theme.spacing( 0.5 ) };
+
+	& .class-item-sortable-trigger {
+		color: ${ ( { theme } ) => theme.palette.action.active };
+		height: 100%;
+		display: flex;
+		align-items: center;
+		visibility: hidden;
+		position: absolute;
+		top: 50%;
+		padding-inline-end: ${ ( { theme } ) => theme.spacing( 0.5 ) };
+		transform: translate( -75%, -50% );
+	}
+
+	&:hover {
+		& .class-item-sortable-trigger {
+			visibility: visible;
+		}
+	}
+`;
+
+const SortableTrigger = ( props: React.HTMLAttributes< HTMLDivElement > ) => (
+	<div { ...props } role="button" className="class-item-sortable-trigger">
+		<GripVerticalIcon fontSize="tiny" />
+	</div>
+);
+
+const StyledDivider = styled( Divider )`
+	height: 0px;
+	border: none;
+	overflow: visible;
+
+	&:after {
+		--height: 2px;
+		content: '';
+		display: block;
+		width: 100%;
+		height: var( --height );
+		margin-block: calc( -1 * var( --height ) / 2 );
+		border-radius: ${ ( { theme } ) => theme.spacing( 0.5 ) };
+		background-color: ${ ( { theme } ) => theme.palette.text.primary };
+	}
+`;

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx

@@ -31,7 +31,7 @@ const repeatControlOptions: ToggleButtonGroupItem< Repeaters >[] = [
 	},
 	{
 		value: 'no-repeat',
-		label: __( 'No-Repeat', 'elementor' ),
+		label: __( 'No-repeat', 'elementor' ),
 		renderContent: ( { size } ) => <XIcon fontSize={ size } />,
 		showTooltip: true,
 	},

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx

@@ -88,12 +88,18 @@ export const BackgroundImageOverlaySize = () => {
 						<PopoverGridContainer>
 							<Grid item xs={ 6 }>
 								<PropKeyProvider bind={ 'width' }>
-									<SizeControl startIcon={ <ArrowsMoveHorizontalIcon fontSize={ 'tiny' } /> } />
+									<SizeControl
+										startIcon={ <ArrowsMoveHorizontalIcon fontSize={ 'tiny' } /> }
+										extendedValues={ [ 'auto' ] }
+									/>
 								</PropKeyProvider>
 							</Grid>
 							<Grid item xs={ 6 }>
 								<PropKeyProvider bind={ 'height' }>
-									<SizeControl startIcon={ <ArrowsMoveVerticalIcon fontSize={ 'tiny' } /> } />
+									<SizeControl
+										startIcon={ <ArrowsMoveVerticalIcon fontSize={ 'tiny' } /> }
+										extendedValues={ [ 'auto' ] }
+									/>
 								</PropKeyProvider>
 							</Grid>
 						</PopoverGridContainer>

package/src/controls/font-family-control.tsx

@@ -71,7 +71,7 @@ export const FontFamilyControl = createControl( ( { fontFamilies } ) => {
 				<Stack>
 					<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
 						<EditIcon fontSize={ SIZE } sx={ { mr: 0.5 } } />
-						<Typography variant="subtitle2">{ __( 'Font Family', 'elementor' ) }</Typography>
+						<Typography variant="subtitle2">{ __( 'Font family', 'elementor' ) }</Typography>
 						<IconButton size={ SIZE } sx={ { ml: 'auto' } } onClick={ handleClose }>
 							<XIcon fontSize={ SIZE } />
 						</IconButton>
@@ -82,7 +82,7 @@ export const FontFamilyControl = createControl( ( { fontFamilies } ) => {
 							fullWidth
 							size={ SIZE }
 							value={ searchValue }
-							placeholder={ __( 'Search', 'elementor' ) }
+							placeholder={ __( 'Search fonts…', 'elementor' ) }
 							onChange={ handleSearch }
 							InputProps={ {
 								startAdornment: (

package/src/controls/gap-control.tsx

@@ -21,7 +21,7 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 
 	const onLinkToggle = () => {
 		if ( ! isLinked ) {
-			setSizeValue( directionValue?.column.value );
+			setSizeValue( directionValue?.column?.value );
 			return;
 		}
 

package/src/controls/image-control.tsx

@@ -22,7 +22,7 @@ export const ImageControl = createControl(
 			<PropProvider { ...propContext }>
 				<Stack gap={ 1.5 }>
 					<PropKeyProvider bind={ 'src' }>
-						<ControlLabel> { __( 'Choose image', 'elementor' ) } </ControlLabel>
+						<ControlLabel> { __( 'Image', 'elementor' ) } </ControlLabel>
 						<ImageMediaControl />
 					</PropKeyProvider>
 					<PropKeyProvider bind={ 'size' }>

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

@@ -66,7 +66,7 @@ export const ImageMediaControl = createControl( ( props: ImageMediaControlProps
 							startIcon={ <UploadIcon /> }
 							onClick={ () => open( { mode: 'upload' } ) }
 						>
-							{ __( 'Upload image', 'elementor' ) }
+							{ __( 'Upload', 'elementor' ) }
 						</Button>
 					</Stack>
 				</CardOverlay>

package/src/controls/link-control.tsx

@@ -12,6 +12,7 @@ import { type HttpResponse, httpService } from '@elementor/http';
 import { MinusIcon, PlusIcon } from '@elementor/icons';
 import { useSessionStorage } from '@elementor/session';
 import { Collapse, Divider, Grid, IconButton, Stack, Switch } from '@elementor/ui';
+import { debounce } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
@@ -191,7 +192,7 @@ const SwitchControl = () => {
 	return (
 		<Grid container alignItems="center" flexWrap="nowrap" justifyContent="space-between">
 			<Grid item>
-				<ControlLabel>{ __( 'Open in new tab', 'elementor' ) }</ControlLabel>
+				<ControlLabel>{ __( 'Open in a new tab', 'elementor' ) }</ControlLabel>
 			</Grid>
 			<Grid item>
 				<Switch checked={ value } onClick={ onClick } />
@@ -238,15 +239,3 @@ function generateFirstLoadedOption( unionValue: LinkPropValue[ 'value' ] | null
 		  ]
 		: [];
 }
-
-function debounce< TArgs extends unknown[] >( fn: ( ...args: TArgs ) => unknown, timeout: number ) {
-	let timer: ReturnType< typeof setTimeout >;
-
-	return ( ...args: TArgs ) => {
-		clearTimeout( timer );
-
-		timer = setTimeout( () => {
-			fn( ...args );
-		}, timeout );
-	};
-}

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

@@ -7,111 +7,131 @@ import { __ } from '@wordpress/i18n';
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { ControlLabel } from '../components/control-label';
 import { createControl } from '../create-control';
-import { SizeControl } from './size-control';
+import { type ExtendedValue, SizeControl } from './size-control';
 
-export const LinkedDimensionsControl = createControl( ( { label }: { label: string } ) => {
-	const { value: dimensionsValue, setValue: setDimensionsValue, propType } = useBoundProp( dimensionsPropTypeUtil );
-	const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
+export const LinkedDimensionsControl = createControl(
+	( { label, extendedValues }: { label: string; extendedValues?: ExtendedValue[] } ) => {
+		const {
+			value: dimensionsValue,
+			setValue: setDimensionsValue,
+			propType,
+		} = useBoundProp( dimensionsPropTypeUtil );
+		const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
 
-	const isLinked = ! dimensionsValue && ! sizeValue ? true : !! sizeValue;
+		const isLinked = ! dimensionsValue && ! sizeValue ? true : !! sizeValue;
 
-	const onLinkToggle = () => {
-		if ( ! isLinked ) {
-			setSizeValue( dimensionsValue?.top?.value );
-			return;
-		}
+		const onLinkToggle = () => {
+			if ( ! isLinked ) {
+				setSizeValue( dimensionsValue?.top?.value );
+				return;
+			}
 
-		const value = sizeValue ? sizePropTypeUtil.create( sizeValue ) : null;
+			const value = sizeValue ? sizePropTypeUtil.create( sizeValue ) : null;
 
-		setDimensionsValue( {
-			top: value,
-			right: value,
-			bottom: value,
-			left: value,
-		} );
-	};
+			setDimensionsValue( {
+				top: value,
+				right: value,
+				bottom: value,
+				left: value,
+			} );
+		};
 
-	const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
+		const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
 
-	return (
-		<PropProvider propType={ propType } value={ dimensionsValue } setValue={ setDimensionsValue }>
-			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
-				<ControlLabel>{ label }</ControlLabel>
-				<ToggleButton
-					aria-label={ __( 'Link inputs', 'elementor' ) }
-					size={ 'tiny' }
-					value={ 'check' }
-					selected={ isLinked }
-					sx={ { marginLeft: 'auto' } }
-					onChange={ onLinkToggle }
-				>
-					<LinkedIcon fontSize={ 'tiny' } />
-				</ToggleButton>
-			</Stack>
-			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
-				<Grid container gap={ 1 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<ControlLabel>{ __( 'Top', 'elementor' ) }</ControlLabel>
-					</Grid>
-					<Grid item xs={ 12 }>
-						<Control
-							bind={ 'top' }
-							startIcon={ <SideTopIcon fontSize={ 'tiny' } /> }
-							isLinked={ isLinked }
-						/>
-					</Grid>
-				</Grid>
-				<Grid container gap={ 1 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<ControlLabel>{ __( 'Right', 'elementor' ) }</ControlLabel>
-					</Grid>
-					<Grid item xs={ 12 }>
-						<Control
-							bind={ 'right' }
-							startIcon={ <SideRightIcon fontSize={ 'tiny' } /> }
-							isLinked={ isLinked }
-						/>
+		return (
+			<PropProvider propType={ propType } value={ dimensionsValue } setValue={ setDimensionsValue }>
+				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
+					<ControlLabel>{ label }</ControlLabel>
+					<ToggleButton
+						aria-label={ __( 'Link Inputs', 'elementor' ) }
+						size={ 'tiny' }
+						value={ 'check' }
+						selected={ isLinked }
+						sx={ { marginLeft: 'auto' } }
+						onChange={ onLinkToggle }
+					>
+						<LinkedIcon fontSize={ 'tiny' } />
+					</ToggleButton>
+				</Stack>
+				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
+					<Grid container gap={ 1 } alignItems="center">
+						<Grid item xs={ 12 }>
+							<ControlLabel>{ __( 'Top', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 12 }>
+							<Control
+								bind={ 'top' }
+								startIcon={ <SideTopIcon fontSize={ 'tiny' } /> }
+								isLinked={ isLinked }
+								extendedValues={ extendedValues }
+							/>
+						</Grid>
 					</Grid>
-				</Grid>
-			</Stack>
-			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
-				<Grid container gap={ 1 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<ControlLabel>{ __( 'Bottom', 'elementor' ) }</ControlLabel>
+					<Grid container gap={ 1 } alignItems="center">
+						<Grid item xs={ 12 }>
+							<ControlLabel>{ __( 'Right', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 12 }>
+							<Control
+								bind={ 'right' }
+								startIcon={ <SideRightIcon fontSize={ 'tiny' } /> }
+								isLinked={ isLinked }
+								extendedValues={ extendedValues }
+							/>
+						</Grid>
 					</Grid>
-					<Grid item xs={ 12 }>
-						<Control
-							bind={ 'bottom' }
-							startIcon={ <SideBottomIcon fontSize={ 'tiny' } /> }
-							isLinked={ isLinked }
-						/>
+				</Stack>
+				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
+					<Grid container gap={ 1 } alignItems="center">
+						<Grid item xs={ 12 }>
+							<ControlLabel>{ __( 'Bottom', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 12 }>
+							<Control
+								bind={ 'bottom' }
+								startIcon={ <SideBottomIcon fontSize={ 'tiny' } /> }
+								isLinked={ isLinked }
+								extendedValues={ extendedValues }
+							/>
+						</Grid>
 					</Grid>
-				</Grid>
-				<Grid container gap={ 1 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<ControlLabel>{ __( 'Left', 'elementor' ) }</ControlLabel>
+					<Grid container gap={ 1 } alignItems="center">
+						<Grid item xs={ 12 }>
+							<ControlLabel>{ __( 'Left', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 12 }>
+							<Control
+								bind={ 'left' }
+								startIcon={ <SideLeftIcon fontSize={ 'tiny' } /> }
+								isLinked={ isLinked }
+								extendedValues={ extendedValues }
+							/>
+						</Grid>
 					</Grid>
-					<Grid item xs={ 12 }>
-						<Control
-							bind={ 'left' }
-							startIcon={ <SideLeftIcon fontSize={ 'tiny' } /> }
-							isLinked={ isLinked }
-						/>
-					</Grid>
-				</Grid>
-			</Stack>
-		</PropProvider>
-	);
-} );
+				</Stack>
+			</PropProvider>
+		);
+	}
+);
 
-const Control = ( { bind, startIcon, isLinked }: { bind: PropKey; startIcon: React.ReactNode; isLinked: boolean } ) => {
+const Control = ( {
+	bind,
+	startIcon,
+	isLinked,
+	extendedValues,
+}: {
+	bind: PropKey;
+	startIcon: React.ReactNode;
+	isLinked: boolean;
+	extendedValues?: ExtendedValue[];
+} ) => {
 	if ( isLinked ) {
-		return <SizeControl startIcon={ startIcon } />;
+		return <SizeControl startIcon={ startIcon } extendedValues={ extendedValues } />;
 	}
 
 	return (
 		<PropKeyProvider bind={ bind }>
-			<SizeControl startIcon={ startIcon } />
+			<SizeControl startIcon={ startIcon } extendedValues={ extendedValues } />
 		</PropKeyProvider>
 	);
 };