@elementor/editor-components 3.35.0-379 → 3.35.0-380

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "3.35.0-379",
+  "version": "3.35.0-380",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,30 +40,30 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.35.0-379",
-    "@elementor/editor-canvas": "3.35.0-379",
-    "@elementor/editor-controls": "3.35.0-379",
-    "@elementor/editor-documents": "3.35.0-379",
-    "@elementor/editor-editing-panel": "3.35.0-379",
-    "@elementor/editor-elements": "3.35.0-379",
-    "@elementor/editor-elements-panel": "3.35.0-379",
-    "@elementor/editor-mcp": "3.35.0-379",
-    "@elementor/editor-panels": "3.35.0-379",
-    "@elementor/editor-props": "3.35.0-379",
-    "@elementor/editor-styles-repository": "3.35.0-379",
-    "@elementor/editor-ui": "3.35.0-379",
-    "@elementor/editor-v1-adapters": "3.35.0-379",
-    "@elementor/http-client": "3.35.0-379",
+    "@elementor/editor": "3.35.0-380",
+    "@elementor/editor-canvas": "3.35.0-380",
+    "@elementor/editor-controls": "3.35.0-380",
+    "@elementor/editor-documents": "3.35.0-380",
+    "@elementor/editor-editing-panel": "3.35.0-380",
+    "@elementor/editor-elements": "3.35.0-380",
+    "@elementor/editor-elements-panel": "3.35.0-380",
+    "@elementor/editor-mcp": "3.35.0-380",
+    "@elementor/editor-panels": "3.35.0-380",
+    "@elementor/editor-props": "3.35.0-380",
+    "@elementor/editor-styles-repository": "3.35.0-380",
+    "@elementor/editor-ui": "3.35.0-380",
+    "@elementor/editor-v1-adapters": "3.35.0-380",
+    "@elementor/http-client": "3.35.0-380",
     "@elementor/icons": "^1.63.0",
-    "@elementor/mixpanel": "3.35.0-379",
-    "@elementor/query": "3.35.0-379",
-    "@elementor/schema": "3.35.0-379",
-    "@elementor/store": "3.35.0-379",
+    "@elementor/mixpanel": "3.35.0-380",
+    "@elementor/query": "3.35.0-380",
+    "@elementor/schema": "3.35.0-380",
+    "@elementor/store": "3.35.0-380",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-379",
+    "@elementor/utils": "3.35.0-380",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "3.35.0-379",
-    "@elementor/editor-current-user": "3.35.0-379"
+    "@elementor/editor-notifications": "3.35.0-380",
+    "@elementor/editor-current-user": "3.35.0-380"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/component-panel-header/component-badge.tsx

