@elementor/editor-editing-panel 1.45.0 → 1.47.0

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

@@ -1,58 +1,54 @@
 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 { 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 { getStylesProviderThemeColor } from '../../utils/get-styles-provider-color';
 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 { id, meta, provider } = useStyle();
 	const snapshot = useStylesInheritanceSnapshot();
 
 	const snapshotFields = Object.fromEntries(
 		Object.entries( snapshot ?? {} ).filter( ( [ key ] ) => fields.includes( key as PropKey ) )
 	);
 
-	const indicators = getIndicators( snapshotFields, id ?? '', meta );
+	const { hasValues, hasOverrides } = getIndicators( snapshotFields, id ?? '', meta );
 
-	if ( Object.values( indicators ).filter( Boolean ).length === 0 ) {
+	if ( ! hasValues && ! hasOverrides ) {
 		return null;
 	}
 
-	const hasActualValues = __( 'Has effective styles', 'elementor' );
-	const hasOverriddenValues = __( 'Has overridden styles', 'elementor' );
+	const hasValueLabel = __( 'Has effective styles', 'elementor' );
+	const hasOverridesLabel = __( '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 }
-							/>
-						)
+				{ hasValues && provider && (
+					<StyleIndicator
+						getColor={ getStylesProviderThemeColor( provider.getKey() ) }
+						data-variant={ isElementsStylesProvider( provider.getKey() ) ? 'local' : 'global' }
+						role="listitem"
+						aria-label={ hasValueLabel }
+					/>
+				) }
+				{ hasOverrides && (
+					<StyleIndicator
+						isOverridden
+						data-variant="overridden"
+						role="listitem"
+						aria-label={ hasOverridesLabel }
+					/>
 				) }
 			</Stack>
 		</Tooltip>
@@ -63,8 +59,9 @@ function getIndicators(
 	snapshotFields: Record< PropKey, SnapshotPropValue[] >,
 	styleId: string,
 	meta: StyleDefinitionVariant[ 'meta' ]
-): Indicators {
-	const indicators: Indicators = {};
+): { hasValues: boolean; hasOverrides: boolean } {
+	let hasValues = false;
+	let hasOverrides = false;
 
 	Object.values( snapshotFields ).forEach( ( inheritanceChain ) => {
 		const currentStyle = getCurrentStyleFromChain( inheritanceChain, styleId, meta );
@@ -76,25 +73,13 @@ function getIndicators(
 		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;
+			hasValues = true;
+		} else {
+			hasOverrides = true;
 		}
-
-		indicators.overridden = true;
 	} );
 
-	return indicators;
+	return { hasValues, hasOverrides };
 }
 
 function getCurrentStyleFromChain(

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 ChipColors, type SnapshotPropValue } from '../types';
+import { type SnapshotPropValue } from '../types';
 
 const MAXIMUM_ITEMS = 2;
 
@@ -15,7 +15,6 @@ type NormalizedItem = {
 	breakpoint?: StyleDefinitionVariant[ 'meta' ][ 'breakpoint' ];
 	displayLabel: string;
 	value: ReactNode | string;
-	chipColor: ChipColors;
 };
 
 export const useNormalizedInheritanceChainItems = (
@@ -74,7 +73,6 @@ export const normalizeInheritanceItem = async (
 		breakpoint: breakpoint ?? DEFAULT_BREAKPOINT,
 		displayLabel,
 		value: await getTransformedValue( item, bind, resolve ),
-		chipColor: getChipColor( item ),
 	};
 };
 
@@ -105,17 +103,3 @@ 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/types.ts

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

package/src/styles-inheritance/utils.ts

@@ -1,5 +1,7 @@
 import { type BreakpointId } from '@elementor/editor-responsive';
-import { type StyleDefinitionState } from '@elementor/editor-styles';
+import { type StyleDefinitionState, type StyleDefinitionVariant } from '@elementor/editor-styles';
+
+import { type SnapshotPropValue } from './types';
 
 export const DEFAULT_STATE = 'normal';
 
@@ -8,3 +10,17 @@ const DEFAULT_BREAKPOINT = 'desktop';
 export const getStateKey = ( state: StyleDefinitionState ) => state ?? DEFAULT_STATE;
 
 export const getBreakpointKey = ( breakpoint: BreakpointId | null ): BreakpointId => breakpoint ?? DEFAULT_BREAKPOINT;
+
+export const getValueFromInheritanceChain = (
+	inheritanceChain: SnapshotPropValue[],
+	styleId: string,
+	meta: StyleDefinitionVariant[ 'meta' ]
+) =>
+	inheritanceChain.find(
+		( {
+			style,
+			variant: {
+				meta: { breakpoint, state },
+			},
+		} ) => style.id === styleId && breakpoint === meta.breakpoint && state === meta.state
+	);

package/src/sync/experiments-flags.ts

@@ -1,4 +1,5 @@
 // Experimental features flags
 export const EXPERIMENTAL_FEATURES = {
 	V_3_30: 'e_v_3_30',
+	V_3_31: 'e_v_3_31',
 };

package/src/utils/get-styles-provider-color.ts

@@ -0,0 +1,28 @@
+import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, isElementsStylesProvider } from '@elementor/editor-styles-repository';
+import { type ChipProps, type Theme } from '@elementor/ui';
+
+import { getStyleProviderColors } from '../provider-colors-registry';
+
+export const getStylesProviderColorName = ( provider: string ): ChipProps[ 'color' ] => {
+	if ( ! provider || provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY ) {
+		return 'default';
+	}
+
+	if ( isElementsStylesProvider( provider ) ) {
+		return 'accent';
+	}
+
+	return getStyleProviderColors( provider ).name;
+};
+
+export const getStylesProviderThemeColor = ( provider: string ): ( ( theme: Theme ) => string ) | null => {
+	if ( ! provider || provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY ) {
+		return null;
+	}
+
+	if ( isElementsStylesProvider( provider ) ) {
+		return ( theme: Theme ) => theme.palette.accent.main;
+	}
+
+	return getStyleProviderColors( provider ).getThemeColor;
+};

package/src/components/popover-content.tsx

@@ -1,15 +0,0 @@
-import { type FC, type PropsWithChildren } from 'react';
-import * as React from 'react';
-import { Stack } from '@elementor/ui';
-
-type PopoverContentProps = PropsWithChildren< {
-	alignItems?: 'center';
-	gap?: number;
-	p?: 1.5 | 2 | 2.5;
-} >;
-
-export const PopoverContent: FC< PopoverContentProps > = ( { alignItems, gap = 1.5, p, children } ) => (
-	<Stack alignItems={ alignItems } gap={ gap } p={ p }>
-		{ children }
-	</Stack>
-);