@elementor/editor-editing-panel 1.34.0 → 1.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.34.0",
+  "version": "1.36.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,21 +39,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.19.1",
-    "@elementor/editor-canvas": "0.21.1",
-    "@elementor/editor-controls": "0.29.0",
+    "@elementor/editor": "0.19.3",
+    "@elementor/editor-canvas": "0.21.3",
+    "@elementor/editor-controls": "0.30.1",
     "@elementor/editor-current-user": "0.3.2",
-    "@elementor/editor-elements": "0.8.2",
-    "@elementor/editor-panels": "0.15.1",
+    "@elementor/editor-elements": "0.8.3",
+    "@elementor/editor-panels": "0.15.3",
     "@elementor/editor-props": "0.12.0",
-    "@elementor/editor-responsive": "0.13.4",
-    "@elementor/editor-styles": "0.6.6",
-    "@elementor/editor-styles-repository": "0.8.7",
-    "@elementor/editor-ui": "0.8.1",
-    "@elementor/editor-v1-adapters": "0.11.0",
+    "@elementor/editor-responsive": "0.13.5",
+    "@elementor/editor-styles": "0.6.7",
+    "@elementor/editor-styles-repository": "0.8.8",
+    "@elementor/editor-ui": "0.8.2",
+    "@elementor/editor-v1-adapters": "0.12.0",
     "@elementor/icons": "1.40.1",
-    "@elementor/locations": "0.7.7",
-    "@elementor/menus": "0.1.4",
+    "@elementor/locations": "0.8.0",
+    "@elementor/menus": "0.1.5",
     "@elementor/schema": "0.1.2",
     "@elementor/session": "0.1.0",
     "@elementor/ui": "1.34.2",

package/src/components/creatable-autocomplete/creatable-autocomplete.tsx

@@ -19,17 +19,28 @@ import { useInputState, useOpenState } from './use-autocomplete-states';
 import { useCreateOption } from './use-create-option';
 import { useFilterOptions } from './use-filter-options';
 
-export function CreatableAutocomplete< TOption extends SafeOptionConstraint >( {
-	selected,
-	options,
-	entityName,
-	onSelect,
-	placeholder,
-	onCreate,
-	validate,
-	...props
-}: CreatableAutocompleteProps< TOption > ) {
-	const { inputValue, setInputValue, error, setError, handleInputChange } = useInputState( validate );
+export const CreatableAutocomplete = React.forwardRef( CreatableAutocompleteInner ) as <
+	TOption extends SafeOptionConstraint,
+>(
+	props: CreatableAutocompleteProps< TOption > & {
+		ref?: React.ForwardedRef< HTMLElement >;
+	}
+) => ReturnType< typeof CreatableAutocompleteInner >;
+
+function CreatableAutocompleteInner< TOption extends SafeOptionConstraint >(
+	{
+		selected,
+		options,
+		entityName,
+		onSelect,
+		placeholder,
+		onCreate,
+		validate,
+		...props
+	}: CreatableAutocompleteProps< TOption >,
+	ref: React.ForwardedRef< HTMLElement >
+) {
+	const { inputValue, setInputValue, error, setError, inputHandlers } = useInputState( validate );
 	const { open, openDropdown, closeDropdown } = useOpenState( props.open );
 	const { createOption, loading } = useCreateOption( { onCreate, validate, setInputValue, setError, closeDropdown } );
 
@@ -60,6 +71,7 @@ export function CreatableAutocomplete< TOption extends SafeOptionConstraint >( {
 				) );
 			} }
 			{ ...( props as AutocompleteProps< InternalOption< TOption >, true, true, true > ) }
+			ref={ ref }
 			freeSolo
 			multiple
 			clearOnBlur
