@elementor/editor-editing-panel 1.30.0 → 1.32.0

package/src/components/editing-panel-tabs.tsx

@@ -4,8 +4,9 @@ import { Divider, Stack, Tab, TabPanel, Tabs, useTabs } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useElement } from '../contexts/element-context';
+import { ScrollProvider } from '../contexts/scroll-context';
 import { SettingsTab } from './settings-tab';
-import { StyleTab } from './style-tab';
+import { stickyHeaderStyles, StyleTab } from './style-tab';
 
 type TabValue = 'settings' | 'style';
 
@@ -18,19 +19,23 @@ export const EditingPanelTabs = () => {
 		// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
 		// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
 		<Fragment key={ element.id }>
-			<Stack direction="column" sx={ { width: '100%' } }>
-				<Tabs variant="fullWidth" size="small" sx={ { mt: 0.5 } } { ...getTabsProps() }>
-					<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />
-					<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />
-				</Tabs>
-				<Divider />
-				<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>
-					<SettingsTab />
-				</TabPanel>
-				<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>
-					<StyleTab />
-				</TabPanel>
-			</Stack>
+			<ScrollProvider>
+				<Stack direction="column" sx={ { width: '100%' } }>
+					<Stack sx={ { ...stickyHeaderStyles, top: 0 } }>
+						<Tabs variant="fullWidth" size="small" sx={ { mt: 0.5 } } { ...getTabsProps() }>
+							<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />
+							<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />
+						</Tabs>
+						<Divider />
+					</Stack>
+					<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>
+						<SettingsTab />
+					</TabPanel>
+					<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>
+						<StyleTab />
+					</TabPanel>
+				</Stack>
+			</ScrollProvider>
 		</Fragment>
 	);
 };

package/src/components/style-sections/position-section/offset-field.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { SizeControl } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
+
+export const OffsetField = () => {
+	return (
+		<StylesField bind="scroll-margin-top">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Anchor offset', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<SizeControl units={ [ 'px', 'em', 'rem', 'vw', 'vh' ] } />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

package/src/components/style-sections/position-section/position-section.tsx

@@ -5,8 +5,10 @@ import { useSessionStorage } from '@elementor/session';
 import { useStyle } from '../../../contexts/style-context';
 import { useStylesField } from '../../../hooks/use-styles-field';
 import { useStylesFields } from '../../../hooks/use-styles-fields';
+import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
 import { DimensionsField } from './dimensions-field';
+import { OffsetField } from './offset-field';
 import { PositionField } from './position-field';
 import { ZIndexField } from './z-index-field';
 
@@ -66,6 +68,8 @@ export const PositionSection = () => {
 					<ZIndexField />
 				</>
 			) : null }
+			<PanelDivider />
+			<OffsetField />
 		</SectionContent>
 	);
 };

package/src/components/style-tab.tsx

@@ -4,11 +4,12 @@ import { CLASSES_PROP_KEY } from '@elementor/editor-props';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
 import { type StyleDefinitionID, type StyleDefinitionState } from '@elementor/editor-styles';
 import { SessionStorageProvider } from '@elementor/session';
