@elementor/editor-editing-panel 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,14 +40,14 @@
   },
   "dependencies": {
     "@elementor/editor": "0.17.2",
-    "@elementor/editor-controls": "0.4.0",
-    "@elementor/editor-elements": "0.3.3",
+    "@elementor/editor-controls": "0.4.1",
+    "@elementor/editor-elements": "0.3.5",
     "@elementor/menus": "0.1.2",
-    "@elementor/editor-props": "0.5.0",
+    "@elementor/editor-props": "0.5.1",
     "@elementor/editor-panels": "0.10.2",
     "@elementor/editor-responsive": "0.12.4",
-    "@elementor/editor-styles": "0.3.2",
-    "@elementor/editor-styles-repository": "0.3.0",
+    "@elementor/editor-styles": "0.4.0",
+    "@elementor/editor-styles-repository": "0.3.2",
     "@elementor/editor-v1-adapters": "0.8.5",
     "@elementor/icons": "^1.20.0",
     "@elementor/schema": "0.1.2",

package/src/components/css-class-menu.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { type RefObject } from 'react';
+import { type StyleState } from '@elementor/editor-styles';
+import { CheckIcon } from '@elementor/icons';
+import { createMenu } from '@elementor/menus';
+import {
+	bindMenu,
+	Box,
+	ListItemIcon,
+	ListItemText,
+	ListSubheader,
+	Menu,
+	MenuItem,
+	type PopupState,
+	styled,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useCssClassItem } from '../contexts/css-class-item-context';
+import { useStyle } from '../contexts/style-context';
+
+export const { useMenuItems: useStateMenuItems, registerStateMenuItem } = createMenu( {
+	components: {
+		StateMenuItem,
+	},
+} );
+
+export const { useMenuItems: useGlobalClassMenuItems, registerGlobalClassMenuItem } = createMenu( {
+	components: {
+		GlobalClassMenuItem,
+	},
+} );
+
+export function CssClassMenu( {
+	popupState,
+	containerRef,
+}: {
+	popupState: PopupState;
+	containerRef: RefObject< Element >;
+} ) {
+	const { isGlobal } = useCssClassItem();
+	const { default: globalClassMenuItems } = useGlobalClassMenuItems();
+	const { default: stateMenuItems } = useStateMenuItems();
+
+	return (
+		<Menu
+			MenuListProps={ { dense: true } }
+			{ ...bindMenu( popupState ) }
+			anchorOrigin={ {
+				vertical: 'top',
+				horizontal: 'right',
+			} }
+			anchorEl={ containerRef.current }
+		>
+			{ isGlobal && (
+				<GlobalClassMenuSection>
+					{ globalClassMenuItems.map( ( { id, MenuItem: MenuItemComponent } ) => (
+						<MenuItemComponent key={ id } />
+					) ) }
+				</GlobalClassMenuSection>
+			) }
+			<ListSubheader>{ __( 'Add a pseudo selector', 'elementor' ) }</ListSubheader>
+			{ stateMenuItems.map( ( { id, MenuItem: MenuItemComponent } ) => (
+				<MenuItemComponent key={ id } />
+			) ) }
+		</Menu>
+	);
+}
+
+type StateMenuItemProps = {
+	state: StyleState;
+	disabled?: boolean;
+};
+
+export function StateMenuItem( { state, disabled }: StateMenuItemProps ) {
+	const { isActive, styleId } = useCssClassItem();
+	const { setId: setActiveId, setMetaState: setActiveMetaState, meta } = useStyle();
+	const { state: activeState } = meta;
+
+	const isSelected = state === activeState && isActive;
+
+	return (
+		<StyledMenuItem
+			selected={ state === activeState && isActive }
+			disabled={ disabled }
+			onClick={ () => {
+				if ( ! isActive ) {
+					setActiveId( styleId );
+				}
+
+				setActiveMetaState( state );
+			} }
+		>
+			{ isSelected && (
+				<ListItemIcon>
+					<CheckIcon />
+				</ListItemIcon>
+			) }
+			<ListItemText primary={ state ? `:${ state }` : 'Normal' } />
+		</StyledMenuItem>
+	);
+}
+
+type GlobalClassMenuItemProps = {
+	text: string;
+	onClick: () => void;
+};
+
+export function GlobalClassMenuItem( { text, onClick }: GlobalClassMenuItemProps ) {
+	return (
+		<StyledMenuItem onClick={ onClick }>
+			<ListItemText primary={ text } />
+		</StyledMenuItem>
+	);
+}
+
+const GlobalClassMenuSection = styled( Box )( ( { theme } ) => ( {
+	borderBottom: `1px solid ${ theme?.palette.divider }`,
+} ) );
+
+const StyledMenuItem = styled( MenuItem )( {
+	'&:hover': {
+		color: 'text.primary', // Overriding global CSS from the editor.
+	},
+} );

package/src/components/css-class-selector.tsx

@@ -1,15 +1,28 @@
 import * as React from 'react';
+import { useId, useRef } from 'react';
 import { updateSettings, useElementSetting } from '@elementor/editor-elements';
 import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
 import { type StyleDefinitionID } from '@elementor/editor-styles';
 import { ELEMENTS_STYLES_PROVIDER_KEY, useAllStylesByProvider } from '@elementor/editor-styles-repository';
-import { Chip, Stack, Typography } from '@elementor/ui';
+import { DotsVerticalIcon } from '@elementor/icons';
+import {
+	type AutocompleteRenderGetTagProps,
+	bindTrigger,
+	Chip,
+	type ChipOwnProps,
+	Stack,
+	Typography,
+	UnstableChipGroup,
+	usePopupState,
+} from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useClassesProp } from '../contexts/classes-prop-context';
+import { CssClassItemProvider } from '../contexts/css-class-item-context';
 import { useElement } from '../contexts/element-context';
 import { useStyle } from '../contexts/style-context';
 import { ConditionalTooltipWrapper } from './conditional-tooltip-wrapper';
