@elementor/editor-editing-panel 1.8.1 → 1.10.0

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

@@ -1,18 +1,20 @@
-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';
 import { useElement } from '../contexts/element-context';
+import { useStyle } from '../contexts/style-context';
 
 export const useUnapplyClass = ( classId: string ) => {
 	const { element } = useElement();
+	const { setId: setStyleId } = useStyle();
 	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 ]: {
@@ -21,5 +23,7 @@ export const useUnapplyClass = ( classId: string ) => {
 				},
 			},
 		} );
+
+		setStyleId( null );
 	};
 };

package/src/index.ts

@@ -1,7 +1,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';
 

package/src/init.ts

@@ -3,7 +3,6 @@ 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';
@@ -19,7 +18,6 @@ export default function init() {
 
 	// TODO: Move it from here once we have dynamic package.
 	initDynamics();
-	initCssClasses();
 }
 
 const blockV1Panel = () => {

package/src/components/conditional-tooltip-wrapper.tsx

@@ -1,58 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import * as React from 'react';
-import { Box, Tooltip } from '@elementor/ui';
-
-type ConditionalTooltipWrapperProps = {
-	maxWidth: React.CSSProperties[ 'maxWidth' ];
-	title: string;
-};
-
-export const ConditionalTooltipWrapper = ( { maxWidth, title }: ConditionalTooltipWrapperProps ) => {
-	const elRef = useRef< HTMLElement >( null );
-	const [ isOverflown, setIsOverflown ] = useState( false );
-
-	useEffect( () => {
-		const onResize = () => {
-			const element = elRef.current;
-
-			if ( element ) {
-				setIsOverflown( element.scrollWidth > element.clientWidth );
-			}
-		};
-
-		onResize();
-
-		window.addEventListener( 'resize', onResize );
-
-		return () => {
-			window.removeEventListener( 'resize', onResize );
-		};
-	}, [] );
-
-	if ( isOverflown ) {
-		return (
-			<Tooltip title={ title } placement="top">
-				<Content maxWidth={ maxWidth } ref={ elRef }>
-					{ title }
-				</Content>
-			</Tooltip>
-		);
-	}
-
-	return (
-		<Content maxWidth={ maxWidth } ref={ elRef }>
-			{ title }
-		</Content>
-	);
-};
-
-type ContentProps = React.PropsWithChildren< Omit< ConditionalTooltipWrapperProps, 'title' > >;
-
-const Content = React.forwardRef( ( { maxWidth, ...tooltipProps }: ContentProps, ref ) => (
-	<Box
-		ref={ ref }
-		position="relative"
-		sx={ { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth } }
-		{ ...tooltipProps }
-	/>
-) );

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

@@ -1,31 +0,0 @@
-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/css-classes.ts

@@ -1,45 +0,0 @@
-import { type StyleState } 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' ];
-
-export function initCssClasses() {
-	registerStateItems();
-	registerGlobalClassItems();
-}
-
-function registerStateItems() {
-	registerStateMenuItem( {
-		id: 'normal',
-		props: {
-			state: null,
-		},
-	} );
-
-	STATES.forEach( ( state ) => {
-		registerStateMenuItem( {
-			id: state,
-			props: {
-				state,
-			},
-		} );
-	} );
-}
-
-function registerGlobalClassItems() {
-	registerGlobalClassMenuItem( {
-		id: 'unapply-class',
-		useProps: () => {
-			const { styleId: currentClass } = useCssClassItem();
-			const unapplyClass = useUnapplyClass( currentClass );
-
-			return {
-				text: 'Remove',
-				onClick: unapplyClass,
-			};
-		},
-	} );
-}