@elementor/editor-editing-panel 1.9.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,25 +39,29 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.17.4",
-    "@elementor/editor-controls": "0.7.0",
-    "@elementor/editor-elements": "0.5.0",
-    "@elementor/menus": "0.1.3",
-    "@elementor/editor-props": "0.8.0",
-    "@elementor/editor-panels": "0.10.4",
-    "@elementor/editor-responsive": "0.12.5",
-    "@elementor/editor-styles": "0.5.3",
-    "@elementor/editor-styles-repository": "0.5.0",
-    "@elementor/editor-v1-adapters": "0.9.0",
-    "@elementor/icons": "1.24.0",
+    "@elementor/editor": "0.18.0",
+    "@elementor/editor-controls": "0.9.0",
+    "@elementor/editor-elements": "0.5.2",
+    "@elementor/editor-panels": "0.11.0",
+    "@elementor/editor-props": "0.9.0",
+    "@elementor/editor-responsive": "0.13.0",
+    "@elementor/editor-styles": "0.5.5",
+    "@elementor/editor-styles-repository": "0.7.0",
+    "@elementor/editor-ui": "0.2.0",
+    "@elementor/editor-v1-adapters": "0.10.0",
+    "@elementor/icons": "1.31.0",
     "@elementor/locations": "0.7.6",
+    "@elementor/menus": "0.1.3",
     "@elementor/schema": "0.1.2",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.23.3",
-    "@elementor/utils": "0.3.0",
+    "@elementor/ui": "1.26.0",
+    "@elementor/utils": "0.3.1",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {
     "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5"
   }
 }

package/src/components/css-classes/css-class-item.tsx

