@elementor/editor-controls 0.29.0 → 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.29.0",
+  "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/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/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;
+} >();