@elementor/editor-components 4.0.0-manual → 4.0.1

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

@@ -1,176 +0,0 @@
-import * as React from 'react';
-import { useMemo, useRef, 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 { useSanitizeOverridableProps } from '../../../hooks/use-sanitize-overridable-props';
-import { useCurrentComponentId } from '../../../store/store';
-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 { updateOverridablePropParams } from '../../store/actions/update-overridable-prop-params';
-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 = useSanitizeOverridableProps( currentComponentId );
-	const [ isAddingGroup, setIsAddingGroup ] = useState( false );
-	const introductionRef = useRef< HTMLButtonElement >( null );
-	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,
-			source: 'user',
-		} );
-		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, source: 'user' } );
-		setDocumentModifiedStatus( true );
-	};
-
-	const handlePropertyUpdate = ( overrideKey: string, data: { label: string; group: string | null } ) => {
-		updateOverridablePropParams( {
-			componentId: currentComponentId,
-			overrideKey,
-			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
-						ref={ introductionRef }
-						size="tiny"
-						aria-label={ __( 'Close panel', 'elementor' ) }
-						onClick={ onClose }
-					>
-						<XIcon fontSize="tiny" />
-					</IconButton>
-				</Tooltip>
-			</PanelHeader>
-
-			<Divider />
-
-			<PanelBody>
-				{ showEmptyState ? (
-					<PropertiesEmptyState introductionRef={ introductionRef } />
-				) : (
-					<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/extended/components/component-properties-panel/component-properties-panel.tsx

@@ -1,43 +0,0 @@
-import * as React from 'react';
-import { usePanelActions as useEditingPanelActions } from '@elementor/editor-editing-panel';
-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 { close: closePanel } = usePanelActions();
-	const { open: openEditingPanel } = useEditingPanelActions();
-
-	return (
-		<ThemeProvider>
-			<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>
-				<Panel>
-					<ComponentPropertiesPanelContent
-						onClose={ () => {
-							closePanel();
-							openEditingPanel();
-						} }
-					/>
-				</Panel>
-			</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/extended/components/component-properties-panel/properties-empty-state.tsx

@@ -1,51 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { ComponentPropListIcon } from '@elementor/icons';
-import { Link, Stack, Typography } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { ComponentIntroduction } from '../component-introduction';
-
-export function PropertiesEmptyState( { introductionRef }: { introductionRef: React.RefObject< HTMLButtonElement > } ) {
-	const [ isOpen, setIsOpen ] = useState( false );
-	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"
-					sx={ { textDecorationLine: 'underline' } }
-					onClick={ () => setIsOpen( true ) }
-				>
-					{ __( 'Learn more', 'elementor' ) }
-				</Link>
-			</Stack>
-			<ComponentIntroduction
-				anchorRef={ introductionRef }
-				shouldShowIntroduction={ isOpen }
-				onClose={ () => setIsOpen( false ) }
-			/>
-		</>
-	);
-}

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