@elementor/editor-controls 0.35.0 → 1.0.0

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type ReactNode, useId, useRef } from 'react';
+import { type MutableRefObject, type ReactNode, useId, useRef } from 'react';
 import { type PropKey, type PropTypeUtil, sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { bindPopover, bindToggle, Grid, Popover, Stack, ToggleButton, Tooltip, usePopupState } from '@elementor/ui';
@@ -52,7 +52,6 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 	multiSizePropTypeUtil,
 }: Props< TMultiPropType, TPropValue > ) {
 	const popupId = useId();
-	const controlRef = useRef< HTMLElement >( null );
 	const popupState = usePopupState( { variant: 'popover', popupId } );
 
 	const {
@@ -62,7 +61,9 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 		disabled: multiSizeDisabled,
 	} = useBoundProp( multiSizePropTypeUtil );
 
-	const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp( sizePropTypeUtil );
+	const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
+
+	const rowRefs: MutableRefObject< HTMLElement | undefined >[] = [ useRef(), useRef() ];
 
 	const splitEqualValue = () => {
 		if ( ! sizeValue ) {
@@ -98,17 +99,26 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 		return splitEqualValue() ?? null;
 	};
 
+	const isShowingGeneralIndicator = ! isExperimentActive( 'e_v_3_30' ) || ! popupState.isOpen;
+
 	const isMixed = !! multiSizeValue;
 
 	return (
 		<>
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ controlRef }>
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRefs[ 0 ] }>
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ label }</ControlLabel>
+					{ ! isShowingGeneralIndicator ? (
+						<ControlFormLabel>{ label }</ControlFormLabel>
+					) : (
+						<ControlLabel>{ label }</ControlLabel>
+					) }
 				</Grid>
 				<Grid item xs={ 6 }>
 					<Stack direction="row" alignItems="center" gap={ 1 }>
-						<SizeControl placeholder={ isMixed ? __( 'Mixed', 'elementor' ) : undefined } />
+						<SizeControl
+							placeholder={ isMixed ? __( 'Mixed', 'elementor' ) : undefined }
+							anchorRef={ rowRefs[ 0 ] }
+						/>
 						<Tooltip title={ tooltipLabel } placement="top">
 							<ToggleButton
 								size={ 'tiny' }
@@ -117,7 +127,6 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 								{ ...bindToggle( popupState ) }
 								selected={ popupState.isOpen }
 								aria-label={ tooltipLabel }
-								disabled={ multiSizeDisabled || sizeDisabled }
 							>
 								{ icon }
 							</ToggleButton>
@@ -138,18 +147,23 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 				} }
 				{ ...bindPopover( popupState ) }
 				slotProps={ {
-					paper: { sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width } },
+					paper: { sx: { mt: 0.5, width: rowRefs[ 0 ].current?.getBoundingClientRect().width } },
 				} }
 			>
-				<PropProvider propType={ multiSizePropType } value={ getMultiSizeValues() } setValue={ setNestedProp }>
-					<PopoverContent p={ 1.5 } pt={ 2.5 } pb={ 3 }>
-						<PopoverGridContainer>
-							<MultiSizeValueControl item={ items[ 0 ] } />
-							<MultiSizeValueControl item={ items[ 1 ] } />
+				<PropProvider
+					propType={ multiSizePropType }
+					value={ getMultiSizeValues() }
+					setValue={ setNestedProp }
+					disabled={ multiSizeDisabled }
+				>
+					<PopoverContent p={ 1.5 }>
+						<PopoverGridContainer ref={ rowRefs[ 1 ] }>
+							<MultiSizeValueControl item={ items[ 0 ] } rowRef={ rowRefs[ 1 ] } />
+							<MultiSizeValueControl item={ items[ 1 ] } rowRef={ rowRefs[ 1 ] } />
 						</PopoverGridContainer>
-						<PopoverGridContainer>
-							<MultiSizeValueControl item={ items[ 2 ] } />
-							<MultiSizeValueControl item={ items[ 3 ] } />
+						<PopoverGridContainer ref={ rowRefs[ 2 ] }>
+							<MultiSizeValueControl item={ items[ 2 ] } rowRef={ rowRefs[ 2 ] } />
+							<MultiSizeValueControl item={ items[ 3 ] } rowRef={ rowRefs[ 2 ] } />
 						</PopoverGridContainer>
 					</PopoverContent>
 				</PropProvider>
@@ -158,7 +172,13 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 	);
 }
 
