@elementor/editor-editing-panel 1.43.1 → 1.45.0

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
+	);
+}

package/src/styles-inheritance/components/ui-providers.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { DirectionProvider, ThemeProvider } from '@elementor/ui';
+
+import { useDirection } from '../../hooks/use-direction';
+
+interface UiProvidersProps {
+	children: React.ReactNode;
+}
+
+export const UiProviders: React.FC< UiProvidersProps > = ( { children } ) => {
+	const { isSiteRtl } = useDirection();
+
+	return (
+		<DirectionProvider rtl={ isSiteRtl }>
+			<ThemeProvider>{ children }</ThemeProvider>
+		</DirectionProvider>
+	);
+};