+import { CssClassMenu } from './css-class-menu';
 import { MultiCombobox, type Option } from './multi-combobox';
 
 const ID = 'elementor-css-class-selector';
@@ -59,16 +72,15 @@ export function CssClassSelector() {
 						const isActive = value.value === active?.value;
 
 						return (
-							<Chip
-								{ ...chipProps }
+							<CssClassItem
 								key={ chipProps.key }
-								size="small"
-								label={ <ConditionalTooltipWrapper maxWidth="10ch" title={ value.label } /> }
-								variant={ isActive ? 'filled' : 'standard' }
+								label={ value.label }
+								id={ value.value }
+								isActive={ isActive }
+								isGlobal={ value.color === 'global' }
 								color={ isActive && value.color ? value.color : 'default' }
-								onClick={ () => handleActivate( value ) }
-								onDelete={ null }
-								aria-pressed={ isActive }
+								chipProps={ chipProps }
+								onClickActive={ () => handleActivate( value ) }
 							/>
 						);
 					} )
@@ -78,6 +90,56 @@ export function CssClassSelector() {
 	);
 }
 
+type CssClassItemProps = {
+	id: string;
+	label: string;
+	isActive: boolean;
+	isGlobal: boolean;
+	color: ChipOwnProps[ 'color' ];
+	chipProps: ReturnType< AutocompleteRenderGetTagProps >;
+	onClickActive: ( id: string ) => void;
+};
+
+function CssClassItem( { id, label, isActive, isGlobal, color, chipProps, onClickActive }: CssClassItemProps ) {
+	const { meta } = useStyle();
+	// TODO - resolve the useId issue with invalid characters upon CSS selectors (EDS-1089)
+	const popupId = useId().replace( /:/g, '_' );
+	const popupState = usePopupState( { variant: 'popover', popupId } );
+	const chipRef = useRef< Element >( null );
+	const { onDelete, ...chipGroupProps } = chipProps;
+
+	return (
+		<CssClassItemProvider styleId={ id } isActive={ isActive } isGlobal={ isGlobal }>
+			<UnstableChipGroup ref={ chipRef } { ...chipGroupProps } aria-label={ `Edit ${ label }` } role="group">
+				<Chip
+					key={ chipProps.key }
+					size="small"
+					label={ <ConditionalTooltipWrapper maxWidth="10ch" title={ label } /> }
+					variant={ isActive && ! meta.state ? 'filled' : 'standard' }
+					color={ color }
+					onClick={ () => onClickActive( id ) }
+					aria-pressed={ isActive }
+				/>
+				<Chip
+					key={ `${ chipProps.key }-menu` }
+					size="small"
+					label={
+						<Stack direction="row" gap={ 0.5 } alignItems="center">
+							{ isActive && meta.state && <Typography variant="inherit">{ meta.state }</Typography> }
+							<DotsVerticalIcon fontSize="inherit" />
+						</Stack>
+					}
+					variant="filled"
+					color={ color }
+					{ ...bindTrigger( popupState ) }
+					aria-label={ __( 'Open CSS Class Menu', 'elementor' ) }
+				/>
+			</UnstableChipGroup>
+			<CssClassMenu popupState={ popupState } containerRef={ chipRef } />
+		</CssClassItemProvider>
+	);
+}
+
 function useOptions() {
 	const { element } = useElement();
 

package/src/components/style-tab.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { useElementSetting, useElementStyles } from '@elementor/editor-elements';
 import { type ClassesPropValue, type PropKey } from '@elementor/editor-props';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
-import { type StyleDefinition } from '@elementor/editor-styles';
+import { type StyleDefinitionID, type StyleState } from '@elementor/editor-styles';
 import { Divider } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -27,11 +27,20 @@ const CLASSES_PROP_KEY = 'classes';
 export const StyleTab = () => {
 	const currentClassesProp = useCurrentClassesProp();
 	const [ activeStyleDefId, setActiveStyleDefId ] = useActiveStyleDefId( currentClassesProp );
+	const [ activeStyleState, setActiveStyleState ] = useState< StyleState | null >( null );
 	const breakpoint = useActiveBreakpoint();
 
 	return (
 		<ClassesPropProvider prop={ currentClassesProp }>
-			<StyleProvider meta={ { breakpoint, state: null } } id={ activeStyleDefId } setId={ setActiveStyleDefId }>
+			<StyleProvider
+				meta={ { breakpoint, state: activeStyleState } }
+				id={ activeStyleDefId }
+				setId={ ( id: StyleDefinitionID | null ) => {
+					setActiveStyleDefId( id );
+					setActiveStyleState( null );
+				} }
+				setMetaState={ setActiveStyleState }
+			>
 				<CssClassSelector />
 				<Divider />
 				<SectionsList>
@@ -66,7 +75,7 @@ export const StyleTab = () => {
 };
 
 function useActiveStyleDefId( currentClassesProp: PropKey ) {
-	const [ activeStyledDefId, setActiveStyledDefId ] = useState< StyleDefinition[ 'id' ] | null >( null );
+	const [ activeStyledDefId, setActiveStyledDefId ] = useState< StyleDefinitionID | null >( null );
 
 	const fallback = useFirstElementStyleDef( currentClassesProp );
 

package/src/contexts/css-class-item-context.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { createContext, type PropsWithChildren } from 'react';
+
+type ClassItemContextType = {
+	styleId: string;
+	isGlobal: boolean;
+	isActive: boolean;
+};
+const ClassItemContext = createContext< ClassItemContextType >( {
+	styleId: '',
+	isGlobal: false,
+	isActive: false,
+} );
+
+type ClassItemProviderProps = PropsWithChildren< ClassItemContextType >;
+
+export function CssClassItemProvider( { styleId, isGlobal, isActive, children }: ClassItemProviderProps ) {
+	return (
+		<ClassItemContext.Provider value={ { styleId, isGlobal, isActive } }>{ children }</ClassItemContext.Provider>
+	);
+}
+
+export function useCssClassItem() {
+	const context = React.useContext( ClassItemContext );
+
+	if ( ! context ) {
+		throw new Error( 'useCssClassItem must be used within a CssClassItemProvider' );
+	}
+
+	return context;
+}

package/src/contexts/style-context.tsx

@@ -1,19 +1,20 @@
 import * as React from 'react';
 import { createContext, type Dispatch, type PropsWithChildren, useContext } from 'react';
-import { type StyleDefinition, type StyleVariant } from '@elementor/editor-styles';
+import { type StyleDefinition, type StyleState, type StyleVariant } from '@elementor/editor-styles';
 
 type ContextValue = {
 	id: StyleDefinition[ 'id' ] | null;
 	setId: Dispatch< StyleDefinition[ 'id' ] | null >;
 	meta: StyleVariant[ 'meta' ];
+	setMetaState: Dispatch< StyleState >;
 };
 
 const Context = createContext< ContextValue | null >( null );
 
 type Props = PropsWithChildren< ContextValue >;
 
-export function StyleProvider( { children, id, setId, meta }: Props ) {
-	return <Context.Provider value={ { id, setId, meta } }>{ children }</Context.Provider>;
+export function StyleProvider( { children, id, setId, meta, setMetaState }: Props ) {
+	return <Context.Provider value={ { id, setId, meta, setMetaState } }>{ children }</Context.Provider>;
 }
 
 export function useStyle() {

package/src/css-classes.ts

@@ -0,0 +1,37 @@
+import { type StyleState } from '@elementor/editor-styles';
+
+import { registerStateMenuItem } from './components/css-class-menu';
+
+const STATES: NonNullable< StyleState >[] = [ 'hover', 'focus', 'active' ];
+
+export function initCssClasses() {
+	registerStateItems();
+	registerGlobalClassItems();
+}
+
+function registerStateItems() {
+	registerStateMenuItem( {
+		id: 'normal',
+		props: {
+			state: null,
+		},
+	} );
+
+	STATES.forEach( ( state ) => {
+		registerStateMenuItem( {
+			id: state,
+			props: {
+				state,
+			},
+		} );
+	} );
+}
+
+function registerGlobalClassItems() {
+	/**
+	 * TODO - register the relevant global classes here
+	 * change the import statement from 'css-class-menu' to -
+	 * import { registerGlobalClassMenuItem, registerStateMenuItem } from './components/css-class-menu';
+	 * and use registerGlobalClassMenuItem
+	 */
+}

package/src/index.ts

@@ -1,6 +1,7 @@
 export { useBoundProp } from '@elementor/editor-controls';
 export type { PopoverActionProps } from './popover-action';
 export { replaceControl } from './control-replacement';
+export { registerGlobalClassMenuItem, registerStateMenuItem } from './components/css-class-menu';
 
 import init from './init';
 

package/src/init.ts

@@ -3,6 +3,7 @@ import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { __privateBlockDataCommand as blockDataCommand } from '@elementor/editor-v1-adapters';
 
 import { EditingPanelHooks } from './components/editing-panel-hooks';
+import { initCssClasses } from './css-classes';
 import { init as initDynamics } from './dynamics/init';
 import { panel } from './panel';
 import { isAtomicWidgetSelected } from './sync/is-atomic-widget-selected';
@@ -18,6 +19,7 @@ export default function init() {
 
 	// TODO: Move it from here once we have dynamic package.
 	initDynamics();
+	initCssClasses();
 }
 
 const blockV1Panel = () => {