@elementor/editor-editing-panel 1.43.0 → 1.44.0

package/src/popover-action.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type ComponentType, type ElementType as ReactElementType, useId } from 'react';
-import { XIcon } from '@elementor/icons';
-import { bindPopover, bindToggle, IconButton, Popover, Stack, Tooltip, Typography, usePopupState } from '@elementor/ui';
+import { PopoverHeader } from '@elementor/editor-ui';
+import { bindPopover, bindToggle, IconButton, Popover, Tooltip, usePopupState } from '@elementor/ui';
 
 const SIZE = 'tiny';
 
@@ -44,13 +44,7 @@ export default function PopoverAction( {
 				} }
 				{ ...bindPopover( popupState ) }
 			>
-				<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
-					<Icon fontSize={ SIZE } sx={ { mr: 0.5 } } />
-					<Typography variant="subtitle2">{ title }</Typography>
-					<IconButton sx={ { ml: 'auto' } } size={ SIZE } onClick={ popupState.close }>
-						<XIcon fontSize={ SIZE } />
-					</IconButton>
-				</Stack>
+				<PopoverHeader title={ title } onClose={ popupState.close } icon={ <Icon fontSize={ SIZE } /> } />
 				<PopoverContent closePopover={ popupState.close } />
 			</Popover>
 		</>

package/src/styles-inheritance/components/{label-chip.tsx → infotip/label-chip.tsx}