@@ -0,0 +1,130 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { stylesRepository } from '@elementor/editor-styles-repository';
+import { EditableField, EllipsisWithTooltip, useEditable } from '@elementor/editor-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 { useStyle } from '../../contexts/style-context';
+import { CssClassMenu } from './css-class-menu';
+
+type CssClassItemProps = {
+	id: string;
+	label: string;
+	provider: string;
+	isActive: boolean;
+	color: ChipOwnProps[ 'color' ];
+	chipProps: ReturnType< AutocompleteRenderGetTagProps >;
+	onClickActive: ( id: string ) => void;
+	renameLabel: ( newLabel: string ) => void;
+	validateLabel?: ( newLabel: string ) => string | undefined | null;
+};
+
+const CHIP_SIZE = 'tiny';
+
+export function CssClassItem( {
+	id,
+	label,
+	provider,
+	isActive,
+	color: colorProp,
+	chipProps,
+	onClickActive,
+	renameLabel,
+}: CssClassItemProps ) {
+	const { meta } = useStyle();
+	const popupState = usePopupState( { variant: 'popover' } );
+	const [ chipRef, setChipRef ] = useState< HTMLElement | null >( null );
+	const { onDelete, ...chipGroupProps } = chipProps;
+
+	const {
+		ref,
+		isEditing,
+		openEditMode,
+		error,
+		getProps: getEditableProps,
+	} = useEditable( {
+		value: label,
+		onSubmit: renameLabel,
+		validation: validateLabel,
+	} );
+
+	const color = error ? 'error' : colorProp;
+
+	const providerActions = stylesRepository.getProviderByKey( provider )?.actions;
+	const allowRename = Boolean( providerActions?.update );
+
+	return (
+		<>
+			<UnstableChipGroup ref={ setChipRef } { ...chipGroupProps } aria-label={ `Edit ${ label }` } role="group">
+				<Chip
+					size={ CHIP_SIZE }
+					label={
+						isEditing ? (
+							<EditableField ref={ ref } error={ error } { ...getEditableProps() } />
+						) : (
+							<EllipsisWithTooltip maxWidth="10ch" title={ label } as="div" />
+						)
+					}
+					variant={ isActive && ! meta.state ? 'filled' : 'standard' }
+					color={ color }
+					onClick={ () => {
+						if ( isActive && allowRename ) {
+							openEditMode();
+						}
+
+						onClickActive( id );
+					} }
+					aria-pressed={ isActive }
+					sx={ {
+						'&.Mui-focusVisible': {
+							boxShadow: 'none !important',
+						},
+					} }
+				/>
+				{ ! isEditing && (
+					<Chip
+						size={ CHIP_SIZE }
+						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
+				styleId={ id }
+				popupState={ popupState }
+				provider={ provider }
+				handleRename={ openEditMode }
+				anchorEl={ chipRef }
+			/>
+		</>
+	);
+}
+
+const validateLabel = ( newLabel: string ) => {
+	if ( ! stylesRepository.isLabelValid( newLabel ) ) {
+		return __( 'Format is not valid', 'elementor' );
+	}
+
+	if ( stylesRepository.isLabelExist( newLabel ) ) {
+		return __( 'Existing name', 'elementor' );
+	}
+};

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

@@ -0,0 +1,151 @@
+import * as React from 'react';
+import { type StyleDefinitionState } from '@elementor/editor-styles';
+import { stylesRepository } from '@elementor/editor-styles-repository';
+import { bindMenu, Divider, ListSubheader, Menu, MenuItem, type PopupState } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useStyle } from '../../contexts/style-context';
+import { useUnapplyClass } from '../../hooks/use-unapply-class';
+
+const STATES: NonNullable< StyleDefinitionState >[] = [ 'hover', 'focus', 'active' ];
+
+type CssClassMenuProps = {
+	styleId: string;
+	provider: string;
+	popupState: PopupState;
+	handleRename: () => void;
+	anchorEl: HTMLElement | null;
+};
+
+export function CssClassMenu( { styleId, provider, popupState, handleRename, anchorEl }: CssClassMenuProps ) {
+	const handleKeyDown = ( e: React.KeyboardEvent< HTMLElement > ) => {
+		e.stopPropagation();
+	};
+
+	return (
+		<Menu
+			MenuListProps={ { dense: true } }
+			{ ...bindMenu( popupState ) }
+			anchorEl={ anchorEl }
+			anchorOrigin={ {
+				vertical: 'bottom',
+				horizontal: 'left',
+			} }
+			transformOrigin={ {
+				horizontal: 'left',
+				vertical: -4,
+			} }
+			onKeyDown={ handleKeyDown }
+		>
+			{ /* It has to be an array since MUI menu doesn't accept a Fragment as a child, and wrapping the items with an HTML element disrupts keyboard navigation */ }
+			{ getMenuItemsByProvider( { provider, styleId, handleRename, closeMenu: popupState.close } ) }
+			<ListSubheader sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }>
+				{ __( 'Pseudo selector', 'elementor' ) }
+			</ListSubheader>
+			{ STATES.map( ( state ) => {
+				return <StateMenuItem key={ state } state={ state } styleId={ styleId } />;
+			} ) }
+		</Menu>
+	);
+}
+
+function getMenuItemsByProvider( {
+	provider,
+	styleId,
+	handleRename,
+	closeMenu,
+}: {
+	provider: string;
+	styleId: string;
+	handleRename: () => void;
+	closeMenu: () => void;
+} ) {
+	const providerInstance = stylesRepository.getProviderByKey( provider );
+	const providerActions = providerInstance?.actions;
+
+	const [ canUpdate, canDelete ] = [ providerActions?.update, providerActions?.delete ];
+
+	const actions = [
+		canUpdate && <RenameClassMenuItem key="rename-class" handleRename={ handleRename } closeMenu={ closeMenu } />,
+		canDelete && <UnapplyClassMenuItem key="unapply-class" styleId={ styleId } />,
+	].filter( Boolean );
+
+	if ( actions.length ) {
+		actions.unshift(
+			<ListSubheader
+				key="provider-label"
+				sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }
+			>
+				{ providerInstance?.labels?.singular }
+			</ListSubheader>
+		);
+		actions.push( <Divider key="provider-actions-divider" /> );
+	}
+
+	return actions;
+}
+
+type StateMenuItemProps = {
+	state: StyleDefinitionState;
+	styleId: string;
+};
+
+function StateMenuItem( { state, styleId, ...props }: StateMenuItemProps ) {
+	const { id: activeId, setId: setActiveId, setMetaState: setActiveMetaState, meta } = useStyle();
+	const { state: activeState } = meta;
+
+	const isActive = styleId === activeId;
+	const isSelected = state === activeState && isActive;
+
+	return (
+		<StyledMenuItem
+			{ ...props }
+			selected={ isSelected }
+			sx={ { textTransform: 'capitalize' } }
+			onClick={ () => {
+				if ( ! isActive ) {
+					setActiveId( styleId );
+				}
+
+				setActiveMetaState( state );
+			} }
+		>
+			{ state }
+		</StyledMenuItem>
+	);
+}
+
+function UnapplyClassMenuItem( { styleId, ...props }: { styleId: string } ) {
+	const unapplyClass = useUnapplyClass( styleId );
+
+	return (
+		<StyledMenuItem { ...props } onClick={ unapplyClass }>
+			{ __( 'Remove', 'elementor' ) }
+		</StyledMenuItem>
+	);
+}
+
+function RenameClassMenuItem( {
+	handleRename,
+	closeMenu,
+	...props
+}: {
+	handleRename: () => void;
+	closeMenu: () => void;
+} ) {
+	return (
+		<StyledMenuItem
+			{ ...props }
+			onClick={ () => {
+				closeMenu();
+				handleRename();
+			} }
+		>
+			{ __( 'Rename', 'elementor' ) }
+		</StyledMenuItem>
+	);
+}
+
+const StyledMenuItem = ( { ...props } ) => (
+	<MenuItem { ...props } sx={ { ...( props.sx ?? {} ), typography: 'caption', color: 'text.primary' } } />
+);

