@elementor/editor-editing-panel 1.44.0 → 1.46.0

package/src/hooks/use-styles-field.ts

@@ -2,8 +2,14 @@ import type { PropKey, PropValue } from '@elementor/editor-props';
 
 import { useStylesFields } from './use-styles-fields';
 
-export function useStylesField< T extends PropValue >( propName: PropKey ): [ T | null, ( newValue: T ) => void ] {
-	const [ values, setValues ] = useStylesFields< { [ k: typeof propName ]: T } >( [ propName ] );
+export function useStylesField< T extends PropValue >(
+	propName: PropKey
+): {
+	value: T;
+	setValue: ( newValue: T ) => void;
+	canEdit?: boolean;
+} {
+	const { values, setValues, canEdit } = useStylesFields< { [ k: typeof propName ]: T } >( [ propName ] );
 
 	const value = values?.[ propName ] ?? null;
 
@@ -13,5 +19,5 @@ export function useStylesField< T extends PropValue >( propName: PropKey ): [ T
 		} );
 	};
 
-	return [ value, setValue ];
+	return { value: value as T, setValue, canEdit };
 }

package/src/hooks/use-styles-fields.ts

@@ -21,7 +21,7 @@ import { useStylesRerender } from './use-styles-rerender';
 
 export function useStylesFields< T extends Props >( propNames: ( keyof T & string )[] ) {
 	const { element } = useElement();
-	const { id, meta, provider } = useStyle();
+	const { id, meta, provider, canEdit } = useStyle();
 	const classesProp = useClassesProp();
 
 	const undoableUpdateStyle = useUndoableUpdateStyle();
@@ -29,7 +29,7 @@ export function useStylesFields< T extends Props >( propNames: ( keyof T & strin
 
 	useStylesRerender();
 
-	const value = getProps< T >( {
+	const values = getProps< T >( {
 		elementId: element.id,
 		styleId: id,
 		provider,
@@ -37,7 +37,7 @@ export function useStylesFields< T extends Props >( propNames: ( keyof T & strin
 		propNames,
 	} );
 
-	const setValue = ( props: T ) => {
+	const setValues = ( props: T ) => {
 		if ( id === null ) {
 			undoableCreateElementStyle( {
 				elementId: element.id,
@@ -58,7 +58,7 @@ export function useStylesFields< T extends Props >( propNames: ( keyof T & strin
 		} );
 	};
 
-	return [ value, setValue ] as const;
+	return { values, setValues, canEdit };
 }
 
 type GetPropsArgs = {

package/src/index.ts

@@ -1,6 +1,7 @@
 export { useBoundProp } from '@elementor/editor-controls';
 export type { PopoverActionProps } from './popover-action';
 export { registerControlReplacement } from './control-replacement';
+export { registerStyleProviderToColors } from './provider-colors-registry';
 export { injectIntoClassSelectorActions } from './components/css-classes/css-class-selector';
 export { usePanelActions, usePanelStatus } from './panel';
 export { type ValidationResult, type ValidationEvent } from './components/creatable-autocomplete';

package/src/popover-action.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { type ComponentType, type ElementType as ReactElementType, useId } from 'react';
-import { PopoverHeader } from '@elementor/editor-ui';
 import { bindPopover, bindToggle, IconButton, Popover, Tooltip, usePopupState } from '@elementor/ui';
 
 const SIZE = 'tiny';
@@ -9,14 +8,14 @@ export type PopoverActionProps = {
 	title: string;
 	visible?: boolean;
 	icon: ReactElementType;
-	popoverContent: ComponentType< { closePopover: () => void } >;
+	content: ComponentType< { close: () => void } >;
 };
 
 export default function PopoverAction( {
 	title,
 	visible = true,
 	icon: Icon,
-	popoverContent: PopoverContent,
+	content: PopoverContent,
 }: PopoverActionProps ) {
 	const id = useId();
 	const popupState = usePopupState( {
@@ -44,8 +43,7 @@ export default function PopoverAction( {
 				} }
 				{ ...bindPopover( popupState ) }
 			>
-				<PopoverHeader title={ title } onClose={ popupState.close } icon={ <Icon fontSize={ SIZE } /> } />
-				<PopoverContent closePopover={ popupState.close } />
+				<PopoverContent close={ popupState.close } />
 			</Popover>
 		</>
 	);

package/src/provider-colors-registry.ts

@@ -0,0 +1,20 @@
+import { type ChipProps, type Theme } from '@elementor/ui';
+
+type Colors = {
+	name: ChipProps[ 'color' ];
+	getThemeColor: ( ( theme: Theme ) => string ) | null;
+};
+
+const DEFAULT_COLORS: Colors = {
+	name: 'default',
+	getThemeColor: null,
+};
+
+const providerColorsRegistry = new Map< string, Colors >();
+
+export const registerStyleProviderToColors = ( provider: string, colors: Colors ) => {
+	providerColorsRegistry.set( provider, colors );
+};
+
+export const getStyleProviderColors = ( provider: string ): Colors =>
+	providerColorsRegistry.get( provider ) ?? DEFAULT_COLORS;

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

@@ -4,17 +4,16 @@ import { InfoCircleIcon } from '@elementor/icons';
 import { Chip, type Theme, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { type ChipColors } from '../../types';
+import { getStylesProviderColorName } from '../../../utils/get-styles-provider-color';
 
 type Props = {
 	displayLabel: string;
-	provider?: string;
-	chipColor: ChipColors;
+	provider: string;
 };
 
 const SIZE = 'tiny';
 
-export const LabelChip = ( { displayLabel, provider, chipColor }: Props ) => {
+export const LabelChip = ( { displayLabel, provider }: Props ) => {
 	const isBaseStyle = provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY;
 
 	const chipIcon = isBaseStyle ? (
@@ -27,7 +26,7 @@ export const LabelChip = ( { displayLabel, provider, chipColor }: Props ) => {
 		<Chip
 			label={ displayLabel }
 			size={ SIZE }
-			color={ chipColor }
+			color={ getStylesProviderColorName( provider ) }
 			variant="standard"
 			state="enabled"
 			icon={ chipIcon }

package/src/styles-inheritance/components/styles-inheritance-indicator.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { type ComponentProps } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { isEmpty } from '@elementor/editor-props';
-import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, isElementsStylesProvider } from '@elementor/editor-styles-repository';
+import { isEmpty, type PropType } from '@elementor/editor-props';
+import { ELEMENTS_BASE_STYLES_PROVIDER_KEY } from '@elementor/editor-styles-repository';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -10,12 +11,14 @@ 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 { getStylesProviderThemeColor } from '../../utils/get-styles-provider-color';
 import { isUsingIndicatorPopover } from '../consts';
+import { type SnapshotPropValue } from '../types';
+import { getValueFromInheritanceChain } from '../utils';
 import { StylesInheritanceInfotip } from './styles-inheritance-infotip';
 
 export const StylesInheritanceIndicator = () => {
 	const { path, propType } = useBoundProp();
-	const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
 
 	const isUsingNestedProps = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
 
@@ -27,17 +30,21 @@ export const StylesInheritanceIndicator = () => {
 		return null;
 	}
 
-	const currentItem = inheritanceChain.find(
-		( {
-			style,
-			variant: {
-				meta: { breakpoint, state },
-			},
-		} ) =>
-			style.id === currentStyleId &&
-			breakpoint === currentStyleMeta.breakpoint &&
-			state === currentStyleMeta.state
-	);
+	return <Indicator inheritanceChain={ inheritanceChain } path={ finalPath } propType={ propType } />;
+};
+
+type IndicatorProps = {
+	inheritanceChain: SnapshotPropValue[];
+	path: string[];
+	propType: PropType;
+};
+
+const Indicator = ( { inheritanceChain, path, propType }: IndicatorProps ) => {
+	const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
+
+	const currentItem = currentStyleId
+		? getValueFromInheritanceChain( inheritanceChain, currentStyleId, currentStyleMeta )
+		: null;
 
 	const hasValue = ! isEmpty( currentItem?.value );
 
@@ -50,12 +57,19 @@ export const StylesInheritanceIndicator = () => {
 	const isFinalValue = currentItem === actualStyle;
 
 	const label = getLabel( { isFinalValue, hasValue } );
-	const variantType = getVariant( { isFinalValue, hasValue, currentStyleProvider } );
+
+	const styleIndicatorProps: ComponentProps< typeof StyleIndicator > = {
+		getColor:
+			isFinalValue && currentStyleProvider
+				? getStylesProviderThemeColor( currentStyleProvider.getKey() )
+				: undefined,
+		isOverridden: hasValue && ! isFinalValue ? true : undefined,
+	};
 
 	if ( ! isUsingIndicatorPopover() ) {
 		return (
 			<Tooltip title={ __( 'Style origin', 'elementor' ) } placement="top">
-				<StyleIndicator variant={ variantType } aria-label={ label } />
+				<StyleIndicator { ...styleIndicatorProps } aria-label={ label } />
 			</Tooltip>
 		);
 	}
@@ -63,11 +77,11 @@ export const StylesInheritanceIndicator = () => {
 	return (
 		<StylesInheritanceInfotip
 			inheritanceChain={ inheritanceChain }
-			path={ finalPath }
+			path={ path }
 			propType={ propType }
 			label={ label }
 		>
-			<StyleIndicator variant={ variantType } />
+			<StyleIndicator { ...styleIndicatorProps } />
 		</StylesInheritanceInfotip>
 	);
 };
@@ -83,25 +97,3 @@ const getLabel = ( { isFinalValue, hasValue }: { isFinalValue: boolean; hasValue
 
 	return __( 'This has value from another style', 'elementor' );
 };
-
-const getVariant = ( {
-	isFinalValue,
-	hasValue,
-	currentStyleProvider,
-}: {
-	isFinalValue: boolean;
-	hasValue: boolean;
-	currentStyleProvider: object | null;
-} ): 'local' | 'global' | 'overridden' | undefined => {
-	if ( isFinalValue ) {
-		return isElementsStylesProvider( ( currentStyleProvider as { getKey: () => string } )?.getKey?.() )
-			? 'local'
-			: 'global';
-	}
-
-	if ( hasValue ) {
-		return 'overridden';
-	}
-
-	return undefined;
-};

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

@@ -105,11 +105,7 @@ export const StylesInheritanceInfotip = ( { inheritanceChain, propType, path, la
 								>
 									<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 }
-										/>
+										<LabelChip displayLabel={ item.displayLabel } provider={ item.provider } />
 										<ValueComponent index={ index } value={ item.value } />
 									</Box>
 									<ActionIcons />

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

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