@elementor/editor-editing-panel 0.15.0 → 0.16.0

package/src/components/style-sections/spacing-section/linked-dimensions-control.tsx

@@ -0,0 +1,140 @@
+import { PropValue } from '../../../types';
+import { SizeControl } from '../../../controls/control-types/size-control';
+import * as React from 'react';
+import { ControlContainer } from '../../../controls/components/control-container';
+import { Stack, ToggleButton } from '@elementor/ui';
+import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
+import { ControlLabel } from '../../control-label';
+import { ControlContext, useControl } from '../../../controls/control-context';
+import { __ } from '@wordpress/i18n';
+
+export type Position = 'top' | 'right' | 'bottom' | 'left';
+
+export type LinkedDimensionsValue = {
+	$$type: 'linked-dimensions';
+	value: {
+		isLinked: boolean;
+		top: PropValue;
+		right: PropValue;
+		bottom: PropValue;
+		left: PropValue;
+	};
+};
+
+export const LinkedDimensionsControl = ( { label }: { label: string } ) => {
+	const { value, setValue } = useControl< LinkedDimensionsValue >();
+	const { top, right, bottom, left, isLinked = false } = value?.value || {};
+
+	const setLinkedValue = ( position: Position, newValue: PropValue ) => {
+		const updatedValue = {
+			isLinked,
+			top: isLinked ? newValue : top,
+			right: isLinked ? newValue : right,
+			bottom: isLinked ? newValue : bottom,
+			left: isLinked ? newValue : left,
+			[ position ]: newValue,
+		};
+
+		setValue( {
+			$$type: 'linked-dimensions',
+			value: updatedValue,
+		} );
+	};
+
+	const toggleLinked = () => {
+		const updatedValue = {
+			isLinked: ! isLinked,
+			top,
+			right: ! isLinked ? top : right,
+			bottom: ! isLinked ? top : bottom,
+			left: ! isLinked ? top : left,
+		};
+
+		setValue( {
+			$$type: 'linked-dimensions',
+			value: updatedValue,
+		} );
+	};
+
+	const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
+
+	return (
+		<>
+			<Stack direction="row" gap={ 2 }>
+				<ControlLabel>{ label }</ControlLabel>
+				<ToggleButton
+					aria-label={ __( 'Link Inputs', 'elementor' ) }
+					size={ 'tiny' }
+					value={ 'check' }
+					selected={ isLinked }
+					sx={ { marginLeft: 'auto' } }
+					onChange={ toggleLinked }
+				>
+					<LinkedIcon fontSize={ 'tiny' } />
+				</ToggleButton>
+			</Stack>
+			<Stack direction="row" gap={ 2 }>
+				<ControlContainer direction={ 'column' }>
+					<ControlLabel>{ __( 'Top', 'elementor' ) }</ControlLabel>
+					<Control
+						bind={ 'top' }
+						value={ top }
+						setValue={ setLinkedValue }
+						startIcon={ <SideTopIcon fontSize={ 'tiny' } /> }
+					/>
+				</ControlContainer>
+				<ControlContainer direction={ 'column' }>
+					<ControlLabel>{ __( 'Right', 'elementor' ) }</ControlLabel>
+					<Control
+						bind={ 'right' }
+						value={ right }
+						setValue={ setLinkedValue }
+						startIcon={ <SideRightIcon fontSize={ 'tiny' } /> }
+					/>
+				</ControlContainer>
+			</Stack>
+			<Stack direction="row" gap={ 2 }>
+				<ControlContainer direction={ 'column' }>
+					<ControlLabel>{ __( 'Bottom', 'elementor' ) }</ControlLabel>
+					<Control
+						bind={ 'bottom' }
+						value={ bottom }
+						setValue={ setLinkedValue }
+						startIcon={ <SideBottomIcon fontSize={ 'tiny' } /> }
+					/>
+				</ControlContainer>
+				<ControlContainer direction={ 'column' }>
+					<ControlLabel>{ __( 'Left', 'elementor' ) }</ControlLabel>
+					<Control
+						bind={ 'left' }
+						value={ left }
+						setValue={ setLinkedValue }
+						startIcon={ <SideLeftIcon fontSize={ 'tiny' } /> }
+					/>
+				</ControlContainer>
+			</Stack>
+		</>
+	);
+};
+
+const Control = ( {
+	bind,
+	startIcon,
+	value,
+	setValue,
+}: {
+	bind: Position;
+	value: PropValue;
+	startIcon: React.ReactNode;
+	setValue: ( bind: Position, newValue: PropValue ) => void;
+} ) => (
+	<ControlContext.Provider
+		value={ {
+			bind,
+			setValue: ( newValue ) => setValue( bind, newValue ),
+			value,
+		} }
+	>
+		<SizeControl startIcon={ startIcon } />
+	</ControlContext.Provider>
+);

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { AccordionSection } from '../../accordion-section';
+import { Divider, Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+import { LinkedDimensionsControl } from './linked-dimensions-control';
+import { StyleControl } from '../../../controls/style-control';
+
+export const SpacingSection = () => {
+	return (
+		<AccordionSection title={ __( 'Spacing', 'elementor' ) }>
+			<Stack gap={ 1.5 }>
+				<StyleControl bind={ 'padding' }>
+					<LinkedDimensionsControl label={ __( 'Padding', 'elementor' ) } />
+				</StyleControl>
+				<Divider />
+				<StyleControl bind={ 'margin' }>
+					<LinkedDimensionsControl label={ __( 'Margin', 'elementor' ) } />
+				</StyleControl>
+			</Stack>
+		</AccordionSection>
+	);
+};

package/src/components/style-sections/typography-section/letter-spacing-control.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { StyleControl } from '../../../controls/style-control';
+import { SizeControl } from '../../../controls/control-types/size-control';
+import { ControlContainer } from '../../../controls/components/control-container';
+import { __ } from '@wordpress/i18n';
+
+export const LetterSpacingControl = () => {
+	return (
+		<StyleControl bind="letter-spacing">
+			<ControlContainer>
+				<StyleControl.Label>{ __( 'Letter Spacing', 'elementor' ) }</StyleControl.Label>
+				<SizeControl />
+			</ControlContainer>
+		</StyleControl>
+	);
+};

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { StyleControl } from '../../../controls/style-control';
+import { ControlContainer } from '../../../controls/components/control-container';
+import { __ } from '@wordpress/i18n';
+import { ColorControl } from '../../../controls/control-types/color-control';
+
+export const TextColorControl = () => {
+	return (
+		<StyleControl bind="color">
+			<ControlContainer>
+				<StyleControl.Label>{ __( 'Text Color', 'elementor' ) }</StyleControl.Label>
+				<ColorControl />
+			</ControlContainer>
+		</StyleControl>
+	);
+};

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { ControlContainer } from '../../../controls/components/control-container';
+import { StyleControl } from '../../../controls/style-control';
+import { __ } from '@wordpress/i18n';
+import { ToggleControl } from '../../../controls/control-types/toggle-control';
+import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon } from '@elementor/icons';
+
+const options = [
+	{ value: 'capitalize', label: __( 'Capitalize', 'elementor' ), icon: LetterCaseIcon },
+	{ value: 'uppercase', label: __( 'Uppercase', 'elementor' ), icon: LetterCaseUpperIcon },
+	{ value: 'lowercase', label: __( 'Lowercase', 'elementor' ), icon: LetterCaseLowerIcon },
+];
+
+export const TransformControl = () => {
+	return (
+		<ControlContainer>
+			<StyleControl.Label>{ __( 'Transform', 'elementor' ) }</StyleControl.Label>
+			<StyleControl bind={ 'text-transform' }>
+				<ToggleControl options={ options } />
+			</StyleControl>
+		</ControlContainer>
+	);
+};

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

