@elementor/editor-editing-panel 1.0.0 → 1.1.0

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { PropKey } from '@elementor/editor-props';
+import { BoundPropProvider } from '@elementor/editor-controls';
+import { type PropKey } from '@elementor/editor-props';
+
 import { useStylesField } from '../hooks/use-styles-field';
-import { BoundPropProvider } from '../controls';
 
 export type StylesFieldProps = {
 	bind: PropKey;

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

@@ -1,40 +1,40 @@
 import * as React from 'react';
 import { useId } from 'react';
-import { __ } from '@wordpress/i18n';
+import { ControlLabel, useBoundProp } from '@elementor/editor-controls';
 import type { Control, ControlsSection } from '@elementor/editor-elements';
 import { DatabaseIcon, SettingsIcon, XIcon } from '@elementor/icons';
 import {
 	bindPopover,
 	bindTrigger,
 	Box,
+	Divider,
 	IconButton,
 	Paper,
 	Popover,
 	Stack,
+	Tab,
+	TabPanel,
+	Tabs,
 	Typography,
 	UnstableTag as Tag,
 	usePopupState,
-	Tabs,
-	Divider,
 	useTabs,
-	Tab,
-	TabPanel,
 } from '@elementor/ui';
-import { useBoundProp } from '../../controls';
-import { DynamicPropValue, DynamicTag } from '../types';
-import { DynamicControl } from '../dynamic-control';
-import { DynamicSelection } from './dynamic-selection';
-import { ControlLabel } from '../../components/control-label';
+import { __ } from '@wordpress/i18n';
+
 import { Control as BaseControl } from '../../controls-registry/control';
+import { type ControlType, getControlByType } from '../../controls-registry/controls-registry';
+import { usePropValueHistory } from '../../hooks/use-prop-value-history';
+import { DynamicControl } from '../dynamic-control';
 import { useDynamicTag } from '../hooks/use-dynamic-tag';
-import { usePropValueHistory } from '../hooks/use-prop-value-history';
-import { ControlType, getControlByType } from '../../controls-registry/controls-registry';
+import { type DynamicPropValue, type DynamicTag } from '../types';
+import { DynamicSelection } from './dynamic-selection';
 
 const SIZE = 'tiny';
 
 export const DynamicSelectionControl = () => {
 	const { bind, value, setValue } = useBoundProp< DynamicPropValue | null >();
-	const [ propValueFromHistory ] = usePropValueHistory( bind );
+	const { getPropValue: getPropValueFromHistory } = usePropValueHistory();
 	const { name: tagName = '' } = value?.value || {};
 
 	const selectionPopoverId = useId();
@@ -43,7 +43,8 @@ export const DynamicSelectionControl = () => {
 	const dynamicTag = useDynamicTag( bind, tagName );
 
 	const removeDynamicTag = () => {
-		setValue( propValueFromHistory ?? null );
+		const propValue = getPropValueFromHistory< DynamicPropValue >( bind );
+		setValue( propValue ?? null );
 	};
 
 	if ( ! dynamicTag ) {

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { useState, Fragment } from 'react';
-import { PropKey, PropValue } from '@elementor/editor-props';
-import { SearchIcon, PhotoIcon } from '@elementor/icons';
+import { Fragment, useState } from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
+import { type PropKey, type PropValue } from '@elementor/editor-props';
+import { PhotoIcon, SearchIcon } from '@elementor/icons';
 import {
 	Box,
 	Divider,
@@ -15,12 +16,12 @@ import {
 	Typography,
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
-import { useBoundProp } from '../../controls';
+
+import { usePropValueHistory } from '../../hooks/use-prop-value-history';
 import { usePropDynamicTags } from '../hooks/use-prop-dynamic-tags';
 import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
+import { type DynamicPropValue } from '../types';
 import { isDynamicPropValue } from '../utils';
-import { usePropValueHistory } from '../hooks/use-prop-value-history';
-import { DynamicPropValue } from '../types';
 
 type Option = {
 	label: string;
@@ -39,7 +40,7 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
 	const { bind, value: currentValue, setValue } = useBoundProp< DynamicPropValue | PropValue >();
-	const [ , updatePropValueHistory ] = usePropValueHistory( bind );
+	const { setPropValue: updatePropValueHistory } = usePropValueHistory();
 
 	const isCurrentValueDynamic = isDynamicPropValue( currentValue );
 
@@ -51,7 +52,7 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 
 	const handleSetDynamicTag = ( value: string ) => {
 		if ( ! isCurrentValueDynamic ) {
-			updatePropValueHistory( currentValue );
+			updatePropValueHistory( bind, currentValue );
 		}
 
 		setValue( { $$type: 'dynamic', value: { name: value, settings: {} } } );

package/src/dynamics/dynamic-control.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { useBoundProp } from '../controls';
-import { PropKey, PropValue } from '@elementor/editor-props';
+import { BoundPropProvider, useBoundProp } from '@elementor/editor-controls';
+import { type PropKey, type PropValue } from '@elementor/editor-props';
+
 import { useDynamicTag } from './hooks/use-dynamic-tag';
-import { DynamicPropValue } from './types';
-import { BoundPropProvider } from '../controls/bound-prop-context';
+import { type DynamicPropValue } from './types';
 
 export type DynamicControlProps = React.PropsWithChildren< {
 	bind: PropKey;

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

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
-import { PropKey } from '@elementor/editor-props';
+import { type PropKey } from '@elementor/editor-props';
+
+import { type DynamicTag } from '../types';
 import { usePropDynamicTags } from './use-prop-dynamic-tags';
-import { DynamicTag } from '../types';
 
 export const useDynamicTag = ( propName: PropKey, tagName: string ): DynamicTag | null => {
 	const dynamicTags = usePropDynamicTags( propName );

package/src/dynamics/hooks/use-prop-dynamic-action.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { useBoundProp } from '@elementor/editor-controls';
 import { DatabaseIcon } from '@elementor/icons';
-import { supportsDynamic } from '../utils';
-import { DynamicSelection } from '../components/dynamic-selection';
-import { useBoundProp } from '../../controls';
-import { PopoverActionProps } from '../../popover-action';
+import { __ } from '@wordpress/i18n';
+
 import { useElement } from '../../contexts/element-context';
+import { type PopoverActionProps } from '../../popover-action';
+import { DynamicSelection } from '../components/dynamic-selection';
+import { supportsDynamic } from '../utils';
 
 export const usePropDynamicAction = (): PopoverActionProps => {
 	const { bind } = useBoundProp();

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

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
-import { PropKey } from '@elementor/editor-props';
-import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
+import { type PropKey } from '@elementor/editor-props';
+
 import { useElement } from '../../contexts/element-context';
+import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
 import { getDynamicPropType } from '../utils';
 
 export const usePropDynamicTags = ( propName: PropKey ) => {

package/src/dynamics/init.ts

@@ -1,8 +1,10 @@
+import { replaceControl } from '../control-replacement';
+import { controlActionsMenu } from '../controls-actions';
 import { DynamicSelectionControl } from './components/dynamic-selection-control';
-import { isDynamicPropValue } from './utils';
 import { usePropDynamicAction } from './hooks/use-prop-dynamic-action';
-import { replaceControl } from '../control-replacement';
-import { registerPopoverAction } from '../controls-actions';
+import { isDynamicPropValue } from './utils';
+
+const { registerPopoverAction } = controlActionsMenu;
 
 export const init = () => {
 	replaceControl( {

package/src/dynamics/sync/get-elementor-config.ts

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

package/src/dynamics/types.ts

@@ -1,5 +1,5 @@
-import { TransformablePropType, TransformablePropValue } from '@elementor/editor-props';
-import { ControlItem, PropsSchema } from '@elementor/editor-elements';
+import { type ControlItem, type PropsSchema } from '@elementor/editor-elements';
+import { type TransformablePropType, type TransformablePropValue } from '@elementor/editor-props';
 
 export type ExtendedWindow = Window & {
 	elementor?: {

package/src/dynamics/utils.ts

@@ -1,5 +1,6 @@
-import { isTransformable, PropType, PropValue, TransformablePropType } from '@elementor/editor-props';
-import { DynamicPropType, DynamicPropValue } from './types';
+import { isTransformable, type PropType, type PropValue, type TransformablePropType } from '@elementor/editor-props';
+
+import { type DynamicPropType, type DynamicPropValue } from './types';
 
 const DYNAMIC_PROP_TYPE_KEY = 'dynamic';
 

package/src/hooks/use-close-editor-panel.ts

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { getSelectedElements, isElementInContainer, type V1Element } from '@elementor/editor-elements';
+import { __privateListenTo as listenTo, type CommandEvent, commandStartEvent } from '@elementor/editor-v1-adapters';
+
+import { usePanelActions } from '../panel';
+import { isAtomicWidgetSelected } from '../sync/is-atomic-widget-selected';
+
+export const useCloseEditorPanel = () => {
+	const { close } = usePanelActions();
+
+	return useEffect( () => {
+		return listenTo( commandStartEvent( 'document/elements/delete' ), ( e ) => {
+			const selectedElement = getSelectedElements()[ 0 ];
+			const { container: deletedContainer } = ( e as CommandEvent< { container: V1Element } > )?.args;
+			const isSelectedElementInDeletedContainer =
+				deletedContainer && selectedElement && isElementInContainer( selectedElement, deletedContainer );
+
+			if ( isSelectedElementInDeletedContainer && isAtomicWidgetSelected() ) {
+				close();
+			}
+		} );
+	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
+};

package/src/hooks/use-direction.ts

@@ -0,0 +1,13 @@
+import { useTheme } from '@elementor/ui';
+
+import { type ExtendedWindow } from '../sync/types';
+
+export function useDirection() {
+	const theme = useTheme(),
+		extendedWindow: ExtendedWindow = window;
+
+	const isUiRtl = 'rtl' === theme.direction,
+		isSiteRtl = !! extendedWindow.elementorFrontend?.config?.is_rtl;
+
+	return { isSiteRtl, isUiRtl };
+}

package/src/hooks/use-open-editor-panel.ts

@@ -1,14 +1,15 @@
 import { useEffect } from 'react';
-import { commandStartEvent, __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';
+import { __privateListenTo as listenTo, commandStartEvent } from '@elementor/editor-v1-adapters';
+
 import { usePanelActions } from '../panel';
-import { shouldUseV2Panel } from '../sync/should-use-v2-panel';
+import { isAtomicWidgetSelected } from '../sync/is-atomic-widget-selected';
 
 export const useOpenEditorPanel = () => {
 	const { open } = usePanelActions();
 
 	useEffect( () => {
 		return listenTo( commandStartEvent( 'panel/editor/open' ), () => {
-			if ( shouldUseV2Panel() ) {
+			if ( isAtomicWidgetSelected() ) {
 				open();
 			}
 		} );

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

@@ -0,0 +1,45 @@
+import { useCallback, useMemo } from 'react';
+import { getSessionStorageItem, setSessionStorageItem } from '@elementor/utils';
+
+import { useElement } from '../contexts/element-context';
+
+export const PROPS_VALUES_HISTORY_PREFIX = 'elementor/editor-editing-panel/prop-value-history';
+
+export const usePropValueHistory = () => {
+	const { element } = useElement();
+	const elementKey = `${ PROPS_VALUES_HISTORY_PREFIX }/${ element.id }`;
+
+	const getElementPropsHistory = useCallback( () => {
+		return getSessionStorageItem< Record< string, unknown > >( elementKey );
+	}, [ elementKey ] );
+
+	const getPropValue = useCallback(
+		< T >( propKey: string ) => {
+			const elementPropValues = getElementPropsHistory();
+			return ( elementPropValues?.[ propKey ] ?? null ) as T | null;
+		},
+		[ getElementPropsHistory ]
+	);
+
+	const setPropValue = useCallback(
+		( propKey: string, propValue: unknown ) => {
+			const elementPropValues = getElementPropsHistory();
+			const updatedElementPropValues = { ...elementPropValues, [ propKey ]: propValue };
+			setSessionStorageItem( elementKey, updatedElementPropValues );
+		},
+		[ getElementPropsHistory, elementKey ]
+	);
+
+	const removeProp = useCallback(
+		( propKey: string ) => {
+			const elementPropValues = getElementPropsHistory();
+			const updatedElementPropValues = Object.fromEntries(
+				Object.entries( elementPropValues || {} ).filter( ( [ key ] ) => key !== propKey )
+			);
+			setSessionStorageItem( elementKey, updatedElementPropValues );
+		},
+		[ getElementPropsHistory, elementKey ]
+	);
+
+	return useMemo( () => ( { getPropValue, setPropValue, removeProp } ), [ getPropValue, removeProp, setPropValue ] );
+};

package/src/hooks/use-style-prop-history.ts

@@ -0,0 +1,75 @@
+import { useCallback, useMemo } from 'react';
+import { getElementStyles, getVariantByMeta, updateStyle } from '@elementor/editor-elements';
+import { type PropKey } from '@elementor/editor-props';
+
+import { useElement } from '../contexts/element-context';
+import { useStyle } from '../contexts/style-context';
+import { usePropValueHistory } from './use-prop-value-history';
+
+export const useStylePropsHistory = ( props: PropKey[] ) => {
+	const { element } = useElement();
+	const { id: styleDefID, meta } = useStyle();
+	const { getPropValue, setPropValue, removeProp } = usePropValueHistory();
+
+	const styleDef = getElementStyles( element.id )?.[ styleDefID ];
+	const styleVariant = styleDef ? getVariantByMeta( styleDef, meta ) : null;
+	const styleVariantPath = `${ styleDefID }-${ styleVariant?.meta.breakpoint }-${ styleVariant?.meta.state }`;
+
+	const saveStylePropsHistory = useCallback( () => {
+		props.forEach( ( propKey ) => {
+			const propValue = styleVariant?.props[ propKey ];
+
+			if ( propValue ) {
+				const propPath = `${ styleVariantPath }-${ propKey }`;
+				setPropValue( propPath, propValue );
+			}
+		} );
+	}, [ props, setPropValue, styleVariant?.props, styleVariantPath ] );
+
+	const updateStylePropsFromHistory = useCallback( () => {
+		const propValuesFromHistory = props.reduce( ( allProps, currentPropKey ) => {
+			const propPath = `${ styleVariantPath }-${ currentPropKey }`;
+			const propHistory = getPropValue( propPath );
+
+			if ( propHistory ) {
+				removeProp( propPath );
+				return { ...allProps, [ currentPropKey ]: propHistory };
+			}
+
+			return allProps;
+		}, {} );
+
+		if ( Object.keys( propValuesFromHistory ).length ) {
+			updateStyle( {
+				elementID: element.id,
+				styleDefID,
+				meta,
+				props: propValuesFromHistory,
+				bind: 'classes',
+			} );
+		}
+	}, [ element.id, getPropValue, meta, props, removeProp, styleDefID, styleVariantPath ] );
+
+	const clearCurrentStyleProps = useCallback( () => {
+		const resetValues = props.reduce(
+			( allProps, currentPropKey ) => ( {
+				...allProps,
+				[ currentPropKey ]: undefined,
+			} ),
+			{}
+		);
+
+		updateStyle( {
+			elementID: element.id,
+			styleDefID,
+			meta,
+			props: resetValues,
+			bind: 'classes',
+		} );
+	}, [ element.id, meta, props, styleDefID ] );
+
+	return useMemo(
+		() => ( { saveStylePropsHistory, updateStylePropsFromHistory, clearCurrentStyleProps } ),
+		[ saveStylePropsHistory, updateStylePropsFromHistory, clearCurrentStyleProps ]
+	);
+};

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

@@ -1,13 +1,23 @@
+import { useEffect, useRef } from 'react';
+import { updateStyle, useElementStyleProp } from '@elementor/editor-elements';
 import type { PropKey, PropValue } from '@elementor/editor-props';
-import { useElementStyleProp, updateStyle } from '@elementor/editor-elements';
-import { useStyle } from '../contexts/style-context';
+
 import { useClassesProp } from '../contexts/classes-prop-context';
 import { useElement } from '../contexts/element-context';
+import { useStyle } from '../contexts/style-context';
 
-export const useStylesField = < T extends PropValue >( propName: PropKey ) => {
+export const useStylesField = < T extends PropValue >(
+	propName: PropKey
+): [
+	T | null,
+	( newValue: T ) => void,
+	( callback: ( newValue: T | null, previousValue: T | null ) => void ) => void,
+] => {
 	const { element } = useElement();
 	const { id, meta } = useStyle();
 	const classesProp = useClassesProp();
+	const previousValue = useRef< T | null >( null );
+	const onChangeCallbacks = useRef< Set< ( newValue: T | null, previousValue: T | null ) => void > >( new Set() );
 
 	const value = useElementStyleProp< T >( {
 		elementID: element.id,
@@ -26,5 +36,16 @@ export const useStylesField = < T extends PropValue >( propName: PropKey ) => {
 		} );
 	};
 
-	return [ value, setValue ] as const;
+	const registerChangeListener = ( callback: ( newValue: T | null, previousValue: T | null ) => void ) => {
+		onChangeCallbacks.current.add( callback );
+	};
+
+	useEffect( () => {
+		onChangeCallbacks.current.forEach( ( cb ) => {
+			cb( value, previousValue.current );
+		} );
+		previousValue.current = value;
+	}, [ value ] );
+
+	return [ value, setValue, registerChangeListener ];
 };

package/src/index.ts

@@ -1,6 +1,6 @@
+export { useBoundProp } from '@elementor/editor-controls';
 export type { PopoverActionProps } from './popover-action';
 export { replaceControl } from './control-replacement';
-export { useBoundProp } from './controls';
 
 import init from './init';
 

package/src/init.ts

@@ -1,10 +1,11 @@
-import { panel } from './panel';
 import { injectIntoLogic } from '@elementor/editor';
-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 { EditingPanelHooks } from './components/editing-panel-hooks';
 import { init as initDynamics } from './dynamics/init';
+import { panel } from './panel';
+import { isAtomicWidgetSelected } from './sync/is-atomic-widget-selected';
 
 export default function init() {
 	registerPanel( panel );
@@ -22,6 +23,6 @@ export default function init() {
 const blockV1Panel = () => {
 	blockDataCommand( {
 		command: 'panel/editor/open',
-		condition: shouldUseV2Panel,
+		condition: isAtomicWidgetSelected,
 	} );
 };

package/src/panel.ts

@@ -1,4 +1,5 @@
 import { __createPanel as createPanel } from '@elementor/editor-panels';
+
 import { EditingPanel } from './components/editing-panel';
 
 export const { panel, usePanelActions, usePanelStatus } = createPanel( {

package/src/popover-action.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ComponentType, ElementType as ReactElementType, useId } from 'react';
+import { type ComponentType, type ElementType as ReactElementType, useId } from 'react';
 import { XIcon } from '@elementor/icons';
 import { bindPopover, bindToggle, IconButton, Popover, Stack, Tooltip, Typography, usePopupState } from '@elementor/ui';
 

package/src/sync/enqueue-font.ts

@@ -0,0 +1,7 @@
+import { type EnqueueFont, type ExtendedWindow } from './types';
+
+export const enqueueFont: EnqueueFont = ( fontFamily, context = 'editor' ) => {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return extendedWindow.elementor?.helpers?.enqueueFont( fontFamily, context ) ?? null;
+};

package/src/sync/get-elementor-config.ts

@@ -0,0 +1,7 @@
+import { type ExtendedWindow } from './types';
+
+export const getElementorConfig = () => {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return extendedWindow.elementor?.config ?? {};
+};

package/src/sync/{should-use-v2-panel.ts → is-atomic-widget-selected.ts}

@@ -1,6 +1,6 @@
 import { getSelectedElements, getWidgetsCache } from '@elementor/editor-elements';
 
-export const shouldUseV2Panel = () => {
+export const isAtomicWidgetSelected = () => {
 	const selectedElements = getSelectedElements();
 	const widgetCache = getWidgetsCache();
 

package/src/sync/types.ts

@@ -1,6 +1,8 @@
-import { ControlItem, PropsSchema } from '@elementor/editor-elements';
-import { PropValue } from '@elementor/editor-props';
-import { StyleDefinition, StyleDefinitionID } from '@elementor/editor-styles';
+import { type ControlItem, type PropsSchema, type V1Element } from '@elementor/editor-elements';
+
+export type SupportedFonts = 'system' | 'googlefonts' | 'customfonts';
+
+export type EnqueueFont = ( fontFamily: string, context?: 'preview' | 'editor' ) => void;
 
 export type ExtendedWindow = Window & {
 	elementor?: {
@@ -17,23 +19,20 @@ export type ExtendedWindow = Window & {
 			}
 		>;
 		getContainer?: ( id: string ) => V1Element;
+		helpers?: {
+			enqueueFont: EnqueueFont;
+		};
+		config?: {
+			controls?: {
+				font?: {
+					options?: Record< string, SupportedFonts >;
+				};
+			};
+		};
+	};
+	elementorFrontend?: {
+		config?: {
+			is_rtl?: boolean;
+		};
 	};
-};
-
-export type V1Element = {
-	model: V1Model< V1ElementModelProps >;
-	settings?: V1Model< V1ElementSettingsProps >;
-};
-
-export type V1ElementModelProps = {
-	widgetType?: string;
-	elType: string;
-	id: string;
-	styles?: Record< StyleDefinitionID, StyleDefinition >;
-};
-
-export type V1ElementSettingsProps = Record< string, PropValue >;
-
-type V1Model< T > = {
-	get: < K extends keyof T >( key: K ) => T[ K ];
 };

package/src/components/accordion-section.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { useId } from 'react';
-import { Accordion, AccordionSummary, AccordionDetails, AccordionSummaryText, Stack } from '@elementor/ui';
-
-export type AccordionSectionProps = React.PropsWithChildren< {
-	title: React.ReactNode;
-	defaultExpanded?: boolean;
-} >;
-
-export const AccordionSection = ( { title, children, defaultExpanded = false }: AccordionSectionProps ) => {
-	const uid = useId();
-	const labelId = `label-${ uid }`;
-	const contentId = `content-${ uid }`;
-
-	// TODO: Change to collapsible list item
-	return (
-		<Accordion disableGutters defaultExpanded={ defaultExpanded }>
-			<AccordionSummary aria-controls={ contentId } id={ labelId }>
-				<AccordionSummaryText primaryTypographyProps={ { variant: 'caption' } }>{ title }</AccordionSummaryText>
-			</AccordionSummary>
-			<AccordionDetails id={ contentId } aria-labelledby={ labelId }>
-				<Stack gap={ 2.5 }>{ children }</Stack>
-			</AccordionDetails>
-		</Accordion>
-	);
-};

package/src/components/control-label.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { Typography } from '@elementor/ui';
-
-export const ControlLabel = ( { children }: { children: React.ReactNode } ) => {
-	return (
-		<Typography component="label" variant="caption" color="text.secondary">
-			{ children }
-		</Typography>
-	);
-};

package/src/controls/bound-prop-context.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { PropKey, PropValue } from '@elementor/editor-props';
-import { createContext, useContext } from 'react';
-
-export type BoundPropContext< T extends PropValue > = {
-	bind: PropKey;
-	setValue: ( value: T | undefined ) => void;
-	value: T | undefined;
-};
-
-export type BoundPropProviderProps< T extends PropValue > = BoundPropContext< T > & {
-	children: React.ReactNode;
-};
-
-const BoundPropContext = createContext< BoundPropContext< PropValue > | null >( null );
-export const BoundPropProvider = ( { children, value, setValue, bind }: BoundPropProviderProps< PropValue > ) => {
-	return <BoundPropContext.Provider value={ { value, setValue, bind } }>{ children }</BoundPropContext.Provider>;
-};
-
-export function useBoundProp< T extends PropValue >(): BoundPropContext< T | undefined >;
-export function useBoundProp< T extends PropValue >( defaultValue: T ): BoundPropContext< T >;
-export function useBoundProp< T extends PropValue >( defaultValue?: T ) {
-	const boundPropContext = useContext< BoundPropContext< T > >( BoundPropContext as never );
-
-	if ( ! boundPropContext ) {
-		throw new Error( 'useBoundProp must be used within a BoundPropContext' );
-	}
-
-	return { ...boundPropContext, value: boundPropContext.value ?? defaultValue };
-}