@elementor/editor-editing-panel 1.9.0 → 1.11.0

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { type StringPropValue } from '@elementor/editor-props';
+import { useSessionStorage } from '@elementor/session';
 import { Stack } from '@elementor/ui';
 
 import { useStyle } from '../../../contexts/style-context';
-import { useSessionStorage } from '../../../hooks/use-session-storage';
 import { useStylesField } from '../../../hooks/use-styles-field';
 import { useStylesFields } from '../../../hooks/use-styles-fields';
 import { DimensionsField } from './dimensions-field';

package/src/components/style-sections/typography-section/font-weight-field.tsx

@@ -6,11 +6,15 @@ import { __ } from '@wordpress/i18n';
 import { StylesField } from '../../../controls-registry/styles-field';
 
 const fontWeightOptions = [
-	{ label: __( 'Light - 400', 'elementor' ), value: '400' },
-	{ label: __( 'Regular - 500', 'elementor' ), value: '500' },
-	{ label: __( 'Semi Bold - 600', 'elementor' ), value: '600' },
-	{ label: __( 'Bold - 700', 'elementor' ), value: '700' },
-	{ label: __( 'Black - 900', 'elementor' ), value: '900' },
+	{ value: '100', label: __( '100 - Thin', 'elementor' ) },
+	{ value: '200', label: __( '200 - Extra Light', 'elementor' ) },
+	{ value: '300', label: __( '300 - Light', 'elementor' ) },
+	{ value: '400', label: __( '400 - Normal', 'elementor' ) },
+	{ value: '500', label: __( '500 - Medium', 'elementor' ) },
+	{ value: '600', label: __( '600 - Semi Bold', 'elementor' ) },
+	{ value: '700', label: __( '700 - Bold', 'elementor' ) },
+	{ value: '800', label: __( '800 - Extra Bold', 'elementor' ) },
+	{ value: '900', label: __( '900 - Black', 'elementor' ) },
 ];
 
 export const FontWeightField = () => {

package/src/components/style-sections/typography-section/text-alignment-field.tsx

@@ -1,33 +1,41 @@
 import * as React from 'react';
 import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { AlignCenterIcon, AlignJustifiedIcon, AlignLeftIcon, AlignRightIcon } from '@elementor/icons';
-import { Grid } from '@elementor/ui';
+import { Grid, withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { RotatedIcon } from '../layout-section/utils/rotated-icon';
 
-type Alignments = 'left' | 'center' | 'right' | 'justify';
+type Alignments = 'start' | 'center' | 'end' | 'justify';
+
+const StartIcon = withDirection( AlignLeftIcon );
+const EndIcon = withDirection( AlignRightIcon );
 
 const options: ToggleButtonGroupItem< Alignments >[] = [
 	{
-		value: 'left',
-		label: __( 'Left', 'elementor' ),
-		renderContent: ( { size } ) => <AlignLeftIcon fontSize={ size } />,
+		value: 'start',
+		label: __( 'Start', 'elementor' ),
+		renderContent: () => <RotatedIcon icon={ StartIcon } size="tiny" />,
+		showTooltip: true,
 	},
 	{
 		value: 'center',
 		label: __( 'Center', 'elementor' ),
 		renderContent: ( { size } ) => <AlignCenterIcon fontSize={ size } />,
+		showTooltip: true,
 	},
 	{
-		value: 'right',
-		label: __( 'Right', 'elementor' ),
-		renderContent: ( { size } ) => <AlignRightIcon fontSize={ size } />,
+		value: 'end',
+		label: __( 'End', 'elementor' ),
+		renderContent: () => <RotatedIcon icon={ EndIcon } size="tiny" />,
+		showTooltip: true,
 	},
 	{
 		value: 'justify',
 		label: __( 'Justify', 'elementor' ),
 		renderContent: ( { size } ) => <AlignJustifiedIcon fontSize={ size } />,
+		showTooltip: true,
 	},
 ];
 

package/src/components/style-sections/typography-section/transform-field.tsx

@@ -1,28 +1,37 @@
 import * as React from 'react';
 import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
-import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon } from '@elementor/icons';
+import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon, MinusIcon } from '@elementor/icons';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 
-type Transforms = 'capitalize' | 'uppercase' | 'lowercase';
+type Transforms = 'none' | 'capitalize' | 'uppercase' | 'lowercase';
 
 const options: ToggleButtonGroupItem< Transforms >[] = [
+	{
+		value: 'none',
+		label: __( 'None', 'elementor' ),
+		renderContent: ( { size } ) => <MinusIcon fontSize={ size } />,
+		showTooltip: true,
+	},
 	{
 		value: 'capitalize',
 		label: __( 'Capitalize', 'elementor' ),
 		renderContent: ( { size } ) => <LetterCaseIcon fontSize={ size } />,
+		showTooltip: true,
 	},
 	{
 		value: 'uppercase',
 		label: __( 'Uppercase', 'elementor' ),
 		renderContent: ( { size } ) => <LetterCaseUpperIcon fontSize={ size } />,
+		showTooltip: true,
 	},
 	{
 		value: 'lowercase',
 		label: __( 'Lowercase', 'elementor' ),
 		renderContent: ( { size } ) => <LetterCaseLowerIcon fontSize={ size } />,
+		showTooltip: true,
 	},
 ];
 
@@ -30,7 +39,7 @@ export const TransformField = () => (
 	<StylesField bind={ 'text-transform' }>
 		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 			<Grid item xs={ 6 }>
-				<ControlLabel>{ __( 'Transform', 'elementor' ) }</ControlLabel>
+				<ControlLabel>{ __( 'Text Transform', 'elementor' ) }</ControlLabel>
 			</Grid>
 			<Grid item xs={ 6 } display="flex" justifyContent="end">
 				<ToggleControl options={ options } />

package/src/components/style-tab.tsx

@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
 import { ClassesPropProvider } from '../contexts/classes-prop-context';
 import { useElement } from '../contexts/element-context';
 import { StyleProvider } from '../contexts/style-context';
-import { CssClassSelector } from './css-class-selector';
+import { CssClassSelector } from './css-classes/css-class-selector';
 import { Section } from './section';
 import { SectionsList } from './sections-list';
 import { BackgroundSection } from './style-sections/background-section/background-section';

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/controls-registry/controls-registry.tsx

@@ -4,6 +4,7 @@ import {
 	LinkControl,
 	SelectControl,
 	SizeControl,
+	SvgMediaControl,
 	TextAreaControl,
 	TextControl,
 	UrlControl,
@@ -15,7 +16,8 @@ type ControlRegistry = Record< string, { component: ControlComponent; layout: Co
 
 const controlTypes = {
 	image: { component: ImageControl, layout: 'full' },
-	text: { component: TextControl, layout: 'two-columns' },
+	'svg-media': { component: SvgMediaControl, layout: 'full' },
+	text: { component: TextControl, layout: 'full' },
 	textarea: { component: TextAreaControl, layout: 'full' },
 	size: { component: SizeControl, layout: 'two-columns' },
 	select: { component: SelectControl, layout: 'two-columns' },

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PropKeyProvider, PropProvider } from '@elementor/editor-controls';
 import { updateElementSettings, useElementSetting } from '@elementor/editor-elements';
-import { type PropKey, type PropValue } from '@elementor/editor-props';
+import { type LinkPropValue, type PropKey, type PropValue } from '@elementor/editor-props';
 
 import { useElement } from '../contexts/element-context';
 import { createTopLevelOjectType } from './create-top-level-object-type';
@@ -15,10 +15,17 @@ export const SettingsField = ( { bind, children }: Props ) => {
 	const { element, elementType } = useElement();
 
 	const settingsValue = useElementSetting< PropValue >( element.id, bind );
+
+	const linkValue = useElementSetting< PropValue >( element.id, 'link' ) as LinkPropValue;
+
 	const value = { [ bind ]: settingsValue };
 
 	const propType = createTopLevelOjectType( { schema: elementType.propsSchema } );
 
+	if ( bind === 'tag' && linkValue?.value && 'div-block' === elementType.key ) {
+		return null;
+	}
+
 	const setValue = ( newValue: Record< string, PropValue > ) => {
 		updateElementSettings( {
 			id: element.id,

package/src/dynamics/components/dynamic-selection.tsx

@@ -30,7 +30,7 @@ type OptionEntry = [ string, Option[] ];
 
 const SIZE = 'tiny';
 
-export type DynamicSelectionProps = {
+type DynamicSelectionProps = {
 	onSelect?: () => void;
 };
 

package/src/dynamics/dynamic-control.tsx

@@ -6,7 +6,7 @@ import { createTopLevelOjectType } from '../controls-registry/create-top-level-o
 import { useDynamicTag } from './hooks/use-dynamic-tag';
 import { dynamicPropTypeUtil, type DynamicPropValue } from './utils';
 
-export type DynamicControlProps = React.PropsWithChildren< {
+type DynamicControlProps = React.PropsWithChildren< {
 	bind: PropKey;
 } >;
 

package/src/dynamics/types.ts

@@ -1,5 +1,5 @@
-import { type ControlItem, type PropsSchema } from '@elementor/editor-elements';
-import { type TransformablePropType, type TransformablePropValue } from '@elementor/editor-props';
+import { type ControlItem } from '@elementor/editor-elements';
+import { type PropsSchema, type TransformablePropType, type TransformablePropValue } from '@elementor/editor-props';
 
 export type ExtendedWindow = Window & {
 	elementor?: {

package/src/dynamics/utils.ts

@@ -9,9 +9,9 @@ import { z } from '@elementor/schema';
 
 import { type DynamicPropType } from './types';
 
-export const DYNAMIC_PROP_TYPE_KEY = 'dynamic';
+const DYNAMIC_PROP_TYPE_KEY = 'dynamic';
 
-export const isDynamicPropType = ( prop: TransformablePropType ): prop is DynamicPropType =>
+const isDynamicPropType = ( prop: TransformablePropType ): prop is DynamicPropType =>
 	prop.key === DYNAMIC_PROP_TYPE_KEY;
 
 export const getDynamicPropType = ( propType: PropType ): DynamicPropType | null => {

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-persist-dynamic-value.ts

@@ -1,8 +1,8 @@
 import { type PropValue } from '@elementor/editor-props';
+import { useSessionStorage } from '@elementor/session';
 
 import { useElement } from '../contexts/element-context';
 import { type DynamicPropValue } from '../dynamics/types';
-import { useSessionStorage } from './use-session-storage';
 
 export const usePersistDynamicValue = < T extends DynamicPropValue | PropValue >( propKey: string ) => {
 	const { element } = useElement();

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

@@ -1,43 +1,185 @@
-import { createElementStyle, updateElementStyle, useElementStyleProps } from '@elementor/editor-elements';
+import { useEffect, useMemo, useReducer } from 'react';
+import {
+	createElementStyle,
+	type CreateElementStyleArgs,
+	deleteElementStyle,
+	type ElementID,
+	getElementLabel,
+} 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 { LOCAL_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
+import { undoable } from '@elementor/editor-v1-adapters';
 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 undoableUpdateStyle = useUndoableUpdateStyle();
+	const undoableCreateElementStyle = useUndoableCreateElementStyle();
+
+	const [ , reRender ] = useReducer( ( p ) => ! p, false );
+
+	useEffect( () => provider?.subscribe( reRender ), [ provider ] );
+
+	const value = getProps< T >( {
+		elementId: element.id,
+		styleId: id,
+		provider,
 		meta,
 		propNames,
 	} );
 
 	const setValue = ( props: T ) => {
 		if ( id === null ) {
-			createElementStyle( {
+			undoableCreateElementStyle( {
 				elementId: element.id,
 				classesProp,
 				meta,
 				props,
-				label: __( 'local', 'elementor' ),
 			} );
 
 			return;
 		}
 
-		updateElementStyle( {
+		undoableUpdateStyle( {
 			elementId: element.id,
 			styleId: id,
-			props,
+			provider,
 			meta,
+			props,
 		} );
 	};
 
 	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 >;
+}
+
+type UndoableCreateElementStyleArgs = Omit< CreateElementStyleArgs, 'label' >;
+
+function useUndoableCreateElementStyle() {
+	return useMemo( () => {
+		return undoable(
+			{
+				do: ( payload: UndoableCreateElementStyleArgs ) => {
+					return createElementStyle( {
+						...payload,
+						label: LOCAL_STYLES_RESERVED_LABEL,
+					} );
+				},
+
+				undo: ( { elementId }, styleId ) => {
+					deleteElementStyle( elementId, styleId );
+				},
+
+				redo: ( payload, styleId ) => {
+					return createElementStyle( {
+						...payload,
+						styleId,
+						label: LOCAL_STYLES_RESERVED_LABEL,
+					} );
+				},
+			},
+			{
+				title: ( { elementId } ) => getElementLabel( elementId ),
+				subtitle: __( 'Style edited', 'elementor' ),
+			}
+		);
+	}, [] );
+}
+
+type UndoableUpdateStyleArgs = {
+	elementId: ElementID;
+	styleId: StyleDefinition[ 'id' ];
+	provider: StylesProvider;
+	meta: StyleDefinitionVariant[ 'meta' ];
+	props: Props;
+};
+
+function useUndoableUpdateStyle() {
+	return useMemo( () => {
+		return undoable(
+			{
+				do: ( { elementId, styleId, provider, meta, props }: UndoableUpdateStyleArgs ) => {
+					if ( ! provider.actions.updateProps ) {
+						throw new StylesProviderCannotUpdatePropsError( {
+							context: { providerKey: provider.key },
+						} );
+					}
+
+					const style = provider.actions.getById( styleId, { elementId } );
+
+					const prevProps = getCurrentProps( style, meta );
+
+					provider.actions.updateProps(
+						{
+							id: styleId,
+							meta,
+							props,
+						},
+						{ elementId }
+					);
+
+					return prevProps;
+				},
+
+				undo: ( { elementId, styleId, meta, provider }, prevProps ) => {
+					provider.actions.updateProps?.( { id: styleId, meta, props: prevProps }, { elementId } );
+				},
+			},
+			{
+				title: ( { elementId } ) => getElementLabel( elementId ),
+				subtitle: __( 'Style edited', 'elementor' ),
+			}
+		);
+	}, [] );
+}
+
+function getCurrentProps( style: StyleDefinition | null, meta: StyleDefinitionVariant[ 'meta' ] ) {
+	if ( ! style ) {
+		return {};
+	}
+
+	const variant = getVariantByMeta( style, meta );
+
+	const props = variant?.props ?? {};
+
+	return structuredClone( props );
+}

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

package/src/init.ts

@@ -1,9 +1,8 @@
 import { injectIntoLogic } from '@elementor/editor';
 import { __registerPanel as registerPanel } from '@elementor/editor-panels';
-import { __privateBlockDataCommand as blockDataCommand } from '@elementor/editor-v1-adapters';
+import { blockCommand } 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,11 +18,10 @@ export default function init() {
 
 	// TODO: Move it from here once we have dynamic package.
 	initDynamics();
-	initCssClasses();
 }
 
 const blockV1Panel = () => {
-	blockDataCommand( {
+	blockCommand( {
 		command: 'panel/editor/open',
 		condition: isAtomicWidgetSelected,
 	} );

package/src/sync/types.ts

@@ -1,8 +1,9 @@
-import { type ControlItem, type PropsSchema, type V1Element } from '@elementor/editor-elements';
+import { type ControlItem, type V1Element } from '@elementor/editor-elements';
+import { type PropsSchema } from '@elementor/editor-props';
 
-export type SupportedFonts = 'system' | 'googlefonts' | 'customfonts';
+type SupportedFonts = 'system' | 'googlefonts' | 'customfonts';
 
-export type EnqueueFont = ( fontFamily: string, context?: 'preview' | 'editor' ) => void;
+type EnqueueFont = ( fontFamily: string, context?: 'preview' | 'editor' ) => void;
 
 export type ExtendedWindow = Window & {
 	elementor?: {

package/src/components/collapsible-field.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { MinusIcon, PlusIcon } from '@elementor/icons';
-import { Collapse, IconButton, Stack } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-type CollapsibleFieldProps = React.PropsWithChildren< {
-	label: React.ReactNode;
-	defaultOpen?: boolean;
-} >;
-
-export const CollapsibleField = ( { label, children, defaultOpen = false }: CollapsibleFieldProps ) => {
-	const [ open, setOpen ] = useState( defaultOpen );
-
-	const handleToggle = () => {
-		setOpen( ( prevOpen ) => ! prevOpen );
-	};
-
-	return (
-		<Stack gap={ 1.5 }>
-			<Stack direction="row" justifyContent="space-between" alignItems="center" sx={ { py: 0.5 } }>
-				{ label }
-				<IconButton
-					onClick={ handleToggle }
-					size="tiny"
-					aria-label={ open ? __( 'Close', 'elementor' ) : __( 'Expand', 'elementor' ) }
-				>
-					{ open ? <MinusIcon fontSize="tiny" /> : <PlusIcon fontSize="tiny" /> }
-				</IconButton>
-			</Stack>
-			<Collapse in={ open } unmountOnExit>
-				{ children }
-			</Collapse>
-		</Stack>
-	);
-};