@@ -5,6 +5,11 @@ import { TextStyleControl } from './text-style-control';
 import { __ } from '@wordpress/i18n';
 import { FontSizeControl } from './font-size-control';
 import { FontWeightControl } from './font-weight-control';
+import { TextColorControl } from './text-color-control';
+import { LetterSpacingControl } from './letter-spacing-control';
+import { WordSpacingControl } from './word-spacing-control';
+import { CollapsibleContent } from '../../collapsible-content';
+import { TransformControl } from './transform-control';
 
 export const TypographySection = () => {
 	return (
@@ -13,7 +18,16 @@ export const TypographySection = () => {
 				<FontWeightControl />
 				<FontSizeControl />
 				<Divider />
-				<TextStyleControl />
+				<TextColorControl />
+				<CollapsibleContent>
+					<Stack gap={ 1.5 } sx={ { pt: 1.5 } }>
+						<LetterSpacingControl />
+						<WordSpacingControl />
+						<Divider />
+						<TextStyleControl />
+						<TransformControl />
+					</Stack>
+				</CollapsibleContent>
 			</Stack>
 		</AccordionSection>
 	);

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { StyleControl } from '../../../controls/style-control';
+import { SizeControl } from '../../../controls/control-types/size-control';
+import { ControlContainer } from '../../../controls/components/control-container';
+import { __ } from '@wordpress/i18n';
+
+export const WordSpacingControl = () => {
+	return (
+		<StyleControl bind="word-spacing">
+			<ControlContainer>
+				<StyleControl.Label>{ __( 'Word Spacing', 'elementor' ) }</StyleControl.Label>
+				<SizeControl />
+			</ControlContainer>
+		</StyleControl>
+	);
+};

package/src/components/style-tab.tsx

@@ -5,19 +5,43 @@ 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 { PositionSection } from './style-sections/position-section/position-section';
+import { StyleDefinition } from '@elementor/editor-style';
+import { SpacingSection } from './style-sections/spacing-section/spacing-section';
+
+const CLASSES_PROP_KEY = 'classes';
 
 export const StyleTab = () => {
-	const { element } = useElementContext();
-	const elementStyles = useElementStyles( element.id );
-	// TODO: Handle selected style state.
-	const [ selectedStyleDef = null ] = Object.values( elementStyles || {} );
+	const styleDefinition = useStyleDefinition();
+	const classesProp = useClassesProp();
 
 	return (
-		<StyleContext selectedStyleDef={ selectedStyleDef }>
+		<StyleContext selectedStyleDef={ styleDefinition } selectedClassesProp={ classesProp }>
 			<Stack>
 				<SizeSection />
+				<PositionSection />
 				<TypographySection />
+				<SpacingSection />
 			</Stack>
 		</StyleContext>
 	);
 };
+
+function useClassesProp(): string {
+	const { elementType } = useElementContext();
+
+	const prop = Object.entries( elementType.propsSchema ).find( ( [ , { type } ] ) => type.key === CLASSES_PROP_KEY );
+
+	if ( ! prop ) {
+		throw new Error( 'Element does not have a classes prop' );
+	}
+
+	return prop[ 0 ];
+}
+
+function useStyleDefinition(): StyleDefinition | null {
+	const { element } = useElementContext();
+	const elementStyles = useElementStyles( element.id );
+
+	return Object.values( elementStyles || {} )[ 0 ] ?? null;
+}

package/src/contexts/style-context.tsx

@@ -6,6 +6,7 @@ import { StyleDefinition, StyleVariant } from '@elementor/editor-style';
 type ContextValue = {
 	selectedStyleDef: StyleDefinition | null;
 	selectedMeta: StyleVariant[ 'meta' ];
+	selectedClassesProp: string;
 };
 
 const Context = createContext< ContextValue | null >( null );
@@ -13,14 +14,19 @@ const Context = createContext< ContextValue | null >( null );
 type Props = {
 	children: ReactNode;
 	selectedStyleDef: StyleDefinition | null;
+	selectedClassesProp: string;
 };
 
-export function StyleContext( { children, selectedStyleDef }: Props ) {
+export function StyleContext( { children, selectedStyleDef, selectedClassesProp }: Props ) {
 	const breakpoint = useActiveBreakpoint();
 	// TODO: Handle state when we support it.
 	const selectedMeta = { breakpoint, state: null } as const;
 
-	return <Context.Provider value={ { selectedStyleDef, selectedMeta } }>{ children }</Context.Provider>;
+	return (
+		<Context.Provider value={ { selectedStyleDef, selectedMeta, selectedClassesProp } }>
+			{ children }
+		</Context.Provider>
+	);
 }
 
 export function useStyleContext() {

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

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { JSX } from 'react';
+import { StackProps, styled, ToggleButton, ToggleButtonGroup } from '@elementor/ui';
+
+export type ToggleButtonGroupItem< TValue > = {
+	value: TValue;
+	label: string;
+	icon: JSX.ElementType;
+};
+
+const StyledToggleButtonGroup = styled( ToggleButtonGroup )`
+	${ ( { justify } ) => `justify-content: ${ justify };` }
+`;
+
+type ExclusiveValue< TValue > = TValue | null;
+type NonExclusiveValue< TValue > = TValue[];
+
+type Props< TValue > = {
+	justify?: StackProps[ 'justifyContent' ];
+	size?: 'tiny' | 'small' | 'medium' | 'large';
+	items: ToggleButtonGroupItem< TValue >[];
+} & (
+	| {
+			exclusive?: false;
+			value: NonExclusiveValue< TValue >;
+			onChange: ( value: NonExclusiveValue< TValue > ) => void;
+	  }
+	| {
+			exclusive: true;
+			value: ExclusiveValue< TValue >;
+			onChange: ( value: ExclusiveValue< TValue > ) => void;
+	  }
+);
+
+export const ControlToggleButtonGroup = < TValue, >( {
+	justify = 'end',
+	size = 'tiny',
+	value,
+	onChange,
+	items,
+	exclusive = false,
+}: Props< TValue > ) => {
+	const handleChange = (
+		_: React.MouseEvent< HTMLElement >,
+		newValue: typeof exclusive extends true ? ExclusiveValue< TValue > : NonExclusiveValue< TValue >
+	) => {
+		onChange( newValue as never );
+	};
+
+	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>
+			) ) }
+		</StyledToggleButtonGroup>
+	);
+};

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

