@elementor/editor-components 4.0.0-manual → 4.1.0-684

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

@@ -1,196 +0,0 @@
-import * as React from 'react';
-import { EditableField, EllipsisWithTooltip, 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={ {
-									height: 28,
-									display: 'flex',
-									alignItems: 'center',
-									border: 2,
-									borderColor: 'text.secondary',
-									borderRadius: 1,
-									pl: 0.5,
-									flexGrow: 1,
-									overflow: 'hidden',
-									textOverflow: 'ellipsis',
-									whiteSpace: 'nowrap',
-									width: '100%',
-								} }
-							>
-								<EditableField
-									ref={ editableRef }
-									as={ Typography }
-									variant="caption"
-									error={ error ?? undefined }
-									sx={ { color: 'text.primary', fontWeight: 400, lineHeight: 1.66 } }
-									{ ...getEditableProps() }
-								/>
-							</Box>
-						) : (
-							<EllipsisWithTooltip
-								title={ group.label }
-								as={ Typography }
-								variant="caption"
-								sx={ { color: 'text.primary', fontWeight: 400, lineHeight: 1.66 } }
-							/>
-						) }
-						<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 }
-										existingLabels={ Object.values( props ).map( ( p ) => p.label ) }
-										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/extended/components/component-properties-panel/property-item.tsx

@@ -1,124 +0,0 @@
-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 }[];
-	existingLabels: string[];
-	onDelete: ( propKey: string ) => void;
-	onUpdate: ( data: { label: string; group: string | null } ) => void;
-};
-
-export function PropertyItem( {
-	prop,
-	sortableTriggerProps,
-	isDragPlaceholder,
-	groups,
-	existingLabels,
-	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 }
-					existingLabels={ existingLabels }
-					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';
-}

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

@@ -1,92 +0,0 @@
-import * as React from 'react';
-import { GripVerticalIcon } from '@elementor/icons';
-import {
-	Box,
-	styled,
-	UnstableSortableItem,
-	type UnstableSortableItemProps,
-	type UnstableSortableItemRenderProps,
-	UnstableSortableProvider,
-	type UnstableSortableProviderProps,
-} from '@elementor/ui';
-
-export const SortableProvider = < T extends string >( props: UnstableSortableProviderProps< T > ) => (
-	<UnstableSortableProvider restrictAxis variant="static" dragPlaceholderStyle={ { opacity: '1' } } { ...props } />
-);
-
-export type SortableTriggerProps = React.HTMLAttributes< HTMLDivElement > & {
-	triggerClassName?: string;
-};
-
-export const SortableTrigger = ( { triggerClassName, ...props }: SortableTriggerProps ) => (
-	<StyledSortableTrigger
-		{ ...props }
-		role="button"
-		className={ `sortable-trigger ${ triggerClassName ?? '' }`.trim() }
-		aria-label="sort"
-	>
-		<GripVerticalIcon fontSize="tiny" />
-	</StyledSortableTrigger>
-);
-
-type SortableItemProps = {
-	id: UnstableSortableItemProps[ 'id' ];
-	children: ( props: SortableItemRenderData ) => React.ReactNode;
-};
-
-export type SortableItemRenderData = {
-	isDragged: boolean;
-	isDragPlaceholder: boolean;
-	triggerProps: React.HTMLAttributes< HTMLElement >;
-	triggerStyle: React.CSSProperties;
-};
-
-export const SortableItem = ( { children, id }: SortableItemProps ) => (
-	<UnstableSortableItem
-		id={ id }
-		render={ ( {
-			itemProps,
-			isDragged,
-			triggerProps,
-			itemStyle,
-			triggerStyle,
-			dropIndicationStyle,
-			showDropIndication,
-			isDragOverlay,
-			isDragPlaceholder,
-		}: UnstableSortableItemRenderProps ) => (
-			<Box
-				{ ...itemProps }
-				style={ itemStyle }
-				component="div"
-				role="listitem"
-				sx={ {
-					backgroundColor: isDragOverlay ? 'background.paper' : undefined,
-				} }
-			>
-				{ children( {
-					isDragged,
-					isDragPlaceholder,
-					triggerProps,
-					triggerStyle,
-				} ) }
-				{ showDropIndication && <SortableItemIndicator style={ dropIndicationStyle } /> }
-			</Box>
-		) }
-	/>
-);
-
-const StyledSortableTrigger = styled( 'div' )( ( { theme } ) => ( {
-	position: 'absolute',
-	left: '-2px',
-	top: '50%',
-	transform: `translate( -${ theme.spacing( 1.5 ) }, -50% )`,
-	color: theme.palette.action.active,
-	cursor: 'grab',
-} ) );
-
-const SortableItemIndicator = styled( Box )`
-	width: 100%;
-	height: 1px;
-	background-color: ${ ( { theme } ) => theme.palette.text.primary };
-`;

