@elementor/editor-editing-panel 1.0.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,19 +39,19 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "^0.16.0",
-    "@elementor/editor-elements": "^0.2.0",
-    "@elementor/editor-props": "^0.2.0",
-    "@elementor/editor-panels": "^0.9.0",
-    "@elementor/editor-responsive": "^0.12.2",
-    "@elementor/editor-styles": "^0.2.0",
-    "@elementor/editor-v1-adapters": "^0.8.3",
-    "@elementor/icons": "^1.18.1",
+    "@elementor/editor": "^0.17.1",
+    "@elementor/editor-controls": "^0.1.1",
+    "@elementor/editor-elements": "^0.3.1",
     "@elementor/menus": "^0.1.1",
-    "@elementor/ui": "^1.21.7",
-    "@elementor/utils": "^0.2.2",
-    "@elementor/wp-media": "^0.2.1",
-    "@wordpress/i18n": "^4.45.0"
+    "@elementor/editor-props": "^0.3.0",
+    "@elementor/editor-panels": "^0.10.1",
+    "@elementor/editor-responsive": "^0.12.3",
+    "@elementor/editor-styles": "^0.3.0",
+    "@elementor/editor-v1-adapters": "^0.8.4",
+    "@elementor/icons": "^1.20.0",
+    "@elementor/ui": "^1.22.0",
+    "@elementor/utils": "^0.3.0",
+    "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {
     "react": "^18.3.1"

package/src/components/add-or-remove-content.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
+import { ControlLabel } from '@elementor/editor-controls';
 import { MinusIcon, PlusIcon } from '@elementor/icons';
 import { Collapse, IconButton, Stack } from '@elementor/ui';
-import { ControlLabel } from './control-label';
 
 const SIZE = 'tiny';
 
@@ -34,7 +34,7 @@ export const AddOrRemoveContent = ( { isAdded, label, onAdd, onRemove, children
 					</IconButton>
 				) }
 			</Stack>
-			<Collapse in={ isAdded }>
+			<Collapse in={ isAdded } unmountOnExit>
 				<Stack gap={ 1.5 }>{ children }</Stack>
 			</Collapse>
 		</Stack>

package/src/components/collapse-icon.tsx

@@ -0,0 +1,12 @@
+import { ChevronDownIcon } from '@elementor/icons';
+import { styled } from '@elementor/ui';
+
+// TODO: Replace this with future Rotate component that will be implemented in elementor-ui
+export const CollapseIcon = styled( ChevronDownIcon, {
+	shouldForwardProp: ( prop ) => prop !== 'open',
+} )< { open: boolean } >( ( { theme, open } ) => ( {
+	transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
+	transition: theme.transitions.create( 'transform', {
+		duration: theme.transitions.duration.standard,
+	} ),
+} ) );

package/src/components/collapsible-content.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { ChevronDownIcon } from '@elementor/icons';
-import { Button, Collapse, Stack, styled } from '@elementor/ui';
+import { Button, Collapse, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { CollapseIcon } from './collapse-icon';
+
 type CollapsibleContentProps = React.PropsWithChildren< {
 	defaultOpen?: boolean;
 } >;
@@ -23,23 +24,13 @@ export const CollapsibleContent = ( { children, defaultOpen = false }: Collapsib
 				color="secondary"
 				variant="outlined"
 				onClick={ handleToggle }
-				endIcon={ <ChevronIcon open={ open } /> }
+				endIcon={ <CollapseIcon open={ open } /> }
 			>
 				{ open ? __( 'Show less', 'elementor' ) : __( 'Show more', 'elementor' ) }
 			</Button>
-			<Collapse in={ open } timeout="auto">
+			<Collapse in={ open } timeout="auto" unmountOnExit>
 				{ children }
 			</Collapse>
 		</Stack>
 	);
 };
-
-// TODO: Replace this with future Rotate component that will be implemented in elementor-ui
-const ChevronIcon = styled( ChevronDownIcon, {
-	shouldForwardProp: ( prop ) => prop !== 'open',
-} )< { open: boolean } >( ( { theme, open } ) => ( {
-	transform: open ? 'rotate(180deg)' : 'rotate(0)',
-	transition: theme.transitions.create( 'transform', {
-		duration: theme.transitions.duration.standard,
-	} ),
-} ) );

package/src/components/collapsible-field.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { __ } from '@wordpress/i18n';
-import { Collapse, IconButton, Stack } from '@elementor/ui';
 import { MinusIcon, PlusIcon } from '@elementor/icons';