@@ -0,0 +1,79 @@
+import { PropValue } from '../../types';
+import * as React from 'react';
+import { bindMenu, bindTrigger, Button, InputAdornment, Menu, MenuItem, TextField, usePopupState } from '@elementor/ui';
+import { useId } from 'react';
+
+export type TextFieldInnerSelectionProps = {
+	placeholder?: string;
+	type: string;
+	value: PropValue;
+	onChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+	endAdornment: React.ReactNode;
+	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 type SelectionEndAdornmentProps< T extends string > = {
+	options: T[];
+	onClick: ( value: T ) => void;
+	value: T;
+};
+
+export const SelectionEndAdornment = < T extends string >( {
+	options,
+	onClick,
+	value,
+}: SelectionEndAdornmentProps< T > ) => {
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: useId(),
+	} );
+
+	const handleMenuItemClick = ( index: number ) => {
+		onClick( options[ index ] );
+		popupState.close();
+	};
+
+	return (
+		<InputAdornment position="end">
+			<Button
+				size="small"
+				color="inherit"
+				sx={ { font: 'inherit', minWidth: 'initial' } }
+				{ ...bindTrigger( popupState ) }
+			>
+				{ value.toUpperCase() }
+			</Button>
+
+			<Menu MenuListProps={ { dense: true } } { ...bindMenu( popupState ) }>
+				{ options.map( ( option, index ) => (
+					<MenuItem key={ option } onClick={ () => handleMenuItemClick( index ) }>
+						{ option.toUpperCase() }
+					</MenuItem>
+				) ) }
+			</Menu>
+		</InputAdornment>
+	);
+};

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { UnstableColorPicker } from '@elementor/ui';
+import { useControl } from '../control-context';
+
+export const ColorControl = () => {
+	const { value, setValue } = useControl< string >();
+
+	const handleChange = debounce( ( selectedColor: string ) => {
+		setValue( selectedColor );
+	} );
+
+	return <UnstableColorPicker value={ value } onChange={ handleChange }></UnstableColorPicker>;
+};
+
+// TODO: Remove this when the color picker component sends one event per color change [DES-422].
+const debounce = < TArgs extends unknown[], TReturn >( func: ( ...args: TArgs ) => TReturn, wait = 300 ) => {
+	let timer: ReturnType< typeof setTimeout >;
+
+	return ( ...args: TArgs ) => {
+		clearTimeout( timer );
+
+		timer = setTimeout( () => func( ...args ), wait );
+	};
+};

