@elementor/editor-editing-panel 3.33.0-99 → 3.34.2

package/src/controls-registry/element-controls/tabs-control/tabs-control.tsx

@@ -0,0 +1,229 @@
+import * as React from 'react';
+import {
+	ControlFormLabel,
+	Repeater,
+	type RepeaterItem,
+	type SetRepeaterValuesMeta,
+	useBoundProp,
+} from '@elementor/editor-controls';
+import {
+	getElementEditorSettings,
+	updateElementEditorSettings,
+	useElementChildren,
+	useElementEditorSettings,
+} from '@elementor/editor-elements';
+import { type CreateOptions, numberPropTypeUtil } from '@elementor/editor-props';
+import { InfoCircleFilledIcon } from '@elementor/icons';
+import { Alert, Chip, Infotip, type InfotipProps, Stack, Switch, TextField, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useElement } from '../../../contexts/element-context';
+import { SettingsField } from '../../settings-field';
+import { getElementByType } from '../get-element-by-type';
+import { TAB_ELEMENT_TYPE, type TabItem, useActions } from './use-actions';
+
+const TAB_MENU_ELEMENT_TYPE = 'e-tabs-menu';
+const TAB_CONTENT_AREA_ELEMENT_TYPE = 'e-tabs-content-area';
+export const TabsControl = ( { label }: { label: string } ) => {
+	return (
+		<SettingsField bind="default-active-tab" propDisplayName={ __( 'Tabs', 'elementor' ) }>
+			<TabsControlContent label={ label } />
+		</SettingsField>
+	);
+};
+
+export const TabsControlContent = ( { label }: { label: string } ) => {
+	const { element } = useElement();
+	const { addItem, duplicateItem, moveItem, removeItem } = useActions();
+
+	const { [ TAB_ELEMENT_TYPE ]: tabLinks } = useElementChildren( element.id, {
+		[ TAB_MENU_ELEMENT_TYPE ]: TAB_ELEMENT_TYPE,
+	} );
+
+	const tabList = getElementByType( element.id, TAB_MENU_ELEMENT_TYPE );
+	const tabContentArea = getElementByType( element.id, TAB_CONTENT_AREA_ELEMENT_TYPE );
+
+	const repeaterValues: RepeaterItem< TabItem >[] = tabLinks.map( ( tabLink, index ) => {
+		const { title: titleSetting } = getElementEditorSettings( tabLink.id ) ?? {};
+
+		return {
+			id: tabLink.id,
+			title: titleSetting,
+			index,
+		};
+	} );
+
+	const setValue = (
+		_newValues: RepeaterItem< TabItem >[],
+		_options: CreateOptions,
+		meta?: SetRepeaterValuesMeta< RepeaterItem< TabItem > >
+	) => {
+		if ( meta?.action?.type === 'add' ) {
+			const items = meta.action.payload;
+
+			return addItem( { tabContentAreaId: tabContentArea.id, items, tabsMenuId: tabList.id } );
+		}
+
+		if ( meta?.action?.type === 'remove' ) {
+			const items = meta.action.payload;
+
+			return removeItem( {
+				items,
+				tabContentAreaId: tabContentArea.id,
+			} );
+		}
+
+		if ( meta?.action?.type === 'duplicate' ) {
+			const items = meta.action.payload;
+
+			return duplicateItem( { items, tabContentAreaId: tabContentArea.id } );
+		}
+
+		if ( meta?.action?.type === 'reorder' ) {
+			const { from, to } = meta.action.payload;
+
+			return moveItem( {
+				toIndex: to,
+				tabsMenuId: tabList.id,
+				tabContentAreaId: tabContentArea.id,
+				movedElementId: tabLinks[ from ].id,
+				movedElementIndex: from,
+			} );
+		}
+	};
+
+	return (
+		<Repeater
+			showToggle={ false }
+			values={ repeaterValues }
+			setValues={ setValue }
+			showRemove={ repeaterValues.length > 1 }
+			label={ label }
+			itemSettings={ {
+				getId: ( { item } ) => item.id,
+				initialValues: { id: '', title: 'Tab' },
+				Label: ItemLabel,
+				Content: ItemContent,
+				Icon: () => null,
+			} }
+		/>
+	);
+};
+
+const ItemLabel = ( { value, index }: { value: TabItem; index: number } ) => {
+	const id = value.id ?? '';
+
+	const editorSettings = useElementEditorSettings( id );
+
+	const elementTitle = editorSettings?.title;
+
+	return (
+		<Stack sx={ { minHeight: 20 } } direction="row" alignItems="center" gap={ 1.5 }>
+			<span>{ elementTitle }</span>
+			<ItemDefaultTab index={ index } />
+		</Stack>
+	);
+};
+
+const ItemDefaultTab = ( { index }: { index: number } ) => {
+	const { value: defaultItem } = useBoundProp( numberPropTypeUtil );
+
+	const isDefault = defaultItem === index;
+
+	if ( ! isDefault ) {
+		return null;
+	}
+
+	return <Chip size="tiny" shape="rounded" label={ __( 'Default', 'elementor' ) } />;
+};
+
+const ItemContent = ( { value, index }: { value: TabItem; index: number } ) => {
+	if ( ! value.id ) {
+		return null;
+	}
+
+	return (
+		<Stack p={ 2 } gap={ 1.5 }>
+			<TabLabelControl elementId={ value.id } />
+			<SettingsField bind="default-active-tab" propDisplayName={ __( 'Tabs', 'elementor' ) }>
+				<DefaultTabControl tabIndex={ index } />
+			</SettingsField>
+		</Stack>
+	);
+};
+
+const DefaultTabControl = ( { tabIndex }: { tabIndex: number } ) => {
+	const { value, setValue } = useBoundProp( numberPropTypeUtil );
+
+	const isDefault = value === tabIndex;
+
+	return (
+		<Stack direction="row" alignItems="center" justifyContent="space-between" gap={ 2 }>
+			<ControlFormLabel>{ __( 'Set as default tab', 'elementor' ) }</ControlFormLabel>
+			<ConditionalTooltip showTooltip={ isDefault } placement="right">
+				<Switch
+					size="small"
+					checked={ isDefault }
+					disabled={ isDefault }
+					onChange={ ( { target }: React.ChangeEvent< HTMLInputElement > ) => {
+						setValue( target.checked ? tabIndex : null );
+					} }
+					inputProps={ {
+						...( isDefault ? { style: { opacity: 0, cursor: 'not-allowed' } } : {} ),
+					} }
+				/>
+			</ConditionalTooltip>
+		</Stack>
+	);
+};
+
+const TabLabelControl = ( { elementId }: { elementId: string } ) => {
+	const editorSettings = useElementEditorSettings( elementId );
+
+	const label = editorSettings?.title ?? '';
+
+	return (
+		<Stack gap={ 1 }>
+			<ControlFormLabel>{ __( 'Tab name', 'elementor' ) }</ControlFormLabel>
+			<TextField
+				size="tiny"
+				value={ label }
+				onChange={ ( { target }: React.ChangeEvent< HTMLInputElement > ) => {
+					updateElementEditorSettings( {
+						elementId,
+						settings: { title: target.value },
+					} );
+				} }
+			/>
+		</Stack>
+	);
+};
+
+export const ConditionalTooltip = ( {
+	showTooltip,
+	children,
+}: Omit< InfotipProps, 'content' > & { showTooltip: boolean } ) => {
+	if ( ! showTooltip ) {
+		return children;
+	}
+
+	return (
+		<Infotip
+			arrow={ false }
+			content={
+				<Alert
+					color="secondary"
+					icon={ <InfoCircleFilledIcon fontSize="tiny" /> }
+					size="small"
+					sx={ { width: 288 } }
+				>
+					<Typography variant="body2">
+						{ __( 'To change the default tab, simply set another tab as default.', 'elementor' ) }
+					</Typography>
+				</Alert>
+			}
+		>
+			<span>{ children }</span>
+		</Infotip>
+	);
+};

