@elementor/editor-editing-panel 0.19.0 → 1.1.0

package/src/components/style-tab.tsx

@@ -1,37 +1,97 @@
 import * as React from 'react';
-import { StyleContext } from '../contexts/style-context';
-import { useElement } from '../controls/providers/element-provider';
-import { useElementStyles } from '../hooks/use-element-styles';
-import { Stack } from '@elementor/ui';
-import { SizeSection } from './style-sections/size-section';
-import { TypographySection } from './style-sections/typography-section/typography-section';
+import { useState } from 'react';
+import { useElementSetting, useElementStyles } from '@elementor/editor-elements';
+import { type ClassesPropValue, type PropKey } from '@elementor/editor-props';
+import { useActiveBreakpoint } from '@elementor/editor-responsive';
+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 { CssClassSelectorSection } from './css-class-selector-section';
+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 { 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 { StyleDefinition } from '@elementor/editor-style';
+import { SizeSection } from './style-sections/size-section/size-section';
 import { SpacingSection } from './style-sections/spacing-section/spacing-section';
-import { EffectsSection } from './style-sections/effects-section/effects-section';
-import { BackgroundSection } from './style-sections/background-section/background-section';
+import { TypographySection } from './style-sections/typography-section/typography-section';
 
 const CLASSES_PROP_KEY = 'classes';
 
 export const StyleTab = () => {
-	const styleDefinition = useStyleDefinition();
-	const classesProp = useClassesProp();
+	const currentClassesProp = useCurrentClassesProp();
+	const [ activeStyleDefId, setActiveStyleDefId ] = useActiveStyleDefId( currentClassesProp );
+	const breakpoint = useActiveBreakpoint();
 
 	return (
-		<StyleContext selectedStyleDef={ styleDefinition } selectedClassesProp={ classesProp }>
-			<Stack>
-				<SizeSection />
-				<PositionSection />
-				<TypographySection />
-				<BackgroundSection />
-				<SpacingSection />
-				<EffectsSection />
-			</Stack>
-		</StyleContext>
+		<ClassesPropProvider prop={ currentClassesProp }>
+			<StyleProvider meta={ { breakpoint, state: null } } id={ activeStyleDefId } setId={ setActiveStyleDefId }>
+				<CssClassSelectorSection />
+				<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 useClassesProp(): string {
+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 classesIds = useElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
+	const stylesDefs = useElementStyles( element.id );
+
+	return Object.values( stylesDefs ).find( ( styleDef ) => classesIds.includes( styleDef.id ) );
+}
+
+function useGeneratedId() {
+	const { element } = useElement();
+	const stylesDefs = useElementStyles( element.id );
+
+	return generateId( `e-${ element.id }-`, Object.keys( stylesDefs ) );
+}
+
+function useCurrentClassesProp(): string {
 	const { elementType } = useElement();
 
 	const prop = Object.entries( elementType.propsSchema ).find(
@@ -44,10 +104,3 @@ function useClassesProp(): string {
 
 	return prop[ 0 ];
 }
-
-function useStyleDefinition(): StyleDefinition | null {
-	const { element } = useElement();
-	const elementStyles = useElementStyles( element.id );
-
-	return Object.values( elementStyles || {} )[ 0 ] ?? null;
-}

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { createContext, type PropsWithChildren, useContext } from 'react';
+
+type ContextValue = {
+	prop: string;
+};
+
+const Context = createContext< ContextValue | null >( null );
+
+type Props = PropsWithChildren< ContextValue >;
+
+export function ClassesPropProvider( { children, prop }: Props ) {
+	return <Context.Provider value={ { prop } }>{ children }</Context.Provider>;
+}
+
+export function useClassesProp() {
+	const context = useContext( Context );
+
+	if ( ! context ) {
+		throw new Error( 'useClassesProp must be used within a ClassesPropProvider' );
+	}
+
+	return context.prop;
+}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { createContext, ReactNode, useContext } from 'react';
-import { Element, ElementType } from '../types';
+import { createContext, type PropsWithChildren, useContext } from 'react';
+import { type Element, type ElementType } from '@elementor/editor-elements';
 
 type ContextValue = {
 	element: Element;
@@ -9,11 +9,7 @@ type ContextValue = {
 
 const Context = createContext< ContextValue | null >( null );
 
-type Props = {
-	element: Element;
-	children?: ReactNode;
-	elementType: ElementType;
-};
+type Props = PropsWithChildren< ContextValue >;
 
 export function ElementProvider( { children, element, elementType }: Props ) {
 	return <Context.Provider value={ { element, elementType } }>{ children }</Context.Provider>;

package/src/contexts/style-context.tsx

@@ -1,39 +1,26 @@
 import * as React from 'react';
-import { createContext, ReactNode, useContext } from 'react';
-import { useActiveBreakpoint } from '@elementor/editor-responsive';
-import { StyleDefinition, StyleVariant } from '@elementor/editor-style';
+import { createContext, type Dispatch, type PropsWithChildren, useContext } from 'react';
+import { type StyleDefinition, type StyleVariant } from '@elementor/editor-styles';
 
 type ContextValue = {
-	selectedStyleDef: StyleDefinition | null;
-	selectedMeta: StyleVariant[ 'meta' ];
-	selectedClassesProp: string;
+	id: StyleDefinition[ 'id' ];
+	setId: Dispatch< StyleDefinition[ 'id' ] >;
+	meta: StyleVariant[ 'meta' ];
 };
 
 const Context = createContext< ContextValue | null >( null );
 
-type Props = {
-	children: ReactNode;
-	selectedStyleDef: StyleDefinition | null;
-	selectedClassesProp: string;
-};
-
-export function StyleContext( { children, selectedStyleDef, selectedClassesProp }: Props ) {
-	const breakpoint = useActiveBreakpoint();
-	// TODO: Handle state when we support it.
-	const selectedMeta = { breakpoint, state: null } as const;
+type Props = PropsWithChildren< ContextValue >;
 
-	return (
-		<Context.Provider value={ { selectedStyleDef, selectedMeta, selectedClassesProp } }>
-			{ children }
-		</Context.Provider>
-	);
+export function StyleProvider( { children, id, setId, meta }: Props ) {
+	return <Context.Provider value={ { id, setId, meta } }>{ children }</Context.Provider>;
 }
 
-export function useStyleContext() {
+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/create-control-replacement';
+import { createControlReplacement } from '@elementor/editor-controls';
 
 export const { replaceControl, getControlReplacement } = createControlReplacement();

package/src/{controls/control-actions/control-actions-menu.ts → controls-actions.ts}

@@ -1,6 +1,7 @@
-import PopoverAction from './actions/popover-action';
 import { createMenu } from '@elementor/menus';
 
+import PopoverAction from './popover-action';
+
 export const controlActionsMenu = createMenu( {
 	components: {
 		PopoverAction,

package/src/{controls/components → 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 → 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 → controls-registry}/controls-registry.tsx

@@ -1,9 +1,11 @@
-import { ImageControl } from './control-types/image-control';
-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';
+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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+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';
+
+type Props = {
+	bind: PropKey;
+	children: React.ReactNode;
+};
+
+const SettingsField = ( { bind, children }: Props ) => {
+	const { element, elementType } = useElement();
+
+	const defaultValue = elementType.propsSchema[ bind ]?.default;
+	const settingsValue = useElementSetting( element.id, bind );
+	const value = settingsValue ?? defaultValue ?? null;
+
+	const setValue = ( newValue: PropValue ) => {
+		updateSettings( {
+			id: element.id,
+			props: {
+				[ bind ]: newValue,
+			},
+		} );
+	};
+
+	return (
+		<BoundPropProvider setValue={ setValue } value={ value } bind={ bind }>
+			{ children }
+		</BoundPropProvider>
+	);
+};
+
+export { SettingsField };

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { BoundPropProvider } from '@elementor/editor-controls';
+import { type PropKey } from '@elementor/editor-props';
+
+import { useStylesField } from '../hooks/use-styles-field';
+
+export type StylesFieldProps = {
+	bind: PropKey;
+	children: React.ReactNode;
+};
+
+export const StylesField = ( { bind, children }: StylesFieldProps ) => {
+	const [ value, setValue ] = useStylesField( bind );
+
+	return (
+		<BoundPropProvider setValue={ setValue } value={ value } bind={ bind }>
+			{ children }
+		</BoundPropProvider>
+	);
+};

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

@@ -1,40 +1,40 @@
 import * as React from 'react';
 import { useId } from 'react';
-import { useControl } from '../../controls/control-context';
-import { DynamicPropValue, DynamicTag } from '../types';
-import { DynamicControl } from '../dynamic-control';
+import { ControlLabel, useBoundProp } from '@elementor/editor-controls';
+import type { Control, ControlsSection } from '@elementor/editor-elements';
 import { DatabaseIcon, SettingsIcon, XIcon } from '@elementor/icons';
-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';
-import { Control as BaseControl } from '../../controls/control';
-import { useDynamicTag } from '../hooks/use-dynamic-tag';
 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 { __ } from '@wordpress/i18n';
-import { usePropValueHistory } from '../hooks/use-prop-value-history';
+
+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 { type DynamicPropValue, type DynamicTag } from '../types';
+import { DynamicSelection } from './dynamic-selection';
 
 const SIZE = 'tiny';
 
 export const DynamicSelectionControl = () => {
-	const { bind, value, setValue } = useControl< DynamicPropValue | null >();
-	const [ propValueFromHistory ] = usePropValueHistory( bind );
+	const { bind, value, setValue } = useBoundProp< DynamicPropValue | null >();
+	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,6 +1,8 @@
 import * as React from 'react';
-import { useState, Fragment } from 'react';
-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,
@@ -14,13 +16,12 @@ import {
 	Typography,
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
-import { useControl } from '../../controls/control-context';
+
+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';
-import { PropKey, PropValue } from '../../controls/props/types';
 
 type Option = {
 	label: string;
@@ -38,8 +39,8 @@ export type DynamicSelectionProps = {
 export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
-	const { bind, value: currentValue, setValue } = useControl< DynamicPropValue | PropValue >();
-	const [ , updatePropValueHistory ] = usePropValueHistory( bind );
+	const { bind, value: currentValue, setValue } = useBoundProp< DynamicPropValue | PropValue >();
+	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,15 +1,16 @@
 import * as React from 'react';
-import { ControlContext, useControl } from '../controls/control-context';
-import { PropKey, PropValue } from '../controls/props/types';
+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 { type DynamicPropValue } from './types';
 
 export type DynamicControlProps = React.PropsWithChildren< {
 	bind: PropKey;
 } >;
 
 export const DynamicControl = ( { bind, children }: DynamicControlProps ) => {
-	const { value, setValue, bind: propName } = useControl< DynamicPropValue >();
+	const { value, setValue, bind: propName } = useBoundProp< DynamicPropValue >();
 	const { name = '', settings } = value?.value ?? {};
 
 	const dynamicTag = useDynamicTag( propName, name );
@@ -35,8 +36,8 @@ export const DynamicControl = ( { bind, children }: DynamicControlProps ) => {
 	};
 
 	return (
-		<ControlContext.Provider value={ { setValue: setDynamicValue, value: dynamicValue, bind } }>
+		<BoundPropProvider setValue={ setDynamicValue } value={ dynamicValue } bind={ bind }>
 			{ children }
-		</ControlContext.Provider>
+		</BoundPropProvider>
 	);
 };

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

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
+import { type PropKey } from '@elementor/editor-props';
+
+import { type DynamicTag } from '../types';
 import { usePropDynamicTags } from './use-prop-dynamic-tags';
-import { PropKey } from '../../controls/props/types';
-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,14 +1,15 @@
 import * as React from 'react';
-import { useElement } from '../../controls/providers/element-provider';
-import { supportsDynamic } from '../utils';
-import { DynamicSelection } from '../components/dynamic-selection';
+import { useBoundProp } from '@elementor/editor-controls';
 import { DatabaseIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
-import { useControl } from '../../controls/control-context';
-import { PopoverActionProps } from '../../controls/control-actions/actions/popover-action';
+
+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 } = useControl();
+	const { bind } = useBoundProp();
 	const { elementType } = useElement();
 
 	const propType = elementType.propsSchema[ bind ];

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

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
-import { useElement } from '../../controls/providers/element-provider';
+import { type PropKey } from '@elementor/editor-props';
+
+import { useElement } from '../../contexts/element-context';
 import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
-import { PropKey } from '../../controls/props/types';
 import { getDynamicPropType } from '../utils';
 
 export const usePropDynamicTags = ( propName: PropKey ) => {

package/src/dynamics/init.ts

@@ -1,8 +1,8 @@
+import { replaceControl } from '../control-replacement';
+import { controlActionsMenu } from '../controls-actions';
 import { DynamicSelectionControl } from './components/dynamic-selection-control';
-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';
+import { isDynamicPropValue } from './utils';
 
 const { registerPopoverAction } = controlActionsMenu;
 

package/src/dynamics/sync/get-elementor-config.ts

@@ -1,4 +1,4 @@
-import { ExtendedWindow } from '../types';
+import { type ExtendedWindow } from '../types';
 
 export const getElementorConfig = () => {
 	const extendedWindow = window as unknown as ExtendedWindow;

package/src/dynamics/types.ts

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

package/src/dynamics/utils.ts

@@ -1,6 +1,6 @@
-import { PropType, PropValue, TransformablePropType } from '../controls/props/types';
-import { DynamicPropType, DynamicPropValue } from './types';
-import { isTransformable } from '../controls/props/is-transformable';
+import { isTransformable, type PropType, type PropValue, type TransformablePropType } from '@elementor/editor-props';
+
+import { type DynamicPropType, type DynamicPropValue } from './types';
 
 const DYNAMIC_PROP_TYPE_KEY = 'dynamic';
 

package/src/hooks/use-close-editor-panel.ts

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { getSelectedElements, isElementInContainer, type V1Element } from '@elementor/editor-elements';
+import { __privateListenTo as listenTo, type CommandEvent, commandStartEvent } from '@elementor/editor-v1-adapters';
+
+import { usePanelActions } from '../panel';
+import { isAtomicWidgetSelected } from '../sync/is-atomic-widget-selected';
+
+export const useCloseEditorPanel = () => {
+	const { close } = usePanelActions();
+
+	return useEffect( () => {
+		return listenTo( commandStartEvent( 'document/elements/delete' ), ( e ) => {
+			const selectedElement = getSelectedElements()[ 0 ];
+			const { container: deletedContainer } = ( e as CommandEvent< { container: V1Element } > )?.args;
+			const isSelectedElementInDeletedContainer =
+				deletedContainer && selectedElement && isElementInContainer( selectedElement, deletedContainer );
+
+			if ( isSelectedElementInDeletedContainer && isAtomicWidgetSelected() ) {
+				close();
+			}
+		} );
+	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
+};

package/src/hooks/use-direction.ts

@@ -0,0 +1,13 @@
+import { useTheme } from '@elementor/ui';
+
+import { type ExtendedWindow } from '../sync/types';
+
+export function useDirection() {
+	const theme = useTheme(),
+		extendedWindow: ExtendedWindow = window;
+
+	const isUiRtl = 'rtl' === theme.direction,
+		isSiteRtl = !! extendedWindow.elementorFrontend?.config?.is_rtl;
+
+	return { isSiteRtl, isUiRtl };
+}

package/src/hooks/use-open-editor-panel.ts

@@ -1,14 +1,15 @@
 import { useEffect } from 'react';
-import { commandStartEvent, __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';
+import { __privateListenTo as listenTo, commandStartEvent } from '@elementor/editor-v1-adapters';
+
 import { usePanelActions } from '../panel';
-import { shouldUseV2Panel } from '../sync/should-use-v2-panel';
+import { isAtomicWidgetSelected } from '../sync/is-atomic-widget-selected';
 
 export const useOpenEditorPanel = () => {
 	const { open } = usePanelActions();
 
 	useEffect( () => {
 		return listenTo( commandStartEvent( 'panel/editor/open' ), () => {
-			if ( shouldUseV2Panel() ) {
+			if ( isAtomicWidgetSelected() ) {
 				open();
 			}
 		} );