@@ -4,7 +4,7 @@ import { InfoCircleIcon } from '@elementor/icons';
 import { Chip, type Theme, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { type ChipColors } from '../types';
+import { type ChipColors } from '../../types';
 
 type Props = {
 	displayLabel: string;

package/src/styles-inheritance/{styles-inheritance-indicator.tsx → components/styles-inheritance-indicator.tsx}

@@ -6,12 +6,12 @@ import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { StyleIndicator } from '../components/style-indicator';
-import { useStyle } from '../contexts/style-context';
-import { useStylesInheritanceChain } from '../contexts/styles-inheritance-context';
-import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
-import { isUsingIndicatorPopover } from './consts';
-import { StyleIndicatorInfotip } from './styles-inheritance-infotip';
+import { StyleIndicator } from '../../components/style-indicator';
+import { useStyle } from '../../contexts/style-context';
+import { useStylesInheritanceChain } from '../../contexts/styles-inheritance-context';
+import { EXPERIMENTAL_FEATURES } from '../../sync/experiments-flags';
+import { isUsingIndicatorPopover } from '../consts';
+import { StylesInheritanceInfotip } from './styles-inheritance-infotip';
 
 export const StylesInheritanceIndicator = () => {
 	const { path, propType } = useBoundProp();
@@ -61,14 +61,14 @@ export const StylesInheritanceIndicator = () => {
 	}
 
 	return (
-		<StyleIndicatorInfotip
+		<StylesInheritanceInfotip
 			inheritanceChain={ inheritanceChain }
 			path={ finalPath }
 			propType={ propType }
 			label={ label }
 		>
 			<StyleIndicator variant={ variantType } />
-		</StyleIndicatorInfotip>
+		</StylesInheritanceInfotip>
 	);
 };
 

package/src/styles-inheritance/{styles-inheritance-infotip.tsx → components/styles-inheritance-infotip.tsx}

@@ -18,12 +18,12 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-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';
+import { useSectionContentRef } from '../../components/section-content';
+import { useDirection } from '../../hooks/use-direction';
+import { useNormalizedInheritanceChainItems } from '../hooks/use-normalized-inheritance-chain-items';
+import { stylesInheritanceTransformersRegistry } from '../styles-inheritance-transformers-registry';
+import { type SnapshotPropValue } from '../types';
+import { ActionIcons, BreakpointIcon, LabelChip, ValueComponent } from './infotip';
 
 type Props = {
 	inheritanceChain: SnapshotPropValue[];
@@ -35,7 +35,7 @@ type Props = {
 
 const SIZE = 'tiny';
 
-export const StyleIndicatorInfotip = ( { inheritanceChain, propType, path, label, children }: Props ) => {
+export const StylesInheritanceInfotip = ( { inheritanceChain, propType, path, label, children }: Props ) => {
 	const [ showInfotip, setShowInfotip ] = useState< boolean >( false );
 	const toggleInfotip = () => setShowInfotip( ( prev ) => ! prev );
 	const closeInfotip = () => setShowInfotip( false );

package/src/styles-inheritance/components/styles-inheritance-section-indicators.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { type PropKey } from '@elementor/editor-props';
+import { type StyleDefinitionVariant } from '@elementor/editor-styles';
+import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, isElementsStylesProvider } from '@elementor/editor-styles-repository';
+import { Stack, Tooltip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StyleIndicator } from '../../components/style-indicator';
+import { useStyle } from '../../contexts/style-context';
+import { useStylesInheritanceSnapshot } from '../../contexts/styles-inheritance-context';
+import { type SnapshotPropValue } from '../types';
+
+type Props = {
+	fields: PropKey[];
+};
+
+type Indicators = {
+	global?: true;
+	local?: true;
+	overridden?: true;
+};
+
+const orderedVariants = [ 'global', 'local', 'overridden' ] as ( keyof Indicators )[];
+
+export const StylesInheritanceSectionIndicators = ( { fields }: Props ) => {
+	const { id, meta } = useStyle();
+	const snapshot = useStylesInheritanceSnapshot();
+
+	const snapshotFields = Object.fromEntries(
+		Object.entries( snapshot ?? {} ).filter( ( [ key ] ) => fields.includes( key as PropKey ) )
+	);
+
+	const indicators = getIndicators( snapshotFields, id ?? '', meta );
+
+	if ( Object.values( indicators ).filter( Boolean ).length === 0 ) {
+		return null;
+	}
+
+	const hasActualValues = __( 'Has effective styles', 'elementor' );
+	const hasOverriddenValues = __( 'Has overridden styles', 'elementor' );
+
+	return (
+		<Tooltip title={ __( 'Has styles', 'elementor' ) } placement="top">
+			<Stack direction="row" sx={ { '& > *': { marginInlineStart: -0.25 } } } role="list">
+				{ orderedVariants.map(
+					( variant ) =>
+						indicators[ variant ] && (
+							<StyleIndicator
+								key={ variant }
+								variant={ variant }
+								data-variant={ variant }
+								role="listitem"
+								aria-label={ variant === 'overridden' ? hasOverriddenValues : hasActualValues }
+							/>
+						)
+				) }
+			</Stack>
+		</Tooltip>
+	);
+};
+
+function getIndicators(
+	snapshotFields: Record< PropKey, SnapshotPropValue[] >,
+	styleId: string,
+	meta: StyleDefinitionVariant[ 'meta' ]
+): Indicators {
+	const indicators: Indicators = {};
+
+	Object.values( snapshotFields ).forEach( ( inheritanceChain ) => {
+		const currentStyle = getCurrentStyleFromChain( inheritanceChain, styleId, meta );
+
+		if ( ! currentStyle ) {
+			return;
+		}
+
+		const [ actualStyle ] = inheritanceChain;
+
+		if ( currentStyle === actualStyle ) {
+			const providerKey = actualStyle.provider ?? '';
+
+			if ( isElementsStylesProvider( providerKey ) ) {
+				indicators.local = true;
+
+				return;
+			}
+
+			if ( providerKey !== ELEMENTS_BASE_STYLES_PROVIDER_KEY ) {
+				indicators.global = true;
+			}
+
+			return;
+		}
+
+		indicators.overridden = true;
+	} );
+
+	return indicators;
+}
+
+function getCurrentStyleFromChain(
+	chain: SnapshotPropValue[],
+	styleId: string,
+	meta: StyleDefinitionVariant[ 'meta' ]
+): SnapshotPropValue | undefined {
+	return chain.find(
+		( {
+			style: { id },
+			variant: {
+				meta: { breakpoint, state },
+			},
+		} ) => id === styleId && breakpoint === meta.breakpoint && state === meta.state
+	);
+}