@elementor/editor-editing-panel 0.18.0 → 1.0.0

package/src/contexts/style-context.tsx

@@ -1,35 +1,21 @@
 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, PropsWithChildren, useContext } from 'react';
+import { StyleDefinition, StyleVariant } from '@elementor/editor-styles';
 
 type ContextValue = {
-	selectedStyleDef: StyleDefinition | null;
-	selectedMeta: StyleVariant[ 'meta' ];
-	selectedClassesProp: string;
+	id: 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, meta }: Props ) {
+	return <Context.Provider value={ { id, meta } }>{ children }</Context.Provider>;
 }
 
-export function useStyleContext() {
+export function useStyle() {
 	const context = useContext( Context );
 
 	if ( ! context ) {

package/src/control-replacement.tsx

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

package/src/controls/bound-prop-context.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { PropKey, PropValue } from '@elementor/editor-props';
+import { createContext, useContext } from 'react';
+
+export type BoundPropContext< T extends PropValue > = {
+	bind: PropKey;
+	setValue: ( value: T | undefined ) => void;
+	value: T | undefined;
+};
+
+export type BoundPropProviderProps< T extends PropValue > = BoundPropContext< T > & {
+	children: React.ReactNode;
+};
+
+const BoundPropContext = createContext< BoundPropContext< PropValue > | null >( null );
+export const BoundPropProvider = ( { children, value, setValue, bind }: BoundPropProviderProps< PropValue > ) => {
+	return <BoundPropContext.Provider value={ { value, setValue, bind } }>{ children }</BoundPropContext.Provider>;
+};
+
+export function useBoundProp< T extends PropValue >(): BoundPropContext< T | undefined >;
+export function useBoundProp< T extends PropValue >( defaultValue: T ): BoundPropContext< T >;
+export function useBoundProp< T extends PropValue >( defaultValue?: T ) {
+	const boundPropContext = useContext< BoundPropContext< T > >( BoundPropContext as never );
+
+	if ( ! boundPropContext ) {
+		throw new Error( 'useBoundProp must be used within a BoundPropContext' );
+	}
+
+	return { ...boundPropContext, value: boundPropContext.value ?? defaultValue };
+}

package/src/controls/components/control-toggle-button-group.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { JSX } from 'react';
-import { StackProps, styled, ToggleButton, ToggleButtonGroup } from '@elementor/ui';
+import { StackProps, styled, ToggleButton, ToggleButtonGroup, Tooltip } from '@elementor/ui';
 
 export type ToggleButtonGroupItem< TValue > = {
 	value: TValue;
 	label: string;
 	icon: JSX.ElementType;
+	showTooltip?: boolean;
 };
 
 const StyledToggleButtonGroup = styled( ToggleButtonGroup )`
@@ -49,11 +50,19 @@ export const ControlToggleButtonGroup = < TValue, >( {
 
 	return (
 		<StyledToggleButtonGroup justify={ justify } value={ value } onChange={ handleChange } exclusive={ exclusive }>
-			{ items.map( ( { label, value: buttonValue, icon: Icon } ) => (
-				<ToggleButton key={ buttonValue } value={ buttonValue } aria-label={ label } size={ size }>
-					<Icon fontSize={ size } />
-				</ToggleButton>
-			) ) }
+			{ items.map( ( { label: label, value: buttonValue, icon: Icon, showTooltip: showTooltip } ) =>
+				showTooltip ? (
+					<Tooltip title={ label } disableFocusListener={ true } placement="top" key={ buttonValue }>
+						<ToggleButton value={ buttonValue } aria-label={ label } size={ size }>
+							<Icon fontSize={ size } />
+						</ToggleButton>
+					</Tooltip>
+				) : (
+					<ToggleButton key={ buttonValue } value={ buttonValue } aria-label={ label } size={ size }>
+						<Icon fontSize={ size } />
+					</ToggleButton>
+				)
+			) }
 		</StyledToggleButtonGroup>
 	);
 };

package/src/controls/components/repeater.tsx

@@ -80,7 +80,7 @@ export const Repeater = < T, >( {
 
 	return (
 		<Stack>
-			<Stack direction="row" justifyContent="space-between" sx={ { py: 0.5 } }>
+			<Stack direction="row" justifyContent="space-between" alignItems="center" sx={ { pb: 1 } }>
 				<Typography component="label" variant="caption" color="text.secondary">
 					{ label }
 				</Typography>

package/src/controls/components/text-field-inner-selection.tsx

@@ -1,7 +1,7 @@
-import { PropValue } from '../../types';
 import * as React from 'react';
+import { forwardRef, useId } from 'react';
+import { PropValue } from '@elementor/editor-props';
 import { bindMenu, bindTrigger, Button, InputAdornment, Menu, MenuItem, TextField, usePopupState } from '@elementor/ui';
-import { useId } from 'react';
 
 export type TextFieldInnerSelectionProps = {
 	placeholder?: string;
@@ -12,28 +12,24 @@ export type TextFieldInnerSelectionProps = {
 	startAdornment?: React.ReactNode;
 };
 
-export const TextFieldInnerSelection = ( {
-	placeholder,
-	type,
-	value,
-	onChange,
-	endAdornment,
-	startAdornment,
-}: TextFieldInnerSelectionProps ) => {
-	return (
-		<TextField
-			size="tiny"
-			type={ type }
-			value={ value }
-			onChange={ onChange }
-			placeholder={ placeholder }
-			InputProps={ {
-				endAdornment,
-				startAdornment,
-			} }
-		/>
-	);
-};
+export const TextFieldInnerSelection = forwardRef(
+	( { placeholder, type, value, onChange, endAdornment, startAdornment }: TextFieldInnerSelectionProps, ref ) => {
+		return (
+			<TextField
+				size="tiny"
+				type={ type }
+				value={ value }
+				onChange={ onChange }
+				placeholder={ placeholder }
+				InputProps={ {
+					endAdornment,
+					startAdornment,
+				} }
+				ref={ ref }
+			/>
+		);
+	}
+);
 
 export type SelectionEndAdornmentProps< T extends string > = {
 	options: T[];

package/src/controls/control-actions/control-actions-context.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { createContext, PropsWithChildren, useContext } from 'react';
+
+type ControlActionsContext = {
+	items: Array< {
+		id: string;
+		MenuItem: React.ComponentType;
+	} >;
+};
+
+const Context = createContext< ControlActionsContext | null >( null );
+
+export type ControlActionsProviderProps = PropsWithChildren< ControlActionsContext >;
+
+export const ControlActionsProvider = ( { children, items }: ControlActionsProviderProps ) => (
+	<Context.Provider value={ { items } }>{ children }</Context.Provider>
+);
+
+export const useControlActions = () => {
+	const context = useContext( Context );
+
+	if ( ! context ) {
+		throw new Error( 'useControlActions must be used within a ControlActionsProvider' );
+	}
+
+	return context;
+};

package/src/controls/control-actions/control-actions-menu.ts

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

package/src/controls/control-actions/control-actions.tsx

@@ -1,43 +1,31 @@
 import * as React from 'react';
-import { styled, UnstableFloatingActionBar } from '@elementor/ui';
 import { PropsWithChildren } from 'react';
-import { controlActionsMenu } from './control-actions-menu';
-
-const { useMenuItems } = controlActionsMenu;
+import { styled, UnstableFloatingActionBar } from '@elementor/ui';
+import { useControlActions } from './control-actions-context';
 
 // CSS hack to hide empty floating bars.
-const FloatingBar = styled( UnstableFloatingActionBar )`
-	& .MuiPaper-root:empty {
-		display: none;
-	}
+const FloatingBarContainer = styled( 'span' )`
+	display: contents;
 
-	// this is for a fix which would be added later on - to force the width externally
-	width: 100%;
-	& > :first-of-type {
-		width: 100%;
+	.MuiFloatingActionBar-popper:has( .MuiFloatingActionBar-actions:empty ) {
+		display: none;
 	}
 `;
 
-export type ControlActionsProps = PropsWithChildren< {
-	fullWidth?: boolean;
-} >;
+export type ControlActionsProps = PropsWithChildren< object >;
 
-export default function ControlActions( { fullWidth = false, children }: ControlActionsProps ) {
-	const items = useMenuItems().default;
+export default function ControlActions( { children }: ControlActionsProps ) {
+	const { items } = useControlActions();
 
 	if ( items.length === 0 ) {
 		return children;
 	}
 
+	const menuItems = items.map( ( { MenuItem, id } ) => <MenuItem key={ id } /> );
+
 	return (
-		<FloatingBar
-			actions={ items.map( ( { MenuItem, id } ) => (
-				<MenuItem key={ id } />
-			) ) }
-			// TODO - work on a general layouting solution instead
-			sx={ fullWidth ? { width: '100%' } : undefined }
-		>
-			{ children }
-		</FloatingBar>
+		<FloatingBarContainer>
+			<UnstableFloatingActionBar actions={ menuItems }>{ children }</UnstableFloatingActionBar>
+		</FloatingBarContainer>
 	);
 }

package/src/{components/style-sections/effects-section/box-shadow-repeater.tsx → controls/controls/box-shadow-repeater-control.tsx}

@@ -1,36 +1,22 @@
 import * as React from 'react';
 import { __ } from '@wordpress/i18n';
-import { Grid, Stack, UnstableColorIndicator } from '@elementor/ui';
-import { Repeater } from '../../../controls/components/repeater';
-import { ControlContext, useControl } from '../../../controls/control-context';
-import { PropValue, TransformablePropValue } from '../../../types';
-import { SizeControl, SizeControlValue } from '../../../controls/control-types/size-control';
-import { ColorControl, ColorPropValue } from '../../../controls/control-types/color-control';
-import { ControlLabel } from '../../control-label';
-import { SelectControl } from '../../../controls/control-types/select-control';
+import { PropValue, ShadowPropValue, BoxShadowPropValue } from '@elementor/editor-props';
+import { Grid, Stack, Typography, UnstableColorIndicator } from '@elementor/ui';
+import { Repeater } from '../components/repeater';
+import { SizeControl } from './size-control';
+import { ColorControl } from './color-control';
+import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
+import { SelectControl } from './select-control';
+import { createControl } from '../create-control';
 
 type SetContextValue = ( v: PropValue ) => void;
 
-export type BoxShadow = TransformablePropValue< 'box-shadow', Shadow[] >;
-
-export type Shadow = TransformablePropValue<
-	'shadow',
-	{
-		position: string;
-		hOffset: SizeControlValue;
-		vOffset: SizeControlValue;
-		blur: SizeControlValue;
-		spread: SizeControlValue;
-		color: ColorPropValue;
-	}
->;
-
-export const BoxShadowRepeater = () => {
-	const { value, setValue } = useControl< BoxShadow >();
+export const BoxShadowRepeaterControl = createControl( () => {
+	const { value, setValue } = useBoundProp< BoxShadowPropValue >();
 
 	const boxShadowValues = value?.value;
 
-	const setBoxShadow = ( newValue: BoxShadow[ 'value' ] ) => {
+	const setBoxShadow = ( newValue: BoxShadowPropValue[ 'value' ] ) => {
 		setValue( {
 			$$type: 'box-shadow',
 			value: newValue,
@@ -50,22 +36,20 @@ export const BoxShadowRepeater = () => {
 			} }
 		/>
 	);
-};
+} );
 
-const ItemIcon = ( { value }: { value: Shadow } ) => (
+const ItemIcon = ( { value }: { value: ShadowPropValue } ) => (
 	<UnstableColorIndicator size="inherit" component="span" value={ value.value.color.value } />
 );
 
 const ItemContent = ( {
-	anchorEl,
 	value,
 	setValue,
 }: {
-	anchorEl: HTMLElement | null;
-	value: Shadow;
-	setValue: ( newValue: Shadow ) => void;
+	value: ShadowPropValue;
+	setValue: ( newValue: ShadowPropValue ) => void;
 } ) => {
-	const setShadow = ( newValue: Shadow[ 'value' ] ) => {
+	const setShadow = ( newValue: ShadowPropValue[ 'value' ] ) => {
 		setValue( {
 			$$type: 'shadow',
 			value: newValue,
@@ -79,30 +63,24 @@ const ItemContent = ( {
 					bind="color"
 					value={ value.value.color }
 					label={ __( 'Color', 'elementor' ) }
-					setValue={ ( v: ColorPropValue ) => setShadow( { ...value.value, color: v } ) }
+					setValue={ ( v: ShadowPropValue[ 'value' ][ 'color' ] ) =>
+						setShadow( { ...value.value, color: v } )
+					}
 				>
-					<ColorControl
-						anchorEl={ anchorEl }
-						anchorOrigin={ {
-							vertical: 'top',
-							horizontal: 'right',
-						} }
-						transformOrigin={ {
-							vertical: 'top',
-							horizontal: -10,
-						} }
-					/>
+					<ColorControl />
 				</Control>
 				<Control
 					bind="position"
 					value={ value.value.position }
 					label={ __( 'Position', 'elementor' ) }
-					setValue={ ( v: string ) => setShadow( { ...value.value, position: v } ) }
+					setValue={ ( v: ShadowPropValue[ 'value' ][ 'position' ] ) =>
+						setShadow( { ...value.value, position: v || null } )
+					}
 				>
 					<SelectControl
 						options={ [
-							{ label: 'Inset', value: 'inset' },
-							{ label: 'Outset', value: 'outset' },
+							{ label: __( 'Inset', 'elementor' ), value: 'inset' },
+							{ label: __( 'Outset', 'elementor' ), value: '' },
 						] }
 					/>
 				</Control>
@@ -112,15 +90,19 @@ const ItemContent = ( {
 					bind="hOffset"
 					label={ __( 'Horizontal', 'elementor' ) }
 					value={ value.value.hOffset }
-					setValue={ ( v: SizeControlValue ) => setShadow( { ...value.value, hOffset: v } ) }
+					setValue={ ( v: ShadowPropValue[ 'value' ][ 'hOffset' ] ) =>
+						setShadow( { ...value.value, hOffset: v } )
+					}
 				>
 					<SizeControl />
 				</Control>
 				<Control
-					label={ __( 'Vertical', 'elementor' ) }
 					bind="vOffset"
+					label={ __( 'Vertical', 'elementor' ) }
 					value={ value.value.vOffset }
-					setValue={ ( v: SizeControlValue ) => setShadow( { ...value.value, vOffset: v } ) }
+					setValue={ ( v: ShadowPropValue[ 'value' ][ 'vOffset' ] ) =>
+						setShadow( { ...value.value, vOffset: v } )
+					}
 				>
 					<SizeControl />
 				</Control>
@@ -130,7 +112,7 @@ const ItemContent = ( {
 					bind="blur"
 					value={ value.value.blur }
 					label={ __( 'Blur', 'elementor' ) }
-					setValue={ ( v: SizeControlValue ) => setShadow( { ...value.value, blur: v } ) }
+					setValue={ ( v: ShadowPropValue[ 'value' ][ 'blur' ] ) => setShadow( { ...value.value, blur: v } ) }
 				>
 					<SizeControl />
 				</Control>
@@ -138,7 +120,9 @@ const ItemContent = ( {
 					bind="spread"
 					label={ __( 'Spread', 'elementor' ) }
 					value={ value.value.spread }
-					setValue={ ( v: SizeControlValue ) => setShadow( { ...value.value, spread: v } ) }
+					setValue={ ( v: ShadowPropValue[ 'value' ][ 'spread' ] ) =>
+						setShadow( { ...value.value, spread: v } )
+					}
 				>
 					<SizeControl />
 				</Control>
@@ -160,27 +144,29 @@ const Control = < T extends PropValue >( {
 	children: React.ReactNode;
 	setValue: ( v: T ) => void;
 } ) => (
-	<ControlContext.Provider value={ { value, setValue: setValue as SetContextValue, bind } }>
+	<BoundPropProvider value={ value } setValue={ setValue as SetContextValue } bind={ bind }>
 		<Grid item xs={ 6 }>
 			<Grid container spacing={ 1 } alignItems="center">
 				<Grid item xs={ 12 }>
-					<ControlLabel>{ label }</ControlLabel>
+					<Typography component="label" variant="caption" color="text.secondary">
+						{ label }
+					</Typography>
 				</Grid>
 				<Grid item xs={ 12 }>
 					{ children }
 				</Grid>
 			</Grid>
 		</Grid>
-	</ControlContext.Provider>
+	</BoundPropProvider>
 );
 
-const ItemLabel = ( { value }: { value: Shadow } ) => {
+const ItemLabel = ( { value }: { value: ShadowPropValue } ) => {
 	const { position, hOffset, vOffset, blur, spread } = value.value;
 
-	const { size: hOffsetSize, unit: hOffsetUnit } = hOffset.value;
-	const { size: vOffsetSize, unit: vOffsetUnit } = vOffset.value;
-	const { size: blurSize, unit: blurUnit } = blur.value;
-	const { size: spreadSize, unit: spreadUnit } = spread.value;
+	const { size: blurSize = '', unit: blurUnit = '' } = blur?.value || {};
+	const { size: spreadSize = '', unit: spreadUnit = '' } = spread?.value || {};
+	const { size: hOffsetSize = 'unset', unit: hOffsetUnit = '' } = hOffset?.value || {};
+	const { size: vOffsetSize = 'unset', unit: vOffsetUnit = '' } = vOffset?.value || {};
 
 	const sizes = [
 		hOffsetSize + hOffsetUnit,
@@ -191,12 +177,12 @@ const ItemLabel = ( { value }: { value: Shadow } ) => {
 
 	return (
 		<span style={ { textTransform: 'capitalize' } }>
-			{ position }: { sizes }
+			{ position ?? 'outset' }: { sizes }
 		</span>
 	);
 };
 
-const initialShadow: Shadow = {
+const initialShadow: ShadowPropValue = {
 	$$type: 'shadow',
 	value: {
 		hOffset: {
@@ -209,7 +195,7 @@ const initialShadow: Shadow = {
 		},
 		blur: {
 			$$type: 'size',
-			value: { unit: 'px', size: 0 },
+			value: { unit: 'px', size: 10 },
 		},
 		spread: {
 			$$type: 'size',
@@ -217,8 +203,8 @@ const initialShadow: Shadow = {
 		},
 		color: {
 			$$type: 'color',
-			value: 'rgba(0, 0, 0, 0)',
+			value: 'rgba(0, 0, 0, 1)',
 		},
-		position: 'inset',
+		position: null,
 	},
 };

package/src/controls/controls/color-control.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { UnstableColorField, UnstableColorFieldProps } from '@elementor/ui';
+import { useBoundProp } from '../bound-prop-context';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+import { ColorPropValue } from '@elementor/editor-props';
+
+export const ColorControl = createControl(
+	( props: Partial< Omit< UnstableColorFieldProps, 'value' | 'onChange' > > ) => {
+		const { value, setValue } = useBoundProp< ColorPropValue >();
+
+		const handleChange = ( selectedColor: string ) => {
+			setValue( {
+				$$type: 'color',
+				value: selectedColor,
+			} );
+		};
+
+		return (
+			<ControlActions>
+				<UnstableColorField size="tiny" { ...props } value={ value?.value } onChange={ handleChange } />
+			</ControlActions>
+		);
+	}
+);