package/src/extended/components/component-properties-panel/use-current-editable-item.ts

@@ -1,73 +0,0 @@
-import { useState } from 'react';
-import type * as React from 'react';
-import { setDocumentModifiedStatus } from '@elementor/editor-documents';
-import { useEditable } from '@elementor/editor-ui';
-import { __ } from '@wordpress/i18n';
-
-import { useCurrentComponentId, useOverridableProps } from '../../../store/store';
-import { renameOverridableGroup } from '../../store/actions/rename-overridable-group';
-import { validateGroupLabel } from './utils/validate-group-label';
-
-export type GroupLabelEditableState = {
-	editableRef: React.RefObject< HTMLElement | null >;
-	isEditing: boolean;
-	error: string | null;
-	getEditableProps: () => { value: string };
-	setEditingGroupId: ( groupId: string ) => void;
-	editingGroupId: string | null;
-};
-
-export function useCurrentEditableItem(): GroupLabelEditableState {
-	const [ editingGroupId, setEditingGroupId ] = useState< string | null >( null );
-	const currentComponentId = useCurrentComponentId();
-	const overridableProps = useOverridableProps( currentComponentId );
-
-	const allGroupsRecord = overridableProps?.groups?.items ?? {};
-	const currentGroup = editingGroupId ? allGroupsRecord[ editingGroupId ] : null;
-
-	const validateLabel = ( newLabel: string ): string | null => {
-		const otherGroups = Object.fromEntries(
-			Object.entries( allGroupsRecord ).filter( ( [ id ] ) => id !== editingGroupId )
-		);
-
-		return validateGroupLabel( newLabel, otherGroups ) || null;
-	};
-
-	const handleSubmit = ( newLabel: string ) => {
-		if ( ! editingGroupId || ! currentComponentId ) {
-			throw new Error( __( 'Group ID or component ID is missing', 'elementor' ) );
-		}
-
-		renameOverridableGroup( {
-			componentId: currentComponentId,
-			groupId: editingGroupId,
-			label: newLabel,
-		} );
-
-		setDocumentModifiedStatus( true );
-	};
-
-	const {
-		ref: editableRef,
-		openEditMode,
-		isEditing,
-		error,
-		getProps: getEditableProps,
-	} = useEditable( {
-		value: currentGroup?.label ?? '',
-		onSubmit: handleSubmit,
-		validation: validateLabel,
-	} );
-
-	return {
-		editableRef,
-		isEditing,
-		error,
-		getEditableProps,
-		setEditingGroupId: ( groupId ) => {
-			setEditingGroupId( groupId );
-			openEditMode();
-		},
-		editingGroupId,
-	};
-}

package/src/extended/components/component-properties-panel/utils/generate-unique-label.ts

@@ -1,21 +0,0 @@
-import { type OverridablePropsGroup } from '../../../../types';
-
-const DEFAULT_NEW_GROUP_LABEL = 'New group';
-
-export function generateUniqueLabel( groups: OverridablePropsGroup[] ): string {
-	const existingLabels = new Set( groups.map( ( group ) => group.label ) );
-
-	if ( ! existingLabels.has( DEFAULT_NEW_GROUP_LABEL ) ) {
-		return DEFAULT_NEW_GROUP_LABEL;
-	}
-
-	let index = 1;
-	let newLabel = `${ DEFAULT_NEW_GROUP_LABEL }-${ index }`;
-
-	while ( existingLabels.has( newLabel ) ) {
-		index++;
-		newLabel = `${ DEFAULT_NEW_GROUP_LABEL }-${ index }`;
-	}
-
-	return newLabel;
-}

package/src/extended/components/component-properties-panel/utils/validate-group-label.ts

@@ -1,24 +0,0 @@
-import { __ } from '@wordpress/i18n';
-
-import { type OverridablePropsGroup } from '../../../../types';
-
-export const ERROR_MESSAGES = {
-	EMPTY_NAME: __( 'Group name is required', 'elementor' ),
-	DUPLICATE_NAME: __( 'Group name already exists', 'elementor' ),
-} as const;
-
-export function validateGroupLabel( label: string, existingGroups: Record< string, OverridablePropsGroup > ): string {
-	const trimmedLabel = label.trim();
-
-	if ( ! trimmedLabel ) {
-		return ERROR_MESSAGES.EMPTY_NAME;
-	}
-
-	const isDuplicate = Object.values( existingGroups ).some( ( group ) => group.label === trimmedLabel );
-
-	if ( isDuplicate ) {
-		return ERROR_MESSAGES.DUPLICATE_NAME;
-	}
-
-	return '';
-}