@elementor/editor-editing-panel 1.39.0 → 1.41.0

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

@@ -1,43 +1,137 @@
 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 { Box, Card, CardContent, CloseButton, IconButton, Infotip, Stack, 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 [ open, setOpen ] = useState( false );
+	const { isSiteRtl } = useDirection();
 	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 );
 
-	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>
+	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
+				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 } />
+									<ValueComponent index={ index } value={ item.value } />
+								</Box>
+								<ActionIcons />
+							</Box>
+						);
+					} ) }
+				</Stack>
 			</CardContent>
 		</Card>
 	);
+
+	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' } }>
+				{ children }
+			</IconButton>
+		</Infotip>
+	);
 };

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,9 @@ 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[];
 };