@elementor/editor-controls 3.35.0 → 3.35.2

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.35.0",
+  "version": "3.35.2",
   "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.35.0",
-    "@elementor/editor-elements": "3.35.0",
-    "@elementor/editor-props": "3.35.0",
-    "@elementor/editor-responsive": "3.35.0",
-    "@elementor/editor-ui": "3.35.0",
-    "@elementor/editor-v1-adapters": "3.35.0",
-    "@elementor/env": "3.35.0",
-    "@elementor/http-client": "3.35.0",
+    "@elementor/editor-current-user": "3.35.2",
+    "@elementor/editor-elements": "3.35.2",
+    "@elementor/editor-props": "3.35.2",
+    "@elementor/editor-responsive": "3.35.2",
+    "@elementor/editor-ui": "3.35.2",
+    "@elementor/editor-v1-adapters": "3.35.2",
+    "@elementor/env": "3.35.2",
+    "@elementor/http-client": "3.35.2",
     "@elementor/icons": "^1.63.0",
-    "@elementor/locations": "3.35.0",
-    "@elementor/mixpanel": "3.35.0",
-    "@elementor/query": "3.35.0",
-    "@elementor/session": "3.35.0",
+    "@elementor/locations": "3.35.2",
+    "@elementor/events": "3.35.2",
+    "@elementor/query": "3.35.2",
+    "@elementor/session": "3.35.2",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0",
-    "@elementor/wp-media": "3.35.0",
+    "@elementor/utils": "3.35.2",
+    "@elementor/wp-media": "3.35.2",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