package/src/controls/control-types/number-control.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { TextField } from '@elementor/ui';
+import { useControl } from '../control-context';
+
+const isEmptyOrNaN = ( value?: string | number ) =>
+	value === undefined || value === '' || Number.isNaN( Number( value ) );
+
+export const NumberControl = ( { placeholder }: { placeholder?: string } ) => {
+	const { value, setValue } = useControl< number | undefined >();
+
+	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		const eventValue: string = event.target.value;
+		setValue( isEmptyOrNaN( eventValue ) ? undefined : Number( eventValue ) );
+	};
+
+	return (
+		<TextField
+			size="tiny"
+			type="number"
+			value={ isEmptyOrNaN( value ) ? '' : value }
+			onChange={ handleChange }
+			placeholder={ placeholder }
+		/>
+	);
+};

package/src/controls/control-types/size-control.tsx

@@ -1,13 +1,9 @@
 import * as React from 'react';
-import { MenuItem, Select, SelectChangeEvent, Stack, TextField } from '@elementor/ui';
+import { InputAdornment } from '@elementor/ui';
 import { TransformablePropValue } from '../../types';
 import { useControl } from '../control-context';
 import { useSyncExternalState } from '../hooks/use-sync-external-state';
-
-export type SizeControlProps = {
-	units?: Unit[];
-	placeholder?: string;
-};
+import { SelectionEndAdornment, TextFieldInnerSelection } from '../components/text-field-inner-selection';
 
 export type Unit = 'px' | '%' | 'em' | 'rem' | 'vw';
 
