@elementor/editor-variables 3.33.0-107 → 3.33.0-108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "3.33.0-107",
+  "version": "3.33.0-108",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,18 +39,18 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-107",
-    "@elementor/editor-canvas": "3.33.0-107",
-    "@elementor/editor-controls": "3.33.0-107",
-    "@elementor/editor-current-user": "3.33.0-107",
-    "@elementor/editor-editing-panel": "3.33.0-107",
-    "@elementor/editor-panels": "3.33.0-107",
-    "@elementor/editor-props": "3.33.0-107",
-    "@elementor/editor-ui": "3.33.0-107",
-    "@elementor/editor-v1-adapters": "3.33.0-107",
-    "@elementor/http-client": "3.33.0-107",
+    "@elementor/editor": "3.33.0-108",
+    "@elementor/editor-canvas": "3.33.0-108",
+    "@elementor/editor-controls": "3.33.0-108",
+    "@elementor/editor-current-user": "3.33.0-108",
+    "@elementor/editor-editing-panel": "3.33.0-108",
+    "@elementor/editor-panels": "3.33.0-108",
+    "@elementor/editor-props": "3.33.0-108",
+    "@elementor/editor-ui": "3.33.0-108",
+    "@elementor/editor-v1-adapters": "3.33.0-108",
+    "@elementor/http-client": "3.33.0-108",
     "@elementor/icons": "1.46.0",
-    "@elementor/schema": "3.33.0-107",
+    "@elementor/schema": "3.33.0-108",
     "@elementor/ui": "1.36.12",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/ui/tags/warning-variable-tag.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { AlertTriangleFilledIcon } from '@elementor/icons';
+import { Box, Chip, type ChipProps, type Theme, Tooltip, Typography } from '@elementor/ui';
+
+interface WarningVariableTagProps extends ChipProps {
+	label: string;
+	suffix?: string;
+}
+
+export const WarningVariableTag = React.forwardRef< HTMLDivElement, WarningVariableTagProps >(
+	( { label, suffix, onClick, icon, ...props }, ref ) => {
+		const displayText = suffix ? `${ label } (${ suffix })` : label;
+
+		return (
+			<Chip
+				ref={ ref }
+				size="tiny"
+				color="warning"
+				shape="rounded"
+				variant="standard"
+				onClick={ onClick }
+				icon={ <AlertTriangleFilledIcon /> }
+				label={
+					<Tooltip title={ displayText } placement="top">
+						<Box sx={ { display: 'inline-grid', minWidth: 0 } }>
+							<Typography variant="caption" noWrap sx={ { lineHeight: 1.34 } }>
+								{ displayText }
+							</Typography>
+						</Box>
+					</Tooltip>
+				}
+				sx={ {
+					height: ( theme: Theme ) => theme.spacing( 3.5 ),
+					borderRadius: ( theme: Theme ) => theme.spacing( 1 ),
+					justifyContent: 'flex-start',
+					width: '100%',
+				} }
+				{ ...props }
+			/>
+		);
+	}
+);
+
+WarningVariableTag.displayName = 'WarningVariableTag';

package/src/components/ui/variable/deleted-variable.tsx

@@ -3,6 +3,7 @@ import { useId, useRef, useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 import { type PropTypeKey } from '@elementor/editor-props';
 import { Backdrop, bindPopover, Box, Infotip, Popover, usePopupState } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
 
 import { VariableTypeProvider } from '../../../context/variable-type-context';
 import { usePermissions } from '../../../hooks/use-permissions';
@@ -12,7 +13,7 @@ import { createUnlinkHandler } from '../../../utils/unlink-variable';
 import { getVariableType } from '../../../variables-registry/variable-type-registry';
 import { VariableRestore } from '../../variable-restore';
 import { DeletedVariableAlert } from '../deleted-variable-alert';
-import { DeletedTag } from '../tags/deleted-tag';
+import { WarningVariableTag } from '../tags/warning-variable-tag';
 
 type Props = {
 	variable: Variable;
@@ -101,7 +102,11 @@ export const DeletedVariable = ( { variable, propTypeKey }: Props ) => {
 						},
 					} }
 				>
-					<DeletedTag label={ variable.label } onClick={ toggleInfotip } />
+					<WarningVariableTag
+						label={ variable.label }
+						onClick={ toggleInfotip }
+						suffix={ __( 'deleted', 'elementor' ) }
+					/>
 				</Infotip>
 
 				<Popover

package/src/components/ui/variable/mismatch-variable.tsx

@@ -2,11 +2,12 @@ import * as React from 'react';
 import { useId, useRef, useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 import { Backdrop, bindPopover, Box, Infotip, Popover, usePopupState } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
 
 import { type Variable } from '../../../types';
 import { VariableSelectionPopover } from '../../variable-selection-popover';
 import { MismatchVariableAlert } from '../mismatch-variable-alert';
-import { MismatchTag } from '../tags/mismatch-tag';
+import { WarningVariableTag } from '../tags/warning-variable-tag';
 
 type Props = {
 	variable: Variable;
@@ -67,7 +68,11 @@ export const MismatchVariable = ( { variable }: Props ) => {
 					},
 				} }
 			>
-				<MismatchTag label={ variable.label } onClick={ toggleInfotip } />
+				<WarningVariableTag
+					label={ variable.label }
+					onClick={ toggleInfotip }
+					suffix={ __( 'changed', 'elementor' ) }
+				/>
 			</Infotip>
 
 			<Popover

package/src/components/ui/variable/missing-variable.tsx

@@ -5,7 +5,7 @@ import { Backdrop, Infotip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { MissingVariableAlert } from '../missing-variable-alert';
-import { MissingTag } from '../tags/missing-tag';
+import { WarningVariableTag } from '../tags/warning-variable-tag';
 
 export const MissingVariable = () => {
 	const { setValue } = useBoundProp();
@@ -37,7 +37,7 @@ export const MissingVariable = () => {
 					},
 				} }
 			>
-				<MissingTag label={ __( 'Missing variable', 'elementor' ) } onClick={ toggleInfotip } />
+				<WarningVariableTag label={ __( 'Missing variable', 'elementor' ) } onClick={ toggleInfotip } />
 			</Infotip>
 		</>
 	);

package/src/components/ui/tags/deleted-tag.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { AlertTriangleFilledIcon } from '@elementor/icons';
-import { Box, Chip, type ChipProps, type Theme, Tooltip, Typography } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-export const DeletedTag = React.forwardRef< HTMLDivElement, ChipProps >( ( { label, onClick, ...props }, ref ) => {
-	return (
-		<Chip
-			ref={ ref }
-			size="tiny"
-			color="warning"
-			shape="rounded"
-			variant="standard"
-			onClick={ onClick }
-			icon={ <AlertTriangleFilledIcon /> }
-			label={
-				<Tooltip title={ label } placement="top">
-					<Box sx={ { display: 'flex', gap: 0.5, alignItems: 'center' } }>
-						<Typography variant="caption" noWrap>
-							{ label }
-						</Typography>
-						<Typography variant="caption" noWrap sx={ { textOverflow: 'initial', overflow: 'visible' } }>
-							({ __( 'deleted', 'elementor' ) })
-						</Typography>
-					</Box>
-				</Tooltip>
-			}
-			sx={ {
-				height: ( theme: Theme ) => theme.spacing( 3.5 ),
-				borderRadius: ( theme: Theme ) => theme.spacing( 1 ),
-				justifyContent: 'flex-start',
-				width: '100%',
-			} }
-			{ ...props }
-		/>
-	);
-} );

package/src/components/ui/tags/mismatch-tag.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { AlertTriangleFilledIcon } from '@elementor/icons';
-import { Box, Chip, type ChipProps, type Theme, Tooltip, Typography } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-export const MismatchTag = React.forwardRef< HTMLDivElement, ChipProps >( ( { label, onClick, ...props }, ref ) => {
-	return (
-		<Chip
-			ref={ ref }
-			size="tiny"
-			color="warning"
-			shape="rounded"
-			variant="standard"
-			onClick={ onClick }
-			icon={ <AlertTriangleFilledIcon /> }
-			label={
-				<Tooltip title={ label } placement="top">
-					<Box sx={ { display: 'flex', gap: 0.5, alignItems: 'center' } }>
-						<Typography variant="caption" noWrap>
-							{ label }
-						</Typography>
-						<Typography variant="caption" noWrap sx={ { textOverflow: 'initial', overflow: 'visible' } }>
-							({ __( 'changed', 'elementor' ) })
-						</Typography>
-					</Box>
-				</Tooltip>
-			}
-			sx={ {
-				height: ( theme: Theme ) => theme.spacing( 3.5 ),
-				borderRadius: ( theme: Theme ) => theme.spacing( 1 ),
-				justifyContent: 'flex-start',
-				width: '100%',
-			} }
-			{ ...props }
-		/>
-	);
-} );

package/src/components/ui/tags/missing-tag.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { AlertTriangleFilledIcon } from '@elementor/icons';
-import { Chip, type ChipProps, type Theme } from '@elementor/ui';
-
-export const MissingTag = React.forwardRef< HTMLDivElement, ChipProps >( ( { label, onClick, ...props }, ref ) => {
-	return (
-		<Chip
-			ref={ ref }
-			size="tiny"
-			color="warning"
-			shape="rounded"
-			variant="standard"
-			onClick={ onClick }
-			icon={ <AlertTriangleFilledIcon /> }
-			label={ label }
-			sx={ {
-				height: ( theme: Theme ) => theme.spacing( 3.5 ),
-				borderRadius: ( theme: Theme ) => theme.spacing( 1 ),
-				justifyContent: 'flex-start',
-				width: '100%',
-			} }
-			{ ...props }
-		/>
-	);
-} );