@elementor/editor-controls 1.2.0 → 1.5.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": "1.2.0",
+  "version": "1.5.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,19 +40,19 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "0.5.0",
-    "@elementor/editor-elements": "0.8.7",
-    "@elementor/editor-props": "0.15.0",
+    "@elementor/editor-current-user": "0.6.1",
+    "@elementor/editor-elements": "0.9.2",
+    "@elementor/editor-props": "0.18.0",
     "@elementor/editor-responsive": "0.13.6",
-    "@elementor/editor-ui": "0.13.0",
+    "@elementor/editor-ui": "0.14.2",
     "@elementor/editor-v1-adapters": "0.12.1",
     "@elementor/env": "0.3.5",
     "@elementor/http-client": "0.3.0",
-    "@elementor/icons": "1.44.0",
+    "@elementor/icons": "1.46.0",
     "@elementor/locations": "0.8.0",
     "@elementor/query": "0.2.4",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.35.5",
+    "@elementor/ui": "1.36.0",
     "@elementor/utils": "0.5.0",
     "@elementor/wp-media": "0.6.1",
     "@wordpress/i18n": "^5.13.0"

package/src/bound-prop-context/prop-context.tsx

@@ -15,7 +15,7 @@ type PropContext< T extends PropValue, P extends PropType > = {
 	value: T | null;
 	propType: P;
 	placeholder?: T;
-	disabled?: boolean;
+	isDisabled?: ( propType: PropType ) => boolean | undefined;
 };
 
 const PropContext = createContext< PropContext< PropValue, PropType > | null >( null );