@@ -15,7 +11,13 @@ const defaultUnits: Unit[] = [ 'px', '%', 'em', 'rem', 'vw' ];
 
 export type SizeControlValue = TransformablePropValue< { unit: Unit; size: number } >;
 
-export const SizeControl = ( { units = defaultUnits, placeholder }: SizeControlProps ) => {
+export type SizeControlProps = {
+	placeholder?: string;
+	startIcon?: React.ReactNode;
+	units?: Unit[];
+};
+
+export const SizeControl = ( { units = defaultUnits, placeholder, startIcon }: SizeControlProps ) => {
 	const { value, setValue } = useControl< SizeControlValue >();
 
 	const [ state, setState ] = useSyncExternalState< SizeControlValue >( {
@@ -28,9 +30,7 @@ export const SizeControl = ( { units = defaultUnits, placeholder }: SizeControlP
 		} ),
 	} );
 
-	const handleUnitChange = ( event: SelectChangeEvent< Unit > ) => {
-		const unit = event.target.value as Unit;
-
+	const handleUnitChange = ( unit: Unit ) => {
 		setState( ( prev ) => ( {
 			...prev,
 			value: {
@@ -53,29 +53,15 @@ export const SizeControl = ( { units = defaultUnits, placeholder }: SizeControlP
 	};
 
 	return (
-		<Stack direction="row">
-			<TextField
-				size="tiny"
-				type="number"
-				value={ Number.isNaN( state.value.size ) ? '' : state.value.size }
-				onChange={ handleSizeChange }
-				placeholder={ placeholder }
-			/>
-			<Select
-				size="tiny"
-				value={ state.value.unit }
-				onChange={ handleUnitChange }
-				MenuProps={ {
-					anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-					transformOrigin: { vertical: 'top', horizontal: 'right' },
-				} }
-			>
-				{ units.map( ( unit ) => (
-					<MenuItem key={ unit } value={ unit }>
-						{ unit.toUpperCase() }
-					</MenuItem>
-				) ) }
-			</Select>
-		</Stack>
+		<TextFieldInnerSelection
+			endAdornment={
+				<SelectionEndAdornment options={ units } onClick={ handleUnitChange } value={ state.value.unit } />
+			}
+			placeholder={ placeholder }
+			startAdornment={ startIcon ?? <InputAdornment position="start">{ startIcon }</InputAdornment> }
+			type="number"
+			value={ Number.isNaN( state.value.size ) ? '' : state.value.size }
+			onChange={ handleSizeChange }
+		/>
 	);
 };

package/src/controls/control-types/toggle-control.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { useControl } from '../control-context';
+import { ControlToggleButtonGroup, ToggleButtonGroupItem } from '../components/control-toggle-button-group';
+import { PropValue } from '../../types';
+
+type ToggleControlProps< T extends PropValue > = {
+	options: ToggleButtonGroupItem< T >[];
+};
+
+export const ToggleControl = < T extends PropValue >( { options }: ToggleControlProps< T > ) => {
+	const { value, setValue } = useControl< T >();
+
+	const handleToggle = ( option: T | null ) => {
+		setValue( option || undefined );
+	};
+
+	return (
+		<ControlToggleButtonGroup
+			items={ options }
+			value={ value || null }
+			onChange={ handleToggle }
+			exclusive={ true }
+		/>
+	);
+};

package/src/controls/hooks/use-style-control.ts

@@ -6,7 +6,7 @@ import { PropKey, PropValue } from '../../types';
 
 export const useStyleControl = < T extends PropValue >( propName: PropKey ) => {
 	const { element } = useElementContext();
-	const { selectedStyleDef, selectedMeta } = useStyleContext();
+	const { selectedStyleDef, selectedMeta, selectedClassesProp } = useStyleContext();
 
 	const value = useElementStyleProp< T >( {
 		elementID: element.id,
@@ -21,6 +21,7 @@ export const useStyleControl = < T extends PropValue >( propName: PropKey ) => {
 			styleDefID: selectedStyleDef?.id,
 			props: { [ propName ]: newValue },
 			meta: selectedMeta,
+			bind: selectedClassesProp,
 		} );
 	};
 

package/src/controls/settings-control.tsx

@@ -15,7 +15,7 @@ type Props = {
 export const SettingsControlProvider = ( { bind, children }: Props ) => {
 	const { element, elementType } = useElementContext();
 
-	const defaultValue = elementType.propsSchema[ bind ]?.default;
+	const defaultValue = elementType.propsSchema[ bind ]?.type.default;
 	const settingsValue = useWidgetSettings( { id: element.id, bind } );
 	const value = settingsValue ?? defaultValue ?? null;