@elementor/editor-controls 3.32.0-46 → 3.32.0-47

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": "3.32.0-46",
+  "version": "3.32.0-47",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,21 +40,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "3.32.0-46",
-    "@elementor/editor-elements": "3.32.0-46",
-    "@elementor/editor-props": "3.32.0-46",
-    "@elementor/editor-responsive": "3.32.0-46",
-    "@elementor/editor-ui": "3.32.0-46",
-    "@elementor/editor-v1-adapters": "3.32.0-46",
-    "@elementor/env": "3.32.0-46",
-    "@elementor/http-client": "3.32.0-46",
+    "@elementor/editor-current-user": "3.32.0-47",
+    "@elementor/editor-elements": "3.32.0-47",
+    "@elementor/editor-props": "3.32.0-47",
+    "@elementor/editor-responsive": "3.32.0-47",
+    "@elementor/editor-ui": "3.32.0-47",
+    "@elementor/editor-v1-adapters": "3.32.0-47",
+    "@elementor/env": "3.32.0-47",
+    "@elementor/http-client": "3.32.0-47",
     "@elementor/icons": "^1.51.1",
-    "@elementor/locations": "3.32.0-46",
-    "@elementor/query": "3.32.0-46",
-    "@elementor/session": "3.32.0-46",
+    "@elementor/locations": "3.32.0-47",
+    "@elementor/query": "3.32.0-47",
+    "@elementor/session": "3.32.0-47",
     "@elementor/ui": "1.36.8",
-    "@elementor/utils": "3.32.0-46",
-    "@elementor/wp-media": "3.32.0-46",
+    "@elementor/utils": "3.32.0-47",
+    "@elementor/wp-media": "3.32.0-47",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0"
   },

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

@@ -22,11 +22,11 @@ export const Header = ( { label, children }: React.PropsWithChildren< { label: s
 			<Typography component="label" variant="caption" color="text.secondary" sx={ { lineHeight: 1 } }>
 				{ label }
 			</Typography>
+			<ControlAdornments />
 			<RepeaterHeaderActionsSlot value={ value } />
 			<SlotChildren whitelist={ [ TransformBaseControl, TooltipAddItemAction ] as React.FC[] } sorted>
 				{ children }
 			</SlotChildren>
-			<ControlAdornments />
 		</Stack>
 	);
 };

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

@@ -257,6 +257,8 @@ const ImageOverlayContent = () => {
 };
 
 const StyledUnstableColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {
+	height: '1rem',
+	width: '1rem',
 	borderRadius: `${ theme.shape.borderRadius / 2 }px`,
 } ) );
 

package/src/controls/repeatable-control.tsx

@@ -1,12 +1,19 @@
 import * as React from 'react';
 import { useMemo } from 'react';
-import { createArrayPropUtils, type PropKey } from '@elementor/editor-props';
+import { createArrayPropUtils } from '@elementor/editor-props';
 import { Box } from '@elementor/ui';
 
-import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
+import { PropProvider, useBoundProp } from '../bound-prop-context';
 import { PopoverContent } from '../components/popover-content';
 import { PopoverGridContainer } from '../components/popover-grid-container';
-import { Repeater } from '../components/repeater';
+import { type CollectionPropUtil } from '../components/repeater';
+import { Header, Item, TooltipAddItemAction, 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 { EditItemPopover } from '../components/unstable-repeater/items/edit-item-popover';
+import { ItemsContainer } from '../components/unstable-repeater/items/items-container';
+import { type RepeatablePropValue } from '../components/unstable-repeater/types';
 import { createControl } from '../create-control';
 import {
 	type ChildControlConfig,
@@ -64,41 +71,36 @@ export const RepeatableControl = createControl(
 		return (
 			<PropProvider propType={ propType } value={ value } setValue={ setValue }>
 				<RepeatableControlContext.Provider value={ contextValue }>
-					<Repeater
-						openOnAdd
-						values={ value ?? [] }
-						setValues={ setValue }
-						label={ repeaterLabel }
-						isSortable={ false }
-						itemSettings={ {
-							Icon: ItemIcon,
-							Label: ItemLabel,
-							Content: ItemContent,
-							initialValues: childPropTypeUtil.create( initialValues || null ),
-						} }
-						showDuplicate={ showDuplicate }
-						showToggle={ showToggle }
-					/>
+					<UnstableRepeater
+						initial={ childPropTypeUtil.create( initialValues || null ) }
+						propTypeUtil={ childArrayPropTypeUtil as CollectionPropUtil< RepeatablePropValue > }
+					>
+						<Header label={ repeaterLabel }>
+							<TooltipAddItemAction newItemIndex={ 0 } />
+						</Header>
+						<ItemsContainer
+							isSortable={ false }
+							itemTemplate={ <Item Icon={ ItemIcon } Label={ ItemLabel } /> }
+						>
+							{ showDuplicate && <DuplicateItemAction /> }
+							{ showToggle && <DisableItemAction /> }
+							<RemoveItemAction />
+						</ItemsContainer>
+						<EditItemPopover>
+							<Content />
+						</EditItemPopover>
+					</UnstableRepeater>
 				</RepeatableControlContext.Provider>
 			</PropProvider>
 		);
 	}
 );
 
-const ItemContent = ( { bind }: { bind: PropKey } ) => {
-	return (
-		<PropKeyProvider bind={ bind }>
-			<Content />
-		</PropKeyProvider>
-	);
-};
-
 // TODO: Configurable icon probably can be somehow part of the injected control and bubbled up to the repeater
 const ItemIcon = () => <></>;
 
 const Content = () => {
 	const { component: ChildControl, props = {} } = useRepeatableControlContext();
-
 	return (
 		<PopoverContent p={ 1.5 }>
 			<PopoverGridContainer>

package/src/controls/transition-control/transition-selector.tsx

@@ -56,7 +56,7 @@ export const TransitionSelector = ( { recentlyUsedList }: { recentlyUsedList: st
 		}
 		return [
 			{
-				label: __( 'Recent', 'elementor' ),
+				label: __( 'Recently Used', 'elementor' ),
 				items: recentItems,
 			},
 			...filteredItems,