@elementor/editor-editing-panel 0.17.0 → 0.18.0

package/src/dynamics/hooks/use-prop-dynamic-tags.ts

@@ -2,17 +2,17 @@ import { useMemo } from 'react';
 import { useElementContext } from '../../contexts/element-context';
 import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
 import { PropKey } from '../../types';
-import { isDynamicType } from '../utils';
+import { getDynamicPropType } from '../utils';
 
 export const usePropDynamicTags = ( propName: PropKey ) => {
 	let categories: string[] = [];
 
 	const { elementType } = useElementContext();
 
-	const propSchema = elementType.propsSchema?.[ propName ];
+	const propType = elementType.propsSchema?.[ propName ];
 
-	if ( propSchema ) {
-		const propDynamicType = propSchema.additional_types.find( isDynamicType );
+	if ( propType ) {
+		const propDynamicType = getDynamicPropType( propType );
 
 		categories = propDynamicType?.settings.categories || [];
 	}

package/src/dynamics/init.ts

@@ -1,10 +1,19 @@
 import { DynamicSelectionControl } from './components/dynamic-selection-control';
 import { replaceControl } from '../controls/control-replacement';
 import { isDynamicPropValue } from './utils';
+import { usePropDynamicAction } from './hooks/use-prop-dynamic-action';
+import { controlActionsMenu } from '../controls/control-actions/control-actions-menu';
+
+const { registerPopoverAction } = controlActionsMenu;
 
 export const init = () => {
 	replaceControl( {
 		component: DynamicSelectionControl,
 		condition: ( { value } ) => isDynamicPropValue( value ),
 	} );
+
+	registerPopoverAction( {
+		id: 'dynamic-tags',
+		useProps: usePropDynamicAction,
+	} );
 };

package/src/dynamics/types.ts

@@ -1,4 +1,4 @@
-import { ControlItem, PropsSchema, TransformablePropValue } from '../types';
+import { ControlItem, PropsSchema, TransformablePropType, TransformablePropValue } from '../types';
 
 export type ExtendedWindow = Window & {
 	elementor?: {
@@ -22,11 +22,14 @@ export type DynamicTag = {
 	props_schema: PropsSchema;
 };
 
-export type DynamicPropType = {
+export type DynamicPropType = TransformablePropType & {
 	key: 'dynamic';
 	settings: {
 		categories: string[];
 	};
 };
 
-export type DynamicPropValue = TransformablePropValue< { name: string; settings?: Record< string, unknown > } >;
+export type DynamicPropValue = TransformablePropValue<
+	'dynamic',
+	{ name: string; settings?: Record< string, unknown > }
+>;

package/src/dynamics/utils.ts

@@ -1,9 +1,22 @@
-import { AdditionalPropType, PropValue } from '../types';
+import { PropType, PropValue, TransformablePropType } from '../types';
 import { DynamicPropType, DynamicPropValue } from './types';
 import { isTransformable } from '../props/is-transformable';
 
-export const isDynamicType = ( prop: AdditionalPropType ): prop is DynamicPropType => prop.key === 'dynamic';
+const DYNAMIC_PROP_TYPE_KEY = 'dynamic';
+
+export const isDynamicPropType = ( prop: TransformablePropType ): prop is DynamicPropType =>
+	prop.key === DYNAMIC_PROP_TYPE_KEY;
+
+export const getDynamicPropType = ( propType: PropType ): DynamicPropType | null => {
+	const dynamicPropType = propType.kind === 'union' && propType.prop_types[ DYNAMIC_PROP_TYPE_KEY ];
+
+	return dynamicPropType && isDynamicPropType( dynamicPropType ) ? dynamicPropType : null;
+};
 
 export const isDynamicPropValue = ( prop: PropValue ): prop is DynamicPropValue => {
-	return isTransformable( prop ) && prop.$$type === 'dynamic';
+	return isTransformable( prop ) && prop.$$type === DYNAMIC_PROP_TYPE_KEY;
+};
+
+export const supportsDynamic = ( propType: PropType ): boolean => {
+	return !! getDynamicPropType( propType );
 };

package/src/index.ts

@@ -1,5 +1,7 @@
+export type { PopoverActionProps } from './controls/control-actions/actions/popover-action';
 export { replaceControl } from './controls/control-replacement';
 export { useControl } from './controls/control-context';
+export { controlActionsMenu } from './controls/control-actions/control-actions-menu';
 
 import init from './init';
 

package/src/types.ts

@@ -34,32 +34,53 @@ export type Control = {
 
 export type ControlItem = ControlsSection | Control;
 
-export type AdditionalPropType = {
-	key: string;
+type PropTypeKey = string;
+
+type BasePropType = {
+	default: PropValue;
 	settings: Record< string, unknown >;
+	meta: Record< string, unknown >;
 };
 
-export type PropDefinition = {
-	type: {
-		key: string;
-		default: PropValue;
-		settings: Record< string, unknown >;
-	};
-	additional_types: Array< AdditionalPropType >;
+export type PlainPropType = BasePropType & {
+	kind: 'plain';
+	key: PropTypeKey;
 };
 
-export type PropsSchema = Record< Control[ 'value' ][ 'bind' ], PropDefinition >;
+export type ArrayPropType = BasePropType & {
+	kind: 'array';
+	key: PropTypeKey;
+	item_prop_type: PropType | null;
+};
+
+export type ObjectPropType = BasePropType & {
+	kind: 'object';
+	key: PropTypeKey;
+	shape: Record< string, PropType >;
+};
+
+export type TransformablePropType = PlainPropType | ArrayPropType | ObjectPropType;
+
+export type UnionPropType = BasePropType & {
+	kind: 'union';
+	prop_types: Record< string, TransformablePropType >;
+};
+
+export type PropType = TransformablePropType | UnionPropType;
+
+export type PropsSchema = Record< Control[ 'value' ][ 'bind' ], PropType >;
 
 type MaybeArray< T > = T | T[];
 
-export type TransformablePropValue< T = unknown > = {
-	$$type: string;
-	value: T;
+export type TransformablePropValue< Type extends string, Value = unknown > = {
+	$$type: Type;
+	value: Value;
+	disabled?: boolean;
 };
 
 export type PlainPropValue = MaybeArray< string | number | boolean | object | null | undefined >;
 
-export type PropValue = PlainPropValue | TransformablePropValue;
+export type PropValue = PlainPropValue | TransformablePropValue< string >;
 
 export type PropKey = string;
 

package/src/controls/components/control-container.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { Stack, StackProps, styled } from '@elementor/ui';
-
-const StyledStack = styled( Stack )( ( { theme, gap, direction } ) => ( {
-	'> :only-child': {
-		width: '100%',
-	},
-	'&:where( :has( > :nth-child( 2 ):last-child ) ) > :where( * )': {
-		width: direction === 'column' ? '100%' : `calc( 50% - ${ theme.spacing( gap / 2 ) })`,
-	},
-	'&:where( :has( > :nth-child( 3 ):last-child ) ) > :where( * )': {
-		width: direction === 'column' ? '100%' : `calc( 33.3333% - ${ theme.spacing( gap * 2 ) } / 3)`,
-	},
-} ) );
-
-export const ControlContainer = ( props: StackProps ) => (
-	<StyledStack gap={ 1 } direction="row" alignItems="center" justifyContent="space-between" { ...props } />
-);