@elementor/editor-editing-panel 1.43.1 → 1.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.43.1",
+  "version": "1.45.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,17 +40,17 @@
   },
   "dependencies": {
     "@elementor/editor": "0.19.4",
-    "@elementor/editor-canvas": "0.22.2",
-    "@elementor/editor-controls": "0.35.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-ui": "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",
     "@elementor/locations": "0.8.0",

package/src/action.tsx

@@ -17,7 +17,7 @@ export default function Action( { title, visible = true, icon: Icon, onClick }:
 	}
 
 	return (
-		<Tooltip placement="bottom" title={ title } arrow={ true }>
+		<Tooltip placement="top" title={ title } arrow={ true }>
 			<IconButton aria-label={ title } size={ SIZE } onClick={ onClick }>
 				<Icon fontSize={ SIZE } />
 			</IconButton>

package/src/components/add-or-remove-content.tsx

@@ -3,26 +3,25 @@ import { type PropsWithChildren } from 'react';
 import { MinusIcon, PlusIcon } from '@elementor/icons';
 import { Collapse, IconButton, Stack } from '@elementor/ui';
 
-import { ControlLabel } from './control-label';
 import { SectionContent } from './section-content';
 
 const SIZE = 'tiny';
 
 type Props = {
-	label: string;
 	isAdded: boolean;
 	onAdd: () => void;
 	onRemove: () => void;
 	disabled?: boolean;
+	renderLabel: () => React.ReactNode;
 };
 
 export const AddOrRemoveContent = ( {
 	isAdded,
-	label,
 	onAdd,
 	onRemove,
 	children,
 	disabled,
+	renderLabel,
 }: PropsWithChildren< Props > ) => {
 	return (
 		<SectionContent>
@@ -34,7 +33,7 @@ export const AddOrRemoveContent = ( {
 					marginInlineEnd: -0.75,
 				} }
 			>
-				<ControlLabel>{ label }</ControlLabel>
+				{ renderLabel() }
 				{ isAdded ? (
 					<IconButton size={ SIZE } onClick={ onRemove } aria-label="Remove" disabled={ disabled }>
 						<MinusIcon fontSize={ SIZE } />

package/src/components/collapsible-content.tsx

@@ -1,15 +1,32 @@
 import * as React from 'react';
-import { useState } from 'react';
-import { Button, Collapse, Stack } from '@elementor/ui';
+import { type ReactNode, useState } from 'react';
+import { Button, Collapse, Stack, styled } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { CollapseIcon } from './collapse-icon';
 
+type StaticItem< T = unknown > = T extends ( ...args: unknown[] ) => unknown ? never : T;
+
+type CallbackItem< T > = ( isOpen: boolean ) => T;
+export type CollapsibleValue< T > = CallbackItem< T > | StaticItem< T >;
+
 type CollapsibleContentProps = React.PropsWithChildren< {
 	defaultOpen?: boolean;
+	titleEnd?: CollapsibleValue< ReactNode | string > | null;
 } >;
 
-export const CollapsibleContent = ( { children, defaultOpen = false }: CollapsibleContentProps ) => {
+const IndicatorsWrapper = styled( 'div' )`
+	position: absolute;
+	top: 0;
+	right: ${ ( { theme } ) => theme.spacing( 3 ) };
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+`;
+
+export const CollapsibleContent = ( { children, defaultOpen = false, titleEnd = null }: CollapsibleContentProps ) => {
 	const [ open, setOpen ] = useState( defaultOpen );
 
 	const handleToggle = () => {
@@ -18,20 +35,31 @@ export const CollapsibleContent = ( { children, defaultOpen = false }: Collapsib
 
 	return (
 		<Stack>
-			<Button
-				fullWidth
-				size="small"
-				color="secondary"
-				variant="outlined"
-				onClick={ handleToggle }
-				endIcon={ <CollapseIcon open={ open } /> }
-				sx={ { my: 0.5 } }
-			>
-				{ open ? __( 'Show less', 'elementor' ) : __( 'Show more', 'elementor' ) }
-			</Button>
+			<Stack sx={ { position: 'relative' } }>
+				<Button
+					fullWidth
+					size="small"
+					color="secondary"
+					variant="outlined"
+					onClick={ handleToggle }
+					endIcon={ <CollapseIcon open={ open } /> }
+					sx={ { my: 0.5 } }
+				>
+					{ open ? __( 'Show less', 'elementor' ) : __( 'Show more', 'elementor' ) }
+				</Button>
+				{ titleEnd && <IndicatorsWrapper>{ getCollapsibleValue( titleEnd, open ) }</IndicatorsWrapper> }
+			</Stack>
 			<Collapse in={ open } timeout="auto" unmountOnExit>
 				{ children }
 			</Collapse>
 		</Stack>
 	);
 };
+
+export function getCollapsibleValue< T >( value: CollapsibleValue< T >, isOpen: boolean ): T {
+	if ( typeof value === 'function' ) {
+		return ( value as CallbackItem< T > )( isOpen );
+	}
+
+	return value;
+}

package/src/components/control-label.tsx

@@ -5,7 +5,7 @@ import { Stack } from '@elementor/ui';
 
 export const ControlLabel = ( { children }: PropsWithChildren< object > ) => {
 	return (
-		<Stack direction="row" alignItems="center" justifyItems="start" gap={ 1 }>
+		<Stack direction="row" alignItems="center" justifyItems="start" gap={ 0.25 }>
 			<ControlFormLabel>{ children }</ControlFormLabel>
 			<ControlAdornments />
 		</Stack>

package/src/components/section.tsx

@@ -1,34 +1,48 @@
 import * as React from 'react';
-import { type PropsWithChildren, useId } from 'react';
+import { type PropsWithChildren, type ReactNode, useId } from 'react';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Collapse, Divider, ListItemButton, ListItemText, Stack } from '@elementor/ui';
 
 import { useStateByElement } from '../hooks/use-state-by-element';
+import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
 import { CollapseIcon } from './collapse-icon';
+import { type CollapsibleValue, getCollapsibleValue } from './collapsible-content';
 
 type Props = PropsWithChildren< {
 	title: string;
 	defaultExpanded?: boolean;
+	titleEnd?: CollapsibleValue< ReactNode | string >;
 } >;
 
-export function Section( { title, children, defaultExpanded = false }: Props ) {
+export function Section( { title, children, defaultExpanded = false, titleEnd }: Props ) {
 	const [ isOpen, setIsOpen ] = useStateByElement( title, !! defaultExpanded );
 
+	const handleClick = () => {
+		setIsOpen( ! isOpen );
+	};
+
 	const id = useId();
 	const labelId = `label-${ id }`;
 	const contentId = `content-${ id }`;
 
+	const isUsingTitleEnd = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
+
 	return (
 		<>
 			<ListItemButton
 				id={ labelId }
 				aria-controls={ contentId }
-				onClick={ () => setIsOpen( ! isOpen ) }
+				onClick={ handleClick }
 				sx={ { '&:hover': { backgroundColor: 'transparent' } } }
 			>
-				<ListItemText
-					secondary={ title }
-					secondaryTypographyProps={ { color: 'text.primary', variant: 'caption', fontWeight: 'bold' } }
-				/>
+				<Stack direction="row" alignItems="center" justifyItems="start" flexGrow={ 1 } gap={ 0.5 }>
+					<ListItemText
+						secondary={ title }
+						secondaryTypographyProps={ { color: 'text.primary', variant: 'caption', fontWeight: 'bold' } }
+						sx={ { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 } }
+					/>
+					{ isUsingTitleEnd ? getCollapsibleValue( titleEnd, isOpen ) : null }
+				</Stack>
 				<CollapseIcon open={ isOpen } color="secondary" fontSize="tiny" />
 			</ListItemButton>
 			<Collapse id={ contentId } aria-labelledby={ labelId } in={ isOpen } timeout="auto" unmountOnExit>

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ControlFormLabel } from '@elementor/editor-controls';
 import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../../../contexts/style-context';
@@ -34,11 +35,11 @@ export const BorderField = () => {
 
 	return (
 		<AddOrRemoveContent
-			label={ __( 'Border', 'elementor' ) }
 			isAdded={ hasBorder }
 			onAdd={ addBorder }
 			onRemove={ removeBorder }
 			disabled={ ! canEdit }
+			renderLabel={ () => <ControlFormLabel>{ __( 'Border', 'elementor' ) }</ControlFormLabel> }
 		>
 			<BorderWidthField />
 			<BorderColorField />

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>
 	);
 };