@elementor/editor-editing-panel 1.41.0 → 1.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.41.0",
+  "version": "1.42.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@elementor/editor": "0.19.4",
     "@elementor/editor-canvas": "0.22.2",
-    "@elementor/editor-controls": "0.34.0",
+    "@elementor/editor-controls": "0.34.1",
     "@elementor/editor-current-user": "0.5.0",
     "@elementor/editor-documents": "0.13.6",
     "@elementor/editor-elements": "0.8.4",

package/src/components/style-sections/size-section/object-fit-field.tsx

@@ -14,11 +14,7 @@ const positionOptions = [
 	{ label: __( 'Scale down', 'elementor' ), value: 'scale-down' },
 ];
 
-type Props = {
-	onChange?: ( newValue: string | null, previousValue: string | null | undefined ) => void;
-};
-
-export const ObjectFitField = ( { onChange }: Props ) => {
+export const ObjectFitField = () => {
 	return (
 		<StylesField bind="object-fit">
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
@@ -26,7 +22,7 @@ export const ObjectFitField = ( { onChange }: Props ) => {
 					<ControlLabel>{ __( 'Object fit', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
-					<SelectControl options={ positionOptions } onChange={ onChange } />
+					<SelectControl options={ positionOptions } />
 				</Grid>
 			</Grid>
 		</StylesField>

package/src/components/style-sections/size-section/object-position-field.tsx

@@ -18,11 +18,7 @@ const positionOptions = [
 	{ label: __( 'Bottom right', 'elementor' ), value: 'bottom right' },
 ];
 
-type Props = {
-	onChange?: ( newValue: string | null, previousValue: string | null | undefined ) => void;
-};
-
-export const ObjectPositionField = ( { onChange }: Props ) => {
+export const ObjectPositionField = () => {
 	return (
 		<StylesField bind="object-position">
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
@@ -30,7 +26,7 @@ export const ObjectPositionField = ( { onChange }: Props ) => {
 					<ControlLabel>{ __( 'Object position', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
-					<SelectControl options={ positionOptions } onChange={ onChange } />
+					<SelectControl options={ positionOptions } />
 				</Grid>
 			</Grid>
 		</StylesField>

package/src/components/style-sections/size-section/size-section.tsx

@@ -16,18 +16,12 @@ import { ObjectPositionField } from './object-position-field';
 import { OverflowField } from './overflow-field';
 
 export const SizeSection = () => {
-	const [ fitValue, setFitValue ] = useStylesField< StringPropValue >( 'object-fit' );
+	const [ fitValue ] = useStylesField< StringPropValue >( 'object-fit' );
+
 	const isNotFill = fitValue && fitValue?.value !== 'fill';
 
-	const onFitChange = ( newFit: string | null, previousValue: string | null | undefined ) => {
-		if ( newFit && newFit !== previousValue ) {
-			setFitValue( {
-				value: newFit,
-				$$type: 'string',
-			} );
-		}
-	};
 	const isVersion330Active = isExperimentActive( 'e_v_3_30' );
+
 	return (
 		<SectionContent>
 			<Grid container gap={ 2 } flexWrap="nowrap">
@@ -73,7 +67,7 @@ export const SizeSection = () => {
 							<AspectRatioControl label={ __( 'Aspect Ratio', 'elementor' ) } />
 						</StylesField>
 						<PanelDivider />
-						<ObjectFitField onChange={ onFitChange } />
+						<ObjectFitField />
 						{ isNotFill && (
 							<Grid item xs={ 6 }>
 								<ObjectPositionField />

package/src/styles-inheritance/components/label-chip.tsx

@@ -4,28 +4,33 @@ import { InfoCircleIcon } from '@elementor/icons';
 import { Chip, type Theme, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { type ChipColors } from '../types';
+
 type Props = {
 	displayLabel: string;
 	provider?: string;
+	chipColor: ChipColors;
 };
 
 const SIZE = 'tiny';
 
-export const LabelChip = ( { displayLabel, provider }: Props ) => {
+export const LabelChip = ( { displayLabel, provider, chipColor }: Props ) => {
+	const isBaseStyle = provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY;
+
+	const chipIcon = isBaseStyle ? (
+		<Tooltip title={ __( 'Inherited from base styles', 'elementor' ) } placement="top">
+			<InfoCircleIcon fontSize={ SIZE } />
+		</Tooltip>
+	) : undefined;
+
 	return (
 		<Chip
 			label={ displayLabel }
 			size={ SIZE }
-			color="global"
+			color={ chipColor }
 			variant="standard"
 			state="enabled"
-			icon={
-				provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY ? (
-					<Tooltip title={ __( 'Inherited from base styles', 'elementor' ) } placement="top">
-						<InfoCircleIcon fontSize={ SIZE } />
-					</Tooltip>
-				) : undefined
-			}
+			icon={ chipIcon }
 			sx={ ( theme: Theme ) => ( {
 				lineHeight: 1,
 				flexWrap: 'nowrap',

package/src/styles-inheritance/consts.ts

@@ -14,4 +14,4 @@ export const excludePropTypeTransformers = new Set( [
 	'background-overlay',
 ] );
 
-export const isUsingIndicatorPopover = () => isExperimentActive( 'e_indications_popover' );
+export const isUsingIndicatorPopover = () => isExperimentActive( 'e_v_3_30' );

package/src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx

@@ -5,7 +5,7 @@ import { type StyleDefinitionVariant } from '@elementor/editor-styles';
 import { ELEMENTS_BASE_STYLES_PROVIDER_KEY } from '@elementor/editor-styles-repository';
 import { __ } from '@wordpress/i18n';
 
-import { type SnapshotPropValue } from '../types';
+import { type ChipColors, type SnapshotPropValue } from '../types';
 
 const MAXIMUM_ITEMS = 2;
 
@@ -15,6 +15,7 @@ type NormalizedItem = {
 	breakpoint?: StyleDefinitionVariant[ 'meta' ][ 'breakpoint' ];
 	displayLabel: string;
 	value: ReactNode | string;
+	chipColor: ChipColors;
 };
 
 export const useNormalizedInheritanceChainItems = (
@@ -73,6 +74,7 @@ export const normalizeInheritanceItem = async (
 		breakpoint: breakpoint ?? DEFAULT_BREAKPOINT,
 		displayLabel,
 		value: await getTransformedValue( item, bind, resolve ),
+		chipColor: getChipColor( item ),
 	};
 };
 
@@ -103,3 +105,17 @@ const getTransformedValue = async (
 		return '';
 	}
 };
+
+const getChipColor = ( item: SnapshotPropValue ) => {
+	const { provider = '', style } = item;
+
+	if ( provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY ) {
+		return 'default';
+	}
+
+	if ( style?.label === 'local' ) {
+		return 'accent';
+	}
+
+	return 'global';
+};

package/src/styles-inheritance/styles-inheritance-infotip.tsx

@@ -2,7 +2,20 @@ import * as React from 'react';
 import { useMemo, useState } from 'react';
 import { createPropsResolver, type PropsResolver } from '@elementor/editor-canvas';
 import { type PropKey, type PropType } from '@elementor/editor-props';
-import { Box, Card, CardContent, CloseButton, IconButton, Infotip, Stack, Typography } from '@elementor/ui';
+import {
+	Backdrop,
+	Box,
+	Card,
+	CardContent,
+	ClickAwayListener,
+	CloseButton,
+	IconButton,
+	Infotip,
+	Stack,
+	type Theme,
+	Tooltip,
+	Typography,
+} from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useSectionContentRef } from '../components/section-content';
@@ -23,8 +36,10 @@ type Props = {
 const SIZE = 'tiny';
 
 export const StyleIndicatorInfotip = ( { inheritanceChain, propType, path, label, children }: Props ) => {
-	const [ open, setOpen ] = useState( false );
-	const { isSiteRtl } = useDirection();
+	const [ showInfotip, setShowInfotip ] = useState< boolean >( false );
+	const toggleInfotip = () => setShowInfotip( ( prev ) => ! prev );
+	const closeInfotip = () => setShowInfotip( false );
+
 	const key = path.join( '.' );
 
 	const sectionContentRef = useSectionContentRef();
@@ -39,99 +54,139 @@ export const StyleIndicatorInfotip = ( { inheritanceChain, propType, path, label
 
 	const items = useNormalizedInheritanceChainItems( inheritanceChain, key, resolve );
 
-	const toggleOpen = () => setOpen( ( prev ) => ! prev );
-	const closeInfotip = () => {
-		setOpen( false );
-	};
-
-	const forceInfotipAlignLeft = isSiteRtl ? 9999999 : -9999999;
-
 	const infotipContent = (
-		<Card
-			elevation={ 0 }
-			sx={ {
-				width: `${ sectionContentWidth }px`,
-				maxWidth: 500,
-				overflowX: 'hidden',
-			} }
-		>
-			<CardContent
+		<ClickAwayListener onClickAway={ closeInfotip }>
+			<Card
+				elevation={ 0 }
 				sx={ {
-					display: 'flex',
-					gap: 0.5,
-					flexDirection: 'column',
-					p: 0,
-					'&:last-child': {
-						pb: 0,
-					},
+					width: `${ sectionContentWidth }px`,
+					maxWidth: 500,
+					overflowX: 'hidden',
 				} }
 			>
-				<Stack direction="row" alignItems="center" sx={ { pl: 1.5, pr: 0.5, minHeight: 36, py: 0.5 } }>
-					<Typography variant="subtitle2" color="secondary" sx={ { fontSize: 12, fontWeight: '500' } }>
-						{ __( 'Style origin', 'elementor' ) }
-					</Typography>
-					<CloseButton
-						slotProps={ { icon: { fontSize: SIZE } } }
-						sx={ { ml: 'auto' } }
-						onClick={ closeInfotip }
-					/>
-				</Stack>
-				<Stack gap={ 1.5 } sx={ { pl: 2, pr: 1, pb: 2, overflowX: 'hidden', overflowY: 'auto' } } role="list">
-					{ items.map( ( item, index ) => {
-						return (
-							<Box
-								key={ item.id }
-								display="flex"
-								gap={ 0.5 }
-								role="listitem"
-								/* translators: %s: Label of the inheritance item */
-								aria-label={ __( 'Inheritance item: %s', 'elementor' ).replace(
-									'%s',
-									item.displayLabel
-								) }
-							>
-								<Box display="flex" gap={ 0.5 } sx={ { flexWrap: 'wrap', width: '100%' } }>
-									<BreakpointIcon breakpoint={ item.breakpoint } />
-									<LabelChip displayLabel={ item.displayLabel } provider={ item.provider } />
-									<ValueComponent index={ index } value={ item.value } />
+				<CardContent
+					sx={ {
+						display: 'flex',
+						gap: 0.5,
+						flexDirection: 'column',
+						p: 0,
+						'&:last-child': {
+							pb: 0,
+						},
+					} }
+				>
+					<Stack direction="row" alignItems="center" sx={ { pl: 1.5, pr: 0.5, minHeight: 36, py: 0.5 } }>
+						<Typography variant="subtitle2" color="secondary" sx={ { fontSize: 12, fontWeight: '500' } }>
+							{ __( 'Style origin', 'elementor' ) }
+						</Typography>
+						<CloseButton
+							slotProps={ { icon: { fontSize: SIZE } } }
+							sx={ { ml: 'auto' } }
+							onClick={ closeInfotip }
+						/>
+					</Stack>
+					<Stack
+						gap={ 1.5 }
+						sx={ { pl: 2, pr: 1, pb: 2, overflowX: 'hidden', overflowY: 'auto' } }
+						role="list"
+					>
+						{ items.map( ( item, index ) => {
+							return (
+								<Box
+									key={ item.id }
+									display="flex"
+									gap={ 0.5 }
+									role="listitem"
+									/* translators: %s: Label of the inheritance item */
+									aria-label={ __( 'Inheritance item: %s', 'elementor' ).replace(
+										'%s',
+										item.displayLabel
+									) }
+								>
+									<Box display="flex" gap={ 0.5 } sx={ { flexWrap: 'wrap', width: '100%' } }>
+										<BreakpointIcon breakpoint={ item.breakpoint } />
+										<LabelChip
+											displayLabel={ item.displayLabel }
+											provider={ item.provider }
+											chipColor={ item.chipColor }
+										/>
+										<ValueComponent index={ index } value={ item.value } />
+									</Box>
+									<ActionIcons />
 								</Box>
-								<ActionIcons />
-							</Box>
-						);
-					} ) }
-				</Stack>
-			</CardContent>
-		</Card>
+							);
+						} ) }
+					</Stack>
+				</CardContent>
+			</Card>
+		</ClickAwayListener>
 	);
 
 	return (
-		<Infotip
-			placement="top"
-			content={ infotipContent }
-			open={ open }
-			onClose={ closeInfotip }
-			disableHoverListener={ true }
-			componentsProps={ {
-				tooltip: {
-					sx: {
-						mx: 2,
-					},
-				},
-			} }
-			slotProps={ {
-				popper: {
-					modifiers: [
-						{
-							name: 'offset',
-							options: { offset: [ forceInfotipAlignLeft, 0 ] },
-						},
-					],
-				},
-			} }
-		>
-			<IconButton onClick={ toggleOpen } aria-label={ label } sx={ { my: '-1px' } }>
+		<TooltipOrInfotip showInfotip={ showInfotip } onClose={ closeInfotip } infotipContent={ infotipContent }>
+			<IconButton onClick={ toggleInfotip } aria-label={ label } sx={ { my: '-1px' } }>
 				{ children }
 			</IconButton>
-		</Infotip>
+		</TooltipOrInfotip>
 	);
 };
+
+function TooltipOrInfotip( {
+	children,
+	showInfotip,
+	onClose,
+	infotipContent,
+}: {
+	children: React.ReactNode;
+	showInfotip: boolean;
+	onClose: () => void;
+	infotipContent: React.ReactNode;
+} ) {
+	const { isSiteRtl } = useDirection();
+	const forceInfotipAlignLeft = isSiteRtl ? 9999999 : -9999999;
+
+	if ( showInfotip ) {
+		return (
+			<>
+				<Backdrop
+					open={ showInfotip }
+					onClick={ onClose }
+					sx={ {
+						backgroundColor: 'transparent',
+						zIndex: ( theme: Theme ) => theme.zIndex.modal - 1,
+					} }
+				/>
+				<Infotip
+					placement="top"
+					content={ infotipContent }
+					open={ showInfotip }
+					onClose={ onClose }
+					disableHoverListener
+					componentsProps={ {
+						tooltip: {
+							sx: { mx: 2 },
+						},
+					} }
+					slotProps={ {
+						popper: {
+							modifiers: [
+								{
+									name: 'offset',
+									options: { offset: [ forceInfotipAlignLeft, 0 ] },
+								},
+							],
+						},
+					} }
+				>
+					{ children }
+				</Infotip>
+			</>
+		);
+	}
+
+	return (
+		<Tooltip title={ __( 'Style origin', 'elementor' ) } placement="top">
+			{ children }
+		</Tooltip>
+	);
+}

package/src/styles-inheritance/types.ts

@@ -50,3 +50,5 @@ export type StylesInheritanceAPI = {
 		basePropType: PropType
 	) => SnapshotPropValue[];
 };
+
+export type ChipColors = 'default' | 'global' | 'accent';