@elementor/editor-controls 0.28.2 → 0.30.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "0.28.2",
+  "version": "0.30.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -47,6 +47,7 @@
     "@elementor/env": "0.3.5",
     "@elementor/http-client": "0.3.0",
     "@elementor/icons": "1.40.1",
+    "@elementor/locations": "0.8.0",
     "@elementor/query": "0.2.4",
     "@elementor/session": "0.1.0",
     "@elementor/ui": "1.34.2",

package/src/components/conditional-tooltip.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Tooltip } from '@elementor/ui';
+
+export const ConditionalTooltip = ( {
+	showTooltip,
+	children,
+	label,
+}: React.PropsWithChildren< { showTooltip: boolean; label: string } > ) => {
+	return showTooltip && label ? (
+		<Tooltip title={ label } disableFocusListener={ true } placement="top">
+			{ children }
+		</Tooltip>
+	) : (
+		children
+	);
+};

package/src/components/control-toggle-button-group.tsx

@@ -1,14 +1,21 @@
 import * as React from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { ChevronDownIcon } from '@elementor/icons';
 import {
+	ListItemText,
+	Menu,
+	MenuItem,
 	type StackProps,
 	styled,
 	ToggleButton,
 	ToggleButtonGroup,
 	type ToggleButtonProps,
-	Tooltip,
+	Typography,
 	useTheme,
 } from '@elementor/ui';
 
+import { ConditionalTooltip } from './conditional-tooltip';
+
 type RenderContentProps = { size: ToggleButtonProps[ 'size' ] };
 
 export type ToggleButtonGroupItem< TValue > = {
@@ -20,6 +27,18 @@ export type ToggleButtonGroupItem< TValue > = {
 
 const StyledToggleButtonGroup = styled( ToggleButtonGroup )`
 	${ ( { justify } ) => `justify-content: ${ justify };` }
+	button:not( :last-of-type ) {
+		border-start-end-radius: 0;
+		border-end-end-radius: 0;
+	}
+	button:not( :first-of-type ) {
+		border-start-start-radius: 0;
+		border-end-start-radius: 0;
+	}
+	button:last-of-type {
+		border-start-end-radius: 8px;
+		border-end-end-radius: 8px;
+	}
 `;
 
 type ExclusiveValue< TValue > = TValue;
@@ -29,6 +48,7 @@ type Props< TValue > = {
 	justify?: StackProps[ 'justifyContent' ];
 	size?: ToggleButtonProps[ 'size' ];
 	items: ToggleButtonGroupItem< TValue | null >[];
+	maxItems?: number;
 	fullWidth?: boolean;
 } & (
 	| {
@@ -49,11 +69,15 @@ export const ControlToggleButtonGroup = < TValue, >( {
 	value,
 	onChange,
 	items,
+	maxItems,
 	exclusive = false,
 	fullWidth = false,
 }: Props< TValue > ) => {
-	const isRtl = 'rtl' === useTheme().direction;
+	const shouldSliceItems = exclusive && maxItems !== undefined && items.length > maxItems;
+	const menuItems = shouldSliceItems ? items.slice( maxItems - 1 ) : [];
+	const fixedItems = shouldSliceItems ? items.slice( 0, maxItems - 1 ) : items;
 
+	const isRtl = 'rtl' === useTheme().direction;
 	const handleChange = (
 		_: React.MouseEvent< HTMLElement >,
 		newValue: typeof exclusive extends true ? ExclusiveValue< TValue > : NonExclusiveValue< TValue >
@@ -61,38 +85,159 @@ export const ControlToggleButtonGroup = < TValue, >( {
 		onChange( newValue as never );
 	};
 
+	const getGridTemplateColumns = useMemo( () => {
+		const isOffLimits = menuItems?.length;
+		const itemsCount = isOffLimits ? fixedItems.length + 1 : fixedItems.length;
+		const templateColumnsSuffix = isOffLimits ? 'auto' : '';
+
+		return `repeat(${ itemsCount }, minmax(0, 25%)) ${ templateColumnsSuffix }`;
+	}, [ menuItems?.length, fixedItems.length ] );
+
 	return (
-		<StyledToggleButtonGroup
-			justify={ justify }
-			value={ value }
-			onChange={ handleChange }
-			exclusive={ exclusive }
-			sx={ {
-				direction: isRtl ? 'rtl /* @noflip */' : 'ltr /* @noflip */',
-				display: 'grid',
-				gridTemplateColumns: `repeat(${ items.length }, minmax(0, 25%))`,
-				width: `100%`,
-			} }
-		>
-			{ items.map( ( { label, value: buttonValue, renderContent: Content, showTooltip } ) =>
-				showTooltip ? (
-					<Tooltip key={ buttonValue } title={ label } disableFocusListener={ true } placement="top">
+		<>
+			<StyledToggleButtonGroup
+				justify={ justify }
+				value={ value }
+				onChange={ handleChange }
+				exclusive={ exclusive }
+				sx={ {
+					direction: isRtl ? 'rtl /* @noflip */' : 'ltr /* @noflip */',
+					display: 'grid',
+					gridTemplateColumns: getGridTemplateColumns,
+					width: `100%`,
+				} }
+			>
+				{ fixedItems.map( ( { label, value: buttonValue, renderContent: Content, showTooltip } ) => (
+					<ConditionalTooltip
+						key={ buttonValue as string }
+						label={ label }
+						showTooltip={ showTooltip || false }
+					>
 						<ToggleButton value={ buttonValue } aria-label={ label } size={ size } fullWidth={ fullWidth }>
 							<Content size={ size } />
 						</ToggleButton>
-					</Tooltip>
-				) : (
-					<ToggleButton
-						key={ buttonValue }
-						value={ buttonValue }
-						aria-label={ label }
+					</ConditionalTooltip>
+				) ) }
+
+				{ menuItems.length && exclusive && (
+					<SplitButtonGroup
 						size={ size }
+						value={ ( value as ExclusiveValue< TValue > ) || null }
+						onChange={ onChange as ( v: ExclusiveValue< TValue > ) => void }
+						items={ menuItems }
 						fullWidth={ fullWidth }
+					/>
+				) }
+			</StyledToggleButtonGroup>
+		</>
+	);
+};
+
+type SplitButtonGroup< TValue > = {
+	size: ToggleButtonProps[ 'size' ];
+	items: ToggleButtonGroupItem< TValue | null >[];
+	fullWidth: boolean;
+	value: ExclusiveValue< TValue > | null;
+	onChange: ( value: ExclusiveValue< TValue > ) => void;
+};
+
+const SplitButtonGroup = < TValue, >( {
+	size = 'tiny',
+	onChange,
+	items,
+	fullWidth,
+	value,
+}: SplitButtonGroup< TValue > ) => {
+	const previewButton = usePreviewButton( items, value );
+	const [ isMenuOpen, setIsMenuOpen ] = useState( false );
+	const menuButtonRef = useRef( null );
+
+	const onMenuToggle = ( ev: React.MouseEvent ) => {
+		setIsMenuOpen( ( prev ) => ! prev );
+		ev.preventDefault();
+	};
+
+	const onMenuItemClick = ( newValue: TValue | null ) => {
+		setIsMenuOpen( false );
+		onToggleItem( newValue );
+	};
+
+	const onToggleItem = ( newValue: TValue | null ) => {
+		const shouldRemove = newValue === value;
+
+		onChange( ( shouldRemove ? null : newValue ) as never );
+	};
+
+	return (
+		<>
+			<ToggleButton
+				value={ previewButton.value }
+				aria-label={ previewButton.label }
+				size={ size }
+				fullWidth={ fullWidth }
+				onClick={ ( ev: React.MouseEvent ) => {
+					ev.preventDefault();
+					onMenuItemClick( previewButton.value );
+				} }
+				ref={ menuButtonRef }
+			>
+				{ previewButton.renderContent( { size } ) }
+			</ToggleButton>
+			<ToggleButton
+				size={ size }
+				aria-expanded={ isMenuOpen ? 'true' : undefined }
+				aria-haspopup="menu"
+				aria-pressed={ undefined }
+				onClick={ onMenuToggle }
+				ref={ menuButtonRef }
+				value={ '__chevron-icon-button__' }
+			>
+				<ChevronDownIcon fontSize={ size } />
+			</ToggleButton>
+			<Menu
+				open={ isMenuOpen }
+				onClose={ () => setIsMenuOpen( false ) }
+				anchorEl={ menuButtonRef.current }
+				anchorOrigin={ {
+					vertical: 'bottom',
+					horizontal: 'right',
+				} }
+				transformOrigin={ {
+					vertical: 'top',
+					horizontal: 'right',
+				} }
+				sx={ {
+					mt: 0.5,
+				} }
+			>
+				{ items.map( ( { label, value: buttonValue } ) => (
+					<MenuItem
+						key={ buttonValue }
+						selected={ buttonValue === value }
+						onClick={ () => onMenuItemClick( buttonValue ) }
 					>
-						<Content size={ size } />
-					</ToggleButton>
-				)
-			) }
-		</StyledToggleButtonGroup>
+						<ListItemText>
+							<Typography sx={ { fontSize: '14px' } }>{ label }</Typography>
+						</ListItemText>
+					</MenuItem>
+				) ) }
+			</Menu>
+		</>
+	);
+};
+
+const usePreviewButton = < TValue, >( items: ToggleButtonGroupItem< TValue >[], value: TValue ) => {
+	const [ previewButton, setPreviewButton ] = useState(
+		items.find( ( item ) => item.value === value ) ?? items[ 0 ]
 	);
+
+	useEffect( () => {
+		const selectedButton = items.find( ( item ) => item.value === value );
+
+		if ( selectedButton ) {
+			setPreviewButton( selectedButton );
+		}
+	}, [ items, value ] );
+
+	return previewButton;
 };

package/src/components/repeater.tsx

@@ -19,6 +19,7 @@ import { __ } from '@wordpress/i18n';
 
 import { ControlAdornments } from '../control-adornments/control-adornments';
 import { useSyncExternalState } from '../hooks/use-sync-external-state';
+import { RepeaterItemIconSlot, RepeaterItemLabelSlot } from '../locations';
 import { SectionContent } from './section-content';
 import { SortableItem, SortableProvider } from './sortable';
 
@@ -175,8 +176,16 @@ export const Repeater = < T, >( {
 							<SortableItem id={ key } key={ `sortable-${ key }` }>
 								<RepeaterItem
 									disabled={ value?.disabled }
-									label={ <itemSettings.Label value={ value } /> }
-									startIcon={ <itemSettings.Icon value={ value } /> }
+									label={
+										<RepeaterItemLabelSlot value={ value }>
+											<itemSettings.Label value={ value } />
+										</RepeaterItemLabelSlot>
+									}
+									startIcon={
+										<RepeaterItemIconSlot value={ value }>
+											<itemSettings.Icon value={ value } />
+										</RepeaterItemIconSlot>
+									}
 									removeItem={ () => removeRepeaterItem( index ) }
 									duplicateItem={ () => duplicateRepeaterItem( index ) }
 									toggleDisableItem={ () => toggleDisableRepeaterItem( index ) }

package/src/controls/box-shadow-repeater-control.tsx

@@ -34,7 +34,7 @@ export const BoxShadowRepeaterControl = createControl( () => {
 } );
 
 const ItemIcon = ( { value }: { value: ShadowPropValue } ) => (
-	<UnstableColorIndicator size="inherit" component="span" value={ value.value.color.value } />
+	<UnstableColorIndicator size="inherit" component="span" value={ value.value.color?.value } />
 );
 
 const ItemContent = ( { anchorEl, bind }: { anchorEl: HTMLElement | null; bind: PropKey } ) => {

package/src/controls/font-family-control/font-family-control.tsx

@@ -25,6 +25,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../../bound-prop-context';
+import ControlActions from '../../control-actions/control-actions';
 import { createControl } from '../../create-control';
 import { type FontListItem, useFilteredFontFamilies } from '../../hooks/use-filtered-font-families';
 import { enqueueFont } from './enqueue-font';
@@ -60,14 +61,15 @@ export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyCo
 
 	return (
 		<>
-			<UnstableTag
-				variant="outlined"
-				label={ fontFamily }
-				endIcon={ <ChevronDownIcon fontSize="tiny" /> }
-				{ ...bindTrigger( popoverState ) }
-				fullWidth
-			/>
-
+			<ControlActions>
+				<UnstableTag
+					variant="outlined"
+					label={ fontFamily }
+					endIcon={ <ChevronDownIcon fontSize="tiny" /> }
+					{ ...bindTrigger( popoverState ) }
+					fullWidth
+				/>
+			</ControlActions>
 			<Popover
 				disablePortal
 				disableScrollLock

package/src/controls/toggle-control.tsx

@@ -11,6 +11,7 @@ export type ToggleControlProps< T extends PropValue > = {
 	fullWidth?: boolean;
 	size?: ToggleButtonProps[ 'size' ];
 	exclusive?: boolean;
+	maxItems?: number;
 };
 
 export const ToggleControl = createControl(
@@ -19,6 +20,7 @@ export const ToggleControl = createControl(
 		fullWidth = false,
 		size = 'tiny',
 		exclusive = true,
+		maxItems,
 	}: ToggleControlProps< StringPropValue[ 'value' ] > ) => {
 		const { value, setValue, placeholder } = useBoundProp( stringPropTypeUtil );
 
@@ -37,6 +39,7 @@ export const ToggleControl = createControl(
 
 		const toggleButtonGroupProps = {
 			items: options,
+			maxItems,
 			fullWidth,
 			size,
 		};

package/src/index.ts

@@ -40,5 +40,7 @@ export { useBoundProp, PropProvider, PropKeyProvider } from './bound-prop-contex
 export { ControlAdornmentsProvider } from './control-adornments/control-adornments-context';
 export { ControlAdornments } from './control-adornments/control-adornments';
 
+export { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from './locations';
+
 // hooks
 export { useSyncExternalState } from './hooks/use-sync-external-state';

package/src/locations.ts

@@ -0,0 +1,11 @@
+import { type PropValue } from '@elementor/editor-props';
+import { createReplaceableLocation } from '@elementor/locations';
+
+// Repeaters
+export const { Slot: RepeaterItemIconSlot, inject: injectIntoRepeaterItemIcon } = createReplaceableLocation< {
+	value: PropValue;
+} >();
+
+export const { Slot: RepeaterItemLabelSlot, inject: injectIntoRepeaterItemLabel } = createReplaceableLocation< {
+	value: PropValue;
+} >();