-import { Divider } from '@elementor/ui';
+import { Divider, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { ClassesPropProvider } from '../contexts/classes-prop-context';
 import { useElement } from '../contexts/element-context';
+import { useScrollDirection } from '../contexts/scroll-context';
 import { StyleProvider } from '../contexts/style-context';
 import { StyleInheritanceProvider } from '../contexts/styles-inheritance-context';
 import { useActiveStyleDefId } from '../hooks/use-active-style-def-id';
@@ -24,6 +25,16 @@ import { SizeSection } from './style-sections/size-section/size-section';
 import { SpacingSection } from './style-sections/spacing-section/spacing-section';
 import { TypographySection } from './style-sections/typography-section/typography-section';
 
+const TABS_HEADER_HEIGHT = '37px';
+
+export const stickyHeaderStyles = {
+	position: 'sticky',
+	zIndex: 1,
+	opacity: 1,
+	backgroundColor: 'background.default',
+	transition: 'top 300ms ease',
+};
+
 export const StyleTab = () => {
 	const currentClassesProp = useCurrentClassesProp();
 	const [ activeStyleDefId, setActiveStyleDefId ] = useActiveStyleDefId( currentClassesProp );
@@ -43,8 +54,10 @@ export const StyleTab = () => {
 			>
 				<SessionStorageProvider prefix={ activeStyleDefId ?? '' }>
 					<StyleInheritanceProvider>
-						<CssClassSelector />
-						<Divider />
+						<ClassesHeader>
+							<CssClassSelector />
+							<Divider />
+						</ClassesHeader>
 						<SectionsList>
 							<Section title={ __( 'Layout', 'elementor' ) }>
 								<LayoutSection />
@@ -78,6 +91,16 @@ export const StyleTab = () => {
 	);
 };
 
+function ClassesHeader( { children }: { children: React.ReactNode } ) {
+	const scrollDirection = useScrollDirection();
+
+	return (
+		<Stack sx={ { ...stickyHeaderStyles, top: scrollDirection === 'up' ? TABS_HEADER_HEIGHT : 0 } }>
+			{ children }
+		</Stack>
+	);
+}
+
 function useCurrentClassesProp(): string {
 	const { elementType } = useElement();
 

package/src/contexts/scroll-context.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { createContext, type ReactNode, useContext, useEffect, useRef, useState } from 'react';
+import { styled } from '@elementor/ui';
+
+type ScrollDirection = 'up' | 'down';
+
+type ScrollContextValue = {
+	direction: ScrollDirection;
+};
+
+const ScrollContext = createContext< ScrollContextValue | undefined >( undefined );
+
+const ScrollPanel = styled( 'div' )`
+	height: 100%;
+	overflow-y: auto;
+`;
+
+const DEFAULT_SCROLL_DIRECTION: ScrollDirection = 'up';
+
+export function ScrollProvider( { children }: { children: ReactNode } ) {
+	const [ direction, setDirection ] = useState< ScrollDirection >( DEFAULT_SCROLL_DIRECTION );
+	const ref = useRef< HTMLDivElement >( null );
+	const scrollPos = useRef< number >( 0 );
+
+	useEffect( () => {
+		const scrollElement = ref.current;
+
+		if ( ! scrollElement ) {
+			return;
+		}
+
+		const handleScroll = () => {
+			const { scrollTop } = scrollElement;
+
+			if ( scrollTop > scrollPos.current ) {
+				setDirection( 'down' );
+			} else if ( scrollTop < scrollPos.current ) {
+				setDirection( 'up' );
+			}
+
+			scrollPos.current = scrollTop;
+		};
+
+		scrollElement.addEventListener( 'scroll', handleScroll );
+
+		return () => {
+			scrollElement.removeEventListener( 'scroll', handleScroll );
+		};
+	} );
+
+	return (
+		<ScrollContext.Provider value={ { direction } }>
+			<ScrollPanel ref={ ref }>{ children }</ScrollPanel>
+		</ScrollContext.Provider>
+	);
+}
+
+export function useScrollDirection() {
+	return useContext( ScrollContext )?.direction ?? DEFAULT_SCROLL_DIRECTION;
+}

package/src/hooks/use-normalized-inheritance-chain-items.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+import { type PropsResolver } from '@elementor/editor-canvas';
+import { type PropKey } from '@elementor/editor-props';
+
+import { type NormalizedItem } from '../styles-inheritance/styles-inheritance-infotip';
+import { type SnapshotPropValue } from '../styles-inheritance/types';
+
+const MAXIMUM_ITEMS = 2;
+
+export const useNormalizedInheritanceChainItems = (
+	inheritanceChain: SnapshotPropValue[],
+	bind: PropKey,
+	resolve: PropsResolver
+) => {
+	const [ items, setItems ] = useState< NormalizedItem[] >( [] );
+
+	useEffect( () => {
+		( async () => {
+			const normalizedItems = await Promise.all(
+				inheritanceChain
+					.filter( ( item ) => item.style?.label )
+					.map( ( item, index ) => normalizeInheritanceItem( item, index, bind, resolve ) )
+			);
+
+			const validItems = normalizedItems.filter( ( item ) => item.value !== '' ).slice( 0, MAXIMUM_ITEMS );
+
+			setItems( validItems );
+		} )();
+	}, [ inheritanceChain, bind, resolve ] );
+
+	return items;
+};
+
+export const normalizeInheritanceItem = async (
+	item: SnapshotPropValue,
+	index: number,
+	bind: PropKey,
+	resolve: PropsResolver
+): Promise< NormalizedItem > => {
+	const state = item.variant?.meta?.state || '';
+	const label = item.style?.label || '';
+	const displayLabel = state ? `${ label }:${ state }` : label;
+
+	return {
+		id: item.style?.id ? item.style?.id + state : index,
+		breakpoint: item.variant?.meta?.breakpoint,
+		displayLabel,
+		value: await getTransformedValue( item, bind, resolve ),
+	};
+};
+
+export const getTransformedValue = async (
+	item: SnapshotPropValue,
+	bind: PropKey,
+	resolve: PropsResolver
+): Promise< string > => {
+	try {
+		const result = await resolve( {
+			props: {
+				[ bind ]: item.value,
+			},
+		} );
+
+		return Object.values( result ).join( ' ' );
+	} catch {
+		return '';
+	}
+};

package/src/index.ts

@@ -3,6 +3,7 @@ export type { PopoverActionProps } from './popover-action';
 export { registerControlReplacement } from './control-replacement';
 export { injectIntoClassSelectorActions } from './components/css-classes/css-class-selector';
 export { usePanelActions, usePanelStatus } from './panel';
+export { type ValidationResult, type ValidationEvent } from './components/creatable-autocomplete';
 export { controlActionsMenu } from './controls-actions';
 
 export { init } from './init';

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

@@ -1,13 +1,19 @@
 import * as React from 'react';
+import { useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, isElementsStylesProvider } from '@elementor/editor-styles-repository';
+import { IconButton, Infotip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StyleIndicator } from '../components/style-indicator';
 import { useStyle } from '../contexts/style-context';
 import { useStylesInheritanceField } from '../contexts/styles-inheritance-context';
+import { getExperimentsConfig } from '../sync/get-experiments-config';
+import { StyleIndicatorInfotip } from './styles-inheritance-infotip';
 
 export const StylesInheritanceIndicator = () => {
+	const [ open, setOpen ] = useState( false );
+
 	const { value, path } = useBoundProp();
 	const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
 
@@ -27,27 +33,67 @@ export const StylesInheritanceIndicator = () => {
 
 	const { breakpoint, state } = variant.meta;
 
-	if (
-		style.id === currentStyleId &&
-		breakpoint === currentStyleMeta.breakpoint &&
-		state === currentStyleMeta.state
-	) {
-		return (
-			<StyleIndicator
-				aria-label={ __( 'This is the final value', 'elementor' ) }
-				variant={ isElementsStylesProvider( currentStyleProvider?.getKey() ) ? 'local' : 'global' }
-			/>
-		);
+	const isFinalValue: boolean =
+		style.id === currentStyleId && breakpoint === currentStyleMeta.breakpoint && state === currentStyleMeta.state;
+
+	const hasValue: boolean = value !== null && value !== undefined;
+
+	const label: string = getLabel( { isFinalValue, hasValue } );
+	const variantType = getVariant( { isFinalValue, hasValue, currentStyleProvider } );
+
+	const { e_indications_popover: eIndicationsPopover } = getExperimentsConfig();
+
+	if ( ! eIndicationsPopover ) {
+		return <StyleIndicator variant={ variantType } aria-label={ label } />;
+	}
+
+	const toggleOpen = () => setOpen( ( prev ) => ! prev );
+
+	return (
+		<Infotip
+			placement="top"
+			content={ <StyleIndicatorInfotip inheritanceChain={ inheritanceChain } bind={ bind } /> }
+			open={ open }
+			onClose={ () => setOpen( false ) }
+			trigger="manual"
+		>
+			<IconButton onClick={ toggleOpen } aria-label={ label }>
+				<StyleIndicator variant={ variantType } />
+			</IconButton>
+		</Infotip>
+	);
+};
+
+const getLabel = ( { isFinalValue, hasValue }: { isFinalValue: boolean; hasValue: boolean } ) => {
+	if ( isFinalValue ) {
+		return __( 'This is the final value', 'elementor' );
+	}
+
+	if ( hasValue ) {
+		return __( 'This value is overridden by another style', 'elementor' );
+	}
+
+	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 ( value !== null && value !== undefined ) {
-		return (
-			<StyleIndicator
-				aria-label={ __( 'This value is overridden by another style', 'elementor' ) }
-				variant="overridden"
-			/>
-		);
+	if ( hasValue ) {
+		return 'overridden';
 	}
 
-	return <StyleIndicator aria-label={ __( 'This has value from another style', 'elementor' ) } />;
+	return undefined;
 };

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

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { useMemo } from 'react';
+import { createPropsResolver, type PropsResolver, styleTransformersRegistry } from '@elementor/editor-canvas';
+import { type PropKey } from '@elementor/editor-props';
+import { getStylesSchema, type StyleDefinitionVariant } from '@elementor/editor-styles';
+import { Card, CardContent, List, ListItem, ListItemText } from '@elementor/ui';
+
+import { useNormalizedInheritanceChainItems } from '../hooks/use-normalized-inheritance-chain-items';
+import { type SnapshotPropValue } from './types';
+
+type StyleIndicatorInfotipProps = {
+	inheritanceChain: SnapshotPropValue[];
+	bind: PropKey;
+};
+
+export type NormalizedItem = {
+	id: string | number;
+	breakpoint?: StyleDefinitionVariant[ 'meta' ][ 'breakpoint' ];
+	displayLabel: string;
+	value: string;
+};
+
+export const StyleIndicatorInfotip = ( { inheritanceChain, bind }: StyleIndicatorInfotipProps ) => {
+	const resolve = useMemo< PropsResolver >( () => {
+		const stylesSchema = getStylesSchema();
+
+		return createPropsResolver( {
+			transformers: styleTransformersRegistry,
+			schema: { [ bind ]: stylesSchema[ bind ] },
+		} );
+	}, [ bind ] );
+
+	const items = useNormalizedInheritanceChainItems( inheritanceChain, bind, resolve );
+
+	return (
+		<Card elevation={ 0 } sx={ { maxWidth: 320 } }>
+			<CardContent sx={ { p: 1.5, pb: 2.5 } }>
+				<List>
+					{ items.map( ( item ) => (
+						<ListItem key={ item.id }>
+							<ListItemText
+								primary={ `${ item.breakpoint } | ${ item.displayLabel }. ${ item.value }` }
+							/>
+						</ListItem>
+					) ) }
+				</List>
+			</CardContent>
+		</Card>
+	);
+};

package/src/sync/get-experiments-config.ts

@@ -0,0 +1,7 @@
+import { type ExtendedWindow } from './types';
+
+export const getExperimentsConfig = () => {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return extendedWindow.elementorCommon?.config?.experimentalFeatures ?? {};
+};

package/src/sync/types.ts

@@ -31,6 +31,13 @@ export type ExtendedWindow = Window & {
 			};
 		};
 	};
+	elementorCommon?: {
+		config?: {
+			experimentalFeatures?: {
+				e_indications_popover?: boolean;
+			};
+		};
+	};
 	elementorFrontend?: {
 		config?: {
 			is_rtl?: boolean;

package/src/components/multi-combobox.tsx

@@ -1,165 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { Autocomplete, type AutocompleteProps, createFilterOptions, TextField, type Theme } from '@elementor/ui';
-
-export type Option = {
-	label: string;
-	value: string | null;
-	fixed?: boolean;
-	group?: string;
-	key?: string;
-};
-
-export type Action< TOption extends Option > = {
-	label: ( value: string ) => string;
-	apply: ( value: string ) => void | Promise< void >;
-	condition: ( options: TOption[], value: string ) => boolean;
-	group?: string;
-};
-
-type ActionAsOption< TOption extends Option > = TOption & {
-	apply: Action< TOption >[ 'apply' ];
-	condition: Action< TOption >[ 'condition' ];
-};
-
-type Props< TOption extends Option > = Omit<
-	AutocompleteProps< TOption, true, true, true >,
-	'renderInput' | 'onSelect'
-> & {
-	actions?: Action< TOption >[];
-	selected: TOption[];
-	options: TOption[];
-	onSelect?: ( value: TOption[] ) => void;
-	placeholder?: string;
-};
-
-export function MultiCombobox< TOption extends Option >( {
-	actions = [],
-	selected,
-	options,
-	onSelect,
-	placeholder,
-	...props
-}: Props< TOption > ) {
-	const filter = useFilterOptions< TOption >();
-	const { run, loading } = useActionRunner< TOption >();
-
-	return (
-		<Autocomplete
-			{ ...props }
-			freeSolo
-			multiple
-			clearOnBlur
-			selectOnFocus
-			disableClearable
-			handleHomeEndKeys
-			disabled={ loading }
-			value={ selected }
-			options={ options }
-			renderInput={ ( params ) => (
-				<TextField
-					{ ...params }
-					placeholder={ placeholder }
-					sx={ ( theme: Theme ) => ( {
-						'.MuiAutocomplete-inputRoot.MuiInputBase-adornedStart': {
-							paddingLeft: theme.spacing( 0.25 ),
-							paddingRight: theme.spacing( 0.25 ),
-						},
-					} ) }
-				/>
-			) }
-			onChange={ ( _, selectedOrInputValue, reason ) => {
-				const inputValue = selectedOrInputValue.find( ( option ) => typeof option === 'string' );
-				const optionsAndActions = selectedOrInputValue.filter( ( option ) => typeof option !== 'string' );
-
-				// Handles user input when Enter is pressed
-				if ( reason === 'createOption' ) {
-					const [ firstAction ] = filterActions( actions, { options, inputValue: inputValue ?? '' } );
-
-					if ( firstAction?.value ) {
-						return run( firstAction.apply, firstAction.value );
-					}
-				}
-
-				// Handles the user's action selection when triggered.
-				const action = optionsAndActions.find( ( value ) => isAction( value ) );
-
-				if ( reason === 'selectOption' && action?.value ) {
-					return run( action.apply, action.value );
-				}
-
-				// Every other case, we update the selected values.
-				const fixedValues = options.filter( ( option ) => !! option.fixed );
-
-				onSelect?.( [ ...new Set( [ ...optionsAndActions, ...fixedValues ] ) ] );
-			} }
-			getOptionLabel={ ( option ) => ( typeof option === 'string' ? option : option.label ) }
-			getOptionKey={ ( option ) => {
-				if ( typeof option === 'string' ) {
-					return option;
-				}
-
-				return option.key ?? option.value ?? option.label;
-			} }
-			filterOptions={ ( optionList, params ) => {
-				const selectedValues = selected.map( ( option ) => option.value );
-
-				return [
-					...filterActions( actions, { options: optionList, inputValue: params.inputValue } ),
-					...filter(
-						optionList.filter( ( option ) => ! selectedValues.includes( option.value ) ),
-						params
-					),
-				];
-			} }
-			groupBy={ ( option ) => option.group ?? '' }
-			renderOption={ ( optionProps, { label, group } ) => (
-				<li { ...optionProps } style={ { display: 'block', textOverflow: 'ellipsis' } } data-group={ group }>
-					{ label }
-				</li>
-			) }
-		/>
-	);
-}
-
-function useFilterOptions< TOption extends Option >() {
-	return useState( () => createFilterOptions< TOption >() )[ 0 ];
-}
-
-function useActionRunner< TOption extends Option >() {
-	const [ loading, setLoading ] = useState( false );
-
-	const run = async ( apply: Action< TOption >[ 'apply' ], value: string ) => {
-		setLoading( true );
-
-		try {
-			await apply( value );
-		} catch {
-			// TODO: Do something with the error.
-		}
-
-		setLoading( false );
-	};
-
-	return { run, loading };
-}
-
-function filterActions< TOption extends Option >(
-	actions: Action< TOption >[],
-	{ options, inputValue }: { options: TOption[]; inputValue: string }
-) {
-	return actions
-		.filter( ( action ) => action.condition( options, inputValue ) )
-		.map( ( action, index ) => ( {
-			label: action.label( inputValue ),
-			value: inputValue,
-			group: action.group,
-			apply: action.apply,
-			condition: action.condition,
-			key: index.toString(),
-		} ) ) as ActionAsOption< TOption >[];
-}
-
-function isAction< TOption extends Option >( option: TOption ): option is ActionAsOption< TOption > {
-	return 'apply' in option && 'condition' in option;
-}