@elementor/editor-editing-panel 0.15.0 → 0.16.0

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

@@ -0,0 +1,180 @@
+import * as React from 'react';
+import { useId } from 'react';
+import { useControl } from '../../controls/control-context';
+import { DynamicPropValue, DynamicTag } from '../types';
+import { DynamicControl } from '../dynamic-control';
+import { DatabaseIcon, SettingsIcon, XIcon } from '@elementor/icons';
+import type { Control, ControlsSection } from '../../types';
+import { DynamicSelection } from './dynamic-selection';
+import { ControlType, getControlByType } from '../../controls/controls-registry';
+import { ControlLabel } from '../../components/control-label';
+import { Control as BaseControl } from '../../controls/control';
+import { useDynamicTag } from '../hooks/use-dynamic-tag';
+import {
+	bindPopover,
+	bindTrigger,
+	Box,
+	IconButton,
+	Paper,
+	Popover,
+	Stack,
+	Typography,
+	UnstableTag as Tag,
+	usePopupState,
+	Tabs,
+	Divider,
+	useTabs,
+	Tab,
+	TabPanel,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+const SIZE = 'tiny';
+
+export const DynamicSelectionControl = () => {
+	const { bind, value, setValue } = useControl< DynamicPropValue | null >();
+	const { name: tagName = '' } = value?.value || {};
+
+	const selectionPopoverId = useId();
+	const selectionPopoverState = usePopupState( { variant: 'popover', popupId: selectionPopoverId } );
+
+	const dynamicTag = useDynamicTag( bind, tagName );
+
+	const removeDynamicTag = () => {
+		// TODO: Implement static value restoration.
+		setValue( null );
+	};
+
+	if ( ! dynamicTag ) {
+		throw new Error( `Dynamic tag ${ tagName } not found` );
+	}
+
+	return (
+		<Box sx={ { width: '100%' } }>
+			<Tag
+				fullWidth
+				showActionsOnHover
+				label={ dynamicTag.label }
+				startIcon={ <DatabaseIcon fontSize={ SIZE } /> }
+				{ ...bindTrigger( selectionPopoverState ) }
+				actions={
+					<>
+						<DynamicSettingsPopover dynamicTag={ dynamicTag } />
+						<IconButton
+							size={ SIZE }
+							onClick={ removeDynamicTag }
+							aria-label={ __( 'Remove dynamic value', 'elementor' ) }
+						>
+							<XIcon fontSize={ SIZE } />
+						</IconButton>
+					</>
+				}
+			/>
+			<Popover
+				disablePortal
+				disableScrollLock
+				anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
+				{ ...bindPopover( selectionPopoverState ) }
+			>
+				<Stack>
+					<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
+						<DatabaseIcon fontSize={ SIZE } sx={ { mr: 0.5 } } />
+						<Typography variant="subtitle2">{ __( 'Dynamic Tags', 'elementor' ) }</Typography>
+						<IconButton size={ SIZE } sx={ { ml: 'auto' } } onClick={ selectionPopoverState.close }>
+							<XIcon fontSize={ SIZE } />
+						</IconButton>
+					</Stack>
+					<DynamicSelection onSelect={ selectionPopoverState.close } />
+				</Stack>
+			</Popover>
+		</Box>
+	);
+};
+
+export const DynamicSettingsPopover = ( { dynamicTag }: { dynamicTag: DynamicTag } ) => {
+	const popupId = useId();
+	const settingsPopupState = usePopupState( { variant: 'popover', popupId } );
+
+	const hasDynamicSettings = !! dynamicTag.atomic_controls.length;
+
+	if ( ! hasDynamicSettings ) {
+		return null;
+	}
+
+	return (
+		<>
+			<IconButton
+				size={ SIZE }
+				{ ...bindTrigger( settingsPopupState ) }
+				aria-label={ __( 'Settings', 'elementor' ) }
+			>
+				<SettingsIcon fontSize={ SIZE } />
+			</IconButton>
+			<Popover
+				disableScrollLock
+				anchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }
+				{ ...bindPopover( settingsPopupState ) }
+			>
+				<Paper component={ Stack } sx={ { minHeight: '300px', width: '220px' } }>
+					<Stack direction="row" alignItems="center" px={ 1.5 } pt={ 2 } pb={ 1 }>
+						<DatabaseIcon fontSize={ SIZE } sx={ { mr: 0.5 } } />
+						<Typography variant="subtitle2">{ dynamicTag.label }</Typography>
+						<IconButton sx={ { ml: 'auto' } } size={ SIZE } onClick={ settingsPopupState.close }>
+							<XIcon fontSize={ SIZE } />
+						</IconButton>
+					</Stack>
+					<DynamicSettings controls={ dynamicTag.atomic_controls } />
+				</Paper>
+			</Popover>
+		</>
+	);
+};
+
+const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls' ] } ) => {
+	const tabs = controls.filter( ( { type } ) => type === 'section' ) as ControlsSection[];
+	const { getTabsProps, getTabProps, getTabPanelProps } = useTabs< number >( 0 );
+
+	if ( ! tabs.length ) {
+		// Dynamic must have hierarchical controls.
+		return null;
+	}
+
+	return (
+		<>
+			<Tabs indicatorColor="secondary" textColor="secondary" { ...getTabsProps() }>
+				{ tabs.map( ( { value }, index ) => (
+					<Tab key={ index } label={ value.label } sx={ { px: 1, py: 0.5 } } { ...getTabProps( index ) } />
+				) ) }
+			</Tabs>
+			<Divider />
+
+			{ tabs.map( ( { value }, index ) => {
+				return (
+					<TabPanel key={ index } sx={ { flexGrow: 1 } } { ...getTabPanelProps( index ) }>
+						<Stack gap={ 1 } px={ 2 }>
+							{ value.items.map( ( item ) => {
+								if ( item.type === 'control' ) {
+									return <Control key={ item.value.bind } control={ item.value } />;
+								}
+								return null;
+							} ) }
+						</Stack>
+					</TabPanel>
+				);
+			} ) }
+		</>
+	);
+};
+
+const Control = ( { control }: { control: Control[ 'value' ] } ) => {
+	if ( ! getControlByType( control.type as ControlType ) ) {
+		return null;
+	}
+
+	return (
+		<DynamicControl bind={ control.bind }>
+			{ control.label ? <ControlLabel>{ control.label }</ControlLabel> : null }
+			<BaseControl type={ control.type as ControlType } props={ control.props } />
+		</DynamicControl>
+	);
+};

package/src/dynamics/components/dynamic-selection.tsx

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import { useState, Fragment } from 'react';
+import { useControl } from '../../controls/control-context';
+import { DynamicPropValue } from '../types';
+import { usePropDynamicTags } from '../hooks/use-prop-dynamic-tags';
+import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
+import { SearchIcon, PhotoIcon } from '@elementor/icons';
+import {
+	Box,
+	Divider,
+	InputAdornment,
+	Link,
+	ListSubheader,
+	MenuItem,
+	MenuList,
+	Stack,
+	TextField,
+	Typography,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+import { PropKey } from '../../types';
+
+type Option = {
+	label: string;
+	value: string;
+};
+
+type OptionEntry = [ string, Option[] ];
+
+const SIZE = 'tiny';
+
+export type DynamicSelectionProps = {
+	onSelect?: () => void;
+};
+
+export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
+	const [ searchValue, setSearchValue ] = useState( '' );
+
+	const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
+	const { bind, value: dynamicValue, setValue } = useControl< DynamicPropValue >();
+
+	const options = useFilteredOptions( bind, searchValue );
+
+	const handleSearch = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		setSearchValue( event.target.value );
+	};
+
+	return (
+		<Stack>
+			<Box px={ 1.5 } pb={ 1 }>
+				<TextField
+					fullWidth
+					size={ SIZE }
+					value={ searchValue }
+					onChange={ handleSearch }
+					placeholder={ __( 'Search dynamic tag', 'elementor' ) }
+					InputProps={ {
+						startAdornment: (
+							<InputAdornment position="start">
+								<SearchIcon fontSize={ SIZE } />
+							</InputAdornment>
+						),
+					} }
+				/>
+			</Box>
+			<Divider />
+			<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>
+				{ options.length > 0 ? (
+					<MenuList role="listbox" tabIndex={ 0 }>
+						{ options.map( ( [ category, items ], index ) => (
+							<Fragment key={ index }>
+								<ListSubheader sx={ { typography: 'caption', color: 'text.tertiary' } }>
+									{ dynamicGroups?.[ category ]?.title || category }
+								</ListSubheader>
+								{ items.map( ( { value, label: tagLabel } ) => {
+									const isSelected = value === dynamicValue?.value?.name;
+
+									return (
+										<MenuItem
+											key={ value }
+											selected={ isSelected }
+											// eslint-disable-next-line jsx-a11y/no-autofocus
+											autoFocus={ isSelected }
+											sx={ { typography: 'caption' } }
+											onClick={ () => {
+												setValue( { $$type: 'dynamic', value: { name: value } } );
+												onSelect?.();
+											} }
+										>
+											{ tagLabel }
+										</MenuItem>
+									);
+								} ) }
+							</Fragment>
+						) ) }
+					</MenuList>
+				) : (
+					<Stack alignItems="center" p={ 2.5 } gap={ 1.5 }>
+						<PhotoIcon fontSize="large" />
+						<Typography align="center" variant="caption" color="text.secondary">
+							{ __( 'Sorry, nothing matched', 'elementor' ) }
+							<br />
+							&ldquo;{ searchValue }&rdquo;.
+						</Typography>
+						<Typography align="center" variant="caption" color="text.secondary">
+							<Link
+								color="secondary"
+								variant="caption"
+								component="button"
+								onClick={ () => setSearchValue( '' ) }
+							>
+								{ __( 'Clear the filters', 'elementor' ) }
+							</Link>
+							&nbsp;
+							{ __( 'and try again.', 'elementor' ) }
+						</Typography>
+					</Stack>
+				) }
+			</Box>
+		</Stack>
+	);
+};
+
+const useFilteredOptions = ( bind: PropKey, searchValue: string ): OptionEntry[] => {
+	const dynamicTags = usePropDynamicTags( bind );
+
+	const options = dynamicTags.reduce< Map< string, Option[] > >( ( categories, { name, label, group } ) => {
+		const isVisible = label.toLowerCase().includes( searchValue.trim().toLowerCase() );
+
+		if ( ! isVisible ) {
+			return categories;
+		}
+
+		if ( ! categories.has( group ) ) {
+			categories.set( group, [] );
+		}
+
+		categories.get( group )?.push( { label, value: name } );
+
+		return categories;
+	}, new Map() );
+
+	return [ ...options ];
+};

package/src/dynamics/dynamic-control.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { ControlContext, useControl } from '../controls/control-context';
+import { PropKey, PropValue } from '../types';
+import { useDynamicTag } from './hooks/use-dynamic-tag';
+import { DynamicPropValue } from './types';
+
+export type DynamicControlProps = React.PropsWithChildren< {
+	bind: PropKey;
+} >;
+
+export const DynamicControl = ( { bind, children }: DynamicControlProps ) => {
+	const { value, setValue, bind: propName } = useControl< DynamicPropValue >();
+	const { name = '', settings } = value?.value ?? {};
+
+	const dynamicTag = useDynamicTag( propName, name );
+
+	if ( ! dynamicTag ) {
+		throw new Error( `Dynamic tag ${ name } not found` );
+	}
+
+	const defaultValue = dynamicTag.props_schema[ bind ]?.type.default;
+	const dynamicValue = settings?.[ bind ] ?? defaultValue;
+
+	const setDynamicValue = ( newValue: PropValue ) => {
+		setValue( {
+			$$type: 'dynamic',
+			value: {
+				name,
+				settings: {
+					...settings,
+					[ bind ]: newValue,
+				},
+			},
+		} );
+	};
+
+	return (
+		<ControlContext.Provider value={ { setValue: setDynamicValue, value: dynamicValue, bind } }>
+			{ children }
+		</ControlContext.Provider>
+	);
+};

package/src/dynamics/hooks/use-dynamic-tag.ts

@@ -0,0 +1,10 @@
+import { usePropDynamicTags } from './use-prop-dynamic-tags';
+import { DynamicTag } from '../types';
+import { PropKey } from '../../types';
+import { useMemo } from 'react';
+
+export const useDynamicTag = ( propName: PropKey, tagName: string ): DynamicTag | null => {
+	const dynamicTags = usePropDynamicTags( propName );
+
+	return useMemo( () => dynamicTags.find( ( tag ) => tag.name === tagName ) ?? null, [ dynamicTags, tagName ] );
+};

package/src/{hooks/use-dynamic-tags-config.ts → dynamics/hooks/use-prop-dynamic-tags.ts}

@@ -1,9 +1,10 @@
 import { useMemo } from 'react';
-import { useElementContext } from '../contexts/element-context';
-import { PropKey } from '../types';
+import { useElementContext } from '../../contexts/element-context';
 import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
+import { PropKey } from '../../types';
+import { isDynamicType } from '../utils';
 
-export const useDynamicTagsConfig = ( propName: PropKey ) => {
+export const usePropDynamicTags = ( propName: PropKey ) => {
 	let categories: string[] = [];
 
 	const { elementType } = useElementContext();
@@ -11,9 +12,9 @@ export const useDynamicTagsConfig = ( propName: PropKey ) => {
 	const propSchema = elementType.propsSchema?.[ propName ];
 
 	if ( propSchema ) {
-		const dynamicTags = getAtomicDynamicTags();
+		const propDynamicType = propSchema.additional_types.find( isDynamicType );
 
-		categories = dynamicTags?.propTypesToDynamic?.[ propSchema.type ] || [];
+		categories = propDynamicType?.settings.categories || [];
 	}
 
 	// eslint-disable-next-line react-hooks/exhaustive-deps

package/src/dynamics/init.ts

@@ -0,0 +1,10 @@
+import { DynamicSelectionControl } from './components/dynamic-selection-control';
+import { replaceControl } from '../controls/control-replacement';
+import { isDynamicPropValue } from './utils';
+
+export const init = () => {
+	replaceControl( {
+		component: DynamicSelectionControl,
+		condition: ( { value } ) => isDynamicPropValue( value ),
+	} );
+};

package/src/{sync → dynamics/sync}/get-atomic-dynamic-tags.ts

@@ -9,6 +9,6 @@ export const getAtomicDynamicTags = () => {
 
 	return {
 		tags: atomicDynamicTags.tags,
-		propTypesToDynamic: atomicDynamicTags.prop_types_to_dynamic,
+		groups: atomicDynamicTags.groups,
 	};
 };

package/src/{sync → dynamics/sync}/get-elementor-config.ts

@@ -1,4 +1,4 @@
-import { ExtendedWindow } from './types';
+import { ExtendedWindow } from '../types';
 
 export const getElementorConfig = () => {
 	const extendedWindow = window as unknown as ExtendedWindow;

package/src/dynamics/types.ts

@@ -0,0 +1,32 @@
+import { ControlItem, PropsSchema, TransformablePropValue } from '../types';
+
+export type ExtendedWindow = Window & {
+	elementor?: {
+		config?: {
+			atomicDynamicTags?: {
+				tags: DynamicTags;
+				groups: Record< DynamicTag[ 'group' ], { title: string } >;
+			};
+		};
+	};
+};
+
+export type DynamicTags = Record< DynamicTag[ 'name' ], DynamicTag >;
+
+export type DynamicTag = {
+	name: string;
+	label: string;
+	group: string;
+	categories: string[];
+	atomic_controls: ControlItem[];
+	props_schema: PropsSchema;
+};
+
+export type DynamicPropType = {
+	key: 'dynamic';
+	settings: {
+		categories: string[];
+	};
+};
+
+export type DynamicPropValue = TransformablePropValue< { name: string; settings?: Record< string, unknown > } >;

package/src/dynamics/utils.ts

@@ -0,0 +1,9 @@
+import { AdditionalPropType, PropValue } from '../types';
+import { DynamicPropType } from './types';
+import { isTransformable } from '../props/is-transformable';
+
+export const isDynamicType = ( prop: AdditionalPropType ): prop is DynamicPropType => prop.key === 'dynamic';
+
+export const isDynamicPropValue = ( prop: PropValue ) => {
+	return isTransformable( prop ) && prop.$$type === 'dynamic';
+};

package/src/init.ts

@@ -4,6 +4,7 @@ import { shouldUseV2Panel } from './sync/should-use-v2-panel';
 import { EditingPanelHooks } from './components/editing-panel-hooks';
 import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { __privateBlockDataCommand as blockDataCommand } from '@elementor/editor-v1-adapters';
+import { init as initDynamics } from './dynamics/init';
 
 export default function init() {
 	registerPanel( panel );
@@ -13,6 +14,9 @@ export default function init() {
 		id: 'editing-panel-hooks',
 		component: EditingPanelHooks,
 	} );
+
+	// TODO: Move it from here once we have dynamic package.
+	initDynamics();
 }
 
 const blockV1Panel = () => {

package/src/props/is-transformable.ts

@@ -0,0 +1,14 @@
+import { z } from '@elementor/schema';
+
+// TODO: Move this file content a shared package.
+
+export const transformableSchema = z.object( {
+	$$type: z.string(),
+	value: z.any(),
+} );
+
+export type TransformablePropValue = z.infer< typeof transformableSchema >;
+
+export const isTransformable = ( value: unknown ): value is TransformablePropValue => {
+	return transformableSchema.safeParse( value ).success;
+};

package/src/sync/types.ts

@@ -16,22 +16,9 @@ export type ExtendedWindow = Window & {
 			}
 		>;
 		getContainer?: ( id: string ) => V1Element;
-		config?: {
-			atomicDynamicTags?: {
-				tags: DynamicTags;
-				prop_types_to_dynamic: Record< string, string[] >;
-			};
-		};
 	};
 };
 
-export type DynamicTags = Record< DynamicTag[ 'name' ], DynamicTag >;
-
-export type DynamicTag = {
-	name: string;
-	categories: string[];
-};
-
 export type V1Element = {
 	model: V1Model< V1ElementModelProps >;
 	settings?: V1Model< V1ElementSettingsProps >;

package/src/sync/update-style.ts

@@ -8,10 +8,10 @@ export type UpdateStyleProps = {
 	styleDefID?: StyleDefinitionID;
 	meta: StyleVariant[ 'meta' ];
 	props: Props;
-	bind?: PropKey;
+	bind: PropKey;
 };
 
-export const updateStyle = ( { elementID, styleDefID, meta, props, bind = 'classes' }: UpdateStyleProps ) => {
+export const updateStyle = ( { elementID, styleDefID, meta, props, bind }: UpdateStyleProps ) => {
 	const container = getContainer( elementID );
 
 	runCommand( 'document/atomic-widgets/styles', {

package/src/types.ts

@@ -34,15 +34,18 @@ export type Control = {
 
 export type ControlItem = ControlsSection | Control;
 
-export type Constraint = {
-	type: string;
-	value: unknown;
+export type AdditionalPropType = {
+	key: string;
+	settings: Record< string, unknown >;
 };
 
 export type PropDefinition = {
-	type: string;
-	default: PropValue;
-	constraints?: Constraint[];
+	type: {
+		key: string;
+		default: PropValue;
+		settings: Record< string, unknown >;
+	};
+	additional_types: Array< AdditionalPropType >;
 };
 
 export type PropsSchema = Record< Control[ 'value' ][ 'bind' ], PropDefinition >;