package/src/controls-registry/element-controls/tabs-control/use-actions.ts

@@ -0,0 +1,248 @@
+import { type ItemsActionPayload, useBoundProp } from '@elementor/editor-controls';
+import {
+	createElements,
+	duplicateElements,
+	getContainer,
+	moveElements,
+	removeElements,
+} from '@elementor/editor-elements';
+import { numberPropTypeUtil } from '@elementor/editor-props';
+import { __ } from '@wordpress/i18n';
+
+export type TabItem = {
+	id: string;
+	title?: string;
+};
+
+export const TAB_ELEMENT_TYPE = 'e-tab';
+export const TAB_CONTENT_ELEMENT_TYPE = 'e-tab-content';
+
+export const useActions = () => {
+	const { value, setValue: setDefaultActiveTab } = useBoundProp( numberPropTypeUtil );
+	const defaultActiveTab = value ?? 0;
+
+	const duplicateItem = ( {
+		items,
+		tabContentAreaId,
+	}: {
+		items: ItemsActionPayload< TabItem >;
+		tabContentAreaId: string;
+	} ) => {
+		const newDefault = calculateDefaultOnDuplicate( {
+			items,
+			defaultActiveTab,
+		} );
+
+		items.forEach( ( { item, index } ) => {
+			const tabId = item.id as string;
+			const tabContentAreaContainer = getContainer( tabContentAreaId );
+			const tabContentId = tabContentAreaContainer?.children?.[ index ]?.id;
+
+			if ( ! tabContentId ) {
+				throw new Error( 'Original content ID is required for duplication' );
+			}
+
+			duplicateElements( {
+				elementIds: [ tabId, tabContentId ],
+				title: __( 'Duplicate Tab', 'elementor' ),
+				onDuplicateElements: () => {
+					if ( newDefault !== defaultActiveTab ) {
+						setDefaultActiveTab( newDefault, {}, { withHistory: false } );
+					}
+				},
+				onRestoreElements: () => {
+					if ( newDefault !== defaultActiveTab ) {
+						setDefaultActiveTab( defaultActiveTab, {}, { withHistory: false } );
+					}
+				},
+			} );
+		} );
+	};
+
+	const moveItem = ( {
+		toIndex,
+		tabsMenuId,
+		tabContentAreaId,
+		movedElementId,
+		movedElementIndex,
+	}: {
+		toIndex: number;
+		tabsMenuId: string;
+		tabContentAreaId: string;
+		movedElementId: string;
+		movedElementIndex: number;
+	} ) => {
+		const tabContentContainer = getContainer( tabContentAreaId );
+		const tabContentId = tabContentContainer?.children?.[ movedElementIndex ]?.id;
+
+		if ( ! tabContentId ) {
+			throw new Error( 'Content ID is required' );
+		}
+
+		const newDefault = calculateDefaultOnMove( {
+			from: movedElementIndex,
+			to: toIndex,
+			defaultActiveTab,
+		} );
+
+		moveElements( {
+			title: __( 'Reorder Tabs', 'elementor' ),
+			moves: [
+				{
+					elementId: movedElementId,
+					targetContainerId: tabsMenuId,
+					options: { at: toIndex },
+				},
+				{
+					elementId: tabContentId,
+					targetContainerId: tabContentAreaId,
+					options: { at: toIndex },
+				},
+			],
+			onMoveElements: () => {
+				if ( newDefault !== defaultActiveTab ) {
+					setDefaultActiveTab( newDefault, {}, { withHistory: false } );
+				}
+			},
+			onRestoreElements: () => {
+				if ( newDefault !== defaultActiveTab ) {
+					setDefaultActiveTab( defaultActiveTab, {}, { withHistory: false } );
+				}
+			},
+		} );
+	};
+
+	const removeItem = ( {
+		items,
+		tabContentAreaId,
+	}: {
+		items: ItemsActionPayload< TabItem >;
+		tabContentAreaId: string;
+	} ) => {
+		const newDefault = calculateDefaultOnRemove( {
+			items,
+			defaultActiveTab,
+		} );
+
+		removeElements( {
+			title: __( 'Tabs', 'elementor' ),
+			elementIds: items.flatMap( ( { item, index } ) => {
+				const tabId = item.id as string;
+				const tabContentContainer = getContainer( tabContentAreaId );
+				const tabContentId = tabContentContainer?.children?.[ index ]?.id;
+
+				if ( ! tabContentId ) {
+					throw new Error( 'Content ID is required' );
+				}
+
+				return [ tabId, tabContentId ];
+			} ),
+			onRemoveElements: () => {
+				if ( newDefault !== defaultActiveTab ) {
+					setDefaultActiveTab( newDefault, {}, { withHistory: false } );
+				}
+			},
+			onRestoreElements: () => {
+				if ( newDefault !== defaultActiveTab ) {
+					setDefaultActiveTab( defaultActiveTab, {}, { withHistory: false } );
+				}
+			},
+		} );
+	};
+
+	const addItem = ( {
+		tabContentAreaId,
+		tabsMenuId,
+		items,
+	}: {
+		tabContentAreaId: string;
+		tabsMenuId: string;
+		items: ItemsActionPayload< TabItem >;
+	} ) => {
+		items.forEach( ( { index } ) => {
+			const position = index + 1;
+
+			createElements( {
+				title: __( 'Tabs', 'elementor' ),
+				elements: [
+					{
+						containerId: tabContentAreaId,
+						model: {
+							elType: TAB_CONTENT_ELEMENT_TYPE,
+							editor_settings: { title: `Tab ${ position } content`, initial_position: position },
+						},
+					},
+					{
+						containerId: tabsMenuId,
+						model: {
+							elType: TAB_ELEMENT_TYPE,
+							editor_settings: { title: `Tab ${ position } trigger`, initial_position: position },
+						},
+					},
+				],
+			} );
+		} );
+	};
+
+	return {
+		duplicateItem,
+		moveItem,
+		removeItem,
+		addItem,
+	};
+};
+
+const calculateDefaultOnMove = ( {
+	from,
+	to,
+	defaultActiveTab,
+}: {
+	from: number;
+	to: number;
+	defaultActiveTab: number;
+} ) => {
+	if ( from === defaultActiveTab ) {
+		return to;
+	}
+
+	if ( from < defaultActiveTab && to >= defaultActiveTab ) {
+		return defaultActiveTab - 1;
+	}
+
+	if ( from > defaultActiveTab && to <= defaultActiveTab ) {
+		return defaultActiveTab + 1;
+	}
+
+	return defaultActiveTab;
+};
+
+const calculateDefaultOnRemove = ( {
+	items,
+	defaultActiveTab,
+}: {
+	items: ItemsActionPayload< TabItem >;
+	defaultActiveTab: number;
+} ) => {
+	const isDefault = items.some( ( { index } ) => index === defaultActiveTab );
+
+	if ( isDefault ) {
+		return 0;
+	}
+
+	const defaultGap = items.reduce( ( acc, { index } ) => ( index < defaultActiveTab ? acc + 1 : acc ), 0 );
+	return defaultActiveTab - defaultGap;
+};
+
+const calculateDefaultOnDuplicate = ( {
+	items,
+	defaultActiveTab,
+}: {
+	items: ItemsActionPayload< TabItem >;
+	defaultActiveTab: number;
+} ) => {
+	const duplicatesBefore = items.reduce( ( acc, { index } ) => {
+		const isDuplicatedBeforeDefault = index < defaultActiveTab;
+		return isDuplicatedBeforeDefault ? acc + 1 : acc;
+	}, 0 );
+	return defaultActiveTab + duplicatesBefore;
+};