package/src/components/promotions/attributes-control.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { PlusIcon } from '@elementor/icons';
+import { Stack, Tooltip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { createControl } from '../../create-control';
+import { PromotionTrigger, type PromotionTriggerRef } from './promotion-trigger';
+
+const ARIA_LABEL = __( 'Attributes', 'elementor' );
+
+export const AttributesControl = createControl( () => {
+	const triggerRef = useRef< PromotionTriggerRef >( null );
+
+	return (
+		<Stack
+			direction="row"
+			spacing={ 2 }
+			sx={ {
+				justifyContent: 'flex-end',
+				alignItems: 'center',
+			} }
+		>
+			<PromotionTrigger ref={ triggerRef } promotionKey="attributes" />
+			<Tooltip title={ ARIA_LABEL } placement="top">
+				<PlusIcon
+					aria-label={ ARIA_LABEL }
+					fontSize="tiny"
+					color="disabled"
+					onClick={ () => triggerRef.current?.toggle() }
+					sx={ { cursor: 'pointer' } }
+				/>
+			</Tooltip>
+		</Stack>
+	);
+} );

package/src/components/promotions/display-conditions-control.tsx

@@ -1,21 +1,16 @@
 import * as React from 'react';
-import { useState } from 'react';
-import { PromotionChip, PromotionInfotip } from '@elementor/editor-ui';
+import { useRef } from 'react';
 import { SitemapIcon } from '@elementor/icons';
-import { Box, IconButton, Stack, Tooltip } from '@elementor/ui';
+import { IconButton, Stack, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { createControl } from '../../create-control';
+import { PromotionTrigger, type PromotionTriggerRef } from './promotion-trigger';
 
 const ARIA_LABEL = __( 'Display Conditions', 'elementor' );
 
-function getDisplayConditionPromotion() {
-	return window.elementor?.config?.v4Promotions?.displayConditions;
-}
-
 export const DisplayConditionsControl = createControl( () => {
-	const [ isInfotipOpen, setIsInfotipOpen ] = useState( false );
-	const promotion = getDisplayConditionPromotion();
+	const triggerRef = useRef< PromotionTriggerRef >( null );
 
 	return (
 		<Stack
@@ -26,27 +21,13 @@ export const DisplayConditionsControl = createControl( () => {
 				alignItems: 'center',
 			} }
 		>
-			<PromotionInfotip
-				title={ promotion?.title ?? '' }
-				content={ promotion?.content ?? '' }
-				assetUrl={ promotion?.image ?? '' }
-				ctaUrl={ promotion?.ctaUrl ?? '' }
-				open={ isInfotipOpen }
-				onClose={ () => setIsInfotipOpen( false ) }
-			>
-				<Box
-					onClick={ () => setIsInfotipOpen( ( prev ) => ! prev ) }
-					sx={ { cursor: 'pointer', display: 'inline-flex' } }
-				>
-					<PromotionChip />
-				</Box>
-			</PromotionInfotip>
+			<PromotionTrigger ref={ triggerRef } promotionKey="displayConditions" />
 			<Tooltip title={ ARIA_LABEL } placement="top">
 				<IconButton
 					size="tiny"
 					aria-label={ ARIA_LABEL }
 					data-behavior="display-conditions"
-					onClick={ () => setIsInfotipOpen( ( prev ) => ! prev ) }
+					onClick={ () => triggerRef.current?.toggle() }
 					sx={ {
 						border: '1px solid',
 						borderColor: 'divider',

package/src/components/promotions/promotion-trigger.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { forwardRef, type ReactNode, useImperativeHandle, useState } from 'react';
+import { PromotionChip, PromotionInfotip } from '@elementor/editor-ui';
+import { Box } from '@elementor/ui';
+
+import type { V4PromotionData, V4PromotionKey } from './types';
+
+function getV4Promotion( key: V4PromotionKey ): V4PromotionData | undefined {
+	return window.elementor?.config?.v4Promotions?.[ key ];
+}
+
+type PromotionTriggerProps = {
+	promotionKey: V4PromotionKey;
+	children?: ReactNode;
+};
+
+export type PromotionTriggerRef = {
+	toggle: () => void;
+};
+
+export const PromotionTrigger = forwardRef< PromotionTriggerRef, PromotionTriggerProps >(
+	( { promotionKey, children }, ref ) => {
+		const [ isOpen, setIsOpen ] = useState( false );
+		const promotion = getV4Promotion( promotionKey );
+
+		const toggle = () => setIsOpen( ( prev ) => ! prev );
+
+		useImperativeHandle( ref, () => ( { toggle } ), [] );
+
+		return (
+			<>
+				{ promotion && (
+					<PromotionInfotip
+						title={ promotion.title }
+						content={ promotion.content }
+						assetUrl={ promotion.image }
+						ctaUrl={ promotion.ctaUrl }
+						open={ isOpen }
+						onClose={ ( e: MouseEvent ) => {
+							e.stopPropagation();
+							setIsOpen( false );
+						} }
+					>
+						<Box
+							onClick={ ( e: MouseEvent ) => {
+								e.stopPropagation();
+								toggle();
+							} }
+							sx={ { cursor: 'pointer', display: 'inline-flex' } }
+						>
+							{ children ?? <PromotionChip /> }
+						</Box>
+					</PromotionInfotip>
+				) }
+			</>
+		);
+	}
+);

package/src/components/promotions/types.ts

@@ -0,0 +1,8 @@
+export type V4PromotionData = {
+	title: string;
+	content: string;
+	image: string;
+	ctaUrl: string;
+};
+
+export type V4PromotionKey = 'displayConditions' | 'customCss' | 'attributes';

package/src/controls/transition-control/trainsition-events.ts

@@ -1,5 +1,5 @@
 import { getSelectedElements } from '@elementor/editor-elements';
-import { trackEvent } from '@elementor/mixpanel';
+import { trackEvent } from '@elementor/events';
 
 import { eventBus } from '../../services/event-bus';
 import { type initialTransitionValue } from './data';

package/src/index.ts

@@ -35,10 +35,12 @@ export { enqueueFont } from './controls/font-family-control/enqueue-font';
 export { transitionProperties, transitionsItemsList } from './controls/transition-control/data';
 export { DateTimeControl } from './controls/date-time-control';
 export { InlineEditingControl } from './controls/inline-editing-control';
-export { DisplayConditionsControl } from './components/promotions/display-conditions-control';
 
 // components
 export { ControlFormLabel } from './components/control-form-label';
+export { DisplayConditionsControl } from './components/promotions/display-conditions-control';
+export { AttributesControl } from './components/promotions/attributes-control';
+export { PromotionTrigger } from './components/promotions/promotion-trigger';
 export { ControlToggleButtonGroup } from './components/control-toggle-button-group';
 export { ToggleButtonGroupUi } from './components/control-toggle-button-group';
 export { ClearIconButton } from './components/icon-buttons/clear-icon-button';
@@ -65,6 +67,8 @@ export type { ExtendedOption, Unit, LengthUnit, AngleUnit, TimeUnit } from './ut
 export type { ToggleControlProps } from './controls/toggle-control';
 export type { FontCategory } from './controls/font-family-control/font-family-control';
 export type { InlineEditorToolbarProps } from './components/inline-editor-toolbar';
+export type { V4PromotionData, V4PromotionKey } from './components/promotions/types';
+export type { PromotionTriggerRef } from './components/promotions/promotion-trigger';
 
 // providers
 export {