@elementor/editor-editing-panel 1.40.0 → 1.42.0

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

@@ -1,43 +1,192 @@
 import * as React from 'react';
-import { useMemo } from 'react';
-import { createPropsResolver, type PropsResolver, styleTransformersRegistry } from '@elementor/editor-canvas';
+import { useMemo, useState } from 'react';
+import { createPropsResolver, type PropsResolver } from '@elementor/editor-canvas';
 import { type PropKey, type PropType } from '@elementor/editor-props';
-import { Card, CardContent, List, ListItem, ListItemText } 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 { useNormalizedInheritanceChainItems } from '../hooks/use-normalized-inheritance-chain-items';
+import { useSectionContentRef } from '../components/section-content';
+import { useDirection } from '../hooks/use-direction';
+import { ActionIcons, BreakpointIcon, LabelChip, ValueComponent } from './components';
+import { useNormalizedInheritanceChainItems } from './hooks/use-normalized-inheritance-chain-items';
+import { stylesInheritanceTransformersRegistry } from './styles-inheritance-transformers-registry';
 import { type SnapshotPropValue } from './types';
 
-type StyleIndicatorInfotipProps = {
+type Props = {
 	inheritanceChain: SnapshotPropValue[];
 	propType: PropType;
 	path: PropKey[];
+	label: string;
+	children: React.ReactNode;
 };
 
-export const StyleIndicatorInfotip = ( { inheritanceChain, propType, path }: StyleIndicatorInfotipProps ) => {
+const SIZE = 'tiny';
+
+export const StyleIndicatorInfotip = ( { inheritanceChain, propType, path, label, children }: Props ) => {
+	const [ showInfotip, setShowInfotip ] = useState< boolean >( false );
+	const toggleInfotip = () => setShowInfotip( ( prev ) => ! prev );
+	const closeInfotip = () => setShowInfotip( false );
+
 	const key = path.join( '.' );
 
+	const sectionContentRef = useSectionContentRef();
+	const sectionContentWidth = sectionContentRef?.current?.offsetWidth ?? 320;
+
 	const resolve = useMemo< PropsResolver >( () => {
 		return createPropsResolver( {
-			transformers: styleTransformersRegistry,
+			transformers: stylesInheritanceTransformersRegistry,
 			schema: { [ key ]: propType },
 		} );
 	}, [ key, propType ] );
 
 	const items = useNormalizedInheritanceChainItems( inheritanceChain, key, resolve );
 
+	const infotipContent = (
+		<ClickAwayListener onClickAway={ closeInfotip }>
+			<Card
+				elevation={ 0 }
+				sx={ {
+					width: `${ sectionContentWidth }px`,
+					maxWidth: 500,
+					overflowX: 'hidden',
+				} }
+			>
+				<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>
+							);
+						} ) }
+					</Stack>
+				</CardContent>
+			</Card>
+		</ClickAwayListener>
+	);
+
 	return (
-		<Card elevation={ 0 } sx={ { maxWidth: 320 } }>
-			<CardContent sx={ { p: 1.5, pb: 2.5 } }>
-				<List>
-					{ items.map( ( item ) => (
-						<ListItem key={ item.id }>
-							<ListItemText
-								primary={ `${ item.breakpoint } | ${ item.displayLabel }. ${ item.value }` }
-							/>
-						</ListItem>
-					) ) }
-				</List>
-			</CardContent>
-		</Card>
+		<TooltipOrInfotip showInfotip={ showInfotip } onClose={ closeInfotip } infotipContent={ infotipContent }>
+			<IconButton onClick={ toggleInfotip } aria-label={ label } sx={ { my: '-1px' } }>
+				{ children }
+			</IconButton>
+		</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/styles-inheritance-transformers-registry.tsx

@@ -0,0 +1,3 @@
+import { createTransformersRegistry } from '@elementor/editor-canvas';
+
+export const stylesInheritanceTransformersRegistry = createTransformersRegistry();

package/src/styles-inheritance/transformers/background-color-overlay-transformer.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { createTransformer } from '@elementor/editor-canvas';
+import { Stack, styled, UnstableColorIndicator } from '@elementor/ui';
+
+export type Color = {
+	color: string;
+};
+
+export const backgroundColorOverlayTransformer = createTransformer( ( value: Color ) => (
+	<Stack direction="row" gap={ 10 }>
+		<ItemIconColor value={ value } />
+		<ItemLabelColor value={ value } />
+	</Stack>
+) );
+
+const ItemIconColor = ( { value }: { value: Color } ) => {
+	const { color } = value;
+	return <StyledUnstableColorIndicator size="inherit" component="span" value={ color } />;
+};
+
+const ItemLabelColor = ( { value: { color } }: { value: Color } ) => {
+	return <span>{ color }</span>;
+};
+
+export const StyledUnstableColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {
+	borderRadius: `${ theme.shape.borderRadius / 2 }px`,
+} ) );

