@elementor/editor-editing-panel 0.19.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "0.19.0",
+  "version": "1.1.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -10,9 +10,9 @@
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -39,17 +39,18 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "^0.15.0",
-    "@elementor/editor-panels": "^0.8.0",
-    "@elementor/editor-responsive": "^0.12.1",
-    "@elementor/editor-style": "^0.4.1",
-    "@elementor/editor-v1-adapters": "^0.8.2",
-    "@elementor/icons": "^1.17.0",
-    "@elementor/menus": "^0.1.0",
-    "@elementor/schema": "^0.1.0",
-    "@elementor/ui": "^1.21.1",
-    "@elementor/utils": "^0.2.1",
-    "@elementor/wp-media": "^0.2.0",
+    "@elementor/editor": "^0.17.0",
+    "@elementor/editor-controls": "^0.1.0",
+    "@elementor/editor-elements": "^0.3.0",
+    "@elementor/menus": "^0.1.1",
+    "@elementor/editor-props": "^0.3.0",
+    "@elementor/editor-panels": "^0.10.0",
+    "@elementor/editor-responsive": "^0.12.2",
+    "@elementor/editor-styles": "^0.2.1",
+    "@elementor/editor-v1-adapters": "^0.8.4",
+    "@elementor/icons": "^1.19.0",
+    "@elementor/ui": "^1.21.13",
+    "@elementor/utils": "^0.3.0",
     "@wordpress/i18n": "^4.45.0"
   },
   "peerDependencies": {

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

@@ -0,0 +1,42 @@
+import * as React 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';
+
+const SIZE = 'tiny';
+
+type Props = {
+	label: string;
+	isAdded: boolean;
+	onAdd: () => void;
+	onRemove: () => void;
+};
+
+export const AddOrRemoveContent = ( { isAdded, label, onAdd, onRemove, children }: PropsWithChildren< Props > ) => {
+	return (
+		<Stack gap={ 1.5 }>
+			<Stack
+				direction="row"
+				sx={ {
+					justifyContent: 'space-between',
+					alignItems: 'center',
+				} }
+			>
+				<ControlLabel>{ label }</ControlLabel>
+				{ isAdded ? (
+					<IconButton size={ SIZE } onClick={ onRemove }>
+						<MinusIcon fontSize={ SIZE } />
+					</IconButton>
+				) : (
+					<IconButton size={ SIZE } onClick={ onAdd }>
+						<PlusIcon fontSize={ SIZE } />
+					</IconButton>
+				) }
+			</Stack>
+			<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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { MinusIcon, PlusIcon } from '@elementor/icons';
+import { Collapse, IconButton, Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+type CollapsibleFieldProps = React.PropsWithChildren< {
+	label: React.ReactNode;
+	defaultOpen?: boolean;
+} >;
+
+export const CollapsibleField = ( { label, children, defaultOpen = false }: CollapsibleFieldProps ) => {
+	const [ open, setOpen ] = useState( defaultOpen );
+
+	const handleToggle = () => {
+		setOpen( ( prevOpen ) => ! prevOpen );
+	};
+
+	return (
+		<Stack gap={ 1.5 }>
+			<Stack direction="row" justifyContent="space-between" alignItems="center" sx={ { py: 0.5 } }>
+				{ label }
+				<IconButton
+					onClick={ handleToggle }
+					size="tiny"
+					aria-label={ open ? __( 'Close', 'elementor' ) : __( 'Expand', 'elementor' ) }
+				>
+					{ open ? <MinusIcon fontSize="tiny" /> : <PlusIcon fontSize="tiny" /> }
+				</IconButton>
+			</Stack>
+			<Collapse in={ open } unmountOnExit>
+				{ children }
+			</Collapse>
+		</Stack>
+	);
+};

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

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { useElementSetting, useElementStyles } from '@elementor/editor-elements';
+import { type ClassesPropValue } from '@elementor/editor-props';
+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 CssClassSelectorSection() {
+	const options = useOptions();
+
+	const { id: activeId, setId: setActiveId } = useStyle();
+	const appliedIds = useAppliedClassesIds();
+
+	const applied = options.filter( ( option ) => appliedIds.includes( option.value ) );
+	const active = options.find( ( option ) => option.value === activeId ) || null;
+
+	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 }
+				limitTags={ TAGS_LIMIT }
+				optionsLabel={ __( 'Global CSS Classes', 'elementor' ) }
+				renderTags={ ( tagValue, getTagProps ) =>
+					tagValue.map( ( option, index ) => {
+						const chipProps = getTagProps( { index } );
+
+						return (
+							<Chip
+								{ ...chipProps }
+								key={ chipProps.key }
+								size="small"
+								label={ option.label }
+								variant={ option.value === active?.value ? 'filled' : 'standard' }
+								color={ option.color ?? 'default' }
+								onClick={ () => setActiveId( option.value ) }
+								onDelete={ null }
+							/>
+						);
+					} )
+				}
+			/>
+		</Stack>
+	);
+}
+
+function useAppliedClassesIds() {
+	const { element } = useElement();
+	const currentClassesProp = useClassesProp();
+
+	return useElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
+}
+
+function useOptions() {
+	const { element } = useElement();
+
+	const styleDefs = useElementStyles( element.id );
+
+	return Object.values( styleDefs ).map< Option >( ( styleDef ) => ( {
+		label: styleDef.label,
+		value: styleDef.id,
+		color: 'primary',
+	} ) );
+}

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,29 +1,27 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import useSelectedElements from '../hooks/use-selected-elements';
+import { ControlActionsProvider, ControlReplacementProvider } from '@elementor/editor-controls';
+import { useSelectedElement } from '@elementor/editor-elements';
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
-import { ElementProvider } from '../controls/providers/element-provider';
-import useElementType from '../hooks/use-element-type';
-import { EditingPanelTabs } from './editing-panel-tabs';
-import { ControlReplacementProvider } from '../controls/create-control-replacement';
-import { getControlReplacement } from '../control-replacement';
 import { ErrorBoundary } from '@elementor/ui';
-import { EditorPanelErrorFallback } from './editing-panel-error-fallback';
+import { __ } from '@wordpress/i18n';
 
-export const EditingPanel = () => {
-	const elements = useSelectedElements();
+import { ElementProvider } from '../contexts/element-context';
+import { getControlReplacement } from '../control-replacement';
+import { controlActionsMenu } from '../controls-actions';
+import { EditorPanelErrorFallback } from './editing-panel-error-fallback';
+import { EditingPanelTabs } from './editing-panel-tabs';
 
-	const [ selectedElement ] = elements;
+const { useMenuItems } = controlActionsMenu;
 
-	// TODO: Move this into the provider.
-	const elementType = useElementType( selectedElement?.type );
+export const EditingPanel = () => {
+	const { element, elementType } = useSelectedElement();
+	const controlReplacement = getControlReplacement();
+	const menuItems = useMenuItems().default;
 
-	if ( elements.length !== 1 || ! elementType ) {
+	if ( ! element || ! elementType ) {
 		return null;
 	}
 
-	const controlReplacement = getControlReplacement();
-
 	/* translators: %s: Element type title. */
 	const panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', elementType.title );
 
@@ -34,11 +32,13 @@ export const EditingPanel = () => {
 					<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>
 				</PanelHeader>
 				<PanelBody>
-					<ControlReplacementProvider { ...controlReplacement }>
-						<ElementProvider element={ selectedElement } elementType={ elementType }>
-							<EditingPanelTabs />
-						</ElementProvider>
-					</ControlReplacementProvider>
+					<ControlActionsProvider items={ menuItems }>
+						<ControlReplacementProvider { ...controlReplacement }>
+							<ElementProvider element={ element } elementType={ elementType }>
+								<EditingPanelTabs />
+							</ElementProvider>
+						</ControlReplacementProvider>
+					</ControlActionsProvider>
 				</PanelBody>
 			</Panel>
 		</ErrorBoundary>

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,120 @@
+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' > & {
+	actions?: Actions;
+	selected: Option[];
+	options: Option[];
+	optionsLabel?: string;
+	onApply?: ( value: Option[] ) => void;
+	onCreate?: ( value: string ) => void;
+};
+
+export const MultiCombobox = ( {
+	actions = {},
+	selected,
+	options,
+	optionsLabel,
+	onApply,
+	onCreate,
+	...props
+}: Props ) => {
+	const { action: actionProps, option: optionProps } = useComboboxActions( selected, actions, optionsLabel, onApply );
+
+	const handleSelectOption = ( values: Array< ActionOption | Option | string > ) => {
+		const action = values.find( ( value ) => actionProps.is( value as ActionOption ) );
+
+		if ( action ) {
+			return actionProps.onChange( action as ActionOption );
+		}
+
+		return optionProps.onChange( values as Option[] );
+	};
+
+	const handleCreateOption = ( values: Array< ActionOption | Option | string > ) => {
+		const value = values.find( ( option ) => typeof option === 'string' );
+
+		onCreate?.( value as string );
+	};
+
+	return (
+		<Autocomplete
+			{ ...props }
+			freeSolo
+			multiple
+			clearOnBlur
+			selectOnFocus
+			disableClearable
+			handleHomeEndKeys
+			value={ selected }
+			options={ options }
+			renderGroup={ renderGroup }
+			renderInput={ ( params ) => <TextField { ...params } /> }
+			getLimitTagsText={ ( more ) => <Chip size="tiny" variant="standard" label={ `+${ more }` } clickable /> }
+			onChange={ ( _, values, reason ) => {
+				if ( reason === 'selectOption' ) {
+					return handleSelectOption( values );
+				}
+
+				if ( reason === 'createOption' ) {
+					return handleCreateOption( values );
+				}
+
+				onApply?.( values as ActionOption[] );
+			} }
+			getOptionLabel={ ( option ) => {
+				if ( optionProps.is( option as ActionOption ) ) {
+					return optionProps.getLabel( option as Option );
+				}
+
+				return actionProps.getLabel( option as ActionOption ) ?? '';
+			} }
+			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 ) ) ?? ''
+			}
+		/>
+	);
+};
+
+export 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,26 @@
+export type Option = {
+	label: string;
+	value: string;
+	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,
+	onApply?: ( value: Option[] ) => void
+) => ( {
+	action: {
+		is: ( opt: ActionOption ): opt is ActionOption => !! opt.action,
+		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 ): opt is Option => ! ( 'action' in opt ),
+		getLabel: ( option: Option ) => option.label,
+		groupBy: () => optionsLabel ?? '',
+		onChange: ( optionValues: Option[] ) => onApply?.( 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 } />;
+}