@elementor/editor-editing-panel 1.41.0 → 1.43.0

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';