@elementor/editor-controls 0.35.0 → 0.36.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.35.0",
+  "version": "0.36.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -43,7 +43,7 @@
     "@elementor/editor-current-user": "0.5.0",
     "@elementor/editor-elements": "0.8.4",
     "@elementor/editor-props": "0.12.1",
-    "@elementor/editor-ui": "0.10.1",
+    "@elementor/editor-ui": "0.11.0",
     "@elementor/editor-v1-adapters": "0.12.0",
     "@elementor/env": "0.3.5",
     "@elementor/http-client": "0.3.0",

package/src/components/control-form-label.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { FormLabel } from '@elementor/ui';
+import { FormLabel, type FormLabelProps } from '@elementor/ui';
 
-export const ControlFormLabel = ( { children }: { children: React.ReactNode } ) => {
-	return <FormLabel size="tiny">{ children }</FormLabel>;
+export const ControlFormLabel = ( props: FormLabelProps ) => {
+	return <FormLabel size="tiny" { ...props } />;
 };

package/src/components/control-label.tsx

@@ -7,7 +7,7 @@ import { ControlFormLabel } from './control-form-label';
 
 export const ControlLabel = ( { children }: PropsWithChildren< object > ) => {
 	return (
-		<Stack direction="row" alignItems="center" justifyItems="start" gap={ 1 }>
+		<Stack direction="row" alignItems="center" justifyItems="start" gap={ 0.25 }>
 			<ControlFormLabel>{ children }</ControlFormLabel>
 			<ControlAdornments />
 		</Stack>

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

@@ -1,11 +1,10 @@
 import { useEffect, useRef, useState } from 'react';
 import * as React from 'react';
-import { type FontCategory } from '@elementor/editor-controls';
-import { SearchIcon, TextIcon, XIcon } from '@elementor/icons';
+import { PopoverHeader } from '@elementor/editor-ui';
+import { SearchIcon, TextIcon } from '@elementor/icons';
 import {
 	Box,
 	Divider,
-	IconButton,
 	InputAdornment,
 	Link,
 	MenuList,
@@ -20,6 +19,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import { __ } from '@wordpress/i18n';
 
 import { enqueueFont } from '../controls/font-family-control/enqueue-font';
+import { type FontCategory } from '../controls/font-family-control/font-family-control';
 import { type FontListItem, useFilteredFontFamilies } from '../hooks/use-filtered-font-families';
 
 const SIZE = 'tiny';
@@ -52,13 +52,11 @@ export const FontFamilySelector = ( {
 
 	return (
 		<Stack>
-			<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
-				<TextIcon fontSize={ SIZE } sx={ { mr: 0.5 } } />
-				<Typography variant="subtitle2">{ __( 'Font Family', 'elementor' ) }</Typography>
-				<IconButton size={ SIZE } sx={ { ml: 'auto' } } onClick={ handleClose }>
-					<XIcon fontSize={ SIZE } />
-				</IconButton>
-			</Stack>
+			<PopoverHeader
+				title={ __( 'Font Family', 'elementor' ) }
+				onClose={ handleClose }
+				icon={ <TextIcon fontSize={ SIZE } /> }
+			/>
 
 			<Box px={ 1.5 } pb={ 1 }>
 				<TextField

package/src/components/repeater.tsx

@@ -143,8 +143,6 @@ export const Repeater = < T, >( {
 		} );
 	};
 
-	const ItemWrapper = disabled ? React.Fragment : SortableItem;
-
 	return (
 		<SectionContent>
 			<Stack
@@ -178,7 +176,7 @@ export const Repeater = < T, >( {
 						}
 
 						return (
-							<ItemWrapper id={ key } key={ `sortable-${ key }` }>
+							<SortableItem id={ key } key={ `sortable-${ key }` } disabled={ disabled }>
 								<RepeaterItem
 									disabled={ disabled }
 									propDisabled={ value?.disabled }
@@ -202,7 +200,7 @@ export const Repeater = < T, >( {
 										<itemSettings.Content { ...props } value={ value } bind={ String( index ) } />
 									) }
 								</RepeaterItem>
-							</ItemWrapper>
+							</SortableItem>
 						);
 					} ) }
 				</SortableProvider>

package/src/components/sortable.tsx

@@ -23,12 +23,14 @@ export const SortableProvider = < T extends number >( props: UnstableSortablePro
 type SortableItemProps = {
 	id: UnstableSortableItemProps[ 'id' ];
 	children: React.ReactNode;
+	disabled?: boolean;
 };
 
-export const SortableItem = ( { id, children }: SortableItemProps ): React.ReactNode => {
+export const SortableItem = ( { id, children, disabled }: SortableItemProps ): React.ReactNode => {
 	return (
 		<UnstableSortableItem
 			id={ id }
+			disabled={ disabled }
 			render={ ( {
 				itemProps,
 				triggerProps,
@@ -39,7 +41,7 @@ export const SortableItem = ( { id, children }: SortableItemProps ): React.React
 			}: UnstableSortableItemRenderProps ) => {
 				return (
 					<StyledListItem { ...itemProps } style={ itemStyle }>
-						<SortableTrigger { ...triggerProps } style={ triggerStyle } />
+						{ ! disabled && <SortableTrigger { ...triggerProps } style={ triggerStyle } /> }
 						{ children }
 						{ showDropIndication && <StyledDivider style={ dropIndicationStyle } /> }
 					</StyledListItem>

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

@@ -60,10 +60,11 @@ export const BackgroundImageOverlayPosition = () => {
 					</Grid>
 					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end', overflow: 'hidden' } }>
 						<Select
+							fullWidth
 							size="tiny"
-							value={ ( backgroundImageOffsetContext.value ? 'custom' : stringPropContext.value ) ?? '' }
 							onChange={ handlePositionChange }
-							fullWidth
+							disabled={ stringPropContext.disabled }
+							value={ ( backgroundImageOffsetContext.value ? 'custom' : stringPropContext.value ) ?? '' }
 						>
 							{ backgroundPositionOptions.map( ( { label, value } ) => (
 								<MenuListItem key={ value } value={ value ?? '' }>

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

@@ -74,10 +74,11 @@ export const BackgroundImageOverlaySize = () => {
 						<ControlToggleButtonGroup
 							exclusive
 							items={ sizeControlOptions }
+							onChange={ handleSizeChange }
+							disabled={ stringPropContext.disabled }
 							value={
 								( backgroundImageScaleContext.value ? 'custom' : stringPropContext.value ) as Sizes
 							}
-							onChange={ handleSizeChange }
 						/>
 					</Grid>
 				</PopoverGridContainer>

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

@@ -74,7 +74,7 @@ export const BackgroundOverlayRepeaterControl = createControl( () => {
 	const { propType, value: overlayValues, setValue, disabled } = useBoundProp( backgroundOverlayPropTypeUtil );
 
 	return (
-		<PropProvider propType={ propType } value={ overlayValues } setValue={ setValue }>
+		<PropProvider propType={ propType } value={ overlayValues } setValue={ setValue } disabled={ disabled }>
 			<Repeater
 				openOnAdd
 				disabled={ disabled }

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

@@ -16,7 +16,7 @@ export const BoxShadowRepeaterControl = createControl( () => {
 	const { propType, value, setValue, disabled } = useBoundProp( boxShadowPropTypeUtil );
 
 	return (
-		<PropProvider propType={ propType } value={ value } setValue={ setValue }>
+		<PropProvider propType={ propType } value={ value } setValue={ setValue } disabled={ disabled }>
 			<Repeater
 				openOnAdd
 				disabled={ disabled }
@@ -47,10 +47,10 @@ const ItemContent = ( { anchorEl, bind }: { anchorEl: HTMLElement | null; bind:
 };
 
 const Content = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
-	const { propType, value, setValue } = useBoundProp( shadowPropTypeUtil );
+	const context = useBoundProp( shadowPropTypeUtil );
 
 	return (
-		<PropProvider propType={ propType } value={ value } setValue={ setValue }>
+		<PropProvider { ...context }>
 			<PopoverContent p={ 1.5 }>
 				<PopoverGridContainer>
 					<Control bind="color" label={ __( 'Color', 'elementor' ) }>

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

@@ -62,7 +62,7 @@ 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 splitEqualValue = () => {
 		if ( ! sizeValue ) {
@@ -98,13 +98,19 @@ 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 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 }>
@@ -117,7 +123,6 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 								{ ...bindToggle( popupState ) }
 								selected={ popupState.isOpen }
 								aria-label={ tooltipLabel }
-								disabled={ multiSizeDisabled || sizeDisabled }
 							>
 								{ icon }
 							</ToggleButton>
@@ -141,7 +146,12 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 					paper: { sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width } },
 				} }
 			>
-				<PropProvider propType={ multiSizePropType } value={ getMultiSizeValues() } setValue={ setNestedProp }>
+				<PropProvider
+					propType={ multiSizePropType }
+					value={ getMultiSizeValues() }
+					setValue={ setNestedProp }
+					disabled={ multiSizeDisabled }
+				>
 					<PopoverContent p={ 1.5 } pt={ 2.5 } pb={ 3 }>
 						<PopoverGridContainer>
 							<MultiSizeValueControl item={ items[ 0 ] } />

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

@@ -44,6 +44,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,7 +58,7 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 						selected={ isLinked }
 						sx={ { marginLeft: 'auto' } }
 						onChange={ onLinkToggle }
-						disabled={ sizeDisabled || directionDisabled }
+						disabled={ disabled }
 					>
 						<LinkedIcon fontSize={ 'tiny' } />
 					</ToggleButton>

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

@@ -58,8 +58,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,7 +81,7 @@ export const LinkedDimensionsControl = createControl(
 							selected={ isLinked }
 							sx={ { marginLeft: 'auto' } }
 							onChange={ onLinkToggle }
-							disabled={ sizeDisabled || dimensionsDisabled }
+							disabled={ disabled }
 						>
 							<LinkedIcon fontSize={ 'tiny' } />
 						</ToggleButton>
@@ -141,6 +148,8 @@ export const LinkedDimensionsControl = createControl(
 						<Grid item xs={ 12 }>
 							<Control
 								bind={ 'inline-start' }
+								isLinked={ isLinked }
+								extendedValues={ extendedValues }
 								startIcon={
 									isSiteRtl ? (
 										<SideRightIcon fontSize={ 'tiny' } />
@@ -148,8 +157,6 @@ export const LinkedDimensionsControl = createControl(
 										<SideLeftIcon fontSize={ 'tiny' } />
 									)
 								}
-								isLinked={ isLinked }
-								extendedValues={ extendedValues }
 							/>
 						</Grid>
 					</Grid>

package/src/index.ts

@@ -23,6 +23,7 @@ export { SwitchControl } from './controls/switch-control';
 // components
 export { ControlFormLabel } from './components/control-form-label';
 export { ControlToggleButtonGroup } from './components/control-toggle-button-group';
+export { FontFamilySelector } from './components/font-family-selector';
 
 // types
 export type { ControlComponent } from './create-control';