@elementor/editor-editing-panel 0.17.0 → 0.19.0

package/src/controls/controls-registry.tsx

@@ -3,17 +3,26 @@ import { TextControl } from './control-types/text-control';
 import { TextAreaControl } from './control-types/text-area-control';
 import { SizeControl } from './control-types/size-control';
 import { SelectControl } from './control-types/select-control';
+import { ControlComponent } from './create-control';
 
-export const controlTypes = {
-	image: ImageControl,
-	text: TextControl,
-	textarea: TextAreaControl,
-	size: SizeControl,
-	select: SelectControl,
-} as const;
+export type ControlLayout = 'full' | 'two-columns';
 
-export type ControlTypes = typeof controlTypes;
+type ControlRegistry = Record< string, { component: ControlComponent; layout: ControlLayout } >;
 
-export type ControlType = keyof ControlTypes;
+const controlTypes = {
+	image: { component: ImageControl, layout: 'full' },
+	text: { component: TextControl, layout: 'two-columns' },
+	textarea: { component: TextAreaControl, layout: 'full' },
+	size: { component: SizeControl, layout: 'two-columns' },
+	select: { component: SelectControl, layout: 'two-columns' },
+} as const satisfies ControlRegistry;
 
-export const getControlByType = ( type: ControlType ) => controlTypes[ type ];
+export type ControlType = keyof typeof controlTypes;
+
+export type ControlTypes = {
+	[ key in ControlType ]: ( typeof controlTypes )[ key ][ 'component' ];
+};
+
+export const getControlByType = ( type: ControlType ) => controlTypes[ type ]?.component;
+
+export const getLayoutByType = ( type: ControlType ) => controlTypes[ type ].layout;

package/src/controls/create-control-replacement.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { PropValue } from './props/types';
+import { ComponentType, createContext, useContext } from 'react';
+import { useControl } from './control-context';
+
+export type ReplaceWhenParams = {
+	value: PropValue;
+};
+
+export type CreateControlReplacement = {
+	component: ComponentType;
+	condition: ( { value }: ReplaceWhenParams ) => boolean;
+};
+
+const ControlReplacementContext = createContext< CreateControlReplacement | undefined >( undefined );
+
+export const ControlReplacementProvider = ( {
+	component,
+	condition,
+	children,
+}: React.PropsWithChildren< CreateControlReplacement > ) => {
+	return (
+		<ControlReplacementContext.Provider value={ { component, condition } }>
+			{ children }
+		</ControlReplacementContext.Provider>
+	);
+};
+export const useControlReplacement = () => {
+	const { value } = useControl();
+	const controlReplacement = useContext( ControlReplacementContext );
+
+	let shouldReplace = false;
+
+	try {
+		shouldReplace = !! controlReplacement?.condition( { value } ) && !! controlReplacement.component;
+	} catch {}
+
+	return shouldReplace ? controlReplacement?.component : undefined;
+};
+
+export const createControlReplacement = () => {
+	let controlReplacement: CreateControlReplacement;
+
+	function replaceControl( { component, condition }: CreateControlReplacement ) {
+		controlReplacement = { component, condition };
+	}
+
+	function getControlReplacement() {
+		return controlReplacement;
+	}
+
+	return { replaceControl, getControlReplacement };
+};

package/src/controls/create-control.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { ComponentProps, ComponentType } from 'react';
+import { useControlReplacement } from './create-control-replacement';
+import { ErrorBoundary } from '@elementor/ui';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyComponentType = ComponentType< any >;
+
+type Options = {
+	supportsReplacements?: boolean;
+};
+
+const brandSymbol = Symbol( 'control' );
+
+export type ControlComponent< TComponent extends AnyComponentType = AnyComponentType > = TComponent & {
+	[ brandSymbol ]: true;
+};
+
+export function createControl< T extends AnyComponentType >(
+	Component: T,
+	{ supportsReplacements = true }: Options = {}
+) {
+	return ( ( props: ComponentProps< T > ) => {
+		const ControlReplacement = useControlReplacement();
+
+		if ( ControlReplacement && supportsReplacements ) {
+			return (
+				<ErrorBoundary fallback={ null }>
+					<ControlReplacement { ...props } />
+				</ErrorBoundary>
+			);
+		}
+
+		return (
+			<ErrorBoundary fallback={ null }>
+				<Component { ...props } />
+			</ErrorBoundary>
+		);
+	} ) as ControlComponent< T >;
+}

package/src/controls/hooks/use-style-control.ts

@@ -1,11 +1,11 @@
-import { useElementContext } from '../../contexts/element-context';
+import { useElement } from '../providers/element-provider';
 import { useStyleContext } from '../../contexts/style-context';
 import { useElementStyleProp } from '../../hooks/use-element-style-prop';
 import { updateStyle } from '../../sync/update-style';
-import { PropKey, PropValue } from '../../types';
+import { PropKey, PropValue } from '../props/types';
 
 export const useStyleControl = < T extends PropValue >( propName: PropKey ) => {
-	const { element } = useElementContext();
+	const { element } = useElement();
 	const { selectedStyleDef, selectedMeta, selectedClassesProp } = useStyleContext();
 
 	const value = useElementStyleProp< T >( {

package/src/{hooks → controls/hooks}/use-widget-settings.ts

@@ -1,6 +1,6 @@
 import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';
-import { PropValue } from '../types';
 import getContainer from '../sync/get-container';
+import { PropValue } from '../props/types';
 
 export const useWidgetSettings = ( { id, bind }: { id: string; bind: string } ): PropValue => {
 	return useListenTo(

package/src/{props → controls/props}/is-transformable.ts

@@ -1,8 +1,7 @@
 import { z } from '@elementor/schema';
 
 // TODO: Move this file content a shared package.
-
-export const transformableSchema = z.object( {
+const transformableSchema = z.object( {
 	$$type: z.string(),
 	value: z.any(),
 } );

package/src/controls/props/types.ts

@@ -0,0 +1,51 @@
+type PropTypeKey = string;
+
+type BasePropType = {
+	default: PropValue;
+	settings: Record< string, unknown >;
+	meta: Record< string, unknown >;
+};
+
+export type PlainPropType = BasePropType & {
+	kind: 'plain';
+	key: PropTypeKey;
+};
+
+export type ArrayPropType = BasePropType & {
+	kind: 'array';
+	key: PropTypeKey;
+	item_prop_type: PropType | null;
+};
+
+export type ObjectPropType = BasePropType & {
+	kind: 'object';
+	key: PropTypeKey;
+	shape: Record< string, PropType >;
+};
+
+export type TransformablePropType = PlainPropType | ArrayPropType | ObjectPropType;
+
+export type UnionPropType = BasePropType & {
+	kind: 'union';
+	prop_types: Record< string, TransformablePropType >;
+};
+
+export type PropType = TransformablePropType | UnionPropType;
+
+type MaybeArray< T > = T | T[];
+
+export type TransformablePropValue< Type extends string, Value = unknown > = {
+	$$type: Type;
+	value: Value;
+	disabled?: boolean;
+};
+
+export type PlainPropValue = MaybeArray< string | number | boolean | object | null | undefined >;
+
+export type PropValue = PlainPropValue | TransformablePropValue< string >;
+
+export type PropKey = string;
+
+export type Props = Record< PropKey, PropValue >;
+
+export type PlainProps = Record< PropKey, PlainPropValue >;

package/src/{contexts/element-context.tsx → controls/providers/element-provider.tsx}

@@ -11,19 +11,19 @@ const Context = createContext< ContextValue | null >( null );
 
 type Props = {
 	element: Element;
-	elementType: ElementType;
 	children?: ReactNode;
+	elementType: ElementType;
 };
 
-export function ElementContext( { children, element, elementType }: Props ) {
+export function ElementProvider( { children, element, elementType }: Props ) {
 	return <Context.Provider value={ { element, elementType } }>{ children }</Context.Provider>;
 }
 
-export function useElementContext() {
+export function useElement() {
 	const context = useContext( Context );
 
 	if ( ! context ) {
-		throw new Error( 'useElementContext must be used within a ElementContextProvider' );
+		throw new Error( 'useElement must be used within a ElementProvider' );
 	}
 
 	return context;

package/src/controls/settings-control.tsx

@@ -1,21 +1,20 @@
 import * as React from 'react';
 import { ControlContext } from './control-context';
-import { PropKey, PropValue } from '../types';
-import { useElementContext } from '../contexts/element-context';
-import { useWidgetSettings } from '../hooks/use-widget-settings';
-import { updateSettings } from '../sync/update-settings';
+import { PropKey, PropValue } from './props/types';
+import { useElement } from './providers/element-provider';
+import { useWidgetSettings } from './hooks/use-widget-settings';
+import { updateSettings } from './sync/update-settings';
 import { ControlLabel } from '../components/control-label';
-import { ControlContainer } from './components/control-container';
 
 type Props = {
 	bind: PropKey;
 	children: React.ReactNode;
 };
 
-export const SettingsControlProvider = ( { bind, children }: Props ) => {
-	const { element, elementType } = useElementContext();
+const SettingsControl = ( { bind, children }: Props ) => {
+	const { element, elementType } = useElement();
 
-	const defaultValue = elementType.propsSchema[ bind ]?.type.default;
+	const defaultValue = elementType.propsSchema[ bind ]?.default;
 	const settingsValue = useWidgetSettings( { id: element.id, bind } );
 	const value = settingsValue ?? defaultValue ?? null;
 
@@ -31,12 +30,6 @@ export const SettingsControlProvider = ( { bind, children }: Props ) => {
 	return <ControlContext.Provider value={ { setValue, value, bind } }>{ children }</ControlContext.Provider>;
 };
 
-const SettingsControl = ( { children, bind }: Props ) => (
-	<SettingsControlProvider bind={ bind }>
-		<ControlContainer flexWrap="wrap">{ children }</ControlContainer>
-	</SettingsControlProvider>
-);
-
 // TODO: When we start using useControl inside the label component, we should create a new component for it,
 // and keep ControlLabel as a simple label component without context.
 SettingsControl.Label = ControlLabel;

package/src/controls/style-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PropKey } from '../types';
+import { PropKey } from './props/types';
 import { ControlContext } from '../controls/control-context';
 import { ControlLabel } from '../components/control-label';
 import { useStyleControl } from './hooks/use-style-control';

package/src/{sync → controls/sync}/get-container.ts

@@ -1,4 +1,4 @@
-import { ExtendedWindow } from './types';
+import { ExtendedWindow } from '../../sync/types';
 
 export default function getContainer( id: string ) {
 	const extendedWindow = window as unknown as ExtendedWindow;

package/src/{sync → controls/sync}/update-settings.ts

@@ -1,5 +1,5 @@
 import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
-import { Props } from '../types';
+import { Props } from '../props/types';
 import getContainer from './get-container';
 
 export const updateSettings = ( { id, props }: { id: string; props: Props } ) => {

package/src/controls/types.ts

@@ -0,0 +1,39 @@
+import { PropType } from './props/types';
+
+export type ElementID = string;
+
+export type Element = {
+	id: ElementID;
+	type: string;
+};
+
+export type ElementType = {
+	key: string;
+	controls: ControlItem[];
+	propsSchema: PropsSchema;
+	title: string;
+};
+
+export type ControlsSection = {
+	type: 'section';
+	value: {
+		description?: string;
+		label: string;
+		items: ControlItem[];
+	};
+};
+
+export type Control = {
+	type: 'control';
+	value: {
+		bind: string;
+		label?: string;
+		description?: string;
+		type: string;
+		props: Record< string, unknown >;
+	};
+};
+
+export type ControlItem = ControlsSection | Control;
+
+export type PropsSchema = Record< Control[ 'value' ][ 'bind' ], PropType >;

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

@@ -4,7 +4,7 @@ import { useControl } from '../../controls/control-context';
 import { DynamicPropValue, DynamicTag } from '../types';
 import { DynamicControl } from '../dynamic-control';
 import { DatabaseIcon, SettingsIcon, XIcon } from '@elementor/icons';
-import type { Control, ControlsSection } from '../../types';
+import type { Control, ControlsSection } from '../../controls/types';
 import { DynamicSelection } from './dynamic-selection';
 import { ControlType, getControlByType } from '../../controls/controls-registry';
 import { ControlLabel } from '../../components/control-label';
@@ -51,7 +51,7 @@ export const DynamicSelectionControl = () => {
 	}
 
 	return (
-		<Box sx={ { width: '100%' } }>
+		<Box>
 			<Tag
 				fullWidth
 				showActionsOnHover

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

@@ -1,9 +1,5 @@
 import * as React from 'react';
 import { useState, Fragment } from 'react';
-import { useControl } from '../../controls/control-context';
-import { DynamicPropValue } from '../types';
-import { usePropDynamicTags } from '../hooks/use-prop-dynamic-tags';
-import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
 import { SearchIcon, PhotoIcon } from '@elementor/icons';
 import {
 	Box,
@@ -18,9 +14,13 @@ import {
 	Typography,
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
-import { PropKey, PropValue } from '../../types';
+import { useControl } from '../../controls/control-context';
+import { usePropDynamicTags } from '../hooks/use-prop-dynamic-tags';
+import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
 import { isDynamicPropValue } from '../utils';
 import { usePropValueHistory } from '../hooks/use-prop-value-history';
+import { DynamicPropValue } from '../types';
+import { PropKey, PropValue } from '../../controls/props/types';
 
 type Option = {
 	label: string;
@@ -54,7 +54,7 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 			updatePropValueHistory( currentValue );
 		}
 
-		setValue( { $$type: 'dynamic', value: { name: value } } );
+		setValue( { $$type: 'dynamic', value: { name: value, settings: {} } } );
 
 		onSelect?.();
 	};

package/src/dynamics/dynamic-control.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ControlContext, useControl } from '../controls/control-context';
-import { PropKey, PropValue } from '../types';
+import { PropKey, PropValue } from '../controls/props/types';
 import { useDynamicTag } from './hooks/use-dynamic-tag';
 import { DynamicPropValue } from './types';
 
@@ -18,7 +18,7 @@ export const DynamicControl = ( { bind, children }: DynamicControlProps ) => {
 		throw new Error( `Dynamic tag ${ name } not found` );
 	}
 
-	const defaultValue = dynamicTag.props_schema[ bind ]?.type.default;
+	const defaultValue = dynamicTag.props_schema[ bind ]?.default;
 	const dynamicValue = settings?.[ bind ] ?? defaultValue;
 
 	const setDynamicValue = ( newValue: PropValue ) => {

package/src/dynamics/hooks/use-dynamic-tag.ts

@@ -1,7 +1,7 @@
+import { useMemo } from 'react';
 import { usePropDynamicTags } from './use-prop-dynamic-tags';
+import { PropKey } from '../../controls/props/types';
 import { DynamicTag } from '../types';
-import { PropKey } from '../../types';
-import { useMemo } from 'react';
 
 export const useDynamicTag = ( propName: PropKey, tagName: string ): DynamicTag | null => {
 	const dynamicTags = usePropDynamicTags( propName );

package/src/dynamics/hooks/use-prop-dynamic-action.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { useElement } from '../../controls/providers/element-provider';
+import { supportsDynamic } from '../utils';
+import { DynamicSelection } from '../components/dynamic-selection';
+import { DatabaseIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+import { useControl } from '../../controls/control-context';
+import { PopoverActionProps } from '../../controls/control-actions/actions/popover-action';
+
+export const usePropDynamicAction = (): PopoverActionProps => {
+	const { bind } = useControl();
+	const { elementType } = useElement();
+
+	const propType = elementType.propsSchema[ bind ];
+	const visible = !! propType && supportsDynamic( propType );
+
+	return {
+		visible,
+		icon: DatabaseIcon,
+		title: __( 'Dynamic Tags', 'elementor' ),
+		popoverContent: ( { closePopover } ) => <DynamicSelection onSelect={ closePopover } />,
+	};
+};

package/src/dynamics/hooks/use-prop-dynamic-tags.ts

@@ -1,18 +1,18 @@
 import { useMemo } from 'react';
-import { useElementContext } from '../../contexts/element-context';
+import { useElement } from '../../controls/providers/element-provider';
 import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
-import { PropKey } from '../../types';
-import { isDynamicType } from '../utils';
+import { PropKey } from '../../controls/props/types';
+import { getDynamicPropType } from '../utils';
 
 export const usePropDynamicTags = ( propName: PropKey ) => {
 	let categories: string[] = [];
 
-	const { elementType } = useElementContext();
+	const { elementType } = useElement();
 
-	const propSchema = elementType.propsSchema?.[ propName ];
+	const propType = elementType.propsSchema?.[ propName ];
 
-	if ( propSchema ) {
-		const propDynamicType = propSchema.additional_types.find( isDynamicType );
+	if ( propType ) {
+		const propDynamicType = getDynamicPropType( propType );
 
 		categories = propDynamicType?.settings.categories || [];
 	}

package/src/dynamics/hooks/use-prop-value-history.ts

@@ -1,11 +1,11 @@
-import { useElementContext } from '../../contexts/element-context';
-import { PropValue } from '../../types';
+import { PropValue } from '../../controls/props/types';
+import { useElement } from '../../controls/providers/element-provider';
 
 export const PROPS_VALUES_HISTORY_KEY = 'elementor/dynamic/non-dynamic-values-history';
 
 export const usePropValueHistory = ( path: string ) => {
 	const valuesHistory = getValues();
-	const { element } = useElementContext();
+	const { element } = useElement();
 	const key = `${ element.id }-${ path }`;
 
 	const value = valuesHistory[ key ] ?? null;

package/src/dynamics/init.ts

@@ -1,10 +1,19 @@
 import { DynamicSelectionControl } from './components/dynamic-selection-control';
-import { replaceControl } from '../controls/control-replacement';
 import { isDynamicPropValue } from './utils';
+import { usePropDynamicAction } from './hooks/use-prop-dynamic-action';
+import { controlActionsMenu } from '../controls/control-actions/control-actions-menu';
+import { replaceControl } from '../control-replacement';
+
+const { registerPopoverAction } = controlActionsMenu;
 
 export const init = () => {
 	replaceControl( {
 		component: DynamicSelectionControl,
 		condition: ( { value } ) => isDynamicPropValue( value ),
 	} );
+
+	registerPopoverAction( {
+		id: 'dynamic-tags',
+		useProps: usePropDynamicAction,
+	} );
 };

package/src/dynamics/types.ts

@@ -1,4 +1,5 @@
-import { ControlItem, PropsSchema, TransformablePropValue } from '../types';
+import { ControlItem, PropsSchema } from '../controls/types';
+import { TransformablePropType, TransformablePropValue } from '../controls/props/types';
 
 export type ExtendedWindow = Window & {
 	elementor?: {
@@ -22,11 +23,14 @@ export type DynamicTag = {
 	props_schema: PropsSchema;
 };
 
-export type DynamicPropType = {
+export type DynamicPropType = TransformablePropType & {
 	key: 'dynamic';
 	settings: {
 		categories: string[];
 	};
 };
 
-export type DynamicPropValue = TransformablePropValue< { name: string; settings?: Record< string, unknown > } >;
+export type DynamicPropValue = TransformablePropValue<
+	'dynamic',
+	{ name: string; settings?: Record< string, unknown > }
+>;

package/src/dynamics/utils.ts

@@ -1,9 +1,22 @@
-import { AdditionalPropType, PropValue } from '../types';
+import { PropType, PropValue, TransformablePropType } from '../controls/props/types';
 import { DynamicPropType, DynamicPropValue } from './types';
-import { isTransformable } from '../props/is-transformable';
+import { isTransformable } from '../controls/props/is-transformable';
 
-export const isDynamicType = ( prop: AdditionalPropType ): prop is DynamicPropType => prop.key === 'dynamic';
+const DYNAMIC_PROP_TYPE_KEY = 'dynamic';
+
+export const isDynamicPropType = ( prop: TransformablePropType ): prop is DynamicPropType =>
+	prop.key === DYNAMIC_PROP_TYPE_KEY;
+
+export const getDynamicPropType = ( propType: PropType ): DynamicPropType | null => {
+	const dynamicPropType = propType.kind === 'union' && propType.prop_types[ DYNAMIC_PROP_TYPE_KEY ];
+
+	return dynamicPropType && isDynamicPropType( dynamicPropType ) ? dynamicPropType : null;
+};
 
 export const isDynamicPropValue = ( prop: PropValue ): prop is DynamicPropValue => {
-	return isTransformable( prop ) && prop.$$type === 'dynamic';
+	return isTransformable( prop ) && prop.$$type === DYNAMIC_PROP_TYPE_KEY;
+};
+
+export const supportsDynamic = ( propType: PropType ): boolean => {
+	return !! getDynamicPropType( propType );
 };

package/src/hooks/use-element-style-prop.ts

@@ -1,7 +1,8 @@
 import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';
-import { ElementID, PropKey, PropValue } from '../types';
-import { getElementStyles } from '../sync/get-element-styles';
 import { StyleDefinition, StyleDefinitionID, StyleVariant } from '@elementor/editor-style';
+import { PropKey, PropValue } from '../controls/props/types';
+import { ElementID } from '../controls/types';
+import { getElementStyles } from '../sync/get-element-styles';
 
 export type UseElementStylePropArgs = {
 	elementID: ElementID;

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

@@ -1,6 +1,6 @@
 import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
 import { getElementStyles } from '../sync/get-element-styles';
-import { ElementID } from '../types';
+import { ElementID } from '../controls/types';
 
 export const useElementStyles = ( elementID: ElementID ) => {
 	return useListenTo(

package/src/hooks/use-element-type.ts

@@ -1,6 +1,6 @@
 import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
 import getWidgetsCache from '../sync/get-widgets-cache';
-import { ElementType } from '../types';
+import { ElementType } from '../controls/types';
 
 export default function useElementType( type?: string ) {
 	return useListenTo(

package/src/index.ts

@@ -1,5 +1,7 @@
-export { replaceControl } from './controls/control-replacement';
+export type { PopoverActionProps } from './controls/control-actions/actions/popover-action';
+export { replaceControl } from './control-replacement';
 export { useControl } from './controls/control-context';
+export { controlActionsMenu } from './controls/control-actions/control-actions-menu';
 
 import init from './init';
 

package/src/sync/get-element-styles.ts

@@ -1,6 +1,6 @@
-import getContainer from './get-container';
-import { ElementID } from '../types';
 import { StyleDefinition } from '@elementor/editor-style';
+import { ElementID } from '../controls/types';
+import getContainer from '../controls/sync/get-container';
 
 export const getElementStyles = ( elementID: ElementID ): Record< string, StyleDefinition > | null => {
 	const container = getContainer( elementID );

package/src/sync/get-selected-elements.ts

@@ -1,5 +1,5 @@
 import { ExtendedWindow } from './types';
-import { Element } from '../types';
+import { Element } from '../controls/types';
 
 export default function getSelectedElements(): Element[] {
 	const extendedWindow = window as unknown as ExtendedWindow;

package/src/sync/types.ts

@@ -1,5 +1,6 @@
-import { ControlItem, PropsSchema, PropValue } from '../types';
 import { StyleDefinition, StyleDefinitionID } from '@elementor/editor-style';
+import { ControlItem, PropsSchema } from '../controls/types';
+import { PropValue } from '../controls/props/types';
 
 export type ExtendedWindow = Window & {
 	elementor?: {

package/src/sync/update-style.ts

@@ -1,7 +1,8 @@
 import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
-import { ElementID, PropKey, Props } from '../types';
-import getContainer from './get-container';
 import { StyleDefinitionID, StyleVariant } from '@elementor/editor-style';
+import getContainer from '../controls/sync/get-container';
+import { PropKey, Props } from '../controls/props/types';
+import { ElementID } from '../controls/types';
 
 export type UpdateStyleProps = {
 	elementID: ElementID;