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

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

@@ -0,0 +1,92 @@
+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: 0,
+	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/components/component-properties-panel/use-current-editable-item.ts

@@ -0,0 +1,74 @@
+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 { renameOverridableGroup } from '../../store/actions/rename-overridable-group';
+import { useCurrentComponentId } from '../../store/store';
+import { useOverridableProps } from '../component-panel-header/use-overridable-props';
+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/components/component-properties-panel/utils/generate-unique-label.ts

@@ -0,0 +1,21 @@
+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/components/component-properties-panel/utils/validate-group-label.ts

@@ -0,0 +1,24 @@
+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 '';
+}

package/src/components/instance-editing-panel/instance-editing-panel.tsx

@@ -18,7 +18,7 @@ import { OverridePropsGroup } from './override-props-group';
 export function InstanceEditingPanel() {
 	const { element } = useElement();
 	const settings = useElementSetting( element.id, 'component_instance' );
-	const componentId = ( componentInstancePropTypeUtil.extract( settings )?.component_id as NumberPropValue ).value;
+	const componentId = ( componentInstancePropTypeUtil.extract( settings )?.component_id as NumberPropValue )?.value;
 
 	const component = componentId ? selectComponent( getState(), componentId ) : null;
 	const overridableProps = componentId ? selectOverridableProps( getState(), componentId ) : null;

package/src/components/overridable-props/overridable-prop-form.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { Form, MenuListItem } from '@elementor/editor-ui';
-import { Button, FormLabel, Grid, Select, Stack, TextField, Typography } from '@elementor/ui';
+import { Button, FormLabel, Grid, Select, Stack, type SxProps, TextField, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { type OverridableProp } from '../../types';
@@ -14,9 +14,10 @@ type Props = {
 	onSubmit: ( data: { label: string; group: string | null } ) => void;
 	currentValue?: OverridableProp;
 	groups?: { value: string; label: string }[];
+	sx?: SxProps;
 };
 
-export function OverridablePropForm( { onSubmit, groups, currentValue }: Props ) {
+export function OverridablePropForm( { onSubmit, groups, currentValue, sx }: Props ) {
 	const [ propLabel, setPropLabel ] = useState< string | null >( currentValue?.label ?? null );
 	const [ group, setGroup ] = useState< string | null >( currentValue?.groupId ?? groups?.[ 0 ]?.value ?? null );
 
@@ -30,7 +31,7 @@ export function OverridablePropForm( { onSubmit, groups, currentValue }: Props )
 
 	return (
 		<Form onSubmit={ () => onSubmit( { label: propLabel ?? '', group } ) }>
-			<Stack alignItems="start" width="268px">
+			<Stack alignItems="start" sx={ { width: '268px', ...sx } }>
 				<Stack
 					direction="row"
 					alignItems="center"
@@ -67,7 +68,9 @@ export function OverridablePropForm( { onSubmit, groups, currentValue }: Props )
 							size={ SIZE }
 							fullWidth
 							value={ group ?? null }
-							onChange={ setGroup }
+							onChange={ ( e: React.ChangeEvent< HTMLSelectElement > ) =>
+								setGroup( e.target.value as string | null )
+							}
 							displayEmpty
 							renderValue={ ( selectedValue: string | null ) => {
 								if ( ! selectedValue || selectedValue === '' ) {

package/src/init.ts

@@ -14,6 +14,7 @@ import {
 } from '@elementor/editor-editing-panel';
 import { type V1ElementData } from '@elementor/editor-elements';
 import { injectTab } from '@elementor/editor-elements-panel';
+import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { stylesRepository } from '@elementor/editor-styles-repository';
 import { registerDataHook } from '@elementor/editor-v1-adapters';
 import { __registerSlice as registerSlice } from '@elementor/store';
@@ -23,6 +24,7 @@ import { componentInstanceTransformer } from './component-instance-transformer';
 import { componentOverridableTransformer } from './component-overridable-transformer';
 import { componentOverrideTransformer } from './component-override-transformer';
 import { ComponentPanelHeader } from './components/component-panel-header/component-panel-header';
+import { panel as componentPropertiesPanel } from './components/component-properties-panel/component-properties-panel';
 import { Components } from './components/components-tab/components';
 import { COMPONENT_DOCUMENT_TYPE } from './components/consts';
 import { CreateComponentForm } from './components/create-component-form/create-component-form';
@@ -47,6 +49,7 @@ export function init() {
 	stylesRepository.register( componentsStylesProvider );
 
 	registerSlice( slice );
+	registerPanel( componentPropertiesPanel );
 
 	registerElementType( TYPE, ( options: CreateTemplatedElementTypeOptions ) =>
 		createComponentType( { ...options, showLockedByModal: openEditModeDialog } )

package/src/store/actions/add-overridable-group.ts

@@ -0,0 +1,47 @@
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+
+import { type ComponentId, type OverridablePropsGroup } from '../../types';
+import { selectOverridableProps, slice } from '../store';
+
+type AddGroupParams = {
+	componentId: ComponentId;
+	groupId: string;
+	label: string;
+};
+
+export function addOverridableGroup( {
+	componentId,
+	groupId,
+	label,
+}: AddGroupParams ): OverridablePropsGroup | undefined {
+	const overridableProps = selectOverridableProps( getState(), componentId );
+
+	if ( ! overridableProps ) {
+		return;
+	}
+
+	const newGroup: OverridablePropsGroup = {
+		id: groupId,
+		label,
+		props: [],
+	};
+
+	dispatch(
+		slice.actions.setOverridableProps( {
+			componentId,
+			overridableProps: {
+				...overridableProps,
+				groups: {
+					...overridableProps.groups,
+					items: {
+						...overridableProps.groups.items,
+						[ groupId ]: newGroup,
+					},
+					order: [ groupId, ...overridableProps.groups.order ],
+				},
+			},
+		} )
+	);
+
+	return newGroup;
+}

package/src/store/actions/delete-overridable-group.ts

@@ -0,0 +1,38 @@
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+
+import { type ComponentId } from '../../types';
+import { selectOverridableProps, slice } from '../store';
+import { deleteGroup } from '../utils/groups-transformers';
+
+type DeleteGroupParams = {
+	componentId: ComponentId;
+	groupId: string;
+};
+
+export function deleteOverridableGroup( { componentId, groupId }: DeleteGroupParams ): boolean {
+	const overridableProps = selectOverridableProps( getState(), componentId );
+
+	if ( ! overridableProps ) {
+		return false;
+	}
+
+	const group = overridableProps.groups.items[ groupId ];
+
+	if ( ! group || group.props.length > 0 ) {
+		return false;
+	}
+
+	const updatedGroups = deleteGroup( overridableProps.groups, groupId );
+
+	dispatch(
+		slice.actions.setOverridableProps( {
+			componentId,
+			overridableProps: {
+				...overridableProps,
+				groups: updatedGroups,
+			},
+		} )
+	);
+
+	return true;
+}

package/src/store/actions/delete-overridable-prop.ts

@@ -0,0 +1,56 @@
+import { getContainer, updateElementSettings } from '@elementor/editor-elements';
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+
+import { type ComponentId } from '../../types';
+import { selectOverridableProps, slice } from '../store';
+import { removePropFromAllGroups } from '../utils/groups-transformers';
+
+type DeletePropParams = {
+	componentId: ComponentId;
+	propKey: string;
+};
+
+export function deleteOverridableProp( { componentId, propKey }: DeletePropParams ): void {
+	const overridableProps = selectOverridableProps( getState(), componentId );
+
+	if ( ! overridableProps ) {
+		return;
+	}
+
+	const prop = overridableProps.props[ propKey ];
+
+	if ( ! prop ) {
+		return;
+	}
+
+	revertElementSetting( prop.elementId, prop.propKey, prop.originValue );
+
+	const { [ propKey ]: removedProp, ...remainingProps } = overridableProps.props;
+
+	const updatedGroups = removePropFromAllGroups( overridableProps.groups, propKey );
+
+	dispatch(
+		slice.actions.setOverridableProps( {
+			componentId,
+			overridableProps: {
+				...overridableProps,
+				props: remainingProps,
+				groups: updatedGroups,
+			},
+		} )
+	);
+}
+
+function revertElementSetting( elementId: string, settingKey: string, originValue: unknown ): void {
+	const container = getContainer( elementId );
+
+	if ( ! container ) {
+		return;
+	}
+
+	updateElementSettings( {
+		id: elementId,
+		props: { [ settingKey ]: originValue ?? null },
+		withHistory: false,
+	} );
+}

package/src/store/actions/rename-overridable-group.ts

@@ -0,0 +1,39 @@
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+
+import { type ComponentId } from '../../types';
+import { selectOverridableProps, slice } from '../store';
+import { renameGroup } from '../utils/groups-transformers';
+
+type RenameGroupParams = {
+	componentId: ComponentId;
+	groupId: string;
+	label: string;
+};
+
+export function renameOverridableGroup( { componentId, groupId, label }: RenameGroupParams ): boolean {
+	const overridableProps = selectOverridableProps( getState(), componentId );
+
+	if ( ! overridableProps ) {
+		return false;
+	}
+
+	const group = overridableProps.groups.items[ groupId ];
+
+	if ( ! group ) {
+		return false;
+	}
+
+	const updatedGroups = renameGroup( overridableProps.groups, groupId, label );
+
+	dispatch(
+		slice.actions.setOverridableProps( {
+			componentId,
+			overridableProps: {
+				...overridableProps,
+				groups: updatedGroups,
+			},
+		} )
+	);
+
+	return true;
+}

package/src/store/actions/reorder-group-props.ts

@@ -0,0 +1,43 @@
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+
+import { type ComponentId } from '../../types';
+import { selectOverridableProps, slice } from '../store';
+
+type ReorderGroupPropsParams = {
+	componentId: ComponentId;
+	groupId: string;
+	newPropsOrder: string[];
+};
+
+export function reorderGroupProps( { componentId, groupId, newPropsOrder }: ReorderGroupPropsParams ): void {
+	const overridableProps = selectOverridableProps( getState(), componentId );
+
+	if ( ! overridableProps ) {
+		return;
+	}
+
+	const group = overridableProps.groups.items[ groupId ];
+
+	if ( ! group ) {
+		return;
+	}
+
+	dispatch(
+		slice.actions.setOverridableProps( {
+			componentId,
+			overridableProps: {
+				...overridableProps,
+				groups: {
+					...overridableProps.groups,
+					items: {
+						...overridableProps.groups.items,
+						[ groupId ]: {
+							...group,
+							props: newPropsOrder,
+						},
+					},
+				},
+			},
+		} )
+	);
+}

package/src/store/actions/reorder-overridable-groups.ts

@@ -0,0 +1,30 @@
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+
+import { type ComponentId } from '../../types';
+import { selectOverridableProps, slice } from '../store';
+
+type ReorderGroupsParams = {
+	componentId: ComponentId;
+	newOrder: string[];
+};
+
+export function reorderOverridableGroups( { componentId, newOrder }: ReorderGroupsParams ): void {
+	const overridableProps = selectOverridableProps( getState(), componentId );
+
+	if ( ! overridableProps ) {
+		return;
+	}
+
+	dispatch(
+		slice.actions.setOverridableProps( {
+			componentId,
+			overridableProps: {
+				...overridableProps,
+				groups: {
+					...overridableProps.groups,
+					order: newOrder,
+				},
+			},
+		} )
+	);
+}