package/src/components/{css-class-selector.tsx → css-classes/css-class-selector.tsx}

@@ -1,37 +1,24 @@
 import * as React from 'react';
-import { useId, useRef } from 'react';
 import { getElementSetting, updateElementSettings, 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,
+	type StylesProvider,
 	stylesRepository,
 	type UpdateActionPayload,
-	useAllStylesByProvider,
 	useCreateActionsByProvider,
+	useProviders,
 } from '@elementor/editor-styles-repository';
-import { DotsVerticalIcon } from '@elementor/icons';
 import { createLocation } from '@elementor/locations';
-import {
-	type AutocompleteRenderGetTagProps,
-	bindTrigger,
-	Chip,
-	type ChipOwnProps,
-	Stack,
-	Typography,
-	UnstableChipGroup,
-	usePopupState,
-} from '@elementor/ui';
+import { Chip, Stack, Typography } 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 { EditableField, EditableFieldProvider, useEditableField } from './editable-field';
-import { type Action, MultiCombobox, type Option } from './multi-combobox';
+import { useClassesProp } from '../../contexts/classes-prop-context';
+import { useElement } from '../../contexts/element-context';
+import { useStyle } from '../../contexts/style-context';
+import { type Action, MultiCombobox, type Option } from '../multi-combobox';
+import { CssClassItem } from './css-class-item';
 
 const ID = 'elementor-css-class-selector';
 const TAGS_LIMIT = 8;
@@ -65,14 +52,13 @@ export function CssClassSelector() {
 	const actions = useCreateActions( { pushAppliedId, setActiveId } );
 
 	const handleApply = useHandleApply( appliedIds, setAppliedIds );
-	const handleActivate = ( { value }: Option ) => setActiveId( value );
 
 	const applied = useAppliedOptions( options, appliedIds );
 	const active = applied.find( ( option ) => option.value === activeId ) ?? EMPTY_OPTION;
 
 	return (
 		<Stack gap={ 1 } p={ 2 }>
-			<Stack direction="row" gap={ 1 } alignItems="baseline" justifyContent="space-between">
+			<Stack direction="row" gap={ 1 } alignItems="center" justifyContent="space-between">
 				<Typography component="label" variant="caption" htmlFor={ ID }>
 					{ __( 'CSS Classes', 'elementor' ) }
 				</Typography>
@@ -95,34 +81,26 @@ export function CssClassSelector() {
 					values.map( ( value, index ) => {
 						const chipProps = getTagProps( { index } );
 						const isActive = value.value === active?.value;
+						const isElementsProvider = value.provider === ELEMENTS_STYLES_PROVIDER_KEY;
 
 						const renameLabel = ( newLabel: string ) => {
 							return updateClassByProvider( value.provider, { label: newLabel, id: value.value } );
 						};
 
 						return (
-							<EditableFieldProvider
+							<CssClassItem
 								key={ chipProps.key }
-								value={ value.label }
-								onSubmit={ renameLabel }
-								editable={ value.provider !== ELEMENTS_STYLES_PROVIDER_KEY }
-								validation={ ( newLabel ) =>
-									renameValidation(
-										newLabel,
-										options.filter( ( option ) => option.value !== value.value )
-									)
-								}
-							>
-								<CssClassItem
-									label={ value.label }
-									id={ value.value }
-									isActive={ isActive }
-									isGlobal={ value.color === 'global' }
-									color={ isActive && value.color ? value.color : 'default' }
-									chipProps={ chipProps }
-									onClickActive={ () => handleActivate( value ) }
-								/>
-							</EditableFieldProvider>
+								label={ value.label }
+								provider={ value.provider }
+								id={ value.value }
+								isActive={ isActive }
+								color={ isActive && value.color ? value.color : 'default' }
+								chipProps={ chipProps }
+								// There is only a single local style, which might not exist, so setting it to
+								// `null` will either return the actual style or the fallback one.
+								onClickActive={ () => setActiveId( isElementsProvider ? null : value.value ) }
+								renameLabel={ renameLabel }
+							/>
 						);
 					} )
 				}
@@ -131,91 +109,6 @@ export function CssClassSelector() {
 	);
 }
 
-type CssClassItemProps = {
-	id: string;
-	label: string;
-	isActive: boolean;
-	isGlobal: boolean;
-	color: ChipOwnProps[ 'color' ];
-	chipProps: ReturnType< AutocompleteRenderGetTagProps >;
-	onClickActive: ( id: string ) => void;
-};
-
-const CHIP_SIZE = 'tiny';
-
-export function CssClassItem( {
-	id,
-	label,
-	isActive,
-	isGlobal,
-	color: colorProp,
-	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;
-	const { isEditing, openEditMode, error, submitting } = useEditableField();
-
-	const color = error ? 'error' : colorProp;
-
-	return (
-		<CssClassItemProvider styleId={ id } isActive={ isActive } isGlobal={ isGlobal }>
-			<UnstableChipGroup ref={ chipRef } { ...chipGroupProps } aria-label={ `Edit ${ label }` } role="group">
-				<Chip
-					disabled={ submitting }
-					size={ CHIP_SIZE }
-					label={
-						<EditableField
-							onDoubleClick={ () => {
-								if ( ! isActive ) {
-									openEditMode();
-								}
-							} }
-							onClick={ () => {
-								if ( isActive ) {
-									openEditMode();
-								}
-							} }
-						>
-							<ConditionalTooltipWrapper maxWidth="10ch" title={ label } />
-						</EditableField>
-					}
-					variant={ isActive && ! meta.state ? 'filled' : 'standard' }
-					color={ color }
-					onClick={ () => onClickActive( id ) }
-					aria-pressed={ isActive }
-					sx={ {
-						'&.Mui-focusVisible': {
-							boxShadow: 'none !important',
-						},
-					} }
-				/>
-				{ ! isEditing && (
-					<Chip
-						disabled={ submitting }
-						size={ CHIP_SIZE }
-						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>
-	);
-}
-
 const updateClassByProvider = ( provider: string, data: UpdateActionPayload ) => {
 	const providerInstance = stylesRepository.getProviderByKey( provider );
 
@@ -226,34 +119,16 @@ const updateClassByProvider = ( provider: string, data: UpdateActionPayload ) =>
 	return providerInstance.actions.update?.( data );
 };
 
-const VALID_SELECTOR_REGEX = /^[a-zA-Z0-9_-]+$/;
-
-const renameValidation = ( newLabel: string, options: Option[] ) => {
-	if ( isNameExist( newLabel, options ) ) {
-		return __( 'Existing name', 'elementor' );
-	}
-
-	if ( isCharactersNotSupported( newLabel ) ) {
-		return __( 'Format is not valid', 'elementor' );
-	}
-};
-
-const isNameExist = ( newLabel: string, options: Option[] ) => {
-	if ( ! options?.length ) {
-		return false;
-	}
-
-	return options.some( ( option ) => option.label.toLowerCase() === newLabel.toLowerCase() );
-};
-
-const isCharactersNotSupported = ( newLabel: string ) => ! VALID_SELECTOR_REGEX.test( newLabel );
-
 function useOptions() {
 	const { element } = useElement();
 
-	return useAllStylesByProvider( { elementId: element.id } ).flatMap< StyleDefOption >(
-		( [ provider, styleDefs ] ) => {
+	const isProviderEditable = ( provider: StylesProvider ) => !! provider.actions.updateProps;
+
+	return useProviders()
+		.filter( isProviderEditable )
+		.flatMap< StyleDefOption >( ( provider ) => {
 			const isElements = provider.key === ELEMENTS_STYLES_PROVIDER_KEY;
+			const styleDefs = provider.actions.get( { elementId: element.id } );
 
 			// Add empty local option for elements, as fallback.
 			if ( isElements && styleDefs.length === 0 ) {
@@ -270,8 +145,7 @@ function useOptions() {
 					group: provider.labels?.plural,
 				};
 			} );
-		}
-	);
+		} );
 }
 
 function useCreateActions( {
@@ -285,15 +159,15 @@ function useCreateActions( {
 		return {
 			// translators: %s is the label of the new class.
 			label: ( value ) => __( 'Create new "%s"', 'elementor' ).replace( '%s', value ),
-			apply: async ( value ) => {
-				const created = await create( { label: value } );
+			apply: ( label ) => {
+				const createdId = create( label );
 
-				if ( ! created ) {
+				if ( ! createdId ) {
 					return;
 				}
 
-				pushAppliedId( created.id );
-				setActiveId( created.id );
+				pushAppliedId( createdId );
+				setActiveId( createdId );
 			},
 			condition: ( options, inputValue ) => {
 				const isUniqueLabel = ! options.some(

package/src/components/style-sections/layout-section/display-field.tsx

@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 
-type Displays = 'block' | 'flex';
+type Displays = 'block' | 'flex' | 'inline-block';
 
 export const DisplayField = () => {
 	const options: ToggleButtonGroupItem< Displays >[] = [
@@ -13,11 +13,19 @@ export const DisplayField = () => {
 			value: 'block',
 			renderContent: () => __( 'Block', 'elementor' ),
 			label: __( 'Block', 'elementor' ),
+			showTooltip: true,
 		},
 		{
 			value: 'flex',
 			renderContent: () => __( 'Flex', 'elementor' ),
 			label: __( 'Flex', 'elementor' ),
+			showTooltip: true,
+		},
+		{
+			value: 'inline-block',
+			renderContent: () => __( 'In-blk', 'elementor' ),
+			label: __( 'Inline-block', 'elementor' ),
+			showTooltip: true,
 		},
 	];
 

package/src/components/style-sections/layout-section/flex-order-field.tsx

@@ -17,11 +17,11 @@ import { useStylesField } from '../../../hooks/use-styles-field';
 
 type GroupControlItemOption = 'first' | 'last' | 'custom';
 
-export const FIRST_DEFAULT_VALUE = -99999,
-	LAST_DEFAULT_VALUE = 99999,
-	FIRST = 'first',
-	LAST = 'last',
-	CUSTOM = 'custom';
+export const FIRST_DEFAULT_VALUE = -99999;
+export const LAST_DEFAULT_VALUE = 99999;
+const FIRST = 'first';
+const LAST = 'last';
+const CUSTOM = 'custom';
 
 const orderValueMap = {
 	[ FIRST ]: FIRST_DEFAULT_VALUE,

package/src/components/style-sections/layout-section/flex-size-field.tsx

@@ -18,7 +18,7 @@ import { useStylesField } from '../../../hooks/use-styles-field';
 
 type GroupItem = 'flex-grow' | 'flex-shrink' | 'custom';
 
-export const DEFAULT = 1;
+const DEFAULT = 1;
 
 const items: ToggleButtonGroupItem< GroupItem >[] = [
 	{

package/src/components/style-sections/layout-section/gap-control-field.tsx

@@ -5,8 +5,6 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 
-export type Gap = 'column' | 'row';
-
 export const GapControlField = () => {
 	return (
 		<Stack gap={ 1 }>

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

@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 
-export type Side = 'left' | 'right' | 'top' | 'bottom';
+type Side = 'left' | 'right' | 'top' | 'bottom';
 
 const sideIcons = {
 	left: <SideLeftIcon fontSize={ 'tiny' } />,