+import { Collapse, IconButton, Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
 
 type CollapsibleFieldProps = React.PropsWithChildren< {
 	label: React.ReactNode;
@@ -28,7 +28,9 @@ export const CollapsibleField = ( { label, children, defaultOpen = false }: Coll
 					{ open ? <MinusIcon fontSize="tiny" /> : <PlusIcon fontSize="tiny" /> }
 				</IconButton>
 			</Stack>
-			<Collapse in={ open }>{ children }</Collapse>
+			<Collapse in={ open } unmountOnExit>
+				{ children }
+			</Collapse>
 		</Stack>
 	);
 };

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

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { updateSettings, useElementSetting, useElementStyles } from '@elementor/editor-elements';
+import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
+import { type StyleDefinitionID } from '@elementor/editor-styles';
+import { Chip, Stack, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useClassesProp } from '../contexts/classes-prop-context';
+import { useElement } from '../contexts/element-context';
+import { useStyle } from '../contexts/style-context';
+import { MultiCombobox, type Option } from './multi-combobox';
+
+const ID = 'elementor-css-class-selector';
+const TAGS_LIMIT = 8;
+
+export function CssClassSelector() {
+	const options = useOptions();
+
+	const { id: activeId, setId: setActiveId } = useStyle();
+	const [ appliedIds ] = useAppliedClassesIds();
+
+	const handleApply = useHandleApply();
+	const handleActivate = ( { value }: Option ) => setActiveId( value );
+
+	const active = options.find( ( option ) => option.value === activeId ) || null;
+
+	const applied = appliedIds
+		.map( ( id ) => options.find( ( option ) => option.value === id ) )
+		.filter( ( option ) => !! option );
+
+	return (
+		<Stack gap={ 1 } p={ 2 }>
+			<Typography component="label" variant="caption" htmlFor={ ID }>
+				{ __( 'CSS Classes', 'elementor' ) }
+			</Typography>
+			<MultiCombobox
+				id={ ID }
+				size="tiny"
+				options={ options }
+				selected={ applied }
+				onSelect={ handleApply }
+				limitTags={ TAGS_LIMIT }
+				optionsLabel={ __( 'Global CSS Classes', 'elementor' ) }
+				renderTags={ ( values, getTagProps ) =>
+					values.map( ( value, index ) => {
+						const chipProps = getTagProps( { index } );
+						const isActive = value.value === active?.value;
+
+						return (
+							<Chip
+								{ ...chipProps }
+								key={ chipProps.key }
+								size="small"
+								label={ value.label }
+								variant={ isActive ? 'filled' : 'standard' }
+								color={ isActive && value.color ? value.color : 'default' }
+								onClick={ () => handleActivate( value ) }
+								onDelete={ null }
+							/>
+						);
+					} )
+				}
+			/>
+		</Stack>
+	);
+}
+
+function useOptions() {
+	const { element } = useElement();
+
+	const styleDefs = useElementStyles( element.id );
+
+	return Object.values( styleDefs ).map< Option >( ( styleDef ) => ( {
+		label: styleDef.label,
+		value: styleDef.id,
+		fixed: true,
+		color: 'primary',
+	} ) );
+}
+
+function useAppliedClassesIds() {
+	const { element } = useElement();
+	const currentClassesProp = useClassesProp();
+
+	const value = useElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
+
+	const setValue = ( ids: StyleDefinitionID[] ) => {
+		updateSettings( {
+			id: element.id,
+			props: {
+				[ currentClassesProp ]: classesPropTypeUtil.create( ids ),
+			},
+		} );
+	};
+
+	return [ value, setValue ] as const;
+}
+
+function useHandleApply() {
+	const { id: activeId, setId: setActiveId } = useStyle();
+	const [ appliedIds, setAppliedIds ] = useAppliedClassesIds();
+
+	return ( selectedOptions: Option[] ) => {
+		const selectedValues = selectedOptions.map( ( { value } ) => value );
+
+		const isSameClassesAlreadyApplied =
+			selectedValues.length === appliedIds.length &&
+			selectedValues.every( ( value ) => appliedIds.includes( value ) );
+
+		// Should not trigger to avoid register an undo step.
+		if ( isSameClassesAlreadyApplied ) {
+			return;
+		}
+
+		setAppliedIds( selectedValues );
+
+		const addedValue = selectedValues.find( ( id ) => ! appliedIds.includes( id ) );
+
+		if ( addedValue ) {
+			setActiveId( addedValue );
+
+			return;
+		}
+
+		const removedValue = appliedIds.find( ( id ) => ! selectedValues.includes( id ) );
+
+		if ( removedValue && removedValue === activeId ) {
+			setActiveId( selectedValues[ 0 ] ?? null );
+		}
+	};
+}

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

@@ -1,7 +1,9 @@
+import { useCloseEditorPanel } from '../hooks/use-close-editor-panel';
 import { useOpenEditorPanel } from '../hooks/use-open-editor-panel';
 
 export const EditingPanelHooks = () => {
 	useOpenEditorPanel();
+	useCloseEditorPanel();
 
 	return null;
 };

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

@@ -1,26 +1,36 @@
-import { Stack, Tabs, Tab, TabPanel, useTabs } from '@elementor/ui';
 import * as React from 'react';
+import { Fragment } from 'react';
+import { Divider, Stack, Tab, TabPanel, Tabs, useTabs } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
+
+import { useElement } from '../contexts/element-context';
 import { SettingsTab } from './settings-tab';
 import { StyleTab } from './style-tab';
 
 type TabValue = 'settings' | 'style';
 
 export const EditingPanelTabs = () => {
+	const { element } = useElement();
+
 	const { getTabProps, getTabPanelProps, getTabsProps } = useTabs< TabValue >( 'settings' );
 
 	return (
-		<Stack direction="column" sx={ { width: '100%' } }>
-			<Tabs variant="fullWidth" indicatorColor="secondary" textColor="inherit" { ...getTabsProps() }>
-				<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />
-				<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />
-			</Tabs>
-			<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>
-				<SettingsTab />
-			</TabPanel>
-			<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>
-				<StyleTab />
-			</TabPanel>
-		</Stack>
+		// 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 }>
+			<Stack direction="column" sx={ { width: '100%' } }>
+				<Tabs variant="fullWidth" indicatorColor="secondary" textColor="inherit" { ...getTabsProps() }>
+					<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />
+					<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />
+				</Tabs>
+				<Divider />
+				<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>
+					<SettingsTab />
+				</TabPanel>
+				<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>
+					<StyleTab />
+				</TabPanel>
+			</Stack>
+		</Fragment>
 	);
 };

package/src/components/editing-panel.tsx

@@ -1,14 +1,17 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { ControlActionsProvider, ControlReplacementProvider } from '@elementor/editor-controls';
 import { useSelectedElement } from '@elementor/editor-elements';
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
-import { EditingPanelTabs } from './editing-panel-tabs';
-import { ControlActionsProvider, ControlReplacementProvider } from '../controls';
-import { getControlReplacement } from '../control-replacement';
 import { ErrorBoundary } from '@elementor/ui';
-import { EditorPanelErrorFallback } from './editing-panel-error-fallback';
+import { __ } from '@wordpress/i18n';
+
 import { ElementProvider } from '../contexts/element-context';
-import { useMenuItems } from '../controls-actions';
+import { getControlReplacement } from '../control-replacement';
+import { controlActionsMenu } from '../controls-actions';
+import { EditorPanelErrorFallback } from './editing-panel-error-fallback';
+import { EditingPanelTabs } from './editing-panel-tabs';
+
+const { useMenuItems } = controlActionsMenu;
 
 export const EditingPanel = () => {
 	const { element, elementType } = useSelectedElement();

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

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

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

@@ -0,0 +1,122 @@
+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

@@ -0,0 +1,28 @@
+export type Option = {
+	label: string;
+	value: string;
+	fixed?: boolean;
+	// TODO: Should be remove from here or use some kind of `meta`
+	color?: 'primary' | 'global';
+};
+
+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

@@ -0,0 +1,62 @@
+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,
+	},
+} );