package/src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { createTransformer } from '@elementor/editor-canvas';
+import { Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { type Color, StyledUnstableColorIndicator } from './background-color-overlay-transformer';
+
+type ColorStop = Color & {
+	offset: number;
+};
+
+type Gradient = {
+	type: string;
+	angle?: number;
+	positions?: string;
+	stops: ColorStop[];
+};
+
+export const backgroundGradientOverlayTransformer = createTransformer( ( value: Gradient ) => (
+	<Stack direction="row" gap={ 10 }>
+		<ItemIconGradient value={ value } />
+		<ItemLabelGradient value={ value } />
+	</Stack>
+) );
+
+const ItemIconGradient = ( { value }: { value: Gradient } ) => {
+	const gradient = getGradientValue( value );
+
+	return <StyledUnstableColorIndicator size="inherit" component="span" value={ gradient } />;
+};
+
+const ItemLabelGradient = ( { value }: { value: Gradient } ) => {
+	if ( value.type === 'linear' ) {
+		return <span>{ __( 'Linear Gradient', 'elementor' ) }</span>;
+	}
+
+	return <span>{ __( 'Radial Gradient', 'elementor' ) }</span>;
+};
+
+const getGradientValue = ( gradient: Gradient ) => {
+	const stops = gradient.stops
+		?.map( ( { color, offset }: ColorStop ) => `${ color } ${ offset ?? 0 }%` )
+		?.join( ',' );
+
+	if ( gradient.type === 'linear' ) {
+		return `linear-gradient(${ gradient.angle }deg, ${ stops })`;
+	}
+
+	return `radial-gradient(circle at ${ gradient.positions }, ${ stops })`;
+};

package/src/styles-inheritance/transformers/background-image-overlay-transformer.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { createTransformer } from '@elementor/editor-canvas';
+import { EllipsisWithTooltip } from '@elementor/editor-ui';
+import { CardMedia, Stack, type Theme } from '@elementor/ui';
+import { useWpMediaAttachment } from '@elementor/wp-media';
+
+type ImageSrcAttachment = { id: number; url: null };
+
+type ImageSrcUrl = { url: string; id: null };
+
+type Image = {
+	image: {
+		src: ImageSrcAttachment | ImageSrcUrl;
+		size: 'thumbnail' | 'medium' | 'large' | 'full';
+	};
+};
+
+export const backgroundImageOverlayTransformer = createTransformer( ( value: Image ) => (
+	<Stack direction="row" gap={ 10 }>
+		<ItemIconImage value={ value } />
+		<ItemLabelImage value={ value } />
+	</Stack>
+) );
+
+const ItemIconImage = ( { value }: { value: Image } ) => {
+	const { imageUrl } = useImage( value );
+
+	return (
+		<CardMedia
+			image={ imageUrl }
+			sx={ ( theme: Theme ) => ( {
+				height: '1em',
+				width: '1em',
+				borderRadius: `${ theme.shape.borderRadius / 2 }px`,
+				outline: `1px solid ${ theme.palette.action.disabled }`,
+			} ) }
+		/>
+	);
+};
+
+const ItemLabelImage = ( { value }: { value: Image } ) => {
+	const { imageTitle } = useImage( value );
+
+	return (
+		<EllipsisWithTooltip title={ imageTitle }>
+			<span>{ imageTitle }</span>
+		</EllipsisWithTooltip>
+	);
+};
+
+const useImage = ( image: Image ) => {
+	let imageTitle,
+		imageUrl: string | null = null;
+
+	const imageSrc = image?.image.src;
+	const { data: attachment } = useWpMediaAttachment( imageSrc.id || null );
+
+	if ( imageSrc.id ) {
+		const imageFileTypeExtension = getFileExtensionFromFilename( attachment?.filename );
+		imageTitle = `${ attachment?.title }${ imageFileTypeExtension }` || null;
+		imageUrl = attachment?.url || null;
+	} else if ( imageSrc.url ) {
+		imageUrl = imageSrc.url;
+		imageTitle = imageUrl?.substring( imageUrl.lastIndexOf( '/' ) + 1 ) || null;
+	}
+
+	return { imageTitle, imageUrl };
+};
+
+const getFileExtensionFromFilename = ( filename?: string ) => {
+	if ( ! filename ) {
+		return '';
+	}
+
+	// get the substring after the last . in the filename
+	const extension = filename.substring( filename.lastIndexOf( '.' ) + 1 );
+
+	return `.${ extension }`;
+};

package/src/styles-inheritance/transformers/background-overlay-transformer.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type ReactNode } from 'react';
+import { createTransformer } from '@elementor/editor-canvas';
+import { Stack } from '@elementor/ui';
+
+type BackgroundOverlay = ReactNode[];
+
+export const backgroundOverlayTransformer = createTransformer( ( values: BackgroundOverlay[] ) => {
+	if ( ! values || values.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<Stack direction="column">
+			{ values.map( ( item, index ) => (
+				<Stack key={ index }>{ item }</Stack>
+			) ) }
+		</Stack>
+	);
+} );

