@elementor/editor-controls 1.5.0 → 3.32.0-21

package/src/components/unstable-repeater/items/use-popover.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+import { bindPopover, type PopoverProps, usePopupState } from '@elementor/ui';
+
+export const usePopover = ( openOnMount: boolean, onOpen: () => void ) => {
+	const [ ref, setRef ] = useState< HTMLElement | null >( null );
+
+	const popoverState = usePopupState( { variant: 'popover' } );
+
+	const popoverProps: Partial< PopoverProps > = bindPopover( popoverState );
+
+	useEffect( () => {
+		if ( openOnMount && ref ) {
+			popoverState.open( ref );
+			onOpen?.();
+		}
+		// eslint-disable-next-line react-compiler/react-compiler
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ ref ] );
+
+	return {
+		popoverState,
+		ref,
+		setRef,
+		popoverProps,
+	};
+};

package/src/{locations.ts → components/unstable-repeater/locations.ts}

@@ -1,5 +1,5 @@
 import { type PropValue } from '@elementor/editor-props';
-import { createReplaceableLocation } from '@elementor/locations';
+import { createLocation, createReplaceableLocation } from '@elementor/locations';
 
 // Repeaters
 export const { Slot: RepeaterItemIconSlot, inject: injectIntoRepeaterItemIcon } = createReplaceableLocation< {
@@ -9,3 +9,11 @@ export const { Slot: RepeaterItemIconSlot, inject: injectIntoRepeaterItemIcon }
 export const { Slot: RepeaterItemLabelSlot, inject: injectIntoRepeaterItemLabel } = createReplaceableLocation< {
 	value: PropValue;
 } >();
+
+export const { Slot: RepeaterHeaderActionsSlot, inject: injectIntoRepeaterHeaderActions } = createLocation< {
+	value: PropValue;
+} >();
+
+export const { Slot: RepeaterItemActionsSlot, inject: injectIntoRepeaterItemActions } = createLocation< {
+	index: number;
+} >();

package/src/components/unstable-repeater/types.ts

@@ -0,0 +1,26 @@
+import { type PropKey, type PropTypeUtil } from '@elementor/editor-props';
+
+export type CollectionPropUtil< T > = PropTypeUtil< PropKey, T[] >;
+
+export type Item< T > = {
+	disabled?: boolean;
+} & T;
+
+type RepeaterItemContentProps< T > = {
+	anchorEl: HTMLElement | null;
+	bind: PropKey;
+	value: T;
+	collectionPropUtil?: CollectionPropUtil< T >;
+};
+
+type RepeaterItemContent< T > = React.ComponentType< RepeaterItemContentProps< T > >;
+
+export type ItemProps< T > = {
+	Label: React.ComponentType< { value: T } >;
+	Icon: React.ComponentType< { value: T } >;
+	Content: RepeaterItemContent< T >;
+	value?: Item< T >;
+	key?: string | number;
+	index?: number;
+	openOnMount?: boolean;
+};

package/src/components/unstable-repeater/unstable-repeater.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { type PropTypeUtil, type PropValue } from '@elementor/editor-props';
+
+import { SlotChildren } from '../../control-replacements';
+import { SectionContent } from '../section-content';
+import { RepeaterContextProvider } from './context/repeater-context';
+import { Header } from './header/header';
+import { ItemsContainer } from './items/items-container';
+
+export const UnstableRepeater = < T extends PropValue >( {
+	children,
+	initial,
+	propTypeUtil,
+}: React.PropsWithChildren< { initial: T; propTypeUtil: PropTypeUtil< string, T[] > } > ) => {
+	return (
+		<SectionContent>
+			<RepeaterContextProvider initial={ initial } propTypeUtil={ propTypeUtil }>
+				<SlotChildren whitelist={ [ Header, ItemsContainer ] as React.FC[] } sorted>
+					{ children }
+				</SlotChildren>
+			</RepeaterContextProvider>
+		</SectionContent>
+	);
+};

package/src/control-actions/control-actions.tsx

@@ -1,23 +1,10 @@
 import * as React from 'react';
-import { type PropsWithChildren, type ReactElement } from 'react';
-import { styled, UnstableFloatingActionBar } from '@elementor/ui';
+import { type PropsWithChildren } from 'react';
 
 import { useBoundProp } from '../bound-prop-context';
+import { FloatingActionsBar } from '../components/floating-bar';
 import { useControlActions } from './control-actions-context';
 
-// 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;
-	}
-`;
-
 type ControlActionsProps = PropsWithChildren< object >;
 
 export default function ControlActions( { children }: ControlActionsProps ) {
@@ -30,9 +17,5 @@ export default function ControlActions( { children }: ControlActionsProps ) {
 
 	const menuItems = items.map( ( { MenuItem, id } ) => <MenuItem key={ id } /> );
 
-	return (
-		<FloatingBarContainer>
-			<UnstableFloatingActionBar actions={ menuItems }>{ children as ReactElement }</UnstableFloatingActionBar>
-		</FloatingBarContainer>
-	);
+	return <FloatingActionsBar actions={ menuItems }>{ children }</FloatingActionsBar>;
 }

package/src/control-replacements.tsx

@@ -47,3 +47,44 @@ export const createControlReplacementsRegistry = () => {
 
 	return { registerControlReplacement, getControlReplacements };
 };
+
+export const SlotChildren = ( {
+	children,
+	whitelist = [],
+	sorted = false,
+	props = {},
+}: {
+	children: React.ReactNode;
+	whitelist: React.FC[];
+	sorted?: boolean;
+	props?: Record< string, unknown >;
+} ) => {
+	const filtered = (
+		! whitelist.length
+			? React.Children.toArray( children )
+			: React.Children.toArray( children ).filter(
+					( child ) => React.isValidElement( child ) && whitelist.includes( child.type as React.FC )
+			  )
+	) as React.ReactElement[];
+
+	if ( sorted ) {
+		sort( filtered, whitelist );
+	}
+
+	return filtered.map( ( child, index ) => (
+		<React.Fragment key={ index }>{ React.cloneElement( child, props ) }</React.Fragment>
+	) );
+};
+
+const sort = ( childrenArray: React.ReactElement[], whitelist: unknown[] ) => {
+	childrenArray.sort( ( a, b ) => {
+		const aIndex = whitelist.indexOf( a.type );
+		const bIndex = whitelist.indexOf( b.type );
+
+		if ( aIndex === -1 || bIndex === -1 ) {
+			return 0;
+		}
+
+		return aIndex - bIndex;
+	} );
+};

package/src/controls/background-control/background-control.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import { backgroundPropTypeUtil } from '@elementor/editor-props';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../bound-prop-context';
-import { ControlFormLabel } from '../../components/control-form-label';
 import { ControlLabel } from '../../components/control-label';
 import { createControl } from '../../create-control';
 import { ColorControl } from '../color-control';
@@ -13,7 +11,6 @@ import { BackgroundOverlayRepeaterControl } from './background-overlay/backgroun
 
 export const BackgroundControl = createControl( () => {
 	const propContext = useBoundProp( backgroundPropTypeUtil );
-	const isUsingNestedProps = isExperimentActive( 'e_v_3_30' );
 
 	const colorLabel = __( 'Color', 'elementor' );
 
@@ -25,11 +22,7 @@ export const BackgroundControl = createControl( () => {
 			<PropKeyProvider bind="color">
 				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 					<Grid item xs={ 6 }>
-						{ isUsingNestedProps ? (
-							<ControlLabel>{ colorLabel }</ControlLabel>
-						) : (
-							<ControlFormLabel>{ colorLabel }</ControlFormLabel>
-						) }
+						<ControlLabel>{ colorLabel }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 6 }>
 						<ColorControl />

package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx

@@ -13,7 +13,11 @@ import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
 import { PopoverContent } from '../../../components/popover-content';
-import { Repeater } from '../../../components/repeater';
+import { AddItemAction, Header, ItemsContainer, UnstableRepeater } from '../../../components/unstable-repeater';
+import { DisableItemAction } from '../../../components/unstable-repeater/actions/disable-item-action';
+import { DuplicateItemAction } from '../../../components/unstable-repeater/actions/duplicate-item-action';
+import { RemoveItemAction } from '../../../components/unstable-repeater/actions/remove-item-action';
+import { Item } from '../../../components/unstable-repeater/items/item';
 import { createControl } from '../../../create-control';
 import { env } from '../../../env';
 import { ColorControl } from '../../color-control';
@@ -71,23 +75,20 @@ const backgroundResolutionOptions = [
 ];
 
 export const BackgroundOverlayRepeaterControl = createControl( () => {
-	const { propType, value: overlayValues, setValue, disabled } = useBoundProp( backgroundOverlayPropTypeUtil );
+	const { propType, value: backgroundValues, setValue } = useBoundProp( backgroundOverlayPropTypeUtil );
 
 	return (
-		<PropProvider propType={ propType } value={ overlayValues } setValue={ setValue } isDisabled={ () => disabled }>
-			<Repeater
-				openOnAdd
-				disabled={ disabled }
-				values={ overlayValues ?? [] }
-				setValues={ setValue }
-				label={ __( 'Overlay', 'elementor' ) }
-				itemSettings={ {
-					Icon: ItemIcon,
-					Label: ItemLabel,
-					Content: ItemContent,
-					initialValues: getInitialBackgroundOverlay(),
-				} }
-			/>
+		<PropProvider propType={ propType } value={ backgroundValues } setValue={ setValue }>
+			<UnstableRepeater initial={ getInitialBackgroundOverlay() } propTypeUtil={ backgroundOverlayPropTypeUtil }>
+				<Header label={ __( 'Overlay', 'elementor' ) }>
+					<AddItemAction newItemIndex={ 0 } />
+				</Header>
+				<ItemsContainer itemTemplate={ <Item Icon={ ItemIcon } Label={ ItemLabel } Content={ ItemContent } /> }>
+					<DuplicateItemAction />
+					<DisableItemAction />
+					<RemoveItemAction />
+				</ItemsContainer>
+			</UnstableRepeater>
 		</PropProvider>
 	);
 } );

package/src/controls/equal-unequal-sizes-control.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { type ReactNode, type RefObject, useId, useRef } from 'react';
 import { type PropKey, type PropTypeUtil, sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { bindPopover, bindToggle, Grid, Popover, Stack, ToggleButton, Tooltip, usePopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -99,7 +98,7 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 		return splitEqualValue() ?? null;
 	};
 
-	const isShowingGeneralIndicator = ! isExperimentActive( 'e_v_3_30' ) || ! popupState.isOpen;
+	const isShowingGeneralIndicator = ! popupState.isOpen;
 
 	const isMixed = !! multiSizeValue;
 
@@ -173,18 +172,12 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 }
 
 const MultiSizeValueControl = ( { item, rowRef }: { item: Item; rowRef: RefObject< HTMLDivElement > } ) => {
-	const isUsingNestedProps = isExperimentActive( 'e_v_3_30' );
-
 	return (
 		<PropKeyProvider bind={ item.bind }>
 			<Grid item xs={ 6 }>
 				<Grid container gap={ 0.75 } alignItems="center">
 					<Grid item xs={ 12 }>
-						{ isUsingNestedProps ? (
-							<ControlLabel>{ item.label }</ControlLabel>
-						) : (
-							<ControlFormLabel>{ item.label }</ControlFormLabel>
-						) }
+						<ControlLabel>{ item.label }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
 						<SizeControl startIcon={ item.icon } anchorRef={ rowRef } />

package/src/controls/filter-control/drop-shadow-item-content.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { useRef } from 'react';
-import { type DropShadowFilterPropValue, type PropTypeUtil } from '@elementor/editor-props';
+import { dropShadowFilterPropTypeUtil } from '@elementor/editor-props';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../bound-prop-context';
 import { ControlFormLabel } from '../../components/control-form-label';
 import { PopoverGridContainer } from '../../components/popover-grid-container';
-import { type Unit } from '../../utils/size-control';
+import { type LengthUnit } from '../../utils/size-control';
 import { ColorControl } from '../color-control';
 import { SizeControl } from '../size-control';
 
@@ -35,15 +35,13 @@ const items = [
 ];
 
 export const DropShadowItemContent = ( {
-	propType,
 	units,
 	anchorEl,
 }: {
-	propType: PropTypeUtil< 'drop-shadow', DropShadowFilterPropValue[ 'value' ] >;
-	units: Unit[];
+	units: LengthUnit[];
 	anchorEl?: HTMLElement | null;
 } ) => {
-	const context = useBoundProp( propType );
+	const context = useBoundProp( dropShadowFilterPropTypeUtil );
 	const rowRefs = [ useRef< HTMLDivElement >( null ), useRef< HTMLDivElement >( null ) ];
 
 	return (

package/src/controls/filter-control/drop-shadow-item-label.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { type FilterItemPropValue } from '@elementor/editor-props';
+import { type DropShadowFilterPropValue, type FilterItemPropValue } from '@elementor/editor-props';
 import { Box } from '@elementor/ui';
 
 export const DropShadowItemLabel = ( { value }: { value: FilterItemPropValue } ) => {
-	const { xAxis, yAxis, blur } = value.value;
+	const { xAxis, yAxis, blur } = value.value.args.value as DropShadowFilterPropValue[ 'value' ];
 
 	const xValue = `${ xAxis?.value?.size ?? 0 }${ xAxis?.value?.unit ?? 'px' }`;
 	const yValue = `${ yAxis?.value?.size ?? 0 }${ yAxis?.value?.unit ?? 'px' }`;