@elementor/editor-controls 1.5.0 → 3.32.0-21

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": "1.5.0",
+  "version": "3.32.0-21",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -19,11 +19,11 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/elementor/elementor-packages.git",
+    "url": "git+https://github.com/elementor/elementor.git",
     "directory": "packages/libs/editor-controls"
   },
   "bugs": {
-    "url": "https://github.com/elementor/elementor-packages/issues"
+    "url": "https://github.com/elementor/elementor/issues"
   },
   "publishConfig": {
     "access": "public"
@@ -40,21 +40,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "0.6.1",
-    "@elementor/editor-elements": "0.9.2",
-    "@elementor/editor-props": "0.18.0",
-    "@elementor/editor-responsive": "0.13.6",
-    "@elementor/editor-ui": "0.14.2",
-    "@elementor/editor-v1-adapters": "0.12.1",
-    "@elementor/env": "0.3.5",
-    "@elementor/http-client": "0.3.0",
-    "@elementor/icons": "1.46.0",
-    "@elementor/locations": "0.8.0",
-    "@elementor/query": "0.2.4",
-    "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.36.0",
-    "@elementor/utils": "0.5.0",
-    "@elementor/wp-media": "0.6.1",
+    "@elementor/editor-current-user": "3.32.0-21",
+    "@elementor/editor-elements": "3.32.0-21",
+    "@elementor/editor-props": "3.32.0-21",
+    "@elementor/editor-responsive": "3.32.0-21",
+    "@elementor/editor-ui": "3.32.0-21",
+    "@elementor/editor-v1-adapters": "3.32.0-21",
+    "@elementor/env": "3.32.0-21",
+    "@elementor/http-client": "3.32.0-21",
+    "@elementor/icons": "^1.51.1",
+    "@elementor/locations": "3.32.0-21",
+    "@elementor/query": "3.32.0-21",
+    "@elementor/session": "3.32.0-21",
+    "@elementor/ui": "1.36.2",
+    "@elementor/utils": "3.32.0-21",
+    "@elementor/wp-media": "3.32.0-21",
     "@wordpress/i18n": "^5.13.0"
   },
   "devDependencies": {

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

@@ -42,6 +42,21 @@ const StyledToggleButtonGroup = styled( ToggleButtonGroup )`
 	}
 `;
 
+const StyledToggleButton = styled( ToggleButton, {
+	shouldForwardProp: ( prop ) => prop !== 'isPlaceholder',
+} )< { isPlaceholder: boolean } >`
+	${ ( { theme, isPlaceholder } ) =>
+		isPlaceholder &&
+		`
+		color: ${ theme.palette.text.tertiary };
+		background-color: ${ theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.02)' };
+		
+		&:hover {
+			background-color: ${ theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.04)' };
+		}
+	` }
+`;
+
 type ExclusiveValue< TValue > = TValue;
 type NonExclusiveValue< TValue > = TValue[];
 
@@ -52,6 +67,7 @@ type Props< TValue > = {
 	items: ToggleButtonGroupItem< TValue | null >[];
 	maxItems?: number;
 	fullWidth?: boolean;
+	placeholder?: TValue | TValue[];
 } & (
 	| {
 			exclusive?: false;
@@ -75,12 +91,15 @@ export const ControlToggleButtonGroup = < TValue, >( {
 	exclusive = false,
 	fullWidth = false,
 	disabled,
+	placeholder,
 }: Props< TValue > ) => {
 	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 theme = useTheme();
+	const isRtl = 'rtl' === theme.direction;
+
 	const handleChange = (
 		_: React.MouseEvent< HTMLElement >,
 		newValue: typeof exclusive extends true ? ExclusiveValue< TValue > : NonExclusiveValue< TValue >
@@ -92,10 +111,42 @@ export const ControlToggleButtonGroup = < TValue, >( {
 		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 ] );
 
+	const shouldShowExclusivePlaceholder = exclusive && ( value === null || value === undefined || value === '' );
+
+	const nonExclusiveSelectedValues =
+		! exclusive && Array.isArray( value )
+			? value
+					.map( ( v ) => ( typeof v === 'string' ? v : '' ) )
+					.join( ' ' )
+					.trim()
+					.split( /\s+/ )
+					.filter( Boolean )
+			: [];
+
+	const shouldShowNonExclusivePlaceholder = ! exclusive && nonExclusiveSelectedValues.length === 0;
+
+	const getPlaceholderArray = ( placeholderValue: TValue | TValue[] | undefined ): string[] => {
+		if ( Array.isArray( placeholderValue ) ) {
+			return placeholderValue.flatMap( ( p ) => {
+				if ( typeof p === 'string' ) {
+					return p.trim().split( /\s+/ ).filter( Boolean );
+				}
+				return [];
+			} );
+		}
+
+		if ( typeof placeholderValue === 'string' ) {
+			return placeholderValue.trim().split( /\s+/ ).filter( Boolean );
+		}
+
+		return [];
+	};
+
+	const placeholderArray = getPlaceholderArray( placeholder );
+
 	return (
 		<ControlActions>
 			<StyledToggleButtonGroup
@@ -111,17 +162,30 @@ export const ControlToggleButtonGroup = < TValue, >( {
 					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>
-					</ConditionalTooltip>
-				) ) }
+				{ fixedItems.map( ( { label, value: buttonValue, renderContent: Content, showTooltip } ) => {
+					const isPlaceholder =
+						placeholderArray.length > 0 &&
+						placeholderArray.includes( buttonValue as string ) &&
+						( shouldShowExclusivePlaceholder || shouldShowNonExclusivePlaceholder );
+
+					return (
+						<ConditionalTooltip
+							key={ buttonValue as string }
+							label={ label }
+							showTooltip={ showTooltip || false }
+						>
+							<StyledToggleButton
+								value={ buttonValue }
+								aria-label={ label }
+								size={ size }
+								fullWidth={ fullWidth }
+								isPlaceholder={ isPlaceholder }
+							>
+								<Content size={ size } />
+							</StyledToggleButton>
+						</ConditionalTooltip>
+					);
+				} ) }
 
 				{ menuItems.length && exclusive && (
 					<SplitButtonGroup
@@ -194,7 +258,7 @@ const SplitButtonGroup = < TValue, >( {
 				aria-pressed={ undefined }
 				onClick={ onMenuToggle }
 				ref={ menuButtonRef }
-				value={ '__chevron-icon-button__' }
+				value="__chevron-icon-button__"
 			>
 				<ChevronDownIcon fontSize={ size } />
 			</ToggleButton>

package/src/components/floating-bar.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { createContext, type PropsWithChildren, type ReactElement, useContext, useState } from 'react';
+import { styled, UnstableFloatingActionBar } from '@elementor/ui';
+
+// CSS hack to hide empty floating bars.
+const FloatingBarContainer = styled( 'span' )`
+	display: contents;
+
+	.MuiFloatingActionBar-popper:has( .MuiFloatingActionBar-actions:empty ) {
+		display: none;
+	}
+
+	.MuiFloatingActionBar-popper {
+		z-index: 1000;
+	}
+`;
+
+const FloatingActionsContext = createContext< null | {
+	open: boolean;
+	setOpen: React.Dispatch< React.SetStateAction< boolean > >;
+} >( null );
+
+export function FloatingActionsBar( { actions, children }: PropsWithChildren< { actions: ReactElement[] } > ) {
+	const [ open, setOpen ] = useState< boolean >( false );
+
+	return (
+		<FloatingActionsContext.Provider value={ { open, setOpen } }>
+			<FloatingBarContainer>
+				<UnstableFloatingActionBar actions={ actions } open={ open || undefined }>
+					{ children as ReactElement }
+				</UnstableFloatingActionBar>
+			</FloatingBarContainer>
+		</FloatingActionsContext.Provider>
+	);
+}
+
+export function useFloatingActionsBar() {
+	const context = useContext( FloatingActionsContext );
+
+	if ( ! context ) {
+		throw new Error( 'useFloatingActions must be used within a FloatingActionsBar' );
+	}
+
+	return context;
+}

package/src/components/{font-family-selector.tsx → item-selector.tsx}

@@ -1,35 +1,45 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { PopoverBody, PopoverHeader, PopoverMenuList, PopoverSearch } from '@elementor/editor-ui';
-import { TextIcon } from '@elementor/icons';
 import { Box, Divider, Link, Stack, Typography } from '@elementor/ui';
 import { debounce } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
-import { enqueueFont } from '../controls/font-family-control/enqueue-font';
-import { type FontCategory } from '../controls/font-family-control/font-family-control';
-import { type FontListItem, useFilteredFontFamilies } from '../hooks/use-filtered-font-families';
+import { type SelectableItem, useFilteredItemsList } from '../hooks/use-filtered-items-list';
 
-const SIZE = 'tiny';
+export type Category = {
+	label: string;
+	items: string[];
+};
 
-type FontFamilySelectorProps = {
-	fontFamilies: FontCategory[];
-	fontFamily: string | null;
-	onFontFamilyChange: ( fontFamily: string ) => void;
+type ItemSelectorProps = {
+	itemsList: Category[];
+	selectedItem: string | null;
+	onItemChange: ( item: string ) => void;
 	onClose: () => void;
 	sectionWidth: number;
+	title: string;
+	itemStyle?: ( item: SelectableItem ) => React.CSSProperties;
+	onDebounce?: ( name: string ) => void;
+	icon: React.ElementType< { fontSize: string } >;
 };
 
-export const FontFamilySelector = ( {
-	fontFamilies,
-	fontFamily,
-	onFontFamilyChange,
+export const ItemSelector = ( {
+	itemsList,
+	selectedItem,
+	onItemChange,
 	onClose,
 	sectionWidth,
-}: FontFamilySelectorProps ) => {
+	title,
+	itemStyle = () => ( {} ),
+	onDebounce = () => {},
+	icon,
+}: ItemSelectorProps ) => {
 	const [ searchValue, setSearchValue ] = useState( '' );
 
-	const filteredFontFamilies = useFilteredFontFamilies( fontFamilies, searchValue );
+	const filteredItemsList = useFilteredItemsList( itemsList, searchValue );
+
+	const IconComponent = icon;
 
 	const handleSearch = ( value: string ) => {
 		setSearchValue( value );
@@ -42,12 +52,7 @@ export const FontFamilySelector = ( {
 
 	return (
 		<PopoverBody width={ sectionWidth }>
-			<PopoverHeader
-				title={ __( 'Font Family', 'elementor' ) }
-				onClose={ handleClose }
-				icon={ <TextIcon fontSize={ SIZE } /> }
-			/>
-
+			<PopoverHeader title={ title } onClose={ handleClose } icon={ <IconComponent fontSize="tiny" /> } />
 			<PopoverSearch
 				value={ searchValue }
 				onSearch={ handleSearch }
@@ -56,12 +61,14 @@ export const FontFamilySelector = ( {
 
 			<Divider />
 
-			{ filteredFontFamilies.length > 0 ? (
-				<FontList
-					fontListItems={ filteredFontFamilies }
-					setFontFamily={ onFontFamilyChange }
+			{ filteredItemsList.length > 0 ? (
+				<ItemList
+					itemListItems={ filteredItemsList }
+					setSelectedItem={ onItemChange }
 					handleClose={ handleClose }
-					fontFamily={ fontFamily }
+					selectedItem={ selectedItem }
+					itemStyle={ itemStyle }
+					onDebounce={ onDebounce }
 				/>
 			) : (
 				<Stack
@@ -70,9 +77,9 @@ export const FontFamilySelector = ( {
 					height="100%"
 					p={ 2.5 }
 					gap={ 1.5 }
-					overflow={ 'hidden' }
+					overflow="hidden"
 				>
-					<TextIcon fontSize="large" />
+					<IconComponent fontSize="large" />
 					<Box sx={ { maxWidth: 160, overflow: 'hidden' } }>
 						<Typography align="center" variant="subtitle2" color="text.secondary">
 							{ __( 'Sorry, nothing matched', 'elementor' ) }
@@ -80,11 +87,7 @@ export const FontFamilySelector = ( {
 						<Typography
 							variant="subtitle2"
 							color="text.secondary"
-							sx={ {
-								display: 'flex',
-								width: '100%',
-								justifyContent: 'center',
-							} }
+							sx={ { display: 'flex', width: '100%', justifyContent: 'center' } }
 						>
 							<span>&ldquo;</span>
 							<span style={ { maxWidth: '80%', overflow: 'hidden', textOverflow: 'ellipsis' } }>
@@ -115,42 +118,51 @@ export const FontFamilySelector = ( {
 	);
 };
 
-type FontListProps = {
-	fontListItems: FontListItem[];
-	setFontFamily: ( fontFamily: string ) => void;
+type ItemListProps = {
+	itemListItems: SelectableItem[];
+	setSelectedItem: ( item: string ) => void;
 	handleClose: () => void;
-	fontFamily: string | null;
+	selectedItem: string | null;
+	itemStyle?: ( item: SelectableItem ) => React.CSSProperties;
+	onDebounce?: ( name: string ) => void;
 };
 
-const FontList = ( { fontListItems, setFontFamily, handleClose, fontFamily }: FontListProps ) => {
-	const selectedItem = fontListItems.find( ( item ) => item.value === fontFamily );
+const ItemList = ( {
+	itemListItems,
+	setSelectedItem,
+	handleClose,
+	selectedItem,
+	itemStyle = () => ( {} ),
+	onDebounce = () => {},
+}: ItemListProps ) => {
+	const selectedItemFound = itemListItems.find( ( item ) => item.value === selectedItem );
 
 	const debouncedVirtualizeChange = useDebounce( ( { getVirtualIndexes }: { getVirtualIndexes: () => number[] } ) => {
 		getVirtualIndexes().forEach( ( index ) => {
-			const item = fontListItems[ index ];
-			if ( item && item.type === 'font' ) {
-				enqueueFont( item.value );
+			const item = itemListItems[ index ];
+			if ( item && item.type === 'item' ) {
+				onDebounce( item.value );
 			}
 		} );
 	}, 100 );
 
+	const memoizedItemStyle = useCallback( ( item: SelectableItem ) => itemStyle( item ), [ itemStyle ] );
+
 	return (
 		<PopoverMenuList
-			items={ fontListItems }
-			selectedValue={ selectedItem?.value }
+			items={ itemListItems }
+			selectedValue={ selectedItemFound?.value }
 			onChange={ debouncedVirtualizeChange }
-			onSelect={ setFontFamily }
+			onSelect={ setSelectedItem }
 			onClose={ handleClose }
-			itemStyle={ ( item ) => ( { fontFamily: item.value } ) }
-			data-testid="font-list"
+			itemStyle={ memoizedItemStyle }
+			data-testid="item-list"
 		/>
 	);
 };
 
 const useDebounce = < TArgs extends unknown[] >( fn: ( ...args: TArgs ) => void, delay: number ) => {
 	const [ debouncedFn ] = useState( () => debounce( fn, delay ) );
-
 	useEffect( () => () => debouncedFn.cancel(), [ debouncedFn ] );
-
 	return debouncedFn;
 };

package/src/components/repeater.tsx

@@ -19,9 +19,9 @@ 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';
+import { RepeaterItemIconSlot, RepeaterItemLabelSlot } from './unstable-repeater/locations';
 
 const SIZE = 'tiny';
 

package/src/components/restricted-link-infotip.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { type PropsWithChildren } from 'react';
+import { type LinkInLinkRestriction, selectElement } from '@elementor/editor-elements';
+import { InfoCircleFilledIcon } from '@elementor/icons';
+import { Alert, AlertAction, AlertTitle, Box, Infotip, Link } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+const learnMoreButton = {
+	label: __( 'Learn More', 'elementor' ),
+	href: 'https://go.elementor.com/element-link-inside-link-infotip',
+};
+
+const INFOTIP_CONTENT = {
+	descendant: __(
+		'To add a link to this element, first remove the link from the elements inside of it.',
+		'elementor'
+	),
+	ancestor: __( 'To add a link to this element, first remove the link from its parent container.', 'elementor' ),
+};
+
+type RestrictedLinkInfotipProps = PropsWithChildren< {
+	linkInLinkRestriction: LinkInLinkRestriction;
+	isVisible: boolean;
+} >;
+
+export const RestrictedLinkInfotip: React.FC< RestrictedLinkInfotipProps > = ( {
+	linkInLinkRestriction,
+	isVisible,
+	children,
+} ) => {
+	const { shouldRestrict, reason, elementId } = linkInLinkRestriction;
+
+	const handleTakeMeClick = () => {
+		if ( elementId ) {
+			selectElement( elementId );
+		}
+	};
+
+	const content = (
+		<Alert
+			severity="secondary"
+			icon={ <InfoCircleFilledIcon /> }
+			action={
+				<AlertAction
+					sx={ { width: 'fit-content' } }
+					variant="contained"
+					color="secondary"
+					onClick={ handleTakeMeClick }
+				>
+					{ __( 'Take me there', 'elementor' ) }
+				</AlertAction>
+			}
+		>
+			<AlertTitle>{ __( 'Nested links', 'elementor' ) }</AlertTitle>
+			<Box component="span">
+				{ INFOTIP_CONTENT[ reason ?? 'descendant' ] }{ ' ' }
+				<Link href={ learnMoreButton.href } target="_blank" color="info.main">
+					{ learnMoreButton.label }
+				</Link>
+			</Box>
+		</Alert>
+	);
+
+	return shouldRestrict && isVisible ? (
+		<Infotip
+			placement="right"
+			content={ content }
+			color="secondary"
+			slotProps={ { popper: { sx: { width: 300 } } } }
+		>
+			<Box>{ children }</Box>
+		</Infotip>
+	) : (
+		<>{ children }</>
+	);
+};

package/src/components/size-control/size-input.tsx

@@ -1,22 +1,22 @@
 import * as React from 'react';
 import { useRef } from 'react';
-import { PencilIcon } from '@elementor/icons';
+import { MathFunctionIcon } from '@elementor/icons';
 import { Box, InputAdornment, type PopupState } from '@elementor/ui';
 
 import ControlActions from '../../control-actions/control-actions';
-import { type DegreeUnit, type ExtendedOption, isUnitExtendedOption, type Unit } from '../../utils/size-control';
+import { type ExtendedOption, isUnitExtendedOption, type Unit } from '../../utils/size-control';
 import { SelectionEndAdornment, TextFieldInnerSelection } from '../size-control/text-field-inner-selection';
 
 type SizeInputProps = {
-	unit: Unit | DegreeUnit | ExtendedOption;
+	unit: Unit | ExtendedOption;
 	size: number | string;
 	placeholder?: string;
 	startIcon?: React.ReactNode;
-	units: ( Unit | DegreeUnit | ExtendedOption )[];
+	units: ( Unit | ExtendedOption )[];
 	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
 	onFocus?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
 	onClick?: ( event: React.MouseEvent< HTMLInputElement > ) => void;
-	handleUnitChange: ( unit: Unit | DegreeUnit | ExtendedOption ) => void;
+	handleUnitChange: ( unit: Unit | ExtendedOption ) => void;
 	handleSizeChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
 	popupState: PopupState;
 	disabled?: boolean;
@@ -72,6 +72,7 @@ export const SizeInput = ( {
 
 	const inputProps = {
 		...popupAttributes,
+		readOnly: isUnitExtendedOption( unit ),
 		autoComplete: 'off',
 		onClick,
 		onFocus,
@@ -87,7 +88,7 @@ export const SizeInput = ( {
 				onClick={ handleUnitChange }
 				value={ unit }
 				alternativeOptionLabels={ {
-					custom: <PencilIcon fontSize="small" />,
+					custom: <MathFunctionIcon fontSize="tiny" />,
 				} }
 				menuItemsAttributes={
 					units.includes( 'custom' )
@@ -116,8 +117,8 @@ export const SizeInput = ( {
 					} }
 					onKeyUp={ handleKeyUp }
 					onBlur={ onBlur }
-					shouldBlockInput={ isUnitExtendedOption( unit ) }
 					inputProps={ inputProps }
+					isPopoverOpen={ popupState.isOpen }
 				/>
 			</Box>
 		</ControlActions>