@@ -4,8 +4,8 @@ import { ComponentPropListIcon } from '@elementor/icons';
 import { Badge, Box, keyframes, styled, ToggleButton } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-export const ComponentsBadge = React.forwardRef< HTMLDivElement, { overridesCount: number } >(
-	( { overridesCount }, ref ) => {
+export const ComponentsBadge = React.forwardRef< HTMLDivElement, { overridesCount: number; onClick: () => void } >(
+	( { overridesCount, onClick }, ref ) => {
 		const prevCount = usePrevious( overridesCount );
 
 		const isFirstOverride = prevCount === 0 && overridesCount === 1;
@@ -24,7 +24,12 @@ export const ComponentsBadge = React.forwardRef< HTMLDivElement, { overridesCoun
 					</Box>
 				}
 			>
-				<ToggleButton value="overrides" size="tiny" aria-label={ __( 'View overrides', 'elementor' ) }>
+				<ToggleButton
+					value="overrides"
+					size="tiny"
+					onClick={ onClick }
+					aria-label={ __( 'View overrides', 'elementor' ) }
+				>
 					<ComponentPropListIcon fontSize="tiny" />
 				</ToggleButton>
 			</StyledBadge>

package/src/components/component-panel-header/component-panel-header.tsx

@@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n';
 
 import { useNavigateBack } from '../../hooks/use-navigate-back';
 import { useCurrentComponentId } from '../../store/store';
+import { usePanelActions } from '../component-properties-panel/component-properties-panel';
 import { ComponentIntroduction } from '../components-tab/component-introduction';
 import { ComponentsBadge } from './component-badge';
 import { useOverridableProps } from './use-overridable-props';
@@ -20,6 +21,9 @@ export const ComponentPanelHeader = () => {
 	const componentName = getComponentName();
 	const [ isMessageSuppressed, suppressMessage ] = useSuppressedMessage( MESSAGE_KEY );
 	const [ shouldShowIntroduction, setShouldShowIntroduction ] = React.useState( ! isMessageSuppressed );
+
+	const { open: openPropertiesPanel } = usePanelActions();
+
 	const overridesCount = overridableProps ? Object.keys( overridableProps.props ).length : 0;
 	const anchorRef = React.useRef< HTMLDivElement >( null );
 
@@ -53,7 +57,7 @@ export const ComponentPanelHeader = () => {
 						</Typography>
 					</Stack>
 				</Stack>
-				<ComponentsBadge overridesCount={ overridesCount } ref={ anchorRef } />
+				<ComponentsBadge overridesCount={ overridesCount } ref={ anchorRef } onClick={ openPropertiesPanel } />
 			</Stack>
 			<Divider />
 			<ComponentIntroduction

package/src/components/component-properties-panel/component-properties-panel-content.tsx

@@ -0,0 +1,165 @@
+import * as React from 'react';
+import { useMemo, useState } from 'react';
+import { setDocumentModifiedStatus } from '@elementor/editor-documents';
+import { PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
+import { ComponentPropListIcon, FolderPlusIcon, XIcon } from '@elementor/icons';
+import { Divider, IconButton, List, Stack, Tooltip } from '@elementor/ui';
+import { generateUniqueId } from '@elementor/utils';
+import { __ } from '@wordpress/i18n';
+
+import { addOverridableGroup } from '../../store/actions/add-overridable-group';
+import { deleteOverridableGroup } from '../../store/actions/delete-overridable-group';
+import { deleteOverridableProp } from '../../store/actions/delete-overridable-prop';
+import { reorderGroupProps } from '../../store/actions/reorder-group-props';
+import { reorderOverridableGroups } from '../../store/actions/reorder-overridable-groups';
+import { updateOverridableProp } from '../../store/actions/update-overridable-prop';
+import { useCurrentComponentId } from '../../store/store';
+import { useOverridableProps } from '../component-panel-header/use-overridable-props';
+import { PropertiesEmptyState } from './properties-empty-state';
+import { PropertiesGroup } from './properties-group';
+import { SortableItem, SortableProvider } from './sortable';
+import { useCurrentEditableItem } from './use-current-editable-item';
+import { generateUniqueLabel } from './utils/generate-unique-label';
+
+type Props = {
+	onClose: () => void;
+};
+
+export function ComponentPropertiesPanelContent( { onClose }: Props ) {
+	const currentComponentId = useCurrentComponentId();
+	const overridableProps = useOverridableProps( currentComponentId );
+	const [ isAddingGroup, setIsAddingGroup ] = useState( false );
+	const groupLabelEditable = useCurrentEditableItem();
+
+	const groups = useMemo( () => {
+		if ( ! overridableProps ) {
+			return [];
+		}
+
+		return overridableProps.groups.order
+			.map( ( groupId ) => overridableProps.groups.items[ groupId ] ?? null )
+			.filter( Boolean );
+	}, [ overridableProps ] );
+
+	const allGroupsForSelect = useMemo(
+		() => groups.map( ( group ) => ( { value: group.id, label: group.label } ) ),
+		[ groups ]
+	);
+
+	if ( ! currentComponentId || ! overridableProps ) {
+		return null;
+	}
+
+	const hasGroups = groups.length > 0;
+	const showEmptyState = ! hasGroups && ! isAddingGroup;
+	const groupIds = overridableProps.groups.order;
+
+	const handleAddGroupClick = () => {
+		if ( isAddingGroup ) {
+			return;
+		}
+
+		const newGroupId = generateUniqueId( 'group' );
+		const newLabel = generateUniqueLabel( groups );
+
+		addOverridableGroup( { componentId: currentComponentId, groupId: newGroupId, label: newLabel } );
+		setDocumentModifiedStatus( true );
+		setIsAddingGroup( false );
+
+		groupLabelEditable.setEditingGroupId( newGroupId );
+	};
+
+	const handleGroupsReorder = ( newOrder: string[] ) => {
+		reorderOverridableGroups( { componentId: currentComponentId, newOrder } );
+		setDocumentModifiedStatus( true );
+	};
+
+	const handlePropsReorder = ( groupId: string, newPropsOrder: string[] ) => {
+		reorderGroupProps( { componentId: currentComponentId, groupId, newPropsOrder } );
+		setDocumentModifiedStatus( true );
+	};
+
+	const handlePropertyDelete = ( propKey: string ) => {
+		deleteOverridableProp( { componentId: currentComponentId, propKey } );
+		setDocumentModifiedStatus( true );
+	};
+
+	const handlePropertyUpdate = ( propKey: string, data: { label: string; group: string | null } ) => {
+		updateOverridableProp( {
+			componentId: currentComponentId,
+			propKey,
+			label: data.label,
+			groupId: data.group,
+		} );
+		setDocumentModifiedStatus( true );
+	};
+
+	const handleGroupDelete = ( groupId: string ) => {
+		deleteOverridableGroup( { componentId: currentComponentId, groupId } );
+		setDocumentModifiedStatus( true );
+	};
+
+	return (
+		<>
+			<PanelHeader sx={ { justifyContent: 'start', pl: 1.5, pr: 1, py: 1 } }>
+				<Stack direction="row" alignItems="center" gap={ 0.5 } flexGrow={ 1 }>
+					<ComponentPropListIcon fontSize="tiny" />
+					<PanelHeaderTitle variant="subtitle2">
+						{ __( 'Component properties', 'elementor' ) }
+					</PanelHeaderTitle>
+				</Stack>
+
+				{ ! showEmptyState && (
+					<Tooltip title={ __( 'Add new group', 'elementor' ) }>
+						<IconButton
+							size="tiny"
+							aria-label={ __( 'Add new group', 'elementor' ) }
+							onClick={ handleAddGroupClick }
+						>
+							<FolderPlusIcon fontSize="tiny" />
+						</IconButton>
+					</Tooltip>
+				) }
+
+				<Tooltip title={ __( 'Close panel', 'elementor' ) }>
+					<IconButton size="tiny" aria-label={ __( 'Close panel', 'elementor' ) } onClick={ onClose }>
+						<XIcon fontSize="tiny" />
+					</IconButton>
+				</Tooltip>
+			</PanelHeader>
+
+			<Divider />
+
+			<PanelBody>
+				{ showEmptyState ? (
+					<PropertiesEmptyState />
+				) : (
+					<List sx={ { p: 2, display: 'flex', flexDirection: 'column', gap: 2 } }>
+						<SortableProvider value={ groupIds } onChange={ handleGroupsReorder }>
+							{ groups.map( ( group ) => (
+								<SortableItem key={ group.id } id={ group.id }>
+									{ ( { triggerProps, triggerStyle, isDragPlaceholder } ) => (
+										<PropertiesGroup
+											group={ group }
+											props={ overridableProps.props }
+											allGroups={ allGroupsForSelect }
+											allGroupsRecord={ overridableProps.groups.items }
+											sortableTriggerProps={ { ...triggerProps, style: triggerStyle } }
+											isDragPlaceholder={ isDragPlaceholder }
+											setIsAddingGroup={ setIsAddingGroup }
+											onPropsReorder={ ( newOrder ) => handlePropsReorder( group.id, newOrder ) }
+											onPropertyDelete={ handlePropertyDelete }
+											onPropertyUpdate={ handlePropertyUpdate }
+											editableLabelProps={ groupLabelEditable }
+											onGroupDelete={ handleGroupDelete }
+										/>
+									) }
+								</SortableItem>
+							) ) }
+						</SortableProvider>
+					</List>
+				) }
+			</PanelBody>
+		</>
+	);
+}

package/src/components/component-properties-panel/component-properties-panel.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { ElementProvider, usePanelActions as useEditingPanelActions } from '@elementor/editor-editing-panel';
+import { useSelectedElement } from '@elementor/editor-elements';
+import { __createPanel as createPanel, Panel } from '@elementor/editor-panels';
+import { ThemeProvider } from '@elementor/editor-ui';
+import { Alert, Box, ErrorBoundary } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { ComponentPropertiesPanelContent } from './component-properties-panel-content';
+
+const id = 'component-properties-panel';
+
+export const { panel, usePanelActions } = createPanel( {
+	id,
+	component: ComponentPropertiesPanel,
+} );
+
+function ComponentPropertiesPanel() {
+	const { element, elementType } = useSelectedElement();
+	const { close: closePanel } = usePanelActions();
+	const { open: openEditingPanel } = useEditingPanelActions();
+
+	if ( ! element || ! elementType ) {
+		return null;
+	}
+
+	return (
+		<ThemeProvider>
+			<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>
+				<ElementProvider element={ element } elementType={ elementType }>
+					<Panel>
+						<ComponentPropertiesPanelContent
+							onClose={ () => {
+								closePanel();
+								openEditingPanel();
+							} }
+						/>
+					</Panel>
+				</ElementProvider>
+			</ErrorBoundary>
+		</ThemeProvider>
+	);
+}
+
+const ErrorBoundaryFallback = () => (
+	<Box role="alert" sx={ { minHeight: '100%', p: 2 } }>
+		<Alert severity="error" sx={ { mb: 2, maxWidth: 400, textAlign: 'center' } }>
+			<strong>{ __( 'Something went wrong', 'elementor' ) }</strong>
+		</Alert>
+	</Box>
+);

package/src/components/component-properties-panel/properties-empty-state.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { ComponentPropListIcon } from '@elementor/icons';
+import { Link, Stack, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+const LEARN_MORE_URL = 'https://go.elementor.com/tbd/';
+
+export function PropertiesEmptyState() {
+	return (
+		<Stack
+			alignItems="center"
+			justifyContent="flex-start"
+			height="100%"
+			color="text.secondary"
+			sx={ { px: 2.5, pt: 10, pb: 5.5 } }
+			gap={ 1 }
+		>
+			<ComponentPropListIcon fontSize="large" />
+
+			<Typography align="center" variant="subtitle2">
+				{ __( 'Add your first property', 'elementor' ) }
+			</Typography>
+
+			<Typography align="center" variant="caption">
+				{ __( 'Make instances flexible while keeping design synced.', 'elementor' ) }
+			</Typography>
+
+			<Typography align="center" variant="caption">
+				{ __( 'Select any element, then click + next to a setting to expose it.', 'elementor' ) }
+			</Typography>
+
+			<Link
+				variant="caption"
+				color="secondary"
+				href={ LEARN_MORE_URL }
+				target="_blank"
+				rel="noopener noreferrer"
+				sx={ { textDecorationLine: 'underline' } }
+			>
+				{ __( 'Learn more', 'elementor' ) }
+			</Link>
+		</Stack>
+	);
+}

package/src/components/component-properties-panel/properties-group.tsx

@@ -0,0 +1,191 @@
+import * as React from 'react';
+import { EditableField, MenuListItem } from '@elementor/editor-ui';
+import { DotsVerticalIcon } from '@elementor/icons';
+import {
+	bindMenu,
+	bindTrigger,
+	Box,
+	IconButton,
+	List,
+	Menu,
+	Stack,
+	Tooltip,
+	Typography,
+	usePopupState,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { type OverridableProp, type OverridablePropsGroup } from '../../types';
+import { PropertyItem } from './property-item';
+import { SortableItem, SortableProvider, SortableTrigger, type SortableTriggerProps } from './sortable';
+import { type GroupLabelEditableState } from './use-current-editable-item';
+
+type Props = {
+	group: OverridablePropsGroup;
+	props: Record< string, OverridableProp >;
+	allGroups: { value: string; label: string }[];
+	allGroupsRecord: Record< string, OverridablePropsGroup >;
+	sortableTriggerProps: SortableTriggerProps;
+	isDragPlaceholder?: boolean;
+	setIsAddingGroup: ( isAddingGroup: boolean ) => void;
+	onPropsReorder: ( newOrder: string[] ) => void;
+	onPropertyDelete: ( propKey: string ) => void;
+	onPropertyUpdate: ( propKey: string, data: { label: string; group: string | null } ) => void;
+	onGroupDelete: ( groupId: string ) => void;
+	editableLabelProps: GroupLabelEditableState;
+};
+
+export function PropertiesGroup( {
+	group,
+	props,
+	allGroups,
+	sortableTriggerProps,
+	isDragPlaceholder,
+	onPropsReorder,
+	onPropertyDelete,
+	onPropertyUpdate,
+	onGroupDelete,
+	editableLabelProps,
+}: Props ) {
+	const groupProps = group.props
+		.map( ( propId ) => props[ propId ] )
+		.filter( ( prop ): prop is OverridableProp => Boolean( prop ) );
+
+	const popupState = usePopupState( {
+		variant: 'popover',
+		disableAutoFocus: true,
+	} );
+
+	const { editableRef, isEditing, error, getEditableProps, setEditingGroupId, editingGroupId } = editableLabelProps;
+
+	const hasProperties = group.props.length > 0;
+	const isThisGroupEditing = isEditing && editingGroupId === group.id;
+
+	const handleRenameClick = () => {
+		popupState.close();
+		setEditingGroupId( group.id );
+	};
+
+	const handleDeleteClick = () => {
+		popupState.close();
+		onGroupDelete( group.id );
+	};
+
+	return (
+		<Box
+			sx={ {
+				opacity: isDragPlaceholder ? 0.5 : 1,
+			} }
+		>
+			<Stack gap={ 1 }>
+				<Box
+					className="group-header"
+					sx={ {
+						position: 'relative',
+						'&:hover .group-sortable-trigger': {
+							visibility: 'visible',
+						},
+						'& .group-sortable-trigger': {
+							visibility: 'hidden',
+						},
+						'&:hover .group-menu': {
+							visibility: 'visible',
+						},
+						'& .group-menu': {
+							visibility: 'hidden',
+						},
+					} }
+				>
+					<SortableTrigger triggerClassName="group-sortable-trigger" { ...sortableTriggerProps } />
+					<Stack direction="row" alignItems="center" justifyContent="space-between" gap={ 2 }>
+						{ isThisGroupEditing ? (
+							<Box
+								sx={ {
+									flex: 1,
+									height: 28,
+									display: 'flex',
+									alignItems: 'center',
+									border: 2,
+									borderColor: 'text.secondary',
+									borderRadius: 1,
+									pl: 0.5,
+								} }
+							>
+								<EditableField
+									ref={ editableRef }
+									as={ Typography }
+									variant="caption"
+									error={ error ?? undefined }
+									sx={ { color: 'text.primary', fontWeight: 400, lineHeight: 1.66 } }
+									{ ...getEditableProps() }
+								/>
+							</Box>
+						) : (
+							<Typography
+								variant="caption"
+								sx={ { color: 'text.primary', fontWeight: 400, lineHeight: 1.66 } }
+							>
+								{ group.label }
+							</Typography>
+						) }
+						<IconButton
+							className="group-menu"
+							size="tiny"
+							sx={ { p: 0.25, visibility: isThisGroupEditing ? 'visible' : undefined } }
+							aria-label={ __( 'Group actions', 'elementor' ) }
+							{ ...bindTrigger( popupState ) }
+						>
+							<DotsVerticalIcon fontSize="tiny" />
+						</IconButton>
+					</Stack>
+				</Box>
+				<List sx={ { p: 0, display: 'flex', flexDirection: 'column', gap: 1 } }>
+					<SortableProvider value={ group.props } onChange={ onPropsReorder }>
+						{ groupProps.map( ( prop ) => (
+							<SortableItem key={ prop.overrideKey } id={ prop.overrideKey }>
+								{ ( { triggerProps, triggerStyle, isDragPlaceholder: isItemDragPlaceholder } ) => (
+									<PropertyItem
+										prop={ prop }
+										sortableTriggerProps={ { ...triggerProps, style: triggerStyle } }
+										isDragPlaceholder={ isItemDragPlaceholder }
+										groups={ allGroups }
+										onDelete={ onPropertyDelete }
+										onUpdate={ ( data ) => onPropertyUpdate( prop.overrideKey, data ) }
+									/>
+								) }
+							</SortableItem>
+						) ) }
+					</SortableProvider>
+				</List>
+			</Stack>
+			<Menu
+				{ ...bindMenu( popupState ) }
+				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
+				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
+			>
+				<MenuListItem sx={ { minWidth: '160px' } } onClick={ handleRenameClick }>
+					<Typography variant="caption" sx={ { color: 'text.primary' } }>
+						{ __( 'Rename', 'elementor' ) }
+					</Typography>
+				</MenuListItem>
+				<Tooltip
+					title={
+						hasProperties ? __( 'To delete the group, first remove all the properties', 'elementor' ) : ''
+					}
+					placement="right"
+				>
+					<span>
+						<MenuListItem onClick={ handleDeleteClick } disabled={ hasProperties }>
+							<Typography
+								variant="caption"
+								sx={ { color: hasProperties ? 'text.disabled' : 'error.light' } }
+							>
+								{ __( 'Delete', 'elementor' ) }
+							</Typography>
+						</MenuListItem>
+					</span>
+				</Tooltip>
+			</Menu>
+		</Box>
+	);
+}

package/src/components/component-properties-panel/property-item.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { getWidgetsCache } from '@elementor/editor-elements';
+import { XIcon } from '@elementor/icons';
+import { bindPopover, bindTrigger, Box, IconButton, Popover, Typography, usePopupState } from '@elementor/ui';
+
+import { type OverridableProp } from '../../types';
+import { OverridablePropForm } from '../overridable-props/overridable-prop-form';
+import { SortableTrigger, type SortableTriggerProps } from './sortable';
+
+type PropertyItemProps = {
+	prop: OverridableProp;
+	sortableTriggerProps: SortableTriggerProps;
+	isDragPlaceholder?: boolean;
+	groups: { value: string; label: string }[];
+	onDelete: ( propKey: string ) => void;
+	onUpdate: ( data: { label: string; group: string | null } ) => void;
+};
+
+export function PropertyItem( {
+	prop,
+	sortableTriggerProps,
+	isDragPlaceholder,
+	groups,
+	onDelete,
+	onUpdate,
+}: PropertyItemProps ) {
+	const popoverState = usePopupState( {
+		variant: 'popover',
+	} );
+	const icon = getElementIcon( prop );
+	const popoverProps = bindPopover( popoverState );
+
+	const handleSubmit = ( data: { label: string; group: string | null } ) => {
+		onUpdate( data );
+		popoverState.close();
+	};
+
+	const handleDelete = ( event: React.MouseEvent ) => {
+		event.stopPropagation();
+		onDelete( prop.overrideKey );
+	};
+
+	return (
+		<>
+			<Box
+				{ ...bindTrigger( popoverState ) }
+				sx={ {
+					position: 'relative',
+					pl: 0.5,
+					pr: 1,
+					py: 0.25,
+					minHeight: 28,
+					borderRadius: 1,
+					border: '1px solid',
+					borderColor: 'divider',
+					display: 'flex',
+					alignItems: 'center',
+					gap: 0.5,
+					opacity: isDragPlaceholder ? 0.5 : 1,
+					cursor: 'pointer',
+					'&:hover': {
+						backgroundColor: 'action.hover',
+					},
+					'&:hover .sortable-trigger': {
+						visibility: 'visible',
+					},
+					'& .sortable-trigger': {
+						visibility: 'hidden',
+					},
+					'&:hover .delete-button': {
+						visibility: 'visible',
+					},
+					'& .delete-button': {
+						visibility: 'hidden',
+					},
+				} }
+			>
+				<SortableTrigger { ...sortableTriggerProps } />
+				<Box
+					sx={ { display: 'flex', alignItems: 'center', color: 'text.primary', fontSize: 12, padding: 0.25 } }
+				>
+					<i className={ icon } />
+				</Box>
+				<Typography variant="caption" sx={ { color: 'text.primary', flexGrow: 1, fontSize: 10 } }>
+					{ prop.label }
+				</Typography>
+				<IconButton size="tiny" onClick={ handleDelete } aria-label="Delete property" sx={ { p: 0.25 } }>
+					<XIcon fontSize="tiny" />
+				</IconButton>
+			</Box>
+
+			<Popover
+				{ ...popoverProps }
+				anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
+				transformOrigin={ { vertical: 'top', horizontal: 'left' } }
+				PaperProps={ { sx: { width: popoverState.anchorEl?.getBoundingClientRect().width } } }
+			>
+				<OverridablePropForm
+					onSubmit={ handleSubmit }
+					currentValue={ prop }
+					groups={ groups }
+					sx={ { width: '100%' } }
+				/>
+			</Popover>
+		</>
+	);
+}
+
+function getElementIcon( prop: OverridableProp ): string {
+	const elType = prop.elType === 'widget' ? prop.widgetType : prop.elType;
+
+	const widgetsCache = getWidgetsCache();
+
+	if ( ! widgetsCache ) {
+		return 'eicon-apps';
+	}
+
+	const widgetConfig = widgetsCache[ elType ];
+
+	return widgetConfig?.icon || 'eicon-apps';
+}