package/src/components/section.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { type PropsWithChildren, useId, useState } from 'react';
+import { Collapse, Divider, ListItemButton, ListItemText, Stack } from '@elementor/ui';
+
+import { CollapseIcon } from './collapse-icon';
+
+type Props = PropsWithChildren< {
+	title: string;
+	defaultExpanded?: boolean;
+} >;
+
+export function Section( { title, children, defaultExpanded = false }: Props ) {
+	const [ isOpen, setIsOpen ] = useState( !! defaultExpanded );
+
+	const id = useId();
+	const labelId = `label-${ id }`;
+	const contentId = `content-${ id }`;
+
+	return (
+		<>
+			<ListItemButton
+				id={ labelId }
+				aria-controls={ contentId }
+				onClick={ () => setIsOpen( ( prev ) => ! prev ) }
+			>
+				<ListItemText secondary={ title } />
+				<CollapseIcon open={ isOpen } color="secondary" />
+			</ListItemButton>
+			<Collapse id={ contentId } aria-labelledby={ labelId } in={ isOpen } timeout="auto" unmountOnExit>
+				<Stack gap={ 2.5 } p={ 2 }>
+					{ children }
+				</Stack>
+			</Collapse>
+			<Divider />
+		</>
+	);
+}

package/src/components/sections-list.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { List, type ListProps } from '@elementor/ui';
+
+export function SectionsList( props: ListProps ) {
+	return <List disablePadding component="div" { ...props } />;
+}