@elementor/editor-editing-panel 1.44.0 → 1.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.44.0",
+  "version": "1.45.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,16 +40,16 @@
   },
   "dependencies": {
     "@elementor/editor": "0.19.4",
-    "@elementor/editor-canvas": "0.22.3",
-    "@elementor/editor-controls": "0.36.0",
+    "@elementor/editor-canvas": "0.23.0",
+    "@elementor/editor-controls": "1.0.0",
     "@elementor/editor-current-user": "0.5.0",
     "@elementor/editor-documents": "0.13.6",
-    "@elementor/editor-elements": "0.8.4",
+    "@elementor/editor-elements": "0.8.5",
     "@elementor/editor-panels": "0.15.4",
-    "@elementor/editor-props": "0.12.1",
+    "@elementor/editor-props": "0.13.0",
     "@elementor/editor-responsive": "0.13.5",
-    "@elementor/editor-styles": "0.6.8",
-    "@elementor/editor-styles-repository": "0.10.1",
+    "@elementor/editor-styles": "0.6.9",
+    "@elementor/editor-styles-repository": "0.10.2",
     "@elementor/editor-ui": "0.11.0",
     "@elementor/editor-v1-adapters": "0.12.0",
     "@elementor/icons": "1.44.0",

package/src/components/style-sections/border-section/border-radius-field.tsx

@@ -13,6 +13,7 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 
 const StartStartIcon = withDirection( RadiusTopLeftIcon );
 const StartEndIcon = withDirection( RadiusTopRightIcon );
@@ -55,14 +56,16 @@ export const BorderRadiusField = () => {
 	const { isSiteRtl } = useDirection();
 
 	return (
-		<StylesField bind={ 'border-radius' }>
-			<EqualUnequalSizesControl
-				items={ getCorners( isSiteRtl ) }
-				label={ __( 'Border radius', 'elementor' ) }
-				icon={ <BorderCornersIcon fontSize={ 'tiny' } /> }
-				tooltipLabel={ __( 'Adjust corners', 'elementor' ) }
-				multiSizePropTypeUtil={ borderRadiusPropTypeUtil }
-			/>
-		</StylesField>
+		<UiProviders>
+			<StylesField bind={ 'border-radius' }>
+				<EqualUnequalSizesControl
+					items={ getCorners( isSiteRtl ) }
+					label={ __( 'Border radius', 'elementor' ) }
+					icon={ <BorderCornersIcon fontSize={ 'tiny' } /> }
+					tooltipLabel={ __( 'Adjust corners', 'elementor' ) }
+					multiSizePropTypeUtil={ borderRadiusPropTypeUtil }
+				/>
+			</StylesField>
+		</UiProviders>
 	);
 };

package/src/components/style-sections/layout-section/align-content-field.tsx

@@ -8,11 +8,11 @@ import {
 	JustifySpaceBetweenVerticalIcon as BetweenIcon,
 	JustifyTopIcon,
 } from '@elementor/icons';
-import { DirectionProvider, Stack, ThemeProvider, withDirection } from '@elementor/ui';
+import { Stack, withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { useDirection } from '../../../hooks/use-direction';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { ControlLabel } from '../../control-label';
 import { RotatedIcon } from './utils/rotated-icon';
 
@@ -67,18 +67,14 @@ const options: ToggleButtonGroupItem< AlignContent >[] = [
 ];
 
 export const AlignContentField = () => {
-	const { isSiteRtl } = useDirection();
-
 	return (
-		<DirectionProvider rtl={ isSiteRtl }>
-			<ThemeProvider>
-				<StylesField bind="align-content">
-					<Stack gap={ 1 }>
-						<ControlLabel>{ __( 'Align content', 'elementor' ) }</ControlLabel>
-						<ToggleControl options={ options } fullWidth={ true } />
-					</Stack>
-				</StylesField>
-			</ThemeProvider>
-		</DirectionProvider>
+		<UiProviders>
+			<StylesField bind="align-content">
+				<Stack gap={ 1 }>
+					<ControlLabel>{ __( 'Align content', 'elementor' ) }</ControlLabel>
+					<ToggleControl options={ options } fullWidth={ true } />
+				</Stack>
+			</StylesField>
+		</UiProviders>
 	);
 };

package/src/components/style-sections/layout-section/align-items-field.tsx

@@ -6,11 +6,11 @@ import {
 	LayoutAlignRightIcon,
 	LayoutDistributeVerticalIcon as JustifyIcon,
 } from '@elementor/icons';
-import { DirectionProvider, Grid, ThemeProvider, withDirection } from '@elementor/ui';
+import { Grid, withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { useDirection } from '../../../hooks/use-direction';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { ControlLabel } from '../../control-label';
 import { RotatedIcon } from './utils/rotated-icon';
 
@@ -52,22 +52,18 @@ const options: ToggleButtonGroupItem< AlignItems >[] = [
 ];
 
 export const AlignItemsField = () => {
-	const { isSiteRtl } = useDirection();
-
 	return (
-		<DirectionProvider rtl={ isSiteRtl }>
-			<ThemeProvider>
-				<StylesField bind="align-items">
-					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-						<Grid item xs={ 6 }>
-							<ControlLabel>{ __( 'Align items', 'elementor' ) }</ControlLabel>
-						</Grid>
-						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-							<ToggleControl options={ options } />
-						</Grid>
+		<UiProviders>
+			<StylesField bind="align-items">
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ __( 'Align items', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+						<ToggleControl options={ options } />
 					</Grid>
-				</StylesField>
-			</ThemeProvider>
-		</DirectionProvider>
+				</Grid>
+			</StylesField>
+		</UiProviders>
 	);
 };

package/src/components/style-sections/layout-section/align-self-child-field.tsx

@@ -6,11 +6,11 @@ import {
 	LayoutAlignRightIcon,
 	LayoutDistributeVerticalIcon as JustifyIcon,
 } from '@elementor/icons';
-import { DirectionProvider, Grid, ThemeProvider, type ToggleButtonProps, withDirection } from '@elementor/ui';
+import { Grid, type ToggleButtonProps, withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { useDirection } from '../../../hooks/use-direction';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { ControlLabel } from '../../control-label';
 import { type FlexDirection } from './flex-direction-field';
 import { RotatedIcon } from './utils/rotated-icon';
@@ -85,22 +85,18 @@ const getOptions = ( parentStyleDirection: FlexDirection ) => [
 ];
 
 export const AlignSelfChild = ( { parentStyleDirection }: { parentStyleDirection: FlexDirection } ) => {
-	const { isSiteRtl } = useDirection();
-
 	return (
-		<DirectionProvider rtl={ isSiteRtl }>
-			<ThemeProvider>
-				<StylesField bind={ 'align-self' }>
-					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-						<Grid item xs={ 6 }>
-							<ControlLabel>{ __( 'Align self', 'elementor' ) }</ControlLabel>
-						</Grid>
-						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
-							<ToggleControl options={ getOptions( parentStyleDirection as FlexDirection ) } />
-						</Grid>
+		<UiProviders>
+			<StylesField bind={ 'align-self' }>
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ __( 'Align self', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
+						<ToggleControl options={ getOptions( parentStyleDirection as FlexDirection ) } />
 					</Grid>
-				</StylesField>
-			</ThemeProvider>
-		</DirectionProvider>
+				</Grid>
+			</StylesField>
+		</UiProviders>
 	);
 };

package/src/components/style-sections/layout-section/flex-direction-field.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from '@elementor/icons';
-import { DirectionProvider, Grid, ThemeProvider, withDirection } from '@elementor/ui';
+import { Grid, withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { useDirection } from '../../../hooks/use-direction';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { ControlLabel } from '../../control-label';
 
 export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
@@ -44,22 +44,18 @@ const options: ToggleButtonGroupItem< FlexDirection >[] = [
 ];
 
 export const FlexDirectionField = () => {
-	const { isSiteRtl } = useDirection();
-
 	return (
-		<DirectionProvider rtl={ isSiteRtl }>
-			<ThemeProvider>
-				<StylesField bind="flex-direction">
-					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-						<Grid item xs={ 6 }>
-							<ControlLabel>{ __( 'Direction', 'elementor' ) }</ControlLabel>
-						</Grid>
-						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-							<ToggleControl options={ options } />
-						</Grid>
+		<UiProviders>
+			<StylesField bind="flex-direction">
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ __( 'Direction', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+						<ToggleControl options={ options } />
 					</Grid>
-				</StylesField>
-			</ThemeProvider>
-		</DirectionProvider>
+				</Grid>
+			</StylesField>
+		</UiProviders>
 	);
 };

package/src/components/style-sections/layout-section/flex-order-field.tsx

@@ -3,13 +3,13 @@ import { useState } from 'react';
 import { ControlToggleButtonGroup, NumberControl, type ToggleButtonGroupItem } from '@elementor/editor-controls';
 import { type NumberPropValue } from '@elementor/editor-props';
 import { ArrowDownSmallIcon, ArrowUpSmallIcon, PencilIcon } from '@elementor/icons';
-import { DirectionProvider, Grid, ThemeProvider } from '@elementor/ui';
+import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../../../contexts/style-context';
 import { StylesField } from '../../../controls-registry/styles-field';
-import { useDirection } from '../../../hooks/use-direction';
 import { useStylesField } from '../../../hooks/use-styles-field';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { ControlLabel } from '../../control-label';
 import { SectionContent } from '../../section-content';
 
@@ -48,7 +48,6 @@ const items: ToggleButtonGroupItem< GroupControlItemOption >[] = [
 ];
 
 export const FlexOrderField = () => {
-	const { isSiteRtl } = useDirection();
 	const [ order, setOrder ] = useStylesField< NumberPropValue | null >( 'order' );
 	const { canEdit } = useStyle();
 
@@ -67,43 +66,41 @@ export const FlexOrderField = () => {
 	};
 
 	return (
-		<DirectionProvider rtl={ isSiteRtl }>
-			<ThemeProvider>
-				<StylesField bind={ 'order' }>
-					<SectionContent>
+		<UiProviders>
+			<StylesField bind={ 'order' }>
+				<SectionContent>
+					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+						<Grid item xs={ 6 }>
+							<ControlLabel>{ __( 'Order', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+							<ControlToggleButtonGroup
+								items={ items }
+								value={ groupControlValue }
+								onChange={ handleToggleButtonChange }
+								exclusive={ true }
+								disabled={ ! canEdit }
+							/>
+						</Grid>
+					</Grid>
+
+					{ CUSTOM === groupControlValue && (
 						<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 							<Grid item xs={ 6 }>
-								<ControlLabel>{ __( 'Order', 'elementor' ) }</ControlLabel>
+								<ControlLabel>{ __( 'Custom order', 'elementor' ) }</ControlLabel>
 							</Grid>
 							<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-								<ControlToggleButtonGroup
-									items={ items }
-									value={ groupControlValue }
-									onChange={ handleToggleButtonChange }
-									exclusive={ true }
-									disabled={ ! canEdit }
+								<NumberControl
+									min={ FIRST_DEFAULT_VALUE + 1 }
+									max={ LAST_DEFAULT_VALUE - 1 }
+									shouldForceInt={ true }
 								/>
 							</Grid>
 						</Grid>
-
-						{ CUSTOM === groupControlValue && (
-							<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-								<Grid item xs={ 6 }>
-									<ControlLabel>{ __( 'Custom order', 'elementor' ) }</ControlLabel>
-								</Grid>
-								<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-									<NumberControl
-										min={ FIRST_DEFAULT_VALUE + 1 }
-										max={ LAST_DEFAULT_VALUE - 1 }
-										shouldForceInt={ true }
-									/>
-								</Grid>
-							</Grid>
-						) }
-					</SectionContent>
-				</StylesField>
-			</ThemeProvider>
-		</DirectionProvider>
+					) }
+				</SectionContent>
+			</StylesField>
+		</UiProviders>
 	);
 };
 

package/src/components/style-sections/layout-section/flex-size-field.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useMemo, useState } from 'react';
+import { type MutableRefObject, useMemo, useRef, useState } from 'react';
 import {
 	ControlToggleButtonGroup,
 	NumberControl,
@@ -8,13 +8,13 @@ import {
 } from '@elementor/editor-controls';
 import { numberPropTypeUtil, type NumberPropValue, type SizePropValue } from '@elementor/editor-props';
 import { ExpandIcon, PencilIcon, ShrinkIcon } from '@elementor/icons';
-import { DirectionProvider, Grid, ThemeProvider } from '@elementor/ui';
+import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../../../contexts/style-context';
 import { StylesField } from '../../../controls-registry/styles-field';
-import { useDirection } from '../../../hooks/use-direction';
 import { useStylesFields } from '../../../hooks/use-styles-fields';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { ControlLabel } from '../../control-label';
 import { SectionContent } from '../../section-content';
 
@@ -44,7 +44,6 @@ const items: ToggleButtonGroupItem< GroupItem >[] = [
 ];
 
 export const FlexSizeField = () => {
-	const { isSiteRtl } = useDirection();
 	const { canEdit } = useStyle();
 
 	const [ fields, setFields ] = useStylesFields< {
@@ -91,67 +90,69 @@ export const FlexSizeField = () => {
 	};
 
 	return (
-		<DirectionProvider rtl={ isSiteRtl }>
-			<ThemeProvider>
-				<SectionContent>
-					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-						<StylesField bind={ activeGroup ?? '' }>
-							<Grid item xs={ 6 }>
-								<ControlLabel>{ __( 'Size', 'elementor' ) }</ControlLabel>
-							</Grid>
-
-							<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-								<ControlToggleButtonGroup
-									value={ activeGroup }
-									onChange={ onChangeGroup }
-									disabled={ ! canEdit }
-									items={ items }
-									exclusive={ true }
-								/>
-							</Grid>
-						</StylesField>
-					</Grid>
-					{ 'custom' === activeGroup && <FlexCustomField /> }
-				</SectionContent>
-			</ThemeProvider>
-		</DirectionProvider>
+		<UiProviders>
+			<SectionContent>
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<StylesField bind={ activeGroup ?? '' }>
+						<Grid item xs={ 6 }>
+							<ControlLabel>{ __( 'Size', 'elementor' ) }</ControlLabel>
+						</Grid>
+
+						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+							<ControlToggleButtonGroup
+								value={ activeGroup }
+								onChange={ onChangeGroup }
+								disabled={ ! canEdit }
+								items={ items }
+								exclusive={ true }
+							/>
+						</Grid>
+					</StylesField>
+				</Grid>
+				{ 'custom' === activeGroup && <FlexCustomField /> }
+			</SectionContent>
+		</UiProviders>
 	);
 };
 
-const FlexCustomField = () => (
-	<>
-		<StylesField bind={ 'flex-grow' }>
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Grow', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-					<NumberControl min={ 0 } shouldForceInt={ true } />
-				</Grid>
-			</Grid>
-		</StylesField>
-		<StylesField bind={ 'flex-shrink' }>
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Shrink', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-					<NumberControl min={ 0 } shouldForceInt={ true } />
+const FlexCustomField = () => {
+	const flexBasisRowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
+	return (
+		<>
+			<StylesField bind={ 'flex-grow' }>
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ __( 'Grow', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+						<NumberControl min={ 0 } shouldForceInt={ true } />
+					</Grid>
 				</Grid>
-			</Grid>
-		</StylesField>
-		<StylesField bind={ 'flex-basis' }>
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Basis', 'elementor' ) }</ControlLabel>
+			</StylesField>
+			<StylesField bind={ 'flex-shrink' }>
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ __( 'Shrink', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+						<NumberControl min={ 0 } shouldForceInt={ true } />
+					</Grid>
 				</Grid>
-				<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-					<SizeControl extendedValues={ [ 'auto' ] } />
+			</StylesField>
+			<StylesField bind={ 'flex-basis' }>
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ flexBasisRowRef }>
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ __( 'Basis', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+						<SizeControl extendedOptions={ [ 'auto' ] } anchorRef={ flexBasisRowRef } />
+					</Grid>
 				</Grid>
-			</Grid>
-		</StylesField>
-	</>
-);
+			</StylesField>
+		</>
+	);
+};
 
 const getActiveGroup = ( {
 	grow,

package/src/components/style-sections/layout-section/justify-content-field.tsx

@@ -8,11 +8,11 @@ import {
 	JustifySpaceBetweenVerticalIcon as BetweenIcon,
 	JustifyTopIcon,
 } from '@elementor/icons';
-import { DirectionProvider, Stack, ThemeProvider, withDirection } from '@elementor/ui';
+import { Stack, withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { useDirection } from '../../../hooks/use-direction';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { ControlLabel } from '../../control-label';
 import { RotatedIcon } from './utils/rotated-icon';
 
@@ -66,18 +66,14 @@ const options: ToggleButtonGroupItem< JustifyContent >[] = [
 ];
 
 export const JustifyContentField = () => {
-	const { isSiteRtl } = useDirection();
-
 	return (
-		<DirectionProvider rtl={ isSiteRtl }>
-			<ThemeProvider>
-				<StylesField bind="justify-content">
-					<Stack gap={ 0.75 }>
-						<ControlLabel>{ __( 'Justify content', 'elementor' ) }</ControlLabel>
-						<ToggleControl options={ options } fullWidth={ true } />
-					</Stack>
-				</StylesField>
-			</ThemeProvider>
-		</DirectionProvider>
+		<UiProviders>
+			<StylesField bind="justify-content">
+				<Stack gap={ 0.75 }>
+					<ControlLabel>{ __( 'Justify content', 'elementor' ) }</ControlLabel>
+					<ToggleControl options={ options } fullWidth={ true } />
+				</Stack>
+			</StylesField>
+		</UiProviders>
 	);
 };

package/src/components/style-sections/layout-section/wrap-field.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { ArrowBackIcon, ArrowForwardIcon, ArrowRightIcon } from '@elementor/icons';
-import { DirectionProvider, Grid, ThemeProvider } from '@elementor/ui';
+import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { useDirection } from '../../../hooks/use-direction';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { ControlLabel } from '../../control-label';
 
 type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
@@ -32,22 +32,18 @@ const options: ToggleButtonGroupItem< FlexWrap >[] = [
 ];
 
 export const WrapField = () => {
-	const { isSiteRtl } = useDirection();
-
 	return (
-		<DirectionProvider rtl={ isSiteRtl }>
-			<ThemeProvider>
-				<StylesField bind={ 'flex-wrap' }>
-					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-						<Grid item xs={ 6 }>
-							<ControlLabel>{ __( 'Wrap', 'elementor' ) }</ControlLabel>
-						</Grid>
-						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
-							<ToggleControl options={ options } />
-						</Grid>
+		<UiProviders>
+			<StylesField bind={ 'flex-wrap' }>
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ __( 'Wrap', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
+						<ToggleControl options={ options } />
 					</Grid>
-				</StylesField>
-			</ThemeProvider>
-		</DirectionProvider>
+				</Grid>
+			</StylesField>
+		</UiProviders>
 	);
 };