-const MultiSizeValueControl = ( { item }: { item: Item } ) => {
+const MultiSizeValueControl = ( {
+	item,
+	rowRef,
+}: {
+	item: Item;
+	rowRef: MutableRefObject< HTMLElement | undefined >;
+} ) => {
 	const isUsingNestedProps = isExperimentActive( 'e_v_3_30' );
 
 	return (
@@ -173,7 +193,7 @@ const MultiSizeValueControl = ( { item }: { item: Item } ) => {
 						) }
 					</Grid>
 					<Grid item xs={ 12 }>
-						<SizeControl startIcon={ item.icon } />
+						<SizeControl startIcon={ item.icon } anchorRef={ rowRef } />
 					</Grid>
 				</Grid>
 			</Grid>

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

@@ -17,6 +17,8 @@ type FontFamilyControlProps = {
 	fontFamilies: FontCategory[];
 };
 
+const SIZE = 'tiny';
+
 export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyControlProps ) => {
 	const { value: fontFamily, setValue: setFontFamily, disabled } = useBoundProp( stringPropTypeUtil );
 
@@ -28,7 +30,7 @@ export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyCo
 				<UnstableTag
 					variant="outlined"
 					label={ fontFamily }
-					endIcon={ <ChevronDownIcon fontSize="tiny" /> }
+					endIcon={ <ChevronDownIcon fontSize={ SIZE } /> }
 					{ ...bindTrigger( popoverState ) }
 					fullWidth
 					disabled={ disabled }

package/src/controls/gap-control.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { layoutDirectionPropTypeUtil, type PropKey, sizePropTypeUtil } from '@elementor/editor-props';
 import { DetachIcon, LinkIcon } from '@elementor/icons';
 import { Grid, Stack, ToggleButton, Tooltip } from '@elementor/ui';
@@ -18,6 +19,8 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 		disabled: directionDisabled,
 	} = useBoundProp( layoutDirectionPropTypeUtil );
 
+	const stackRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
 	const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp( sizePropTypeUtil );
 
 	const isLinked = ! directionValue && ! sizeValue ? true : !! sizeValue;
@@ -44,6 +47,8 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 	// translators: %s: Tooltip title.
 	const unlinkedLabel = __( 'Unlink %s', 'elementor' ).replace( '%s', tooltipLabel );
 
+	const disabled = sizeDisabled || directionDisabled;
+
 	return (
 		<PropProvider propType={ propType } value={ directionValue } setValue={ setDirectionValue }>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
@@ -56,19 +61,19 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 						selected={ isLinked }
 						sx={ { marginLeft: 'auto' } }
 						onChange={ onLinkToggle }
-						disabled={ sizeDisabled || directionDisabled }
+						disabled={ disabled }
 					>
 						<LinkedIcon fontSize={ 'tiny' } />
 					</ToggleButton>
 				</Tooltip>
 			</Stack>
-			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
+			<Stack direction="row" gap={ 2 } flexWrap="nowrap" ref={ stackRef }>
 				<Grid container gap={ 0.75 } alignItems="center">
 					<Grid item xs={ 12 }>
 						<ControlFormLabel>{ __( 'Column', 'elementor' ) }</ControlFormLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<Control bind={ 'column' } isLinked={ isLinked } />
+						<Control bind={ 'column' } isLinked={ isLinked } anchorRef={ stackRef } />
 					</Grid>
 				</Grid>
 				<Grid container gap={ 0.75 } alignItems="center">
@@ -76,7 +81,7 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 						<ControlFormLabel>{ __( 'Row', 'elementor' ) }</ControlFormLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<Control bind={ 'row' } isLinked={ isLinked } />
+						<Control bind={ 'row' } isLinked={ isLinked } anchorRef={ stackRef } />
 					</Grid>
 				</Grid>
 			</Stack>
@@ -84,14 +89,22 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 	);
 } );
 