package/src/styles-inheritance/types.ts

@@ -1,4 +1,4 @@
-import { type PropValue } from '@elementor/editor-props';
+import { type PropKey, type PropType, type PropValue } from '@elementor/editor-props';
 import { type BreakpointId } from '@elementor/editor-responsive';
 import { type StyleDefinition, type StyleDefinitionState, type StyleDefinitionVariant } from '@elementor/editor-styles';
 
@@ -44,5 +44,11 @@ export type StylesInheritanceSnapshotGetter = (
 
 export type StylesInheritanceAPI = {
 	getSnapshot: ( meta: StyleInheritanceMetaProps ) => StylesInheritanceSnapshot | undefined;
-	getInheritanceChain: ( snapshotField: StylesInheritanceSnapshot, path: string[] ) => SnapshotPropValue[];
+	getInheritanceChain: (
+		snapshotField: StylesInheritanceSnapshot,
+		path: PropKey[],
+		basePropType: PropType
+	) => SnapshotPropValue[];
 };
+
+export type ChipColors = 'default' | 'global' | 'accent';

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

@@ -1,75 +0,0 @@
-import { type ReactNode, useEffect, useState } from 'react';
-import { type PropsResolver } from '@elementor/editor-canvas';
-import { type PropKey } from '@elementor/editor-props';
-import { type StyleDefinitionVariant } from '@elementor/editor-styles';
-
-import { type SnapshotPropValue } from '../styles-inheritance/types';
-
-const MAXIMUM_ITEMS = 2;
-
-type NormalizedItem = {
-	id: string | number;
-	breakpoint?: StyleDefinitionVariant[ 'meta' ][ 'breakpoint' ];
-	displayLabel: string;
-	value: ReactNode | string;
-};
-
-export const useNormalizedInheritanceChainItems = (
-	inheritanceChain: SnapshotPropValue[],
-	bind: PropKey,
-	resolve: PropsResolver
-) => {
-	const [ items, setItems ] = useState< NormalizedItem[] >( [] );
-
-	useEffect( () => {
-		( async () => {
-			const normalizedItems = await Promise.all(
-				inheritanceChain
-					.filter( ( item ) => item.style?.label )
-					.map( ( item, index ) => normalizeInheritanceItem( item, index, bind, resolve ) )
-			);
-
-			const validItems = normalizedItems.filter( ( item ) => item.value !== '' ).slice( 0, MAXIMUM_ITEMS );
-
-			setItems( validItems );
-		} )();
-	}, [ inheritanceChain, bind, resolve ] );
-
-	return items;
-};
-
-export const normalizeInheritanceItem = async (
-	item: SnapshotPropValue,
-	index: number,
-	bind: PropKey,
-	resolve: PropsResolver
-): Promise< NormalizedItem > => {
-	const state = item.variant?.meta?.state || '';
-	const label = item.style?.label || '';
-	const displayLabel = state ? `${ label }:${ state }` : label;
-
-	return {
-		id: item.style?.id ? item.style?.id + state : index,
-		breakpoint: item.variant?.meta?.breakpoint,
-		displayLabel,
-		value: await getTransformedValue( item, bind, resolve ),
-	};
-};
-
-const getTransformedValue = async (
-	item: SnapshotPropValue,
-	bind: PropKey,
-	resolve: PropsResolver
-): Promise< string > => {
-	try {
-		const result = await resolve( {
-			props: {
-				[ bind ]: item.value,
-			},
-		} );
-
-		return Object.values( result ).join( ' ' );
-	} catch {
-		return '';
-	}
-};