@elementor/editor-controls 3.33.0-253 → 3.33.0-255

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.33.0-253",
+  "version": "3.33.0-255",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "3.33.0-253",
-    "@elementor/editor-elements": "3.33.0-253",
-    "@elementor/editor-props": "3.33.0-253",
-    "@elementor/editor-responsive": "3.33.0-253",
-    "@elementor/editor-ui": "3.33.0-253",
-    "@elementor/editor-v1-adapters": "3.33.0-253",
-    "@elementor/env": "3.33.0-253",
-    "@elementor/http-client": "3.33.0-253",
+    "@elementor/editor-current-user": "3.33.0-255",
+    "@elementor/editor-elements": "3.33.0-255",
+    "@elementor/editor-props": "3.33.0-255",
+    "@elementor/editor-responsive": "3.33.0-255",
+    "@elementor/editor-ui": "3.33.0-255",
+    "@elementor/editor-v1-adapters": "3.33.0-255",
+    "@elementor/env": "3.33.0-255",
+    "@elementor/http-client": "3.33.0-255",
     "@elementor/icons": "^1.61.0",
-    "@elementor/locations": "3.33.0-253",
-    "@elementor/mixpanel": "3.33.0-253",
-    "@elementor/query": "3.33.0-253",
-    "@elementor/session": "3.33.0-253",
+    "@elementor/locations": "3.33.0-255",
+    "@elementor/mixpanel": "3.33.0-255",
+    "@elementor/query": "3.33.0-255",
+    "@elementor/session": "3.33.0-255",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.33.0-253",
-    "@elementor/wp-media": "3.33.0-253",
+    "@elementor/utils": "3.33.0-255",
+    "@elementor/wp-media": "3.33.0-255",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

package/src/components/control-repeater/items/item.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { bindTrigger } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { RepeatableControlContext } from '../../../hooks/use-repeatable-control-context';
 import { RepeaterTag } from '../../repeater/repeater-tag';
 import { useRepeaterContext } from '../context/repeater-context';
 import { RepeaterItemActionsSlot, RepeaterItemIconSlot, RepeaterItemLabelSlot } from '../locations';
@@ -9,9 +10,14 @@ import { type ItemProps, type RepeatablePropValue } from '../types';
 
 export const Item = < T extends RepeatablePropValue >( { Label, Icon, actions }: ItemProps< T > ) => {
 	const { popoverState, setRowRef, openItemIndex, setOpenItemIndex, index = -1, value } = useRepeaterContext();
+	const repeatableContext = React.useContext( RepeatableControlContext );
+	const disableOpen = !! repeatableContext?.props?.readOnly;
 	const triggerProps = bindTrigger( popoverState );
 
 	const onClick = ( ev: React.MouseEvent ) => {
+		if ( disableOpen ) {
+			return;
+		}
 		triggerProps.onClick( ev );
 		setOpenItemIndex( index );
 	};

package/src/controls/repeatable-control.tsx

@@ -216,11 +216,19 @@ const shouldShowPlaceholder = ( pattern: string, data: Record< string, unknown >
 	return false;
 };
 
+const getTextColor = ( isReadOnly: boolean, showPlaceholder: boolean ): string => {
+	if ( isReadOnly ) {
+		return 'text.disabled';
+	}
+	return showPlaceholder ? 'text.tertiary' : 'text.primary';
+};
+
 const ItemLabel = ( { value }: { value: Record< string, unknown > } ) => {
-	const { placeholder, patternLabel } = useRepeatableControlContext();
+	const { placeholder, patternLabel, props: childProps } = useRepeatableControlContext();
 	const showPlaceholder = shouldShowPlaceholder( patternLabel, value );
 	const label = showPlaceholder ? placeholder : interpolate( patternLabel, value );
-	const color = showPlaceholder ? 'text.tertiary' : 'text.primary';
+	const isReadOnly = !! childProps?.readOnly;
+	const color = getTextColor( isReadOnly, showPlaceholder );
 
 	return (
 		<Box component="span" color={ color }>

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

@@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../../bound-prop-context';
 import { ItemSelector } from '../../components/item-selector';
+import ControlActions from '../../control-actions/control-actions';
 import { transitionProperties, transitionsItemsList } from './data';
 
 const toTransitionSelectorValue = ( label: string ) => {
@@ -95,13 +96,15 @@ export const TransitionSelector = ( {
 
 	return (
 		<Box ref={ defaultRef }>
-			<UnstableTag
-				variant="outlined"
-				label={ transitionLabel }
-				endIcon={ <ChevronDownIcon fontSize="tiny" /> }
-				{ ...bindTrigger( popoverState ) }
-				fullWidth
-			/>
+			<ControlActions>
+				<UnstableTag
+					variant="outlined"
+					label={ transitionLabel }
+					endIcon={ <ChevronDownIcon fontSize="tiny" /> }
+					{ ...bindTrigger( popoverState ) }
+					fullWidth
+				/>
+			</ControlActions>
 			<Popover
 				disablePortal
 				disableScrollLock