@elementor/editor-editing-panel 1.9.0 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,21 +39,22 @@
     "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/editor": "0.17.5",
+    "@elementor/editor-controls": "0.8.0",
+    "@elementor/editor-elements": "0.5.1",
     "@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-panels": "0.10.5",
+    "@elementor/editor-responsive": "0.12.6",
+    "@elementor/editor-styles": "0.5.4",
+    "@elementor/editor-styles-repository": "0.6.0",
+    "@elementor/editor-ui": "0.1.0",
+    "@elementor/editor-v1-adapters": "0.9.1",
+    "@elementor/icons": "1.26.0",
     "@elementor/locations": "0.7.6",
     "@elementor/schema": "0.1.2",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.23.3",
+    "@elementor/ui": "1.24.1",
     "@elementor/utils": "0.3.0",
     "@wordpress/i18n": "^5.13.0"
   },

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

@@ -1,11 +1,9 @@
 import * as React from 'react';
-import { type RefObject } from 'react';
 import { type StyleDefinitionState } from '@elementor/editor-styles';
 import { CheckIcon } from '@elementor/icons';
-import { createMenu } from '@elementor/menus';
 import {
 	bindMenu,
-	Box,
+	Divider,
 	ListItemIcon,
 	ListItemText,
 	ListSubheader,
@@ -16,31 +14,17 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { useCssClassItem } from '../contexts/css-class-item-context';
 import { useStyle } from '../contexts/style-context';
+import { useUnapplyClass } from '../hooks/use-unapply-class';
 
-export const { useMenuItems: useStateMenuItems, registerStateMenuItem } = createMenu( {
-	components: {
-		StateMenuItem,
-	},
-} );
+const STATES: NonNullable< StyleDefinitionState >[] = [ 'hover', 'focus', 'active' ];
 
-export const { useMenuItems: useGlobalClassMenuItems, registerGlobalClassMenuItem } = createMenu( {
-	components: {
-		GlobalClassMenuItem,
-	},
-} );
+type CssClassMenuProps = { styleId: string; isFixed: boolean; popupState: PopupState };
 
-export function CssClassMenu( {
-	popupState,
-	containerRef,
-}: {
-	popupState: PopupState;
-	containerRef: RefObject< Element >;
-} ) {
-	const { isGlobal } = useCssClassItem();
-	const { default: globalClassMenuItems } = useGlobalClassMenuItems();
-	const { default: stateMenuItems } = useStateMenuItems();
+export function CssClassMenu( { styleId, isFixed = false, popupState }: CssClassMenuProps ) {
+	const handleKeyDown = ( e: React.KeyboardEvent< HTMLElement > ) => {
+		e.stopPropagation();
+	};
 
 	return (
 		<Menu
@@ -50,39 +34,38 @@ export function CssClassMenu( {
 				vertical: 'top',
 				horizontal: 'right',
 			} }
-			anchorEl={ containerRef.current }
+			onKeyDown={ handleKeyDown }
 		>
-			{ isGlobal && (
-				<GlobalClassMenuSection>
-					{ globalClassMenuItems.map( ( { id, MenuItem: MenuItemComponent } ) => (
-						<MenuItemComponent key={ id } />
-					) ) }
-				</GlobalClassMenuSection>
-			) }
+			{ /* 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 */ }
+			{ ! isFixed && [
+				<UnapplyClassMenuItem key="unapply-class" styleId={ styleId } />,
+				<Divider key="global-class-items-divider" />,
+			] }
 			<ListSubheader>{ __( 'Add a pseudo selector', 'elementor' ) }</ListSubheader>
-			{ stateMenuItems.map( ( { id, MenuItem: MenuItemComponent } ) => (
-				<MenuItemComponent key={ id } />
-			) ) }
+			<StateMenuItem key="normal" state={ null } styleId={ styleId } />
+			{ STATES.map( ( state ) => {
+				return <StateMenuItem key={ state } state={ state } styleId={ styleId } />;
+			} ) }
 		</Menu>
 	);
 }
 
 type StateMenuItemProps = {
 	state: StyleDefinitionState;
-	disabled?: boolean;
+	styleId: string;
 };
 
-export function StateMenuItem( { state, disabled }: StateMenuItemProps ) {
-	const { isActive, styleId } = useCssClassItem();
-	const { setId: setActiveId, setMetaState: setActiveMetaState, meta } = useStyle();
+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
-			selected={ state === activeState && isActive }
-			disabled={ disabled }
+			{ ...props }
+			selected={ isSelected }
 			onClick={ () => {
 				if ( ! isActive ) {
 					setActiveId( styleId );
@@ -101,23 +84,16 @@ export function StateMenuItem( { state, disabled }: StateMenuItemProps ) {
 	);
 }
 
-type GlobalClassMenuItemProps = {
-	text: string;
-	onClick: () => void;
-};
+function UnapplyClassMenuItem( { styleId, ...props }: { styleId: string } ) {
+	const unapplyClass = useUnapplyClass( styleId );
 
-export function GlobalClassMenuItem( { text, onClick }: GlobalClassMenuItemProps ) {
 	return (
-		<StyledMenuItem onClick={ onClick }>
-			<ListItemText primary={ text } />
+		<StyledMenuItem { ...props } onClick={ unapplyClass }>
+			<ListItemText primary="Remove" />
 		</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

@@ -5,11 +5,13 @@ import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-pr
 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 { EllipsisWithTooltip } from '@elementor/editor-ui';
 import { DotsVerticalIcon } from '@elementor/icons';
 import { createLocation } from '@elementor/locations';
 import {
@@ -25,10 +27,8 @@ import {
 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';
@@ -65,14 +65,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,6 +94,7 @@ 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 } );
@@ -105,7 +105,7 @@ export function CssClassSelector() {
 								key={ chipProps.key }
 								value={ value.label }
 								onSubmit={ renameLabel }
-								editable={ value.provider !== ELEMENTS_STYLES_PROVIDER_KEY }
+								editable={ ! value.fixed }
 								validation={ ( newLabel ) =>
 									renameValidation(
 										newLabel,
@@ -117,10 +117,12 @@ export function CssClassSelector() {
 									label={ value.label }
 									id={ value.value }
 									isActive={ isActive }
-									isGlobal={ value.color === 'global' }
+									isFixed={ value.fixed }
 									color={ isActive && value.color ? value.color : 'default' }
 									chipProps={ chipProps }
-									onClickActive={ () => handleActivate( value ) }
+									// 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 ) }
 								/>
 							</EditableFieldProvider>
 						);
@@ -135,7 +137,7 @@ type CssClassItemProps = {
 	id: string;
 	label: string;
 	isActive: boolean;
-	isGlobal: boolean;
+	isFixed?: boolean;
 	color: ChipOwnProps[ 'color' ];
 	chipProps: ReturnType< AutocompleteRenderGetTagProps >;
 	onClickActive: ( id: string ) => void;
@@ -147,7 +149,7 @@ export function CssClassItem( {
 	id,
 	label,
 	isActive,
-	isGlobal,
+	isFixed = false,
 	color: colorProp,
 	chipProps,
 	onClickActive,
@@ -163,7 +165,7 @@ export function CssClassItem( {
 	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 }
@@ -181,7 +183,7 @@ export function CssClassItem( {
 								}
 							} }
 						>
-							<ConditionalTooltipWrapper maxWidth="10ch" title={ label } />
+							<EllipsisWithTooltip maxWidth="10ch" title={ label } />
 						</EditableField>
 					}
 					variant={ isActive && ! meta.state ? 'filled' : 'standard' }
@@ -211,8 +213,8 @@ export function CssClassItem( {
 					/>
 				) }
 			</UnstableChipGroup>
-			<CssClassMenu popupState={ popupState } containerRef={ chipRef } />
-		</CssClassItemProvider>
+			<CssClassMenu styleId={ id } popupState={ popupState } isFixed={ isFixed } />
+		</>
 	);
 }
 
@@ -251,9 +253,13 @@ const isCharactersNotSupported = ( newLabel: string ) => ! VALID_SELECTOR_REGEX.
 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 +276,7 @@ function useOptions() {
 					group: provider.labels?.plural,
 				};
 			} );
-		}
-	);
+		} );
 }
 
 function useCreateActions( {

package/src/contexts/style-context.tsx

@@ -1,20 +1,43 @@
 import * as React from 'react';
 import { createContext, type Dispatch, type PropsWithChildren, useContext } from 'react';
-import { type StyleDefinition, type StyleDefinitionState, type StyleDefinitionVariant } from '@elementor/editor-styles';
+import {
+	type StyleDefinition,
+	type StyleDefinitionID,
+	type StyleDefinitionState,
+	type StyleDefinitionVariant,
+} from '@elementor/editor-styles';
+import { type StylesProvider, stylesRepository } from '@elementor/editor-styles-repository';
+
+import { StylesProviderNotFoundError } from '../errors';
 
 type ContextValue = {
-	id: StyleDefinition[ 'id' ] | null;
 	setId: Dispatch< StyleDefinition[ 'id' ] | null >;
 	meta: StyleDefinitionVariant[ 'meta' ];
 	setMetaState: Dispatch< StyleDefinitionState >;
+} & ( ContextValueWithProvider | ContextValueWithoutProvider );
+
+type ContextValueWithProvider = {
+	id: StyleDefinitionID;
+	provider: StylesProvider;
+};
+
+type ContextValueWithoutProvider = {
+	id: null;
+	provider: null;
 };
 
 const Context = createContext< ContextValue | null >( null );
 
-type Props = PropsWithChildren< ContextValue >;
+type Props = PropsWithChildren< Omit< ContextValue, 'provider' > >;
+
+export function StyleProvider( { children, ...props }: Props ) {
+	const provider = props.id === null ? null : getProviderByStyleId( props.id );
 
-export function StyleProvider( { children, id, setId, meta, setMetaState }: Props ) {
-	return <Context.Provider value={ { id, setId, meta, setMetaState } }>{ children }</Context.Provider>;
+	if ( props.id && ! provider ) {
+		throw new StylesProviderNotFoundError( { context: { styleId: props.id } } );
+	}
+
+	return <Context.Provider value={ { ...props, provider } as ContextValue }>{ children }</Context.Provider>;
 }
 
 export function useStyle() {
@@ -26,3 +49,11 @@ export function useStyle() {
 
 	return context;
 }
+
+function getProviderByStyleId( styleId: StyleDefinitionID ) {
+	const styleProvider = stylesRepository.getProviders().find( ( provider ) => {
+		return provider.actions.get().find( ( style ) => style.id === styleId );
+	} );
+
+	return styleProvider ?? null;
+}

package/src/controls-registry/control.tsx

@@ -1,18 +1,9 @@
 import * as React from 'react';
 import type { ComponentProps } from 'react';
-import { createError } from '@elementor/utils';
 
+import { ControlTypeNotFoundError } from '../errors';
 import { type ControlType, type ControlTypes, getControlByType } from './controls-registry';
 
-export type ControlTypeErrorContext = {
-	type: string;
-};
-
-const ControlTypeError = createError< ControlTypeErrorContext >( {
-	code: 'CONTROL_TYPE_NOT_FOUND',
-	message: `Control type not found.`,
-} );
-
 type IsRequired< T, K extends keyof T > = object extends Pick< T, K > ? false : true;
 
 type AnyPropertyRequired< T > = {
@@ -35,8 +26,8 @@ export const Control = < T extends ControlType >( { props, type }: ControlProps<
 	const ControlByType = getControlByType( type );
 
 	if ( ! ControlByType ) {
-		throw new ControlTypeError( {
-			context: { type },
+		throw new ControlTypeNotFoundError( {
+			context: { controlType: type },
 		} );
 	}
 

package/src/errors.ts

@@ -0,0 +1,22 @@
+import { type StyleDefinitionID } from '@elementor/editor-styles';
+import { createError } from '@elementor/utils';
+
+export const ControlTypeNotFoundError = createError< { controlType: string } >( {
+	code: 'control_type_not_found',
+	message: 'Control type not found.',
+} );
+
+export const StylesProviderNotFoundError = createError< { styleId: StyleDefinitionID } >( {
+	code: 'provider_not_found',
+	message: 'Styles provider not found.',
+} );
+
+export const StylesProviderCannotUpdatePropsError = createError< { providerKey: string } >( {
+	code: 'provider_cannot_update_props',
+	message: "Styles provider doesn't support updating props.",
+} );
+
+export const StyleNotFoundUnderProviderError = createError< { styleId: StyleDefinitionID; providerKey: string } >( {
+	code: 'style_not_found_under_provider',
+	message: 'Style not found under the provider.',
+} );

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

@@ -1,19 +1,28 @@
-import { createElementStyle, updateElementStyle, useElementStyleProps } from '@elementor/editor-elements';
+import { useEffect, useReducer } from 'react';
+import { createElementStyle, type ElementID } from '@elementor/editor-elements';
 import type { Props } from '@elementor/editor-props';
+import { getVariantByMeta, type StyleDefinition, type StyleDefinitionVariant } from '@elementor/editor-styles';
+import { type StylesProvider } from '@elementor/editor-styles-repository';
 import { __ } from '@wordpress/i18n';
 
 import { useClassesProp } from '../contexts/classes-prop-context';
 import { useElement } from '../contexts/element-context';
 import { useStyle } from '../contexts/style-context';
+import { StyleNotFoundUnderProviderError, StylesProviderCannotUpdatePropsError } from '../errors';
 
 export function useStylesFields< T extends Props >( propNames: ( keyof T & string )[] ) {
 	const { element } = useElement();
-	const { id, meta } = useStyle();
+	const { id, meta, provider } = useStyle();
 	const classesProp = useClassesProp();
 
-	const value = useElementStyleProps( {
-		elementID: element.id,
-		styleDefID: id,
+	const [ , reRender ] = useReducer( ( p ) => ! p, false );
+
+	useEffect( () => provider?.subscribe( reRender ), [ provider ] );
+
+	const value = getProps< T >( {
+		elementId: element.id,
+		styleId: id,
+		provider,
 		meta,
 		propNames,
 	} );
@@ -31,13 +40,42 @@ export function useStylesFields< T extends Props >( propNames: ( keyof T & strin
 			return;
 		}
 
-		updateElementStyle( {
-			elementId: element.id,
-			styleId: id,
-			props,
-			meta,
-		} );
+		if ( ! provider.actions.updateProps ) {
+			throw new StylesProviderCannotUpdatePropsError( { context: { providerKey: provider.key } } );
+		}
+
+		provider.actions.updateProps( { id, meta, props }, { elementId: element.id } );
 	};
 
 	return [ value, setValue ] as const;
 }
+
+type GetPropsArgs = {
+	provider: StylesProvider | null;
+	styleId: StyleDefinition[ 'id' ] | null;
+	elementId: ElementID;
+	meta: StyleDefinitionVariant[ 'meta' ];
+	propNames: string[];
+};
+
+type NullableValues< T extends Props > = {
+	[ K in keyof T ]: T[ K ] | null;
+};
+
+function getProps< T extends Props >( { styleId, elementId, provider, meta, propNames }: GetPropsArgs ) {
+	if ( ! provider || ! styleId ) {
+		return null;
+	}
+
+	const style = provider.actions.getById?.( styleId, { elementId } );
+
+	if ( ! style ) {
+		throw new StyleNotFoundUnderProviderError( { context: { styleId, providerKey: provider.key } } );
+	}
+
+	const variant = getVariantByMeta( style, meta );
+
+	return Object.fromEntries(
+		propNames.map( ( key ) => [ key, variant?.props[ key ] ?? null ] )
+	) as NullableValues< T >;
+}

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

@@ -3,9 +3,11 @@ 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 );
@@ -21,5 +23,7 @@ export const useUnapplyClass = ( classId: string ) => {
 				},
 			},
 		} );
+
+		setStyleId( null );
 	};
 };

package/src/index.ts

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

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, useContext } 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 = useContext( ClassItemContext );
-
-	if ( ! context ) {
-		throw new Error( 'useCssClassItem must be used within a CssClassItemProvider' );
-	}
-
-	return context;
-}