@@ -30,7 +30,7 @@ export const PropProvider = < T extends PropValue, P extends PropType >( {
 	setValue,
 	propType,
 	placeholder,
-	disabled,
+	isDisabled,
 }: PropProviderProps< T, P > ) => {
 	return (
 		<PropContext.Provider
@@ -39,7 +39,7 @@ export const PropProvider = < T extends PropValue, P extends PropType >( {
 				propType,
 				setValue: setValue as SetValue< PropValue >,
 				placeholder,
-				disabled,
+				isDisabled,
 			} }
 		>
 			{ children }

package/src/bound-prop-context/prop-key-context.tsx

@@ -21,6 +21,7 @@ export type PropKeyContextValue< T, P > = {
 	propType: P;
 	placeholder?: T;
 	path: PropKey[];
+	isDisabled?: ( propType: PropType ) => boolean | undefined;
 	disabled?: boolean;
 };
 

package/src/bound-prop-context/use-bound-prop.ts

@@ -19,6 +19,7 @@ type UseBoundProp< TValue extends PropValue > = {
 	placeholder?: TValue;
 	path: PropKey[];
 	restoreValue: () => void;
+	isDisabled?: ( propType: PropType ) => boolean | undefined;
 	disabled?: boolean;
 };
 
@@ -38,9 +39,11 @@ export function useBoundProp< TKey extends string, TValue extends PropValue >(
 
 	const { isValid, validate, restoreValue } = useValidation( propKeyContext.propType );
 
+	const disabled = propKeyContext.isDisabled?.( propKeyContext.propType );
+
 	// allow using the hook without a propTypeUtil, with no modifications or validations.
 	if ( ! propTypeUtil ) {
-		return propKeyContext;
+		return { ...propKeyContext, disabled } as PropKeyContextValue< PropValue, PropType >;
 	}
 
 	function setValue( value: TValue | null, options: CreateOptions, meta: { bind?: PropKey } ) {
@@ -67,6 +70,7 @@ export function useBoundProp< TKey extends string, TValue extends PropValue >(
 		value: isValid ? value : null,
 		restoreValue,
 		placeholder,
+		disabled,
 	};
 }
 

package/src/components/font-family-selector.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
-import { PopoverHeader, PopoverMenuList, PopoverScrollableContent, PopoverSearch } from '@elementor/editor-ui';
+import { PopoverBody, PopoverHeader, PopoverMenuList, PopoverSearch } from '@elementor/editor-ui';
 import { TextIcon } from '@elementor/icons';
 import { Box, Divider, Link, Stack, Typography } from '@elementor/ui';
 import { debounce } from '@elementor/utils';
@@ -41,7 +41,7 @@ export const FontFamilySelector = ( {
 	};
 
 	return (
-		<Stack>
+		<PopoverBody width={ sectionWidth }>
 			<PopoverHeader
 				title={ __( 'Font Family', 'elementor' ) }
 				onClose={ handleClose }
@@ -56,64 +56,62 @@ export const FontFamilySelector = ( {
 
 			<Divider />
 
-			<PopoverScrollableContent width={ sectionWidth }>
-				{ filteredFontFamilies.length > 0 ? (
-					<FontList
-						fontListItems={ filteredFontFamilies }
-						setFontFamily={ onFontFamilyChange }
-						handleClose={ handleClose }
-						fontFamily={ fontFamily }
-					/>
-				) : (
-					<Stack
-						alignItems="center"
-						justifyContent="center"
-						height="100%"
-						p={ 2.5 }
-						gap={ 1.5 }
-						overflow={ 'hidden' }
-					>
-						<TextIcon fontSize="large" />
-						<Box sx={ { maxWidth: 160, overflow: 'hidden' } }>
-							<Typography align="center" variant="subtitle2" color="text.secondary">
-								{ __( 'Sorry, nothing matched', 'elementor' ) }
-							</Typography>
-							<Typography
-								variant="subtitle2"
-								color="text.secondary"
-								sx={ {
-									display: 'flex',
-									width: '100%',
-									justifyContent: 'center',
-								} }
-							>
-								<span>&ldquo;</span>
-								<span style={ { maxWidth: '80%', overflow: 'hidden', textOverflow: 'ellipsis' } }>
-									{ searchValue }
-								</span>
-								<span>&rdquo;.</span>
-							</Typography>
-						</Box>
+			{ filteredFontFamilies.length > 0 ? (
+				<FontList
+					fontListItems={ filteredFontFamilies }
+					setFontFamily={ onFontFamilyChange }
+					handleClose={ handleClose }
+					fontFamily={ fontFamily }
+				/>
+			) : (
+				<Stack
+					alignItems="center"
+					justifyContent="center"
+					height="100%"
+					p={ 2.5 }
+					gap={ 1.5 }
+					overflow={ 'hidden' }
+				>
+					<TextIcon fontSize="large" />
+					<Box sx={ { maxWidth: 160, overflow: 'hidden' } }>
+						<Typography align="center" variant="subtitle2" color="text.secondary">
+							{ __( 'Sorry, nothing matched', 'elementor' ) }
+						</Typography>
 						<Typography
-							align="center"
-							variant="caption"
+							variant="subtitle2"
 							color="text.secondary"
-							sx={ { display: 'flex', flexDirection: 'column' } }
+							sx={ {
+								display: 'flex',
+								width: '100%',
+								justifyContent: 'center',
+							} }
 						>
-							{ __( 'Try something else.', 'elementor' ) }
-							<Link
-								color="secondary"
-								variant="caption"
-								component="button"
-								onClick={ () => setSearchValue( '' ) }
-							>
-								{ __( 'Clear & try again', 'elementor' ) }
-							</Link>
+							<span>&ldquo;</span>
+							<span style={ { maxWidth: '80%', overflow: 'hidden', textOverflow: 'ellipsis' } }>
+								{ searchValue }
+							</span>
+							<span>&rdquo;.</span>
 						</Typography>
-					</Stack>
-				) }
-			</PopoverScrollableContent>
-		</Stack>
+					</Box>
+					<Typography
+						align="center"
+						variant="caption"
+						color="text.secondary"
+						sx={ { display: 'flex', flexDirection: 'column' } }
+					>
+						{ __( 'Try something else.', 'elementor' ) }
+						<Link
+							color="secondary"
+							variant="caption"
+							component="button"
+							onClick={ () => setSearchValue( '' ) }
+						>
+							{ __( 'Clear & try again', 'elementor' ) }
+						</Link>
+					</Typography>
+				</Stack>
+			) }
+		</PopoverBody>
 	);
 };
 

package/src/components/repeater.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
-import { type PropKey } from '@elementor/editor-props';
+import { type PropKey, type PropTypeUtil } from '@elementor/editor-props';
 import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon, XIcon } from '@elementor/icons';
 import {
 	bindPopover,
@@ -30,6 +30,16 @@ type AnchorEl = HTMLElement | null;
 type Item< T > = {
 	disabled?: boolean;
 } & T;
+export type CollectionPropUtil< T > = PropTypeUtil< PropKey, T[] >;
+
+type RepeaterItemContentProps< T > = {
+	anchorEl: AnchorEl;
+	bind: PropKey;
+	value: T;
+	collectionPropUtil?: CollectionPropUtil< T >;
+};
+
+type RepeaterItemContent< T > = React.ComponentType< RepeaterItemContentProps< T > >;
 
 type RepeaterProps< T > = {
 	label: string;
@@ -42,15 +52,12 @@ type RepeaterProps< T > = {
 		initialValues: T;
 		Label: React.ComponentType< { value: T } >;
 		Icon: React.ComponentType< { value: T } >;
-		Content: React.ComponentType< {
-			anchorEl: AnchorEl;
-			bind: PropKey;
-			value: T;
-		} >;
+		Content: RepeaterItemContent< T >;
 	};
 	showDuplicate?: boolean;
 	showToggle?: boolean;
 	isSortable?: boolean;
+	collectionPropUtil?: CollectionPropUtil< T >;
 };
 
 const EMPTY_OPEN_ITEM = -1;
@@ -66,6 +73,7 @@ export const Repeater = < T, >( {
 	showDuplicate = true,
 	showToggle = true,
 	isSortable = true,
+	collectionPropUtil,
 }: RepeaterProps< Item< T > > ) => {
 	const [ openItem, setOpenItem ] = useState( EMPTY_OPEN_ITEM );
 
@@ -203,6 +211,7 @@ export const Repeater = < T, >( {
 									onOpen={ () => setOpenItem( EMPTY_OPEN_ITEM ) }
 									showDuplicate={ showDuplicate }
 									showToggle={ showToggle }
+									collectionPropUtil={ collectionPropUtil }
 								>
 									{ ( props ) => (
 										<itemSettings.Content { ...props } value={ value } bind={ String( index ) } />
@@ -217,22 +226,23 @@ export const Repeater = < T, >( {
 	);
 };
 
-type RepeaterItemProps = {
+type RepeaterItemProps< T > = {
 	label: React.ReactNode;
 	propDisabled?: boolean;
 	startIcon: UnstableTagProps[ 'startIcon' ];
 	removeItem: () => void;
 	duplicateItem: () => void;
 	toggleDisableItem: () => void;
-	children: ( { anchorEl }: { anchorEl: AnchorEl } ) => React.ReactNode;
+	children: ( props: Pick< RepeaterItemContentProps< T >, 'anchorEl' | 'collectionPropUtil' > ) => React.ReactNode;
 	openOnMount: boolean;
 	onOpen: () => void;
 	showDuplicate: boolean;
 	showToggle: boolean;
 	disabled?: boolean;
+	collectionPropUtil?: CollectionPropUtil< T >;
 };
 
-const RepeaterItem = ( {
+const RepeaterItem = < T, >( {
 	label,
 	propDisabled,
 	startIcon,
@@ -245,7 +255,8 @@ const RepeaterItem = ( {
 	showDuplicate,
 	showToggle,
 	disabled,
-}: RepeaterItemProps ) => {
+	collectionPropUtil,
+}: RepeaterItemProps< T > ) => {
 	const [ anchorEl, setAnchorEl ] = useState< AnchorEl >( null );
 	const { popoverState, popoverProps, ref, setRef } = usePopover( openOnMount, onOpen );
 
@@ -301,7 +312,7 @@ const RepeaterItem = ( {
 				{ ...popoverProps }
 				anchorEl={ ref }
 			>
-				<Box>{ children( { anchorEl } ) }</Box>
+				<Box>{ children( { anchorEl, collectionPropUtil } ) }</Box>
 			</Popover>
 		</>
 	);

package/src/components/size-control/size-input.tsx

@@ -4,19 +4,19 @@ import { PencilIcon } from '@elementor/icons';
 import { Box, InputAdornment, type PopupState } from '@elementor/ui';
 
 import ControlActions from '../../control-actions/control-actions';
-import { type ExtendedOption, isUnitExtendedOption, type Unit } from '../../utils/size-control';
+import { type DegreeUnit, type ExtendedOption, isUnitExtendedOption, type Unit } from '../../utils/size-control';
 import { SelectionEndAdornment, TextFieldInnerSelection } from '../size-control/text-field-inner-selection';
 
 type SizeInputProps = {
-	unit: Unit | ExtendedOption;
+	unit: Unit | DegreeUnit | ExtendedOption;
 	size: number | string;
 	placeholder?: string;
 	startIcon?: React.ReactNode;
-	units: ( Unit | ExtendedOption )[];
+	units: ( Unit | DegreeUnit | ExtendedOption )[];
 	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
 	onFocus?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
 	onClick?: ( event: React.MouseEvent< HTMLInputElement > ) => void;
-	handleUnitChange: ( unit: Unit | ExtendedOption ) => void;
+	handleUnitChange: ( unit: Unit | DegreeUnit | ExtendedOption ) => void;
 	handleSizeChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
 	popupState: PopupState;
 	disabled?: boolean;

package/src/components/text-field-popover.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type RefObject } from 'react';
-import { bindPopover, Paper, Popover, type PopupState, TextField } from '@elementor/ui';
+import { bindPopover, Popover, type PopupState, TextField } from '@elementor/ui';
 
 type Props = {
 	popupState: PopupState;
@@ -16,6 +16,15 @@ export const TextFieldPopover = ( props: Props ) => {
 	return (
 		<Popover
 			disablePortal
+			slotProps={ {
+				paper: {
+					sx: {
+						borderRadius: 2,
+						width: anchorRef.current?.offsetWidth + 'px',
+						p: 1.5,
+					},
+				},
+			} }
 			{ ...bindPopover( popupState ) }
 			anchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }
 			transformOrigin={ { vertical: 'top', horizontal: 'center' } }
@@ -24,24 +33,16 @@ export const TextFieldPopover = ( props: Props ) => {
 				popupState.close();
 			} }
 		>
-			<Paper
-				sx={ {
-					width: anchorRef.current?.offsetWidth + 'px',
-					borderRadius: 2,
-					p: 1.5,
+			<TextField
+				value={ value }
+				onChange={ onChange }
+				size="tiny"
+				type="text"
+				fullWidth
+				inputProps={ {
+					autoFocus: true,
 				} }
-			>
-				<TextField
-					value={ value }
-					onChange={ onChange }
-					size="tiny"
-					type="text"
-					fullWidth
-					inputProps={ {
-						autoFocus: true,
-					} }
-				/>
-			</Paper>
+			/>
 		</Popover>
 	);
 };

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

@@ -7,12 +7,11 @@ import {
 	colorPropTypeUtil,
 	type PropKey,
 } from '@elementor/editor-props';
-import { Box, CardMedia, Grid, styled, Tab, TabPanel, Tabs, type Theme, UnstableColorIndicator } from '@elementor/ui';
+import { Box, CardMedia, styled, Tab, TabPanel, Tabs, type Theme, UnstableColorIndicator } from '@elementor/ui';
 import { useWpMediaAttachment } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
-import { ControlFormLabel } from '../../../components/control-form-label';
 import { PopoverContent } from '../../../components/popover-content';
 import { Repeater } from '../../../components/repeater';
 import { createControl } from '../../../create-control';
@@ -75,7 +74,7 @@ export const BackgroundOverlayRepeaterControl = createControl( () => {
 	const { propType, value: overlayValues, setValue, disabled } = useBoundProp( backgroundOverlayPropTypeUtil );
 
 	return (
-		<PropProvider propType={ propType } value={ overlayValues } setValue={ setValue } disabled={ disabled }>
+		<PropProvider propType={ propType } value={ overlayValues } setValue={ setValue } isDisabled={ () => disabled }>
 			<Repeater
 				openOnAdd
 				disabled={ disabled }
@@ -236,18 +235,7 @@ const ImageOverlayContent = () => {
 	return (
 		<PropProvider { ...propContext }>
 			<PropKeyProvider bind={ 'image' }>
-				<Grid container spacing={ 1 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-							<Grid item xs={ 6 }>
-								<ControlFormLabel>{ __( 'Resolution', 'elementor' ) }</ControlFormLabel>
-							</Grid>
-							<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
-								<ImageControl sizes={ backgroundResolutionOptions } />
-							</Grid>
-						</Grid>
-					</Grid>
-				</Grid>
+				<ImageControl sizes={ backgroundResolutionOptions } />
 			</PropKeyProvider>
 			<PropKeyProvider bind={ 'position' }>
 				<BackgroundImageOverlayPosition />

package/src/controls/box-shadow-repeater-control.tsx

@@ -17,7 +17,7 @@ export const BoxShadowRepeaterControl = createControl( () => {
 	const { propType, value, setValue, disabled } = useBoundProp( boxShadowPropTypeUtil );
 
 	return (
-		<PropProvider propType={ propType } value={ value } setValue={ setValue } disabled={ disabled }>
+		<PropProvider propType={ propType } value={ value } setValue={ setValue } isDisabled={ () => disabled }>
 			<Repeater
 				openOnAdd
 				disabled={ disabled }

package/src/controls/color-control.tsx

@@ -13,7 +13,9 @@ type Props = Partial< Omit< UnstableColorFieldProps, 'value' | 'onChange' > > &
 
 export const ColorControl = createControl(
 	( { propTypeUtil = colorPropTypeUtil, anchorEl, slotProps = {}, ...props }: Props ) => {
-		const { value, setValue, disabled } = useBoundProp( propTypeUtil );
+		const { value, setValue, placeholder: boundPropPlaceholder, disabled } = useBoundProp( propTypeUtil );
+
+		const placeholder = props.placeholder ?? boundPropPlaceholder;
 
 		const handleChange = ( selectedColor: string ) => {
 			setValue( selectedColor || null );
@@ -25,6 +27,7 @@ export const ColorControl = createControl(
 					size="tiny"
 					fullWidth
 					value={ value ?? '' }
+					placeholder={ placeholder ?? '' }
 					onChange={ handleChange }
 					{ ...props }
 					disabled={ disabled }
@@ -40,6 +43,14 @@ export const ColorControl = createControl(
 								vertical: 'top',
 								horizontal: -10,
 							},
+							slotProps: {
+								colorIndicator: {
+									value: value ?? placeholder ?? '',
+								},
+								colorBox: {
+									value: value ?? placeholder ?? '',
+								},
+							},
 						},
 					} }
 				/>

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

@@ -154,7 +154,7 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 					propType={ multiSizePropType }
 					value={ getMultiSizeValues() }
 					setValue={ setNestedProp }
-					disabled={ multiSizeDisabled }
+					isDisabled={ () => multiSizeDisabled }
 				>
 					<PopoverContent p={ 1.5 }>
 						<PopoverGridContainer ref={ rowRefs[ 1 ] }>

package/src/controls/filter-control/drop-shadow-item-content.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { type DropShadowFilterPropValue, type PropTypeUtil } from '@elementor/editor-props';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { PropKeyProvider, PropProvider, useBoundProp } from '../../bound-prop-context';
+import { ControlFormLabel } from '../../components/control-form-label';
+import { PopoverGridContainer } from '../../components/popover-grid-container';
+import { type Unit } from '../../utils/size-control';
+import { ColorControl } from '../color-control';
+import { SizeControl } from '../size-control';
+
+const items = [
+	{
+		bind: 'xAxis',
+		label: __( 'X-axis', 'elementor' ),
+		rowIndex: 0,
+	},
+	{
+		bind: 'yAxis',
+		label: __( 'Y-axis', 'elementor' ),
+		rowIndex: 0,
+	},
+	{
+		bind: 'blur',
+		label: __( 'Blur', 'elementor' ),
+		rowIndex: 1,
+	},
+	{
+		bind: 'color',
+		label: __( 'Color', 'elementor' ),
+		rowIndex: 1,
+	},
+];
+
+export const DropShadowItemContent = ( {
+	propType,
+	units,
+	anchorEl,
+}: {
+	propType: PropTypeUtil< 'drop-shadow', DropShadowFilterPropValue[ 'value' ] >;
+	units: Unit[];
+	anchorEl?: HTMLElement | null;
+} ) => {
+	const context = useBoundProp( propType );
+	const rowRefs = [ useRef< HTMLDivElement >( null ), useRef< HTMLDivElement >( null ) ];
+
+	return (
+		<PropProvider { ...context }>
+			{ items.map( ( item ) => (
+				<PopoverGridContainer key={ item.bind } ref={ rowRefs[ item.rowIndex ] ?? null }>
+					<PropKeyProvider bind={ item.bind }>
+						<Grid item xs={ 6 }>
+							<ControlFormLabel>{ item.label }</ControlFormLabel>
+						</Grid>
+						<Grid item xs={ 6 }>
+							{ item.bind === 'color' ? (
+								<ColorControl anchorEl={ anchorEl } />
+							) : (
+								<SizeControl anchorRef={ rowRefs[ item.rowIndex ] } units={ units } defaultUnit="px" />
+							) }
+						</Grid>
+					</PropKeyProvider>
+				</PopoverGridContainer>
+			) ) }
+		</PropProvider>
+	);
+};

package/src/controls/filter-control/drop-shadow-item-label.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type FilterItemPropValue } from '@elementor/editor-props';
+import { Box } from '@elementor/ui';
+
+export const DropShadowItemLabel = ( { value }: { value: FilterItemPropValue } ) => {
+	const { xAxis, yAxis, blur } = value.value;
+
+	const xValue = `${ xAxis?.value?.size ?? 0 }${ xAxis?.value?.unit ?? 'px' }`;
+	const yValue = `${ yAxis?.value?.size ?? 0 }${ yAxis?.value?.unit ?? 'px' }`;
+	const blurValue = `${ blur?.value?.size ?? 10 }${ blur?.value?.unit ?? 'px' }`;
+
+	return (
+		<Box component="span">
+			<Box component="span" style={ { textTransform: 'capitalize' } }>
+				Drop shadow:
+			</Box>
+			{ `${ xValue } ${ yValue } ${ blurValue }` }
+		</Box>
+	);
+};