@elementor/editor-editing-panel 1.6.0 → 1.7.0

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

@@ -1,16 +1,13 @@
 import { useMemo } from 'react';
-import { type PropKey } from '@elementor/editor-props';
+import { useBoundProp } from '@elementor/editor-controls';
 
-import { useElement } from '../../contexts/element-context';
 import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
 import { getDynamicPropType } from '../utils';
 
-export const usePropDynamicTags = ( propName: PropKey ) => {
+export const usePropDynamicTags = () => {
 	let categories: string[] = [];
 
-	const { elementType } = useElement();
-
-	const propType = elementType.propsSchema?.[ propName ];
+	const { propType } = useBoundProp();
 
 	if ( propType ) {
 		const propDynamicType = getDynamicPropType( propType );

package/src/dynamics/utils.ts

@@ -32,7 +32,7 @@ export const dynamicPropTypeUtil = createPropUtils(
 	DYNAMIC_PROP_TYPE_KEY,
 	z.strictObject( {
 		name: z.string(),
-		settings: z.record( z.any() ).optional(),
+		settings: z.any().optional(),
 	} )
 );
 

package/src/hooks/use-styles-fields.ts

@@ -28,5 +28,6 @@ export function useStylesFields< T extends Props >( propNames: ( keyof T & strin
 			label: __( 'local', 'elementor' ),
 		} );
 	};
+
 	return [ value, setValue ] as const;
 }

package/src/components/multi-combobox/index.ts

@@ -1,3 +0,0 @@
-export * from './types';
-export * from './multi-combobox';
-export * from './use-combobox-actions';

package/src/components/multi-combobox/multi-combobox.tsx

@@ -1,122 +0,0 @@
-import * as React from 'react';
-import {
-	Autocomplete,
-	type AutocompleteProps,
-	type AutocompleteRenderGroupParams,
-	Box,
-	Chip,
-	styled,
-	TextField,
-} from '@elementor/ui';
-import { type FilterOptionsState } from '@mui/base';
-
-import { type ActionOption, type Actions, type Option } from './types';
-import { useComboboxActions } from './use-combobox-actions';
-
-type Props = Omit< AutocompleteProps< Option, true, true, true >, 'renderInput' | 'getLimitTagsText' | 'onSelect' > & {
-	actions?: Actions;
-	selected: Option[];
-	options: Option[];
-	optionsLabel?: string;
-	onSelect?: ( value: Option[] ) => void;
-	onCreate?: ( value: string ) => void;
-};
-
-export const MultiCombobox = ( {
-	actions = {},
-	selected,
-	options,
-	optionsLabel,
-	onSelect,
-	onCreate,
-	...props
-}: Props ) => {
-	const { action: actionProps, option: optionProps } = useComboboxActions(
-		selected,
-		actions,
-		// TODO: make the group mechanism more generic, allow passing list of groups.
-		optionsLabel,
-		onSelect
-	);
-
-	return (
-		<Autocomplete
-			{ ...props }
-			freeSolo
-			multiple
-			clearOnBlur
-			selectOnFocus
-			disableClearable
-			handleHomeEndKeys
-			value={ selected }
-			options={ options }
-			renderGroup={ renderGroup }
-			renderInput={ ( params ) => <TextField { ...params } /> }
-			// TODO: is it relevant for the combobox? or should be in the parent component?
-			getLimitTagsText={ ( more ) => <Chip size="tiny" variant="standard" label={ `+${ more }` } clickable /> }
-			onChange={ ( _, selectedOrTypedValue, reason ) => {
-				if ( reason === 'createOption' ) {
-					const typedValue = selectedOrTypedValue.find( ( option ) => typeof option === 'string' );
-
-					return typedValue && onCreate?.( typedValue );
-				}
-
-				const action = selectedOrTypedValue.find( ( value ) => actionProps.is( value ) );
-
-				if ( reason === 'selectOption' && action ) {
-					return actionProps.onChange( action );
-				}
-
-				const selectedValues = selectedOrTypedValue.filter( ( v ) => typeof v !== 'string' );
-				const fixedValues = options.filter( ( option ) => option.fixed );
-
-				optionProps.onChange( [ ...new Set( [ ...fixedValues, ...selectedValues ] ) ] );
-			} }
-			getOptionLabel={ ( option ) => {
-				if ( optionProps.is( option ) ) {
-					return optionProps.getLabel( option );
-				}
-
-				if ( actionProps.is( option ) ) {
-					return actionProps.getLabel( option );
-				}
-
-				return '';
-			} }
-			filterOptions={ ( optionList: Option[], params: FilterOptionsState< ActionOption | Option > ) => {
-				const filteredOptions = optionProps.getFilteredOptions( optionList, params );
-
-				const actionOptions = actionProps.getFilteredActions( optionList, params );
-
-				return [ ...actionOptions, ...filteredOptions ];
-			} }
-			groupBy={ ( option ) =>
-				( optionProps.is( option ) ? optionProps.groupBy() : actionProps.groupBy( option ) ) ?? ''
-			}
-		/>
-	);
-};
-
-const renderGroup = ( params: AutocompleteRenderGroupParams ) => (
-	<Group key={ params.key }>
-		<GroupHeader>{ params.group }</GroupHeader>
-		<GroupItems>{ params.children }</GroupItems>
-	</Group>
-);
-
-const Group = styled( 'li' )`
-	&:not( :last-of-type ) {
-		border-bottom: 1px solid ${ ( { theme } ) => theme.palette.divider };
-	}
-`;
-
-const GroupHeader = styled( Box )( ( { theme } ) => ( {
-	position: 'sticky',
-	top: '-8px',
-	padding: theme.spacing( 1, 2 ),
-	color: theme.palette.text.tertiary,
-} ) );
-
-const GroupItems = styled( 'ul' )`
-	padding: 0;
-`;

package/src/components/multi-combobox/types.ts

@@ -1,29 +0,0 @@
-export type Option = {
-	label: string;
-	value: string;
-	fixed?: boolean;
-	// TODO: Should be remove from here or use some kind of `meta`
-	color?: 'primary' | 'global';
-	provider?: string;
-};
-
-export type Action = {
-	getLabel: ( inputValue: string ) => string;
-	apply: ( value: string ) => void;
-	condition: ( options: Option[], inputValue: string ) => boolean;
-};
-
-export type ActionsGroup = {
-	label: string;
-	actions: Action[];
-};
-
-export type ActionOption = Option & {
-	action: {
-		groupLabel: string;
-		apply: Action[ 'apply' ];
-		getLabel: Action[ 'getLabel' ];
-	};
-};
-
-export type Actions = Record< string, ActionsGroup >;

package/src/components/multi-combobox/use-combobox-actions.ts

@@ -1,62 +0,0 @@
-import { createFilterOptions } from '@elementor/ui';
-import { type FilterOptionsState } from '@mui/base';
-
-import { type Action, type ActionOption, type Actions, type Option } from './types';
-
-export const useComboboxActions = (
-	applied: Option[],
-	actions: Actions,
-	optionsLabel?: string,
-	onSelect?: ( value: Option[] ) => void
-) => ( {
-	action: {
-		is: ( opt: ActionOption | Option | string ): opt is ActionOption => typeof opt !== 'string' && 'action' in opt,
-		getLabel: ( option: ActionOption ) => option.action.getLabel( option.label ),
-		groupBy: ( option: ActionOption ) => option.action.groupLabel,
-		onChange: ( { action, label }: ActionOption ) => action?.apply( label ),
-		getFilteredActions: ( optionList: Option[], params: FilterOptionsState< ActionOption > ) => {
-			const actionGroups = Object.values( actions );
-
-			return actionGroups.reduce< Option[] >( ( groups, group ) => {
-				const actionOptions = group.actions.reduce< Option[] >( ( groupActions, action ) => {
-					const shouldShowAction = action.condition( optionList, params.inputValue );
-
-					if ( shouldShowAction ) {
-						const actionOption = createActionOption( group.label, action, params.inputValue );
-						groupActions.unshift( actionOption );
-					}
-
-					return groupActions;
-				}, [] );
-
-				return [ ...groups, ...actionOptions ];
-			}, [] );
-		},
-	},
-	option: {
-		is: ( opt: ActionOption | Option | string ): opt is Option => typeof opt !== 'string' && ! ( 'action' in opt ),
-		getLabel: ( option: Option ) => option.label,
-		groupBy: () => optionsLabel ?? '',
-		onChange: ( optionValues: Option[] ) => onSelect?.( optionValues ),
-		getFilteredOptions: ( optionList: Option[], params: FilterOptionsState< Option > ) => {
-			const appliedValues = applied.map( ( option ) => option.value );
-
-			const optionsWithoutApplied = optionList.filter( ( option ) => ! appliedValues.includes( option.value ) );
-
-			return filter( optionsWithoutApplied, params );
-		},
-	},
-} );
-
-// Helper functions.
-const filter = createFilterOptions< Option >();
-
-const createActionOption = ( groupLabel: string, action: Action, inputValue: string ): ActionOption => ( {
-	value: '',
-	label: inputValue,
-	action: {
-		groupLabel,
-		apply: action.apply,
-		getLabel: action.getLabel,
-	},
-} );