-const Control = ( { bind, isLinked }: { bind: PropKey; isLinked: boolean } ) => {
+const Control = ( {
+	bind,
+	isLinked,
+	anchorRef,
+}: {
+	bind: PropKey;
+	isLinked: boolean;
+	anchorRef: MutableRefObject< HTMLElement | undefined >;
+} ) => {
 	if ( isLinked ) {
-		return <SizeControl />;
+		return <SizeControl anchorRef={ anchorRef } />;
 	}
 
 	return (
 		<PropKeyProvider bind={ bind }>
-			<SizeControl />
+			<SizeControl anchorRef={ anchorRef } />
 		</PropKeyProvider>
 	);
 };

package/src/controls/image-control.tsx

@@ -29,7 +29,7 @@ export const ImageControl = createControl(
 				<Stack gap={ 1.5 }>
 					{ [ 'all', 'media' ].includes( showMode ) ? (
 						<PropKeyProvider bind={ 'src' }>
-							<ControlFormLabel> { __( 'Image', 'elementor' ) } </ControlFormLabel>
+							<ControlFormLabel>{ __( 'Image', 'elementor' ) }</ControlFormLabel>
 							<ImageMediaControl mediaTypes={ mediaTypes } />
 						</PropKeyProvider>
 					) : null }
@@ -37,7 +37,7 @@ export const ImageControl = createControl(
 						<PropKeyProvider bind={ 'size' }>
 							<Grid container gap={ 1.5 } alignItems="center" flexWrap="nowrap">
 								<Grid item xs={ 6 }>
-									<ControlFormLabel> { resolutionLabel } </ControlFormLabel>
+									<ControlFormLabel>{ resolutionLabel }</ControlFormLabel>
 								</Grid>
 								<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
 									<SelectControl options={ sizes } />

package/src/controls/link-control.tsx

@@ -189,7 +189,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 							</ControlActions>
 						</PropKeyProvider>
 						<PropKeyProvider bind={ 'isTargetBlank' }>
-							<SwitchControl disabled={ ! value } />
+							<SwitchControl disabled={ propContext.disabled || ! value } />
 						</PropKeyProvider>
 					</Stack>
 				</Collapse>

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, 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';
@@ -9,19 +10,21 @@ import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-conte
 import { ControlFormLabel } from '../components/control-form-label';
 import { ControlLabel } from '../components/control-label';
 import { createControl } from '../create-control';
-import { type ExtendedValue, SizeControl } from './size-control';
+import { type ExtendedOption } from '../utils/size-control';
+import { SizeControl } from './size-control';
 
 export const LinkedDimensionsControl = createControl(
 	( {
 		label,
 		isSiteRtl = false,
-		extendedValues,
+		extendedOptions,
 	}: {
 		label: string;
 		isSiteRtl?: boolean;
-		extendedValues?: ExtendedValue[];
+		extendedOptions?: ExtendedOption[];
 	} ) => {
 		const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp( sizePropTypeUtil );
+		const gridRowRefs: MutableRefObject< HTMLElement | undefined >[] = [ useRef(), useRef() ];
 
 		const {
 			value: dimensionsValue,
@@ -58,8 +61,15 @@ export const LinkedDimensionsControl = createControl(
 		// translators: %s: Tooltip title.
 		const unlinkedLabel = __( 'Unlink %s', 'elementor' ).replace( '%s', tooltipLabel );
 
+		const disabled = sizeDisabled || dimensionsDisabled;
+
 		return (
-			<PropProvider propType={ propType } value={ dimensionsValue } setValue={ setDimensionsValue }>
+			<PropProvider
+				propType={ propType }
+				value={ dimensionsValue }
+				setValue={ setDimensionsValue }
+				disabled={ disabled }
+			>
 				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 					{ isUsingNestedProps ? (
 						<ControlFormLabel>{ label }</ControlFormLabel>
@@ -74,86 +84,33 @@ export const LinkedDimensionsControl = createControl(
 							selected={ isLinked }
 							sx={ { marginLeft: 'auto' } }
 							onChange={ onLinkToggle }
-							disabled={ sizeDisabled || dimensionsDisabled }
+							disabled={ disabled }
 						>
 							<LinkedIcon fontSize={ 'tiny' } />
 						</ToggleButton>
 					</Tooltip>
 				</Stack>
-				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
-					<Grid container gap={ 0.75 } alignItems="center">
-						<Grid item xs={ 12 }>
-							<Label bind="block-start" label={ __( 'Top', 'elementor' ) } />
-						</Grid>
-						<Grid item xs={ 12 }>
-							<Control
-								bind={ 'block-start' }
-								startIcon={ <SideTopIcon fontSize={ 'tiny' } /> }
-								isLinked={ isLinked }
-								extendedValues={ extendedValues }
-							/>
-						</Grid>
-					</Grid>
-					<Grid container gap={ 0.75 } alignItems="center">
-						<Grid item xs={ 12 }>
-							<Label
-								bind="inline-end"
-								label={ isSiteRtl ? __( 'Left', 'elementor' ) : __( 'Right', 'elementor' ) }
-							/>
-						</Grid>
-						<Grid item xs={ 12 }>
-							<Control
-								bind={ 'inline-end' }
-								startIcon={
-									isSiteRtl ? (
-										<SideLeftIcon fontSize={ 'tiny' } />
-									) : (
-										<SideRightIcon fontSize={ 'tiny' } />
-									)
-								}
-								isLinked={ isLinked }
-								extendedValues={ extendedValues }
-							/>
-						</Grid>
-					</Grid>
-				</Stack>
-				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
-					<Grid container gap={ 0.75 } alignItems="center">
-						<Grid item xs={ 12 }>
-							<Label bind="block-end" label={ __( 'Bottom', 'elementor' ) } />
-						</Grid>
-						<Grid item xs={ 12 }>
-							<Control
-								bind={ 'block-end' }
-								startIcon={ <SideBottomIcon fontSize={ 'tiny' } /> }
-								isLinked={ isLinked }
-								extendedValues={ extendedValues }
-							/>
-						</Grid>
-					</Grid>
-					<Grid container gap={ 0.75 } alignItems="center">
-						<Grid item xs={ 12 }>
-							<Label
-								bind="inline-start"
-								label={ isSiteRtl ? __( 'Right', 'elementor' ) : __( 'Left', 'elementor' ) }
-							/>
-						</Grid>
-						<Grid item xs={ 12 }>
-							<Control
-								bind={ 'inline-start' }
-								startIcon={
-									isSiteRtl ? (
-										<SideRightIcon fontSize={ 'tiny' } />
-									) : (
-										<SideLeftIcon fontSize={ 'tiny' } />
-									)
-								}
-								isLinked={ isLinked }
-								extendedValues={ extendedValues }
-							/>
-						</Grid>
-					</Grid>
-				</Stack>
+
+				{ getCssMarginProps( isSiteRtl ).map( ( row, index ) => (
+					<Stack direction="row" gap={ 2 } flexWrap="nowrap" key={ index } ref={ gridRowRefs[ index ] }>
+						{ row.map( ( { icon, ...props } ) => (
+							<Grid container gap={ 0.75 } alignItems="center" key={ props.bind }>
+								<Grid item xs={ 12 }>
+									<Label { ...props } />
+								</Grid>
+								<Grid item xs={ 12 }>
+									<Control
+										bind={ props.bind }
+										startIcon={ icon }
+										isLinked={ isLinked }
+										extendedOptions={ extendedOptions }
+										anchorRef={ gridRowRefs[ index ] }
+									/>
+								</Grid>
+							</Grid>
+						) ) }
+					</Stack>
+				) ) }
 			</PropProvider>
 		);
 	}
@@ -163,20 +120,22 @@ const Control = ( {
 	bind,
 	startIcon,
 	isLinked,
-	extendedValues,
+	extendedOptions,
+	anchorRef,
 }: {
 	bind: PropKey;
 	startIcon: React.ReactNode;
 	isLinked: boolean;
-	extendedValues?: ExtendedValue[];
+	extendedOptions?: ExtendedOption[];
+	anchorRef: MutableRefObject< HTMLElement | undefined >;
 } ) => {
 	if ( isLinked ) {
-		return <SizeControl startIcon={ startIcon } extendedValues={ extendedValues } />;
+		return <SizeControl startIcon={ startIcon } extendedOptions={ extendedOptions } anchorRef={ anchorRef } />;
 	}
 
 	return (
 		<PropKeyProvider bind={ bind }>
-			<SizeControl startIcon={ startIcon } extendedValues={ extendedValues } />
+			<SizeControl startIcon={ startIcon } extendedOptions={ extendedOptions } anchorRef={ anchorRef } />
 		</PropKeyProvider>
 	);
 };
@@ -194,3 +153,32 @@ const Label = ( { label, bind }: { label: string; bind: PropKey } ) => {
 		</PropKeyProvider>
 	);
 };
+
+function getCssMarginProps( isSiteRtl: boolean ) {
+	return [
+		[
+			{
+				bind: 'block-start',
+				label: __( 'Top', 'elementor' ),
+				icon: <SideTopIcon fontSize={ 'tiny' } />,
+			},
+			{
+				bind: 'inline-end',
+				label: isSiteRtl ? __( 'Left', 'elementor' ) : __( 'Right', 'elementor' ),
+				icon: isSiteRtl ? <SideLeftIcon fontSize={ 'tiny' } /> : <SideRightIcon fontSize={ 'tiny' } />,
+			},
+		],
+		[
+			{
+				bind: 'block-end',
+				label: __( 'Bottom', 'elementor' ),
+				icon: <SideBottomIcon fontSize={ 'tiny' } />,
+			},
+			{
+				bind: 'inline-start',
+				label: isSiteRtl ? __( 'Right', 'elementor' ) : __( 'Left', 'elementor' ),
+				icon: isSiteRtl ? <SideRightIcon fontSize={ 'tiny' } /> : <SideLeftIcon fontSize={ 'tiny' } />,
+			},
+		],
+	];
+}