@elementor/editor-editing-panel 1.8.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,20 +39,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.17.2",
-    "@elementor/editor-controls": "0.6.0",
-    "@elementor/editor-elements": "0.4.1",
-    "@elementor/menus": "0.1.2",
-    "@elementor/editor-props": "0.7.0",
-    "@elementor/editor-panels": "0.10.2",
-    "@elementor/editor-responsive": "0.12.4",
-    "@elementor/editor-styles": "0.5.1",
-    "@elementor/editor-styles-repository": "0.4.0",
-    "@elementor/editor-v1-adapters": "0.8.5",
-    "@elementor/icons": "^1.20.0",
+    "@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/locations": "0.7.6",
     "@elementor/schema": "0.1.2",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "^1.22.0",
+    "@elementor/ui": "1.23.3",
     "@elementor/utils": "0.3.0",
     "@wordpress/i18n": "^5.13.0"
   },

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type RefObject } from 'react';
-import { type StyleState } from '@elementor/editor-styles';
+import { type StyleDefinitionState } from '@elementor/editor-styles';
 import { CheckIcon } from '@elementor/icons';
 import { createMenu } from '@elementor/menus';
 import {
@@ -68,7 +68,7 @@ export function CssClassMenu( {
 }
 
 type StateMenuItemProps = {
-	state: StyleState;
+	state: StyleDefinitionState;
 	disabled?: boolean;
 };
 

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useId, useRef } from 'react';
-import { getElementSetting, updateSettings, useElementSetting } from '@elementor/editor-elements';
+import { getElementSetting, updateElementSettings, useElementSetting } from '@elementor/editor-elements';
 import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
 import { type StyleDefinitionID } from '@elementor/editor-styles';
 import {
@@ -11,6 +11,7 @@ import {
 	useCreateActionsByProvider,
 } from '@elementor/editor-styles-repository';
 import { DotsVerticalIcon } from '@elementor/icons';
+import { createLocation } from '@elementor/locations';
 import {
 	type AutocompleteRenderGetTagProps,
 	bindTrigger,
@@ -48,6 +49,8 @@ const EMPTY_OPTION = {
 	provider: ELEMENTS_STYLES_PROVIDER_KEY,
 } satisfies StyleDefOption;
 
+export const { Slot: ClassSelectorActionsSlot, inject: injectIntoClassSelectorActions } = createLocation();
+
 /**
  * Applied - Classes applied to an element.
  * Active - Class that is currently on edit mode.
@@ -69,9 +72,14 @@ export function CssClassSelector() {
 
 	return (
 		<Stack gap={ 1 } p={ 2 }>
-			<Typography component="label" variant="caption" htmlFor={ ID }>
-				{ __( 'CSS Classes', 'elementor' ) }
-			</Typography>
+			<Stack direction="row" gap={ 1 } alignItems="baseline" justifyContent="space-between">
+				<Typography component="label" variant="caption" htmlFor={ ID }>
+					{ __( 'CSS Classes', 'elementor' ) }
+				</Typography>
+				<Stack direction="row" gap={ 1 }>
+					<ClassSelectorActionsSlot />
+				</Stack>
+			</Stack>
 			<MultiCombobox
 				id={ ID }
 				size="tiny"
@@ -321,7 +329,7 @@ function useAppliedClassesIds() {
 	const value = useElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
 
 	const setValue = ( ids: StyleDefinitionID[] ) => {
-		updateSettings( {
+		updateElementSettings( {
 			id: element.id,
 			props: {
 				[ currentClassesProp ]: classesPropTypeUtil.create( ids ),

package/src/components/editable-field.tsx

@@ -86,7 +86,7 @@ export const EditableFieldProvider = ( {
 
 type EditableFieldProps = ComponentProps< 'div' >;
 
-export const EditableField = ( { children, ...props }: EditableFieldProps ) => {
+export const EditableField = ( { children, onClick, ...props }: EditableFieldProps ) => {
 	const ref = useRef< HTMLElement >( null );
 	const { isEditing, closeEditMode, value, onChange, error, submit, editable } = useEditableField();
 
@@ -110,6 +110,14 @@ export const EditableField = ( { children, ...props }: EditableFieldProps ) => {
 		}
 	};
 
+	const handleClick = ( event: React.MouseEvent< HTMLDivElement > ) => {
+		if ( isEditing ) {
+			event.stopPropagation();
+		}
+
+		onClick?.( event );
+	};
+
 	const selectAll = () => {
 		const selection = getSelection();
 
@@ -131,7 +139,7 @@ export const EditableField = ( { children, ...props }: EditableFieldProps ) => {
 	return (
 		<Tooltip open={ !! error } title={ error } placement="top">
 			{ /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */ }
-			<div onKeyDown={ handleKeyDown } { ...props }>
+			<div onKeyDown={ handleKeyDown } onClick={ handleClick } { ...props }>
 				<span
 					ref={ ref }
 					role="textbox"

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useMemo, useState } from 'react';
 import {
 	ControlLabel,
 	ControlToggleButtonGroup,
@@ -50,8 +51,8 @@ export const FlexSizeField = () => {
 		shrink = shrinkField?.value || null,
 		basis = basisField?.value || null;
 
-	const currentGroup = React.useMemo( () => getActiveGroup( { grow, shrink, basis } ), [ grow, shrink, basis ] ),
-		[ activeGroup, setActiveGroup ] = React.useState( currentGroup );
+	const currentGroup = useMemo( () => getActiveGroup( { grow, shrink, basis } ), [ grow, shrink, basis ] ),
+		[ activeGroup, setActiveGroup ] = useState( currentGroup );
 
 	const onChangeGroup = ( group: GroupItem | null = null ) => {
 		setActiveGroup( group );

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 StyleDefinitionID, type StyleState } from '@elementor/editor-styles';
+import { type StyleDefinitionID, type StyleDefinitionState } from '@elementor/editor-styles';
 import { SessionStorageProvider } from '@elementor/session';
 import { Divider } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -28,7 +28,7 @@ const CLASSES_PROP_KEY = 'classes';
 export const StyleTab = () => {
 	const currentClassesProp = useCurrentClassesProp();
 	const [ activeStyleDefId, setActiveStyleDefId ] = useActiveStyleDefId( currentClassesProp );
-	const [ activeStyleState, setActiveStyleState ] = useState< StyleState | null >( null );
+	const [ activeStyleState, setActiveStyleState ] = useState< StyleDefinitionState | null >( null );
 	const breakpoint = useActiveBreakpoint();
 
 	return (

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createContext, type PropsWithChildren } from 'react';
+import { createContext, type PropsWithChildren, useContext } from 'react';
 
 type ClassItemContextType = {
 	styleId: string;
@@ -21,7 +21,7 @@ export function CssClassItemProvider( { styleId, isGlobal, isActive, children }:
 }
 
 export function useCssClassItem() {
-	const context = React.useContext( ClassItemContext );
+	const context = useContext( ClassItemContext );
 
 	if ( ! context ) {
 		throw new Error( 'useCssClassItem must be used within a CssClassItemProvider' );

package/src/contexts/style-context.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { createContext, type Dispatch, type PropsWithChildren, useContext } from 'react';
-import { type StyleDefinition, type StyleState, type StyleVariant } from '@elementor/editor-styles';
+import { type StyleDefinition, type StyleDefinitionState, type StyleDefinitionVariant } from '@elementor/editor-styles';
 
 type ContextValue = {
 	id: StyleDefinition[ 'id' ] | null;
 	setId: Dispatch< StyleDefinition[ 'id' ] | null >;
-	meta: StyleVariant[ 'meta' ];
-	setMetaState: Dispatch< StyleState >;
+	meta: StyleDefinitionVariant[ 'meta' ];
+	setMetaState: Dispatch< StyleDefinitionState >;
 };
 
 const Context = createContext< ContextValue | null >( null );

package/src/controls-registry/settings-field.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PropKeyProvider, PropProvider } from '@elementor/editor-controls';
-import { updateSettings, useElementSetting } from '@elementor/editor-elements';
+import { updateElementSettings, useElementSetting } from '@elementor/editor-elements';
 import { type PropKey, type PropValue } from '@elementor/editor-props';
 
 import { useElement } from '../contexts/element-context';
@@ -20,7 +20,7 @@ export const SettingsField = ( { bind, children }: Props ) => {
 	const propType = createTopLevelOjectType( { schema: elementType.propsSchema } );
 
 	const setValue = ( newValue: Record< string, PropValue > ) => {
-		updateSettings( {
+		updateElementSettings( {
 			id: element.id,
 			props: { ...newValue },
 		} );

package/src/css-classes.ts

@@ -1,10 +1,10 @@
-import { type StyleState } from '@elementor/editor-styles';
+import { type StyleDefinitionState } from '@elementor/editor-styles';
 
 import { registerGlobalClassMenuItem, registerStateMenuItem } from './components/css-class-menu';
 import { useCssClassItem } from './contexts/css-class-item-context';
 import { useUnapplyClass } from './hooks/use-unapply-class';
 
-const STATES: NonNullable< StyleState >[] = [ 'hover', 'focus', 'active' ];
+const STATES: NonNullable< StyleDefinitionState >[] = [ 'hover', 'focus', 'active' ];
 
 export function initCssClasses() {
 	registerStateItems();

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

@@ -1,4 +1,4 @@
-import { updateStyle, useElementStyleProps } from '@elementor/editor-elements';
+import { createElementStyle, updateElementStyle, useElementStyleProps } from '@elementor/editor-elements';
 import type { Props } from '@elementor/editor-props';
 import { __ } from '@wordpress/i18n';
 
@@ -18,14 +18,24 @@ export function useStylesFields< T extends Props >( propNames: ( keyof T & strin
 		propNames,
 	} );
 
-	const setValue = ( newValues: T ) => {
-		updateStyle( {
-			elementID: element.id,
-			styleDefID: id,
-			props: newValues,
+	const setValue = ( props: T ) => {
+		if ( id === null ) {
+			createElementStyle( {
+				elementId: element.id,
+				classesProp,
+				meta,
+				props,
+				label: __( 'local', 'elementor' ),
+			} );
+
+			return;
+		}
+
+		updateElementStyle( {
+			elementId: element.id,
+			styleId: id,
+			props,
 			meta,
-			bind: classesProp,
-			label: __( 'local', 'elementor' ),
 		} );
 	};
 

package/src/hooks/use-unapply-class.ts

@@ -1,4 +1,4 @@
-import { updateSettings, useElementSetting } from '@elementor/editor-elements';
+import { updateElementSettings, useElementSetting } from '@elementor/editor-elements';
 import { type ClassesPropValue } from '@elementor/editor-props';
 
 import { useClassesProp } from '../contexts/classes-prop-context';
@@ -9,10 +9,10 @@ export const useUnapplyClass = ( classId: string ) => {
 	const classesProp = useClassesProp();
 
 	const classes = useElementSetting< ClassesPropValue >( element.id, classesProp );
-	const filteredClasses = classes?.value.filter( ( className ) => className !== classId );
+	const filteredClasses = classes?.value.filter( ( className ) => className !== classId ) ?? [];
 
 	return () => {
-		updateSettings( {
+		updateElementSettings( {
 			id: element.id,
 			props: {
 				[ classesProp ]: {

package/src/index.ts

@@ -2,6 +2,8 @@ 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';
+export { injectIntoClassSelectorActions } from './components/css-class-selector';
+export { usePanelActions, usePanelStatus } from './panel';
 
 import init from './init';