@elementor/editor-controls 1.3.0 → 3.32.0-20

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.3.0",
+  "version": "3.32.0-20",
   "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.0",
-    "@elementor/editor-elements": "0.9.0",
-    "@elementor/editor-props": "0.16.0",
-    "@elementor/editor-responsive": "0.13.6",
-    "@elementor/editor-ui": "0.14.0",
-    "@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-20",
+    "@elementor/editor-elements": "3.32.0-20",
+    "@elementor/editor-props": "3.32.0-20",
+    "@elementor/editor-responsive": "3.32.0-20",
+    "@elementor/editor-ui": "3.32.0-20",
+    "@elementor/editor-v1-adapters": "3.32.0-20",
+    "@elementor/env": "3.32.0-20",
+    "@elementor/http-client": "3.32.0-20",
+    "@elementor/icons": "^1.51.1",
+    "@elementor/locations": "3.32.0-20",
+    "@elementor/query": "3.32.0-20",
+    "@elementor/session": "3.32.0-20",
+    "@elementor/ui": "1.36.2",
+    "@elementor/utils": "3.32.0-20",
+    "@elementor/wp-media": "3.32.0-20",
     "@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/item-selector.tsx

@@ -0,0 +1,168 @@
+import * as React from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { PopoverBody, PopoverHeader, PopoverMenuList, PopoverSearch } from '@elementor/editor-ui';
+import { Box, Divider, Link, Stack, Typography } from '@elementor/ui';
+import { debounce } from '@elementor/utils';
+import { __ } from '@wordpress/i18n';
+
+import { type SelectableItem, useFilteredItemsList } from '../hooks/use-filtered-items-list';
+
+export type Category = {
+	label: string;
+	items: string[];
+};
+
+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 ItemSelector = ( {
+	itemsList,
+	selectedItem,
+	onItemChange,
+	onClose,
+	sectionWidth,
+	title,
+	itemStyle = () => ( {} ),
+	onDebounce = () => {},
+	icon,
+}: ItemSelectorProps ) => {
+	const [ searchValue, setSearchValue ] = useState( '' );
+
+	const filteredItemsList = useFilteredItemsList( itemsList, searchValue );
+
+	const IconComponent = icon;
+
+	const handleSearch = ( value: string ) => {
+		setSearchValue( value );
+	};
+
+	const handleClose = () => {
+		setSearchValue( '' );
+		onClose();
+	};
+
+	return (
+		<PopoverBody width={ sectionWidth }>
+			<PopoverHeader title={ title } onClose={ handleClose } icon={ <IconComponent fontSize="tiny" /> } />
+			<PopoverSearch
+				value={ searchValue }
+				onSearch={ handleSearch }
+				placeholder={ __( 'Search', 'elementor' ) }
+			/>
+
+			<Divider />
+
+			{ filteredItemsList.length > 0 ? (
+				<ItemList
+					itemListItems={ filteredItemsList }
+					setSelectedItem={ onItemChange }
+					handleClose={ handleClose }
+					selectedItem={ selectedItem }
+					itemStyle={ itemStyle }
+					onDebounce={ onDebounce }
+				/>
+			) : (
+				<Stack
+					alignItems="center"
+					justifyContent="center"
+					height="100%"
+					p={ 2.5 }
+					gap={ 1.5 }
+					overflow="hidden"
+				>
+					<IconComponent fontSize="large" />
+					<Box sx={ { maxWidth: 160, overflow: 'hidden' } }>
+						<Typography align="center" variant="subtitle2" color="text.secondary">
+							{ __( 'Sorry, nothing matched', 'elementor' ) }
+						</Typography>
+						<Typography
+							variant="subtitle2"
+							color="text.secondary"
+							sx={ { display: 'flex', width: '100%', justifyContent: 'center' } }
+						>
+							<span>&ldquo;</span>
+							<span style={ { maxWidth: '80%', overflow: 'hidden', textOverflow: 'ellipsis' } }>
+								{ searchValue }
+							</span>
+							<span>&rdquo;.</span>
+						</Typography>
+					</Box>
+					<Typography
+						align="center"
+						variant="caption"
+						color="text.secondary"
+						sx={ { display: 'flex', flexDirection: 'column' } }
+					>
+						{ __( 'Try something else.', 'elementor' ) }
+						<Link
+							color="secondary"
+							variant="caption"
+							component="button"
+							onClick={ () => setSearchValue( '' ) }
+						>
+							{ __( 'Clear & try again', 'elementor' ) }
+						</Link>
+					</Typography>
+				</Stack>
+			) }
+		</PopoverBody>
+	);
+};
+
+type ItemListProps = {
+	itemListItems: SelectableItem[];
+	setSelectedItem: ( item: string ) => void;
+	handleClose: () => void;
+	selectedItem: string | null;
+	itemStyle?: ( item: SelectableItem ) => React.CSSProperties;
+	onDebounce?: ( name: string ) => void;
+};
+
+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 = itemListItems[ index ];
+			if ( item && item.type === 'item' ) {
+				onDebounce( item.value );
+			}
+		} );
+	}, 100 );
+
+	const memoizedItemStyle = useCallback( ( item: SelectableItem ) => itemStyle( item ), [ itemStyle ] );
+
+	return (
+		<PopoverMenuList
+			items={ itemListItems }
+			selectedValue={ selectedItemFound?.value }
+			onChange={ debouncedVirtualizeChange }
+			onSelect={ setSelectedItem }
+			onClose={ handleClose }
+			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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
-import { type PropKey } from '@elementor/editor-props';
+import { type PropKey, type PropTypeUtil } from '@elementor/editor-props';
 import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon, XIcon } from '@elementor/icons';
 import {
 	bindPopover,
@@ -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';
 
@@ -30,6 +30,16 @@ type AnchorEl = HTMLElement | null;
 type Item< T > = {
 	disabled?: boolean;
 } & T;
+export type CollectionPropUtil< T > = PropTypeUtil< PropKey, T[] >;
+
+type RepeaterItemContentProps< T > = {
+	anchorEl: AnchorEl;
+	bind: PropKey;
+	value: T;
+	collectionPropUtil?: CollectionPropUtil< T >;
+};
+
+type RepeaterItemContent< T > = React.ComponentType< RepeaterItemContentProps< T > >;
 
 type RepeaterProps< T > = {
 	label: string;
@@ -42,15 +52,12 @@ type RepeaterProps< T > = {
 		initialValues: T;
 		Label: React.ComponentType< { value: T } >;
 		Icon: React.ComponentType< { value: T } >;
-		Content: React.ComponentType< {
-			anchorEl: AnchorEl;
-			bind: PropKey;
-			value: T;
-		} >;
+		Content: RepeaterItemContent< T >;
 	};
 	showDuplicate?: boolean;
 	showToggle?: boolean;
 	isSortable?: boolean;
+	collectionPropUtil?: CollectionPropUtil< T >;
 };
 
 const EMPTY_OPEN_ITEM = -1;
@@ -66,6 +73,7 @@ export const Repeater = < T, >( {
 	showDuplicate = true,
 	showToggle = true,
 	isSortable = true,
+	collectionPropUtil,
 }: RepeaterProps< Item< T > > ) => {
 	const [ openItem, setOpenItem ] = useState( EMPTY_OPEN_ITEM );
 
@@ -203,6 +211,7 @@ export const Repeater = < T, >( {
 									onOpen={ () => setOpenItem( EMPTY_OPEN_ITEM ) }
 									showDuplicate={ showDuplicate }
 									showToggle={ showToggle }
+									collectionPropUtil={ collectionPropUtil }
 								>
 									{ ( props ) => (
 										<itemSettings.Content { ...props } value={ value } bind={ String( index ) } />
@@ -217,22 +226,23 @@ export const Repeater = < T, >( {
 	);
 };
 
-type RepeaterItemProps = {
+type RepeaterItemProps< T > = {
 	label: React.ReactNode;
 	propDisabled?: boolean;
 	startIcon: UnstableTagProps[ 'startIcon' ];
 	removeItem: () => void;
 	duplicateItem: () => void;
 	toggleDisableItem: () => void;
-	children: ( { anchorEl }: { anchorEl: AnchorEl } ) => React.ReactNode;
+	children: ( props: Pick< RepeaterItemContentProps< T >, 'anchorEl' | 'collectionPropUtil' > ) => React.ReactNode;
 	openOnMount: boolean;
 	onOpen: () => void;
 	showDuplicate: boolean;
 	showToggle: boolean;
 	disabled?: boolean;
+	collectionPropUtil?: CollectionPropUtil< T >;
 };
 
-const RepeaterItem = ( {
+const RepeaterItem = < T, >( {
 	label,
 	propDisabled,
 	startIcon,
@@ -245,7 +255,8 @@ const RepeaterItem = ( {
 	showDuplicate,
 	showToggle,
 	disabled,
-}: RepeaterItemProps ) => {
+	collectionPropUtil,
+}: RepeaterItemProps< T > ) => {
 	const [ anchorEl, setAnchorEl ] = useState< AnchorEl >( null );
 	const { popoverState, popoverProps, ref, setRef } = usePopover( openOnMount, onOpen );
 
@@ -301,7 +312,7 @@ const RepeaterItem = ( {
 				{ ...popoverProps }
 				anchorEl={ ref }
 			>
-				<Box>{ children( { anchorEl } ) }</Box>
+				<Box>{ children( { anchorEl, collectionPropUtil } ) }</Box>
 			</Popover>
 		</>
 	);

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,6 +1,6 @@
 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';
@@ -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>