@elementor/editor-editing-panel 1.0.0 → 1.2.0

package/src/controls/controls/text-area-control.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { TextField } from '@elementor/ui';
-import { useBoundProp } from '../bound-prop-context';
-import ControlActions from '../control-actions/control-actions';
-import { createControl } from '../create-control';
-
-type Props = {
-	placeholder?: string;
-};
-
-export const TextAreaControl = createControl( ( { placeholder }: Props ) => {
-	const { value, setValue } = useBoundProp< string >();
-
-	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		setValue( event.target.value );
-	};
-
-	return (
-		<ControlActions>
-			<TextField
-				size="tiny"
-				multiline
-				fullWidth
-				rows={ 5 }
-				value={ value }
-				onChange={ handleChange }
-				placeholder={ placeholder }
-			/>
-		</ControlActions>
-	);
-} );

package/src/controls/controls/text-control.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { TextField } from '@elementor/ui';
-import { useBoundProp } from '../bound-prop-context';
-import ControlActions from '../control-actions/control-actions';
-import { createControl } from '../create-control';
-
-export const TextControl = createControl( ( { placeholder }: { placeholder?: string } ) => {
-	const { value, setValue } = useBoundProp< string >( '' );
-
-	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
-
-	return (
-		<ControlActions>
-			<TextField type="text" size="tiny" value={ value } onChange={ handleChange } placeholder={ placeholder } />
-		</ControlActions>
-	);
-} );

package/src/controls/controls/toggle-control.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { useBoundProp } from '../bound-prop-context';
-import { ControlToggleButtonGroup, ToggleButtonGroupItem } from '../components/control-toggle-button-group';
-import { PropValue } from '@elementor/editor-props';
-import { createControl } from '../create-control';
-
-type ToggleControlProps< T extends PropValue > = {
-	options: ToggleButtonGroupItem< T >[];
-};
-
-export const ToggleControl = createControl( < T extends PropValue >( { options }: ToggleControlProps< T > ) => {
-	const { value, setValue } = useBoundProp< T | null >();
-
-	const handleToggle = ( option: T | null ) => {
-		setValue( option );
-	};
-
-	return (
-		<ControlToggleButtonGroup
-			items={ options }
-			value={ value || null }
-			onChange={ handleToggle }
-			exclusive={ true }
-		/>
-	);
-} );

package/src/controls/create-control-replacement.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react';
-import { ComponentType, createContext, useContext } from 'react';
-import { useBoundProp } from './bound-prop-context';
-import { PropValue } from '@elementor/editor-props';
-
-export type ReplaceWhenParams = {
-	value: PropValue;
-};
-
-export type CreateControlReplacement = {
-	component: ComponentType;
-	condition: ( { value }: ReplaceWhenParams ) => boolean;
-};
-
-const ControlReplacementContext = createContext< CreateControlReplacement | undefined >( undefined );
-
-export const ControlReplacementProvider = ( {
-	component,
-	condition,
-	children,
-}: React.PropsWithChildren< CreateControlReplacement > ) => {
-	return (
-		<ControlReplacementContext.Provider value={ { component, condition } }>
-			{ children }
-		</ControlReplacementContext.Provider>
-	);
-};
-export const useControlReplacement = () => {
-	const { value } = useBoundProp();
-	const controlReplacement = useContext( ControlReplacementContext );
-
-	let shouldReplace = false;
-
-	try {
-		shouldReplace = !! controlReplacement?.condition( { value } ) && !! controlReplacement.component;
-	} catch {}
-
-	return shouldReplace ? controlReplacement?.component : undefined;
-};
-
-export const createControlReplacement = () => {
-	let controlReplacement: CreateControlReplacement;
-
-	function replaceControl( { component, condition }: CreateControlReplacement ) {
-		controlReplacement = { component, condition };
-	}
-
-	function getControlReplacement() {
-		return controlReplacement;
-	}
-
-	return { replaceControl, getControlReplacement };
-};

package/src/controls/create-control.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import { ComponentProps, ComponentType } from 'react';
-import { useControlReplacement } from './create-control-replacement';
-import { ErrorBoundary } from '@elementor/ui';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type AnyComponentType = ComponentType< any >;
-
-type Options = {
-	supportsReplacements?: boolean;
-};
-
-const brandSymbol = Symbol( 'control' );
-
-export type ControlComponent< TComponent extends AnyComponentType = AnyComponentType > = TComponent & {
-	[ brandSymbol ]: true;
-};
-
-export function createControl< T extends AnyComponentType >(
-	Component: T,
-	{ supportsReplacements = true }: Options = {}
-) {
-	return ( ( props: ComponentProps< T > ) => {
-		const ControlReplacement = useControlReplacement();
-
-		if ( ControlReplacement && supportsReplacements ) {
-			return (
-				<ErrorBoundary fallback={ null }>
-					<ControlReplacement { ...props } />
-				</ErrorBoundary>
-			);
-		}
-
-		return (
-			<ErrorBoundary fallback={ null }>
-				<Component { ...props } />
-			</ErrorBoundary>
-		);
-	} ) as ControlComponent< T >;
-}

package/src/controls/hooks/use-sync-external-state.tsx

@@ -1,51 +0,0 @@
-import { useEffect, useState } from 'react';
-
-type UseInternalStateOptions< TValue > = {
-	external: TValue | undefined;
-	setExternal: ( value: TValue | undefined ) => void;
-	persistWhen: ( value: TValue | undefined ) => boolean;
-	fallback: ( value: TValue | undefined ) => TValue;
-};
-
-export const useSyncExternalState = < TValue, >( {
-	external,
-	setExternal,
-	persistWhen,
-	fallback,
-}: UseInternalStateOptions< TValue > ) => {
-	function toExternal( internalValue: TValue | undefined ) {
-		if ( persistWhen( internalValue ) ) {
-			return internalValue;
-		}
-
-		return undefined;
-	}
-
-	function toInternal( externalValue: TValue | undefined, internalValue: TValue | undefined ) {
-		if ( ! externalValue ) {
-			return fallback( internalValue );
-		}
-
-		return externalValue;
-	}
-
-	const [ internal, setInternal ] = useState< TValue >( toInternal( external, undefined ) );
-
-	useEffect( () => {
-		setInternal( ( prevInternal ) => toInternal( external, prevInternal ) );
-
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ external ] );
-
-	type SetterFunc = ( value: TValue ) => TValue;
-
-	const setInternalValue = ( setter: SetterFunc | TValue ) => {
-		const setterFn = ( typeof setter === 'function' ? setter : () => setter ) as SetterFunc;
-		const updated = setterFn( internal );
-
-		setInternal( updated );
-		setExternal( toExternal( updated ) );
-	};
-
-	return [ internal, setInternalValue ] as const;
-};

package/src/controls/index.ts

@@ -1,24 +0,0 @@
-// control types
-export { ImageControl } from './controls/image-control';
-export { TextControl } from './controls/text-control';
-export { TextAreaControl } from './controls/text-area-control';
-export { SizeControl } from './controls/size-control';
-export { StrokeControl } from './controls/stroke-control';
-export { BoxShadowRepeaterControl } from './controls/box-shadow-repeater-control';
-export { SelectControl } from './controls/select-control';
-export { ColorControl } from './controls/color-control';
-export { ToggleControl } from './controls/toggle-control';
-export { NumberControl } from './controls/number-control';
-
-// types
-export type { ControlComponent } from './create-control';
-export type { ToggleButtonGroupItem } from './components/control-toggle-button-group';
-export type { SizeControlValue } from './controls/size-control';
-
-// Providers
-export { ControlActionsProvider } from './control-actions/control-actions-context';
-export { createControlReplacement, ControlReplacementProvider } from './create-control-replacement';
-export { useBoundProp, BoundPropProvider } from './bound-prop-context';
-
-// utils
-export { createControlActionsMenu } from './control-actions/control-actions-menu';

package/src/dynamics/hooks/use-prop-value-history.ts

@@ -1,26 +0,0 @@
-import { PropValue } from '@elementor/editor-props';
-import { useElement } from '../../contexts/element-context';
-
-export const PROPS_VALUES_HISTORY_KEY = 'elementor/dynamic/non-dynamic-values-history';
-
-export const usePropValueHistory = ( path: string ) => {
-	const valuesHistory = getValues();
-	const { element } = useElement();
-	const key = `${ element.id }-${ path }`;
-
-	const value = valuesHistory[ key ] ?? null;
-
-	const setValue = ( newValue: PropValue ) => {
-		setValues( { ...valuesHistory, [ key ]: newValue } );
-	};
-
-	return [ value, setValue ] as const;
-};
-
-const getValues = () => {
-	return JSON.parse( sessionStorage.getItem( PROPS_VALUES_HISTORY_KEY ) || '{}' );
-};
-
-const setValues = ( values: Record< string, PropValue > ) => {
-	sessionStorage.setItem( PROPS_VALUES_HISTORY_KEY, JSON.stringify( values ) );
-};