@@ -75,8 +87,8 @@ export function CreatableAutocomplete< TOption extends SafeOptionConstraint >( {
 			options={ internalOptions }
 			ListboxComponent={
 				error
-					? React.forwardRef< HTMLElement, ErrorTextProps >( ( _, ref ) => (
-							<ErrorText ref={ ref } error={ error } />
+					? React.forwardRef< HTMLElement, ErrorTextProps >( ( _, errorTextRef ) => (
+							<ErrorText ref={ errorTextRef } error={ error } />
 					  ) )
 					: undefined
 			}
@@ -88,7 +100,7 @@ export function CreatableAutocomplete< TOption extends SafeOptionConstraint >( {
 						{ ...params }
 						placeholder={ placeholder }
 						error={ Boolean( error ) }
-						onChange={ handleInputChange }
+						{ ...inputHandlers }
 						sx={ ( theme: Theme ) => ( {
 							'.MuiAutocomplete-inputRoot.MuiInputBase-adornedStart': {
 								paddingLeft: theme.spacing( 0.25 ),
@@ -149,7 +161,7 @@ const ErrorText = React.forwardRef< HTMLElement, ErrorTextProps >( ( { error = '
 				padding: theme.spacing( 2 ),
 			} ) }
 		>
-			<Typography variant="caption" sx={ { color: 'error.main' } }>
+			<Typography variant="caption" sx={ { color: 'error.main', display: 'inline-block' } }>
 				{ error }
 			</Typography>
 		</Box>

package/src/components/creatable-autocomplete/use-autocomplete-states.ts

@@ -29,7 +29,21 @@ export function useInputState( validate?: ( value: string, event: ValidationEven
 		}
 	};
 
-	return { inputValue, setInputValue, error, setError, handleInputChange };
+	const handleInputBlur = () => {
+		setInputValue( '' );
+		setError( null );
+	};
+
+	return {
+		inputValue,
+		setInputValue,
+		error,
+		setError,
+		inputHandlers: {
+			onChange: handleInputChange,
+			onBlur: handleInputBlur,
+		},
+	};
 }
 
 export function useOpenState( initialOpen: boolean = false ) {

package/src/components/css-classes/css-class-item.tsx

@@ -30,6 +30,7 @@ type CssClassItemProps = {
 	onClickActive: ( id: string | null ) => void;
 	renameLabel: ( newLabel: string ) => void;
 	validateLabel?: ( newLabel: string ) => string | undefined | null;
+	setError?: ( error: string | null ) => void;
 };
 
 const CHIP_SIZE = 'tiny';
@@ -44,6 +45,7 @@ export function CssClassItem( {
 	chipProps,
 	onClickActive,
 	renameLabel,
+	setError,
 }: CssClassItemProps ) {
 	const { meta, setMetaState } = useStyle();
 	const popupState = usePopupState( { variant: 'popover' } );
@@ -60,6 +62,7 @@ export function CssClassItem( {
 		value: label,
 		onSubmit: renameLabel,
 		validation: validateLabel,
+		onError: setError,
 	} );
 
 	const color = error ? 'error' : colorProp;
@@ -84,7 +87,7 @@ export function CssClassItem( {
 					size={ CHIP_SIZE }
 					label={
 						isEditing ? (
-							<EditableField ref={ ref } error={ error } { ...getEditableProps() } />
+							<EditableField ref={ ref } { ...getEditableProps() } />
 						) : (
 							<EllipsisWithTooltip maxWidth="10ch" title={ label } as="div" />
 						)

package/src/components/css-classes/css-class-selector.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type ReactElement } from 'react';
+import { type ReactElement, useRef, useState } from 'react';
 import { getElementSetting, updateElementSettings, useElementSetting } from '@elementor/editor-elements';
 import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
 import { type StyleDefinitionID } from '@elementor/editor-styles';
@@ -12,6 +12,7 @@ import {
 	useProviders,
 	validateStyleLabel,
 } from '@elementor/editor-styles-repository';
+import { WarningInfotip } from '@elementor/editor-ui';
 import { MapPinIcon } from '@elementor/icons';
 import { createLocation } from '@elementor/locations';
 import { Chip, FormLabel, Stack } from '@elementor/ui';
@@ -60,6 +61,9 @@ export function CssClassSelector() {
 	const { value: appliedIds, setValue: setAppliedIds, pushValue: pushAppliedId } = useAppliedClassesIds();
 	const { id: activeId, setId: setActiveId } = useStyle();
 
+	const autocompleteRef = useRef< HTMLElement | null >( null );
+	const [ renameError, setRenameError ] = useState< string | null >( null );
+
 	const handleApply = useHandleApply( appliedIds, setAppliedIds );
 	const { create, validate, entityName } = useCreateAction( { pushAppliedId, setActiveId } );
 
@@ -78,49 +82,59 @@ export function CssClassSelector() {
 					<ClassSelectorActionsSlot />
 				</Stack>
 			</Stack>
-			<CreatableAutocomplete
-				id={ ID }
-				size="tiny"
-				placeholder={ showPlaceholder ? __( 'Type class name', 'elementor' ) : undefined }
-				options={ options }
-				selected={ applied }
-				entityName={ entityName }
-				onSelect={ handleApply }
-				onCreate={ create ?? undefined }
-				validate={ validate ?? undefined }
-				limitTags={ TAGS_LIMIT }
-				getLimitTagsText={ ( more ) => (
-					<Chip size="tiny" variant="standard" label={ `+${ more }` } clickable />
-				) }
-				renderTags={ ( values, getTagProps ) =>
-					values.map( ( value, index ) => {
-						const chipProps = getTagProps( { index } );
-						const isActive = value.value === active?.value;
-
-						const renameLabel = ( newLabel: string ) => {
-							if ( ! value.value ) {
-								throw new Error( `Cannot rename a class without style id` );
-							}
-							return updateClassByProvider( value.provider, { label: newLabel, id: value.value } );
-						};
-
-						return (
-							<CssClassItem
-								key={ chipProps.key }
-								label={ value.label }
-								provider={ value.provider }
-								id={ value.value }
-								isActive={ isActive }
-								color={ isActive && value.color ? value.color : 'default' }
-								icon={ value.icon }
-								chipProps={ chipProps }
-								onClickActive={ () => setActiveId( value.value ) }
-								renameLabel={ renameLabel }
-							/>
-						);
-					} )
-				}
-			/>
+			<WarningInfotip
+				open={ Boolean( renameError ) }
+				text={ renameError ?? '' }
+				placement="bottom"
+				width={ autocompleteRef.current?.getBoundingClientRect().width }
+				offset={ [ 0, -15 ] }
+			>
+				<CreatableAutocomplete< StyleDefOption >
+					id={ ID }
+					ref={ autocompleteRef }
+					size="tiny"
+					placeholder={ showPlaceholder ? __( 'Type class name', 'elementor' ) : undefined }
+					options={ options }
+					selected={ applied }
+					entityName={ entityName }
+					onSelect={ handleApply }
+					onCreate={ create ?? undefined }
+					validate={ validate ?? undefined }
+					limitTags={ TAGS_LIMIT }
+					getLimitTagsText={ ( more ) => (
+						<Chip size="tiny" variant="standard" label={ `+${ more }` } clickable />
+					) }
+					renderTags={ ( values, getTagProps ) =>
+						values.map( ( value, index ) => {
+							const chipProps = getTagProps( { index } );
+							const isActive = value.value === active?.value;
+
+							const renameLabel = ( newLabel: string ) => {
+								if ( ! value.value ) {
+									throw new Error( `Cannot rename a class without style id` );
+								}
+								return updateClassByProvider( value.provider, { label: newLabel, id: value.value } );
+							};
+
+							return (
+								<CssClassItem
+									key={ chipProps.key }
+									label={ value.label }
+									provider={ value.provider }
+									id={ value.value }
+									isActive={ isActive }
+									color={ isActive && value.color ? value.color : 'default' }
+									icon={ value.icon }
+									chipProps={ chipProps }
+									onClickActive={ () => setActiveId( value.value ) }
+									renameLabel={ renameLabel }
+									setError={ setRenameError }
+								/>
+							);
+						} )
+					}
+				/>
+			</WarningInfotip>
 		</Stack>
 	);
 }

package/src/components/editing-panel-tabs.tsx

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 
 import { useElement } from '../contexts/element-context';
 import { ScrollProvider } from '../contexts/scroll-context';
+import { useStateByElement } from '../hooks/use-state-by-element';
 import { SettingsTab } from './settings-tab';
 import { stickyHeaderStyles, StyleTab } from './style-tab';
 
@@ -12,30 +13,46 @@ type TabValue = 'settings' | 'style';
 
 export const EditingPanelTabs = () => {
 	const { element } = useElement();
-
-	const { getTabProps, getTabPanelProps, getTabsProps } = useTabs< TabValue >( 'settings' );
-
 	return (
 		// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
 		// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
 		<Fragment key={ element.id }>
-			<ScrollProvider>
-				<Stack direction="column" sx={ { width: '100%' } }>
-					<Stack sx={ { ...stickyHeaderStyles, top: 0 } }>
-						<Tabs variant="fullWidth" size="small" sx={ { mt: 0.5 } } { ...getTabsProps() }>
-							<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />
-							<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />
-						</Tabs>
-						<Divider />
-					</Stack>
-					<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>
-						<SettingsTab />
-					</TabPanel>
-					<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>
-						<StyleTab />
-					</TabPanel>
-				</Stack>
-			</ScrollProvider>
+			<PanelTabContent />
 		</Fragment>
 	);
 };
+
+const PanelTabContent = () => {
+	const defaultComponentTab = 'settings';
+
+	const [ currentTab, setCurrentTab ] = useStateByElement< TabValue >( 'tab', defaultComponentTab );
+	const { getTabProps, getTabPanelProps, getTabsProps } = useTabs< TabValue >( currentTab );
+	return (
+		<ScrollProvider>
+			<Stack direction="column" sx={ { width: '100%' } }>
+				<Stack sx={ { ...stickyHeaderStyles, top: 0 } }>
+					<Tabs
+						variant="fullWidth"
+						size="small"
+						sx={ { mt: 0.5 } }
+						{ ...getTabsProps() }
+						onChange={ ( _: unknown, newValue: TabValue ) => {
+							getTabsProps().onChange( _, newValue );
+							setCurrentTab( newValue );
+						} }
+					>
+						<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />
+						<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />
+					</Tabs>
+					<Divider />
+				</Stack>
+				<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>
+					<SettingsTab />
+				</TabPanel>
+				<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>
+					<StyleTab />
+				</TabPanel>
+			</Stack>
+		</ScrollProvider>
+	);
+};

package/src/components/section.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { type PropsWithChildren, useId, useState } from 'react';
+import { type PropsWithChildren, useId } from 'react';
 import { Collapse, Divider, ListItemButton, ListItemText, Stack } from '@elementor/ui';
 
+import { useStateByElement } from '../hooks/use-state-by-element';
 import { CollapseIcon } from './collapse-icon';
 
 type Props = PropsWithChildren< {
@@ -10,7 +11,7 @@ type Props = PropsWithChildren< {
 } >;
 
 export function Section( { title, children, defaultExpanded = false }: Props ) {
-	const [ isOpen, setIsOpen ] = useState( !! defaultExpanded );
+	const [ isOpen, setIsOpen ] = useStateByElement( title, !! defaultExpanded );
 
 	const id = useId();
 	const labelId = `label-${ id }`;
@@ -21,7 +22,7 @@ export function Section( { title, children, defaultExpanded = false }: Props ) {
 			<ListItemButton
 				id={ labelId }
 				aria-controls={ contentId }
-				onClick={ () => setIsOpen( ( prev ) => ! prev ) }
+				onClick={ () => setIsOpen( ! isOpen ) }
 				sx={ { '&:hover': { backgroundColor: 'transparent' } } }
 			>
 				<ListItemText

package/src/components/style-sections/layout-section/display-field.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useStylesInheritanceField } from '../../../contexts/styles-inheritance-context';
 import { StylesField } from '../../../controls-registry/styles-field';
-import { isExperimentActive } from '../../../sync/is-experiment-active';
 import { ControlLabel } from '../../control-label';
 
 type Displays = 'block' | 'flex' | 'inline-block' | 'inline-flex' | 'none';

package/src/components/style-sections/position-section/position-section.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type StringPropValue } from '@elementor/editor-props';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { useSessionStorage } from '@elementor/session';
 
 import { useStyle } from '../../../contexts/style-context';
 import { useStylesField } from '../../../hooks/use-styles-field';
 import { useStylesFields } from '../../../hooks/use-styles-fields';
-import { isExperimentActive } from '../../../sync/is-experiment-active';
 import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
 import { DimensionsField } from './dimensions-field';

package/src/hooks/use-state-by-element.ts

@@ -0,0 +1,18 @@
+import { useState } from 'react';
+import { getSessionStorageItem, setSessionStorageItem } from '@elementor/session';
+
+import { useElement } from '../contexts/element-context';
+
+export const useStateByElement = < T >( key: string, initialValue: T ) => {
+	const { element } = useElement();
+	const lookup = `elementor/editor-state/${ element.id }/${ key }`;
+	const storedValue = getSessionStorageItem< T >( lookup );
+	const [ value, setValue ] = useState( storedValue ?? initialValue );
+
+	const doUpdate = ( newValue: T ) => {
+		setSessionStorageItem( lookup, newValue );
+		setValue( newValue );
+	};
+
+	return [ value, doUpdate ] as const;
+};

package/src/styles-inheritance/styles-inheritance-indicator.tsx

@@ -2,13 +2,13 @@ import * as React from 'react';
 import { useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, isElementsStylesProvider } from '@elementor/editor-styles-repository';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { IconButton, Infotip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StyleIndicator } from '../components/style-indicator';
 import { useStyle } from '../contexts/style-context';
 import { useStylesInheritanceField } from '../contexts/styles-inheritance-context';
-import { isExperimentActive } from '../sync/is-experiment-active';
 import { StyleIndicatorInfotip } from './styles-inheritance-infotip';
 
 export const StylesInheritanceIndicator = () => {

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

@@ -11,9 +11,3 @@ export const getElementorFrontendConfig = () => {
 
 	return extendedWindow.elementorFrontend?.config ?? {};
 };
-
-export const getElementorCommonConfig = () => {
-	const extendedWindow = window as unknown as ExtendedWindow;
-
-	return extendedWindow.elementorCommon?.config ?? {};
-};

package/src/sync/is-experiment-active.ts

@@ -1,7 +0,0 @@
-import { getElementorCommonConfig } from './get-elementor-globals';
-
-export const isExperimentActive = ( experiment: string ) => {
-	const allFeatures = getElementorCommonConfig()?.experimentalFeatures ?? {};
-
-	return !! allFeatures?.[ experiment ];
-};