package/src/controls-registry/settings-field.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useMemo } from 'react';
-import { PropKeyProvider, PropProvider } from '@elementor/editor-controls';
+import { PropKeyProvider, PropProvider, type SetValueMeta } from '@elementor/editor-controls';
 import { setDocumentModifiedStatus } from '@elementor/editor-documents';
 import {
 	type ElementID,
@@ -9,12 +9,21 @@ import {
 	updateElementSettings,
 	useElementSettings,
 } from '@elementor/editor-elements';
-import { isDependencyMet, type PropKey, type Props, type PropType, type PropValue } from '@elementor/editor-props';
+import {
+	type CreateOptions,
+	isDependencyMet,
+	migratePropValue,
+	type PropKey,
+	type Props,
+	type PropsSchema,
+	type PropType,
+	type PropValue,
+} from '@elementor/editor-props';
 import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { useElement } from '../contexts/element-context';
-import { extractOrderedDependencies, updateValues, type Values } from '../utils/prop-dependency-utils';
+import { extractOrderedDependencies, getUpdatedValues, type Values } from '../utils/prop-dependency-utils';
 import { createTopLevelObjectType } from './create-top-level-object-type';
 
 type SettingsFieldProps = {
@@ -33,7 +42,11 @@ export const SettingsField = ( { bind, children, propDisplayName }: SettingsFiel
 
 	const elementSettingValues = useElementSettings< PropValue >( elementId, Object.keys( propsSchema ) ) as Values;
 
-	const value = { [ bind ]: elementSettingValues?.[ bind ] ?? null };
+	const migratedValues = useMemo( () => {
+		return migratePropValues( elementSettingValues, propsSchema );
+	}, [ elementSettingValues, propsSchema ] );
+
+	const value = { [ bind ]: migratedValues?.[ bind ] ?? null };
 
 	const propType = createTopLevelObjectType( { schema: propsSchema } );
 
@@ -42,20 +55,25 @@ export const SettingsField = ( { bind, children, propDisplayName }: SettingsFiel
 		propDisplayName,
 	} );
 
-	const setValue = ( newValue: Values ) => {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const setValue = ( newValue: Values, _: CreateOptions = {}, meta?: SetValueMeta ) => {
+		const { withHistory = true } = meta ?? {};
 		const dependents = extractOrderedDependencies(
 			bind,
 			propsSchema,
-			elementSettingValues,
+			migratedValues,
 			dependenciesPerTargetMapping
 		);
 
-		const settings = updateValues( newValue, dependents, propsSchema, elementSettingValues );
-
-		undoableUpdateElementProp( settings );
+		const settings = getUpdatedValues( newValue, dependents, propsSchema, migratedValues, elementId );
+		if ( withHistory ) {
+			undoableUpdateElementProp( settings );
+		} else {
+			updateElementSettings( { id: elementId, props: settings, withHistory: false } );
+		}
 	};
 
-	const isDisabled = ( prop: PropType ) => ! isDependencyMet( prop?.dependencies, elementSettingValues );
+	const isDisabled = ( prop: PropType ) => ! isDependencyMet( prop?.dependencies, migratedValues ).isMet;
 
 	return (
 		<PropProvider propType={ propType } value={ value } setValue={ setValue } isDisabled={ isDisabled }>
@@ -96,3 +114,29 @@ function useUndoableUpdateElementProp( {
 		);
 	}, [ elementId, propDisplayName ] );
 }
+
+function migratePropValues( values: Values, schema: PropsSchema ): Values {
+	if ( ! values ) {
+		return values;
+	}
+
+	const migrated: Values = {};
+
+	for ( const [ key, value ] of Object.entries( values ) ) {
+		if ( value === null || value === undefined ) {
+			migrated[ key ] = value;
+			continue;
+		}
+
+		const propType = schema[ key ];
+
+		if ( ! propType ) {
+			migrated[ key ] = value;
+			continue;
+		}
+
+		migrated[ key ] = migratePropValue( value, propType ) as Values[ string ];
+	}
+
+	return migrated;
+}

package/src/controls-registry/styles-field.tsx

@@ -4,8 +4,8 @@ import { type PropKey, type PropValue } from '@elementor/editor-props';
 import { getStylesSchema } from '@elementor/editor-styles';
 
 import { useStylesInheritanceChain } from '../contexts/styles-inheritance-context';
+import { getFieldIndicators } from '../field-indicators-registry';
 import { useStylesField } from '../hooks/use-styles-field';
-import { StylesInheritanceIndicator } from '../styles-inheritance/components/styles-inheritance-indicator';
 import { ConditionalField } from './conditional-field';
 import { createTopLevelObjectType } from './create-top-level-object-type';
 
@@ -36,14 +36,7 @@ export const StylesField = ( { bind, propDisplayName, children }: StylesFieldPro
 	};
 
 	return (
-		<ControlAdornmentsProvider
-			items={ [
-				{
-					id: 'styles-inheritance',
-					Adornment: StylesInheritanceIndicator,
-				},
-			] }
-		>
+		<ControlAdornmentsProvider items={ getFieldIndicators( 'styles' ) }>
 			<PropProvider
 				propType={ propType }
 				value={ { [ bind ]: value } }

package/src/dynamics/components/dynamic-conditional-control.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { isDependencyMet, type PropsSchema, type PropType, type PropValue } from '@elementor/editor-props';
+
+import { type DynamicPropValue } from '../utils';
+
+type DynamicConditionalControlProps = React.PropsWithChildren< {
+	propType?: PropType;
+	propsSchema?: PropsSchema;
+	dynamicSettings?: Record< string, DynamicPropValue >;
+} >;
+
+export const DynamicConditionalControl: React.FC< DynamicConditionalControlProps > = ( {
+	children,
+	propType,
+	propsSchema,
+	dynamicSettings,
+} ) => {
+	const defaults = React.useMemo< Record< string, PropValue | null > >( () => {
+		if ( ! propsSchema ) {
+			return {};
+		}
+
+		const entries = Object.entries( propsSchema ) as Array< [ string, PropType ] >;
+		return entries.reduce< Record< string, PropValue | null > >( ( result, [ key, prop ] ) => {
+			result[ key ] = prop?.default ?? null;
+			return result;
+		}, {} );
+	}, [ propsSchema ] );
+
+	const convertedSettings = React.useMemo( () => {
+		if ( ! dynamicSettings ) {
+			return {};
+		}
+
+		return Object.entries( dynamicSettings ).reduce< Record< string, PropValue > >(
+			( result, [ key, dynamicValue ] ) => {
+				if ( dynamicValue && typeof dynamicValue === 'object' && '$$type' in dynamicValue ) {
+					result[ key ] = dynamicValue as PropValue;
+				} else {
+					result[ key ] = {
+						$$type: 'plain',
+						value: dynamicValue,
+					} as PropValue;
+				}
+				return result;
+			},
+			{}
+		);
+	}, [ dynamicSettings ] );
+
+	const effectiveSettings = React.useMemo( () => {
+		return { ...defaults, ...convertedSettings } as Record< string, PropValue >;
+	}, [ defaults, convertedSettings ] );
+
+	if ( ! propType?.dependencies?.terms.length ) {
+		return <>{ children }</>;
+	}
+
+	const isHidden = ! isDependencyMet( propType?.dependencies, effectiveSettings ).isMet;
+
+	return isHidden ? null : <>{ children }</>;
+};