@elementor/editor-editing-panel 1.0.0 → 1.2.0

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

@@ -1,16 +1,51 @@
 import * as React from 'react';
+import { StrokeControl } from '@elementor/editor-controls';
 import { __ } from '@wordpress/i18n';
-import { CollapsibleField } from '../../collapsible-field';
-import { ControlLabel } from '../../control-label';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { StrokeControl } from '../../../controls';
+import { useStylesField } from '../../../hooks/use-styles-field';
+import { AddOrRemoveContent } from '../../add-or-remove-content';
+
+const initTextStroke = {
+	$$type: 'stroke',
+	value: {
+		color: {
+			$$type: 'color',
+			value: '#000000',
+		},
+		width: {
+			$$type: 'size',
+			value: {
+				unit: 'px',
+				size: 1,
+			},
+		},
+	},
+};
 
 export const TextStrokeField = () => {
+	const [ textStroke, setTextStroke ] = useStylesField( '-webkit-text-stroke' );
+
+	const addTextStroke = () => {
+		setTextStroke( initTextStroke );
+	};
+
+	const removeTextStroke = () => {
+		setTextStroke( null );
+	};
+
+	const hasTextStroke = Boolean( textStroke );
+
 	return (
-		<StylesField bind="-webkit-text-stroke">
-			<CollapsibleField label={ <ControlLabel>{ __( 'Text Stroke', 'elementor' ) }</ControlLabel> }>
+		<AddOrRemoveContent
+			label={ __( 'Text Stroke', 'elementor' ) }
+			isAdded={ hasTextStroke }
+			onAdd={ addTextStroke }
+			onRemove={ removeTextStroke }
+		>
+			<StylesField bind={ '-webkit-text-stroke' }>
 				<StrokeControl />
-			</CollapsibleField>
-		</StylesField>
+			</StylesField>
+		</AddOrRemoveContent>
 	);
 };

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid, ToggleButton as ToggleButtonBase, ToggleButtonGroup, ToggleButtonProps } from '@elementor/ui';
+import { ControlLabel } from '@elementor/editor-controls';
 import { ItalicIcon, StrikethroughIcon, UnderlineIcon } from '@elementor/icons';
-import { ControlLabel } from '../../control-label';
+import { Grid, ToggleButton as ToggleButtonBase, ToggleButtonGroup, type ToggleButtonProps } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
 import { useStylesField } from '../../../hooks/use-styles-field';
 
 const buttonSize = 'tiny';
@@ -14,7 +15,7 @@ export const TextStyleField = () => {
 	const formats = [ fontStyle, ...( textDecoration || '' ).split( ' ' ) ];
 
 	return (
-		<Grid container spacing={ 1 } alignItems="center">
+		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 			<Grid item xs={ 6 }>
 				<ControlLabel>{ __( 'Style', 'elementor' ) }</ControlLabel>
 			</Grid>

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

@@ -1,20 +1,34 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid } from '@elementor/ui';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon } from '@elementor/icons';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ToggleControl } from '../../../controls';
-import { ControlLabel } from '../../control-label';
 
-const options = [
-	{ value: 'capitalize', label: __( 'Capitalize', 'elementor' ), icon: LetterCaseIcon },
-	{ value: 'uppercase', label: __( 'Uppercase', 'elementor' ), icon: LetterCaseUpperIcon },
-	{ value: 'lowercase', label: __( 'Lowercase', 'elementor' ), icon: LetterCaseLowerIcon },
+type Transforms = 'capitalize' | 'uppercase' | 'lowercase';
+
+const options: ToggleButtonGroupItem< Transforms >[] = [
+	{
+		value: 'capitalize',
+		label: __( 'Capitalize', 'elementor' ),
+		renderContent: ( { size } ) => <LetterCaseIcon fontSize={ size } />,
+	},
+	{
+		value: 'uppercase',
+		label: __( 'Uppercase', 'elementor' ),
+		renderContent: ( { size } ) => <LetterCaseUpperIcon fontSize={ size } />,
+	},
+	{
+		value: 'lowercase',
+		label: __( 'Lowercase', 'elementor' ),
+		renderContent: ( { size } ) => <LetterCaseLowerIcon fontSize={ size } />,
+	},
 ];
 
 export const TransformField = () => (
 	<StylesField bind={ 'text-transform' }>
-		<Grid container spacing={ 1 } alignItems="center">
+		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 			<Grid item xs={ 6 }>
 				<ControlLabel>{ __( 'Transform', 'elementor' ) }</ControlLabel>
 			</Grid>

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

@@ -1,40 +1,39 @@
 import * as React from 'react';
-import { AccordionSection } from '../../accordion-section';
 import { Divider, Stack } from '@elementor/ui';
-import { TextStyleField } from './text-style-field';
-import { __ } from '@wordpress/i18n';
+
+import { CollapsibleContent } from '../../collapsible-content';
+import { FontFamilyField } from './font-family-field';
 import { FontSizeField } from './font-size-field';
 import { FontWeightField } from './font-weight-field';
-import { TextColorField } from './text-color-field';
 import { LetterSpacingField } from './letter-spacing-field';
-import { WordSpacingField } from './word-spacing-field';
-import { CollapsibleContent } from '../../collapsible-content';
-import { TransformField } from './transform-field';
 import { TextAlignmentField } from './text-alignment-field';
+import { TextColorField } from './text-color-field';
 import { TextDirectionField } from './text-direction-field';
 import { TextStrokeField } from './text-stroke-field';
+import { TextStyleField } from './text-style-field';
+import { TransformField } from './transform-field';
+import { WordSpacingField } from './word-spacing-field';
 
 export const TypographySection = () => {
 	return (
-		<AccordionSection title={ __( 'Typography', 'elementor' ) }>
-			<Stack gap={ 1.5 }>
-				<FontWeightField />
-				<FontSizeField />
-				<Divider />
-				<TextColorField />
-				<CollapsibleContent>
-					<Stack gap={ 1.5 } sx={ { pt: 1.5 } }>
-						<LetterSpacingField />
-						<WordSpacingField />
-						<Divider />
-						<TextAlignmentField />
-						<TextStyleField />
-						<TransformField />
-						<TextDirectionField />
-						<TextStrokeField />
-					</Stack>
-				</CollapsibleContent>
-			</Stack>
-		</AccordionSection>
+		<Stack gap={ 1.5 }>
+			<FontFamilyField />
+			<FontWeightField />
+			<FontSizeField />
+			<Divider />
+			<TextColorField />
+			<CollapsibleContent>
+				<Stack gap={ 1.5 } sx={ { pt: 1.5 } }>
+					<LetterSpacingField />
+					<WordSpacingField />
+					<Divider />
+					<TextAlignmentField />
+					<TextStyleField />
+					<TransformField />
+					<TextDirectionField />
+					<TextStrokeField />
+				</Stack>
+			</CollapsibleContent>
+		</Stack>
 	);
 };

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

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { ControlLabel, SizeControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { SizeControl } from '../../../controls';
-import { ControlLabel } from '../../control-label';
 
 export const WordSpacingField = () => {
 	return (
 		<StylesField bind="word-spacing">
-			<Grid container spacing={ 1 } alignItems="center">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Word Spacing', 'elementor' ) }</ControlLabel>
 				</Grid>

package/src/components/style-tab.tsx

@@ -1,58 +1,94 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Stack } from '@elementor/ui';
-import { generateId, StyleDefinition } from '@elementor/editor-styles';
+import { useElementSetting, useElementStyles } from '@elementor/editor-elements';
+import { type ClassesPropValue, type PropKey } from '@elementor/editor-props';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
-import { getElementStyles, getElementSetting } from '@elementor/editor-elements';
+import { generateId, type StyleDefinition } from '@elementor/editor-styles';
+import { Divider } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { ClassesPropProvider } from '../contexts/classes-prop-context';
+import { useElement } from '../contexts/element-context';
 import { StyleProvider } from '../contexts/style-context';
-import { SizeSection } from './style-sections/size-section/size-section';
-import { TypographySection } from './style-sections/typography-section/typography-section';
-import { PositionSection } from './style-sections/position-section/position-section';
-import { SpacingSection } from './style-sections/spacing-section/spacing-section';
-import { EffectsSection } from './style-sections/effects-section/effects-section';
+import { CssClassSelector } from './css-class-selector';
+import { Section } from './section';
+import { SectionsList } from './sections-list';
 import { BackgroundSection } from './style-sections/background-section/background-section';
 import { BorderSection } from './style-sections/border-section/border-section';
-import { useElement } from '../contexts/element-context';
-import { ClassesPropValue, PropKey } from '@elementor/editor-props';
-import { ClassesPropProvider } from '../contexts/classes-prop-context';
+import { EffectsSection } from './style-sections/effects-section/effects-section';
+import { LayoutSection } from './style-sections/layout-section/layout-section';
+import { PositionSection } from './style-sections/position-section/position-section';
+import { SizeSection } from './style-sections/size-section/size-section';
+import { SpacingSection } from './style-sections/spacing-section/spacing-section';
+import { TypographySection } from './style-sections/typography-section/typography-section';
 
 const CLASSES_PROP_KEY = 'classes';
 
 export const StyleTab = () => {
 	const currentClassesProp = useCurrentClassesProp();
-	const [ selectedStyleDefId ] = useSelectedStyleDefId( currentClassesProp );
+	const [ activeStyleDefId, setActiveStyleDefId ] = useActiveStyleDefId( currentClassesProp );
 	const breakpoint = useActiveBreakpoint();
 
 	return (
 		<ClassesPropProvider prop={ currentClassesProp }>
-			<StyleProvider meta={ { breakpoint, state: null } } id={ selectedStyleDefId }>
-				<Stack>
-					<SpacingSection />
-					<SizeSection />
-					<PositionSection />
-					<TypographySection />
-					<BackgroundSection />
-					<BorderSection />
-					<EffectsSection />
-				</Stack>
+			<StyleProvider meta={ { breakpoint, state: null } } id={ activeStyleDefId } setId={ setActiveStyleDefId }>
+				<CssClassSelector />
+				<Divider />
+				<SectionsList>
+					<Section title={ __( 'Layout', 'elementor' ) }>
+						<LayoutSection />
+					</Section>
+					<Section title={ __( 'Spacing', 'elementor' ) }>
+						<SpacingSection />
+					</Section>
+					<Section title={ __( 'Size', 'elementor' ) }>
+						<SizeSection />
+					</Section>
+					<Section title={ __( 'Position', 'elementor' ) }>
+						<PositionSection />
+					</Section>
+					<Section title={ __( 'Typography', 'elementor' ) }>
+						<TypographySection />
+					</Section>
+					<Section title={ __( 'Background', 'elementor' ) }>
+						<BackgroundSection />
+					</Section>
+					<Section title={ __( 'Border', 'elementor' ) }>
+						<BorderSection />
+					</Section>
+					<Section title={ __( 'Effects', 'elementor' ) }>
+						<EffectsSection />
+					</Section>
+				</SectionsList>
 			</StyleProvider>
 		</ClassesPropProvider>
 	);
 };
 
-function useSelectedStyleDefId( currentClassesProp: PropKey ) {
+function useActiveStyleDefId( currentClassesProp: PropKey ) {
+	const [ activeStyledDefId, setActiveStyledDefId ] = useState< StyleDefinition[ 'id' ] | null >( null );
+
+	const fallback = useFirstElementStyleDef( currentClassesProp );
+
+	const newId = useGeneratedId();
+
+	return [ activeStyledDefId || fallback?.id || newId, setActiveStyledDefId ] as const;
+}
+
+function useFirstElementStyleDef( currentClassesProp: PropKey ) {
 	const { element } = useElement();
 
-	const [ selectedStyleDefId, setSelectedStyleDefId ] = useState< StyleDefinition[ 'id' ] >( () => {
-		const styleIds = getElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value ?? [];
-		const stylesDefs = getElementStyles( element.id ) ?? {};
+	const classesIds = useElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
+	const stylesDefs = useElementStyles( element.id );
 
-		return (
-			styleIds.find( ( id ) => id in stylesDefs ) ?? generateId( `e-${ element.id }-`, Object.keys( stylesDefs ) )
-		);
-	} );
+	return Object.values( stylesDefs ).find( ( styleDef ) => classesIds.includes( styleDef.id ) );
+}
+
+function useGeneratedId() {
+	const { element } = useElement();
+	const stylesDefs = useElementStyles( element.id );
 
-	return [ selectedStyleDefId, setSelectedStyleDefId ] as const;
+	return generateId( `e-${ element.id }-`, Object.keys( stylesDefs ) );
 }
 
 function useCurrentClassesProp(): string {

package/src/contexts/classes-prop-context.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createContext, PropsWithChildren, useContext } from 'react';
+import { createContext, type PropsWithChildren, useContext } from 'react';
 
 type ContextValue = {
 	prop: string;

package/src/contexts/element-context.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { createContext, PropsWithChildren, useContext } from 'react';
-import { ElementType, Element } from '@elementor/editor-elements';
+import { createContext, type PropsWithChildren, useContext } from 'react';
+import { type Element, type ElementType } from '@elementor/editor-elements';
 
 type ContextValue = {
 	element: Element;

package/src/contexts/style-context.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { createContext, PropsWithChildren, useContext } from 'react';
-import { StyleDefinition, StyleVariant } from '@elementor/editor-styles';
+import { createContext, type Dispatch, type PropsWithChildren, useContext } from 'react';
+import { type StyleDefinition, type StyleVariant } from '@elementor/editor-styles';
 
 type ContextValue = {
 	id: StyleDefinition[ 'id' ];
+	setId: Dispatch< StyleDefinition[ 'id' ] >;
 	meta: StyleVariant[ 'meta' ];
 };
 
@@ -11,15 +12,15 @@ const Context = createContext< ContextValue | null >( null );
 
 type Props = PropsWithChildren< ContextValue >;
 
-export function StyleProvider( { children, id, meta }: Props ) {
-	return <Context.Provider value={ { id, meta } }>{ children }</Context.Provider>;
+export function StyleProvider( { children, id, setId, meta }: Props ) {
+	return <Context.Provider value={ { id, setId, meta } }>{ children }</Context.Provider>;
 }
 
 export function useStyle() {
 	const context = useContext( Context );
 
 	if ( ! context ) {
-		throw new Error( 'UseStyleContext must be used within a StyleContextProvider' );
+		throw new Error( 'useStyle must be used within a StyleProvider' );
 	}
 
 	return context;

package/src/control-replacement.tsx

@@ -1,3 +1,3 @@
-import { createControlReplacement } from './controls';
+import { createControlReplacement } from '@elementor/editor-controls';
 
 export const { replaceControl, getControlReplacement } = createControlReplacement();

package/src/controls-actions.ts

@@ -1,7 +1,8 @@
-import { createControlActionsMenu } from './controls';
+import { createMenu } from '@elementor/menus';
+
 import PopoverAction from './popover-action';
 
-export const { useMenuItems, registerPopoverAction } = createControlActionsMenu( {
+export const controlActionsMenu = createMenu( {
 	components: {
 		PopoverAction,
 	},

package/src/controls-registry/control-type-container.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { styled, Box, BoxProps } from '@elementor/ui';
-import { ControlLayout, ControlType, getLayoutByType } from './controls-registry';
+import { Box, type BoxProps, styled } from '@elementor/ui';
+
+import { type ControlLayout, type ControlType, getLayoutByType } from './controls-registry';
 
 export const ControlTypeContainer = ( {
 	controlType,

package/src/controls-registry/control.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import type { ComponentProps } from 'react';
 import { createError } from '@elementor/utils';
-import { ControlType, ControlTypes, getControlByType } from './controls-registry';
+
+import { type ControlType, type ControlTypes, getControlByType } from './controls-registry';
 
 export type ControlTypeErrorContext = {
 	type: string;

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

@@ -1,4 +1,11 @@
-import { ControlComponent, ImageControl, SelectControl, SizeControl, TextAreaControl, TextControl } from '../controls';
+import {
+	type ControlComponent,
+	ImageControl,
+	SelectControl,
+	SizeControl,
+	TextAreaControl,
+	TextControl,
+} from '@elementor/editor-controls';
 
 export type ControlLayout = 'full' | 'two-columns';
 

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { PropKey, PropValue } from '@elementor/editor-props';
-import { useElementSetting, updateSettings } from '@elementor/editor-elements';
+import { BoundPropProvider } from '@elementor/editor-controls';
+import { updateSettings, useElementSetting } from '@elementor/editor-elements';
+import { type PropKey, type PropValue } from '@elementor/editor-props';
+
 import { useElement } from '../contexts/element-context';
-import { BoundPropProvider } from '../controls';
 
 type Props = {
 	bind: PropKey;
@@ -13,7 +14,7 @@ const SettingsField = ( { bind, children }: Props ) => {
 	const { element, elementType } = useElement();
 
 	const defaultValue = elementType.propsSchema[ bind ]?.default;
-	const settingsValue = useElementSetting( { id: element.id, bind } );
+	const settingsValue = useElementSetting( element.id, bind );
 	const value = settingsValue ?? defaultValue ?? null;
 
 	const setValue = ( newValue: PropValue ) => {

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { PropKey } from '@elementor/editor-props';
+import { BoundPropProvider } from '@elementor/editor-controls';
+import { type PropKey } from '@elementor/editor-props';
+
 import { useStylesField } from '../hooks/use-styles-field';
-import { BoundPropProvider } from '../controls';
 
 export type StylesFieldProps = {
 	bind: PropKey;

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

@@ -1,40 +1,40 @@
 import * as React from 'react';
 import { useId } from 'react';
-import { __ } from '@wordpress/i18n';
+import { ControlLabel, useBoundProp } from '@elementor/editor-controls';
 import type { Control, ControlsSection } from '@elementor/editor-elements';
 import { DatabaseIcon, SettingsIcon, XIcon } from '@elementor/icons';
 import {
 	bindPopover,
 	bindTrigger,
 	Box,
+	Divider,
 	IconButton,
 	Paper,
 	Popover,
 	Stack,
+	Tab,
+	TabPanel,
+	Tabs,
 	Typography,
 	UnstableTag as Tag,
 	usePopupState,
-	Tabs,
-	Divider,
 	useTabs,
-	Tab,
-	TabPanel,
 } from '@elementor/ui';
-import { useBoundProp } from '../../controls';
-import { DynamicPropValue, DynamicTag } from '../types';
-import { DynamicControl } from '../dynamic-control';
-import { DynamicSelection } from './dynamic-selection';
-import { ControlLabel } from '../../components/control-label';
+import { __ } from '@wordpress/i18n';
+
 import { Control as BaseControl } from '../../controls-registry/control';
+import { type ControlType, getControlByType } from '../../controls-registry/controls-registry';
+import { usePropValueHistory } from '../../hooks/use-prop-value-history';
+import { DynamicControl } from '../dynamic-control';
 import { useDynamicTag } from '../hooks/use-dynamic-tag';
-import { usePropValueHistory } from '../hooks/use-prop-value-history';
-import { ControlType, getControlByType } from '../../controls-registry/controls-registry';
+import { type DynamicPropValue, type DynamicTag } from '../types';
+import { DynamicSelection } from './dynamic-selection';
 
 const SIZE = 'tiny';
 
 export const DynamicSelectionControl = () => {
 	const { bind, value, setValue } = useBoundProp< DynamicPropValue | null >();
-	const [ propValueFromHistory ] = usePropValueHistory( bind );
+	const { getPropValue: getPropValueFromHistory } = usePropValueHistory();
 	const { name: tagName = '' } = value?.value || {};
 
 	const selectionPopoverId = useId();
@@ -43,7 +43,8 @@ export const DynamicSelectionControl = () => {
 	const dynamicTag = useDynamicTag( bind, tagName );
 
 	const removeDynamicTag = () => {
-		setValue( propValueFromHistory ?? null );
+		const propValue = getPropValueFromHistory< DynamicPropValue >( bind );
+		setValue( propValue ?? null );
 	};
 
 	if ( ! dynamicTag ) {

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { useState, Fragment } from 'react';
-import { PropKey, PropValue } from '@elementor/editor-props';
-import { SearchIcon, PhotoIcon } from '@elementor/icons';
+import { Fragment, useState } from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
+import { type PropKey, type PropValue } from '@elementor/editor-props';
+import { PhotoIcon, SearchIcon } from '@elementor/icons';
 import {
 	Box,
 	Divider,
@@ -15,12 +16,12 @@ import {
 	Typography,
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
-import { useBoundProp } from '../../controls';
+
+import { usePropValueHistory } from '../../hooks/use-prop-value-history';
 import { usePropDynamicTags } from '../hooks/use-prop-dynamic-tags';
 import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
+import { type DynamicPropValue } from '../types';
 import { isDynamicPropValue } from '../utils';
-import { usePropValueHistory } from '../hooks/use-prop-value-history';
-import { DynamicPropValue } from '../types';
 
 type Option = {
 	label: string;
@@ -39,7 +40,7 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
 	const { bind, value: currentValue, setValue } = useBoundProp< DynamicPropValue | PropValue >();
-	const [ , updatePropValueHistory ] = usePropValueHistory( bind );
+	const { setPropValue: updatePropValueHistory } = usePropValueHistory();
 
 	const isCurrentValueDynamic = isDynamicPropValue( currentValue );
 
@@ -51,7 +52,7 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 
 	const handleSetDynamicTag = ( value: string ) => {
 		if ( ! isCurrentValueDynamic ) {
-			updatePropValueHistory( currentValue );
+			updatePropValueHistory( bind, currentValue );
 		}
 
 		setValue( { $$type: 'dynamic', value: { name: value, settings: {} } } );

package/src/dynamics/dynamic-control.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { useBoundProp } from '../controls';
-import { PropKey, PropValue } from '@elementor/editor-props';
+import { BoundPropProvider, useBoundProp } from '@elementor/editor-controls';
+import { type PropKey, type PropValue } from '@elementor/editor-props';
+
 import { useDynamicTag } from './hooks/use-dynamic-tag';
-import { DynamicPropValue } from './types';
-import { BoundPropProvider } from '../controls/bound-prop-context';
+import { type DynamicPropValue } from './types';
 
 export type DynamicControlProps = React.PropsWithChildren< {
 	bind: PropKey;

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

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

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { useBoundProp } from '@elementor/editor-controls';
 import { DatabaseIcon } from '@elementor/icons';
-import { supportsDynamic } from '../utils';
-import { DynamicSelection } from '../components/dynamic-selection';
-import { useBoundProp } from '../../controls';
-import { PopoverActionProps } from '../../popover-action';
+import { __ } from '@wordpress/i18n';
+
 import { useElement } from '../../contexts/element-context';
+import { type PopoverActionProps } from '../../popover-action';
+import { DynamicSelection } from '../components/dynamic-selection';
+import { supportsDynamic } from '../utils';
 
 export const usePropDynamicAction = (): PopoverActionProps => {
 	const { bind } = useBoundProp();