@elementor/editor-variables 0.16.0 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,18 +39,18 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.21.0",
-    "@elementor/editor-editing-panel": "1.48.0",
-    "@elementor/editor-canvas": "0.26.0",
-    "@elementor/editor-props": "0.16.0",
+    "@elementor/editor": "0.21.1",
+    "@elementor/editor-editing-panel": "1.50.0",
+    "@elementor/editor-canvas": "0.28.0",
+    "@elementor/editor-props": "0.18.0",
     "@elementor/schema": "0.1.2",
-    "@elementor/editor-controls": "1.3.0",
+    "@elementor/editor-controls": "1.5.0",
     "@elementor/icons": "1.46.0",
     "@wordpress/i18n": "^5.13.0",
     "@elementor/ui": "1.36.0",
     "@elementor/editor-v1-adapters": "0.12.1",
     "@elementor/http-client": "0.3.0",
-    "@elementor/editor-ui": "0.14.0"
+    "@elementor/editor-ui": "0.14.2"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/color-variable-creation.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { PopoverContent, useBoundProp } from '@elementor/editor-controls';
-import { PopoverScrollableContent } from '@elementor/editor-editing-panel';
+import { PopoverBody } from '@elementor/editor-editing-panel';
 import { PopoverHeader } from '@elementor/editor-ui';
 import { ArrowLeftIcon, BrushIcon } from '@elementor/icons';
-import { Button, CardActions, Divider, IconButton } from '@elementor/ui';
+import { Button, CardActions, Divider, FormHelperText, IconButton } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { createVariable } from '../hooks/use-prop-variables';
@@ -24,10 +24,12 @@ export const ColorVariableCreation = ( { onGoBack, onClose }: Props ) => {
 
 	const [ color, setColor ] = useState( '' );
 	const [ label, setLabel ] = useState( '' );
+	const [ errorMessage, setErrorMessage ] = useState( '' );
 
 	const resetFields = () => {
 		setColor( '' );
 		setLabel( '' );
+		setErrorMessage( '' );
 	};
 
 	const closePopover = () => {
@@ -40,10 +42,14 @@ export const ColorVariableCreation = ( { onGoBack, onClose }: Props ) => {
 			value: color,
 			label,
 			type: colorVariablePropTypeUtil.key,
-		} ).then( ( key ) => {
-			setVariable( key );
-			closePopover();
-		} );
+		} )
+			.then( ( key ) => {
+				setVariable( key );
+				closePopover();
+			} )
+			.catch( ( error ) => {
+				setErrorMessage( error.message );
+			} );
 	};
 
 	const hasEmptyValue = () => {
@@ -53,7 +59,7 @@ export const ColorVariableCreation = ( { onGoBack, onClose }: Props ) => {
 	const isSubmitDisabled = hasEmptyValue();
 
 	return (
-		<PopoverScrollableContent height="auto">
+		<PopoverBody height="auto">
 			<PopoverHeader
 				icon={
 					<>
@@ -72,8 +78,22 @@ export const ColorVariableCreation = ( { onGoBack, onClose }: Props ) => {
 			<Divider />
 
 			<PopoverContent p={ 2 }>
-				<LabelField value={ label } onChange={ setLabel } />
-				<ColorField value={ color } onChange={ setColor } />
+				<LabelField
+					value={ label }
+					onChange={ ( value ) => {
+						setLabel( value );
+						setErrorMessage( '' );
+					} }
+				/>
+				<ColorField
+					value={ color }
+					onChange={ ( value ) => {
+						setColor( value );
+						setErrorMessage( '' );
+					} }
+				/>
+
+				{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
 			</PopoverContent>
 
 			<CardActions sx={ { pt: 0.5, pb: 1 } }>
@@ -81,6 +101,6 @@ export const ColorVariableCreation = ( { onGoBack, onClose }: Props ) => {
 					{ __( 'Create', 'elementor' ) }
 				</Button>
 			</CardActions>
-		</PopoverScrollableContent>
+		</PopoverBody>
 	);
 };

package/src/components/color-variable-edit.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { PopoverContent, useBoundProp } from '@elementor/editor-controls';
-import { PopoverScrollableContent } from '@elementor/editor-editing-panel';
+import { PopoverBody } from '@elementor/editor-editing-panel';
 import { PopoverHeader } from '@elementor/editor-ui';
 import { ArrowLeftIcon, BrushIcon, TrashIcon } from '@elementor/icons';
-import { Button, CardActions, Divider, IconButton } from '@elementor/ui';
+import { Button, CardActions, Divider, FormHelperText, IconButton } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { deleteVariable, updateVariable, useVariable } from '../hooks/use-prop-variables';
@@ -25,6 +25,7 @@ type Props = {
 export const ColorVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) => {
 	const { setValue: notifyBoundPropChange, value: assignedValue } = useBoundProp( colorVariablePropTypeUtil );
 	const [ deleteConfirmation, setDeleteConfirmation ] = useState( false );
+	const [ errorMessage, setErrorMessage ] = useState( '' );
 
 	const variable = useVariable( editId );
 	if ( ! variable ) {
@@ -38,10 +39,14 @@ export const ColorVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Prop
 		updateVariable( editId, {
 			value: color,
 			label,
-		} ).then( () => {
-			maybeTriggerBoundPropChange();
-			onSubmit?.();
-		} );
+		} )
+			.then( () => {
+				maybeTriggerBoundPropChange();
+				onSubmit?.();
+			} )
+			.catch( ( error ) => {
+				setErrorMessage( error.message );
+			} );
 	};
 
 	const handleDelete = () => {
@@ -90,7 +95,7 @@ export const ColorVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Prop
 
 	return (
 		<>
-			<PopoverScrollableContent height="auto">
+			<PopoverBody height="auto">
 				<PopoverHeader
 					title={ __( 'Edit variable', 'elementor' ) }
 					onClose={ onClose }
@@ -114,8 +119,22 @@ export const ColorVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Prop
 				<Divider />
 
 				<PopoverContent p={ 2 }>
-					<LabelField value={ label } onChange={ setLabel } />
-					<ColorField value={ color } onChange={ setColor } />
+					<LabelField
+						value={ label }
+						onChange={ ( value ) => {
+							setLabel( value );
+							setErrorMessage( '' );
+						} }
+					/>
+					<ColorField
+						value={ color }
+						onChange={ ( value ) => {
+							setColor( value );
+							setErrorMessage( '' );
+						} }
+					/>
+
+					{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
 				</PopoverContent>
 
 				<CardActions sx={ { pt: 0.5, pb: 1 } }>
@@ -123,7 +142,7 @@ export const ColorVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Prop
 						{ __( 'Save', 'elementor' ) }
 					</Button>
 				</CardActions>
-			</PopoverScrollableContent>
+			</PopoverBody>
 
 			{ deleteConfirmation && (
 				<DeleteConfirmationDialog

package/src/components/color-variables-selection.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { PopoverScrollableContent } from '@elementor/editor-editing-panel';
+import { PopoverBody } from '@elementor/editor-editing-panel';
 import { PopoverHeader, PopoverMenuList, PopoverSearch, type VirtualizedItem } from '@elementor/editor-ui';
 import { BrushIcon, ColorFilterIcon, PlusIcon, SettingsIcon } from '@elementor/icons';
 import { Divider, IconButton } from '@elementor/ui';
@@ -76,7 +76,7 @@ export const ColorVariablesSelection = ( { closePopover, onAdd, onEdit, onSettin
 	};
 
 	return (
-		<>
+		<PopoverBody>
 			<PopoverHeader
 				title={ __( 'Variables', 'elementor' ) }
 				icon={ <ColorFilterIcon fontSize={ SIZE } /> }
@@ -94,37 +94,35 @@ export const ColorVariablesSelection = ( { closePopover, onAdd, onEdit, onSettin
 
 			<Divider />
 
-			<PopoverScrollableContent>
-				{ hasVariables && hasSearchResults && (
-					<PopoverMenuList
-						items={ items }
-						onSelect={ handleSetColorVariable }
-						onClose={ () => {} }
-						selectedValue={ variable }
-						data-testid="color-variables-list"
-						menuListTemplate={ VariablesStyledMenuList }
-						menuItemContentTemplate={ ( item: VirtualizedItem< 'item', string > ) => (
-							<MenuItemContent item={ item } />
-						) }
-					/>
-				) }
-
-				{ ! hasSearchResults && hasVariables && (
-					<NoSearchResults
-						searchValue={ searchValue }
-						onClear={ handleClearSearch }
-						icon={ <BrushIcon fontSize="large" /> }
-					/>
-				) }
-
-				{ ! hasVariables && (
-					<NoVariables
-						title={ __( 'Create your first color variable', 'elementor' ) }
-						icon={ <BrushIcon fontSize="large" /> }
-						onAdd={ onAdd }
-					/>
-				) }
-			</PopoverScrollableContent>
-		</>
+			{ hasVariables && hasSearchResults && (
+				<PopoverMenuList
+					items={ items }
+					onSelect={ handleSetColorVariable }
+					onClose={ () => {} }
+					selectedValue={ variable }
+					data-testid="color-variables-list"
+					menuListTemplate={ VariablesStyledMenuList }
+					menuItemContentTemplate={ ( item: VirtualizedItem< 'item', string > ) => (
+						<MenuItemContent item={ item } />
+					) }
+				/>
+			) }
+
+			{ ! hasSearchResults && hasVariables && (
+				<NoSearchResults
+					searchValue={ searchValue }
+					onClear={ handleClearSearch }
+					icon={ <BrushIcon fontSize="large" /> }
+				/>
+			) }
+
+			{ ! hasVariables && (
+				<NoVariables
+					title={ __( 'Create your first color variable', 'elementor' ) }
+					icon={ <BrushIcon fontSize="large" /> }
+					onAdd={ onAdd }
+				/>
+			) }
+		</PopoverBody>
 	);
 };

package/src/components/font-variable-creation.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { PopoverContent, useBoundProp } from '@elementor/editor-controls';
-import { PopoverScrollableContent } from '@elementor/editor-editing-panel';
+import { PopoverBody } from '@elementor/editor-editing-panel';
 import { PopoverHeader } from '@elementor/editor-ui';
 import { ArrowLeftIcon, TextIcon } from '@elementor/icons';
-import { Button, CardActions, Divider, IconButton } from '@elementor/ui';
+import { Button, CardActions, Divider, FormHelperText, IconButton } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { createVariable } from '../hooks/use-prop-variables';
@@ -24,10 +24,12 @@ export const FontVariableCreation = ( { onClose, onGoBack }: Props ) => {
 
 	const [ fontFamily, setFontFamily ] = useState( '' );
 	const [ label, setLabel ] = useState( '' );
+	const [ errorMessage, setErrorMessage ] = useState( '' );
 
 	const resetFields = () => {
 		setFontFamily( '' );
 		setLabel( '' );
+		setErrorMessage( '' );
 	};
 
 	const closePopover = () => {
@@ -40,10 +42,14 @@ export const FontVariableCreation = ( { onClose, onGoBack }: Props ) => {
 			value: fontFamily,
 			label,
 			type: fontVariablePropTypeUtil.key,
-		} ).then( ( key ) => {
-			setVariable( key );
-			closePopover();
-		} );
+		} )
+			.then( ( key ) => {
+				setVariable( key );
+				closePopover();
+			} )
+			.catch( ( error ) => {
+				setErrorMessage( error.message );
+			} );
 	};
 
 	const hasEmptyValue = () => {
@@ -53,7 +59,7 @@ export const FontVariableCreation = ( { onClose, onGoBack }: Props ) => {
 	const isSubmitDisabled = hasEmptyValue();
 
 	return (
-		<PopoverScrollableContent height="auto">
+		<PopoverBody height="auto">
 			<PopoverHeader
 				icon={
 					<>
@@ -72,8 +78,22 @@ export const FontVariableCreation = ( { onClose, onGoBack }: Props ) => {
 			<Divider />
 
 			<PopoverContent p={ 2 }>
-				<LabelField value={ label } onChange={ setLabel } />
-				<FontField value={ fontFamily } onChange={ setFontFamily } />
+				<LabelField
+					value={ label }
+					onChange={ ( value ) => {
+						setLabel( value );
+						setErrorMessage( '' );
+					} }
+				/>
+				<FontField
+					value={ fontFamily }
+					onChange={ ( value ) => {
+						setFontFamily( value );
+						setErrorMessage( '' );
+					} }
+				/>
+
+				{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
 			</PopoverContent>
 
 			<CardActions sx={ { pt: 0.5, pb: 1 } }>
@@ -81,6 +101,6 @@ export const FontVariableCreation = ( { onClose, onGoBack }: Props ) => {
 					{ __( 'Create', 'elementor' ) }
 				</Button>
 			</CardActions>
-		</PopoverScrollableContent>
+		</PopoverBody>
 	);
 };

package/src/components/font-variable-edit.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { PopoverContent, useBoundProp } from '@elementor/editor-controls';
-import { PopoverScrollableContent } from '@elementor/editor-editing-panel';
+import { PopoverBody } from '@elementor/editor-editing-panel';
 import { PopoverHeader } from '@elementor/editor-ui';
 import { ArrowLeftIcon, TextIcon, TrashIcon } from '@elementor/icons';
-import { Button, CardActions, Divider, IconButton } from '@elementor/ui';
+import { Button, CardActions, Divider, FormHelperText, IconButton } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { deleteVariable, updateVariable, useVariable } from '../hooks/use-prop-variables';
@@ -25,6 +25,7 @@ type Props = {
 export const FontVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) => {
 	const { setValue: notifyBoundPropChange, value: assignedValue } = useBoundProp( fontVariablePropTypeUtil );
 	const [ deleteConfirmation, setDeleteConfirmation ] = useState( false );
+	const [ errorMessage, setErrorMessage ] = useState( '' );
 
 	const variable = useVariable( editId );
 	if ( ! variable ) {
@@ -38,10 +39,14 @@ export const FontVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props
 		updateVariable( editId, {
 			value: fontFamily,
 			label,
-		} ).then( () => {
-			maybeTriggerBoundPropChange();
-			onSubmit?.();
-		} );
+		} )
+			.then( () => {
+				maybeTriggerBoundPropChange();
+				onSubmit?.();
+			} )
+			.catch( ( error ) => {
+				setErrorMessage( error.message );
+			} );
 	};
 
 	const handleDelete = () => {
@@ -90,7 +95,7 @@ export const FontVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props
 
 	return (
 		<>
-			<PopoverScrollableContent height="auto">
+			<PopoverBody height="auto">
 				<PopoverHeader
 					icon={
 						<>
@@ -114,8 +119,22 @@ export const FontVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props
 				<Divider />
 
 				<PopoverContent p={ 2 }>
-					<LabelField value={ label } onChange={ setLabel } />
-					<FontField value={ fontFamily } onChange={ setFontFamily } />
+					<LabelField
+						value={ label }
+						onChange={ ( value ) => {
+							setLabel( value );
+							setErrorMessage( '' );
+						} }
+					/>
+					<FontField
+						value={ fontFamily }
+						onChange={ ( value ) => {
+							setFontFamily( value );
+							setErrorMessage( '' );
+						} }
+					/>
+
+					{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
 				</PopoverContent>
 
 				<CardActions sx={ { pt: 0.5, pb: 1 } }>
@@ -123,7 +142,7 @@ export const FontVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props
 						{ __( 'Save', 'elementor' ) }
 					</Button>
 				</CardActions>
-			</PopoverScrollableContent>
+			</PopoverBody>
 
 			{ deleteConfirmation && (
 				<DeleteConfirmationDialog

package/src/components/font-variables-selection.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { PopoverScrollableContent } from '@elementor/editor-editing-panel';
+import { PopoverBody } from '@elementor/editor-editing-panel';
 import { PopoverHeader, PopoverMenuList, PopoverSearch, type VirtualizedItem } from '@elementor/editor-ui';
 import { ColorFilterIcon, PlusIcon, SettingsIcon, TextIcon } from '@elementor/icons';
 import { Divider, IconButton } from '@elementor/ui';
@@ -75,7 +75,7 @@ export const FontVariablesSelection = ( { closePopover, onAdd, onEdit, onSetting
 	};
 
 	return (
-		<>
+		<PopoverBody>
 			<PopoverHeader
 				title={ __( 'Variables', 'elementor' ) }
 				onClose={ closePopover }
@@ -93,37 +93,35 @@ export const FontVariablesSelection = ( { closePopover, onAdd, onEdit, onSetting
 
 			<Divider />
 
-			<PopoverScrollableContent>
-				{ hasVariables && hasSearchResults && (
-					<PopoverMenuList
-						items={ items }
-						onSelect={ handleSetVariable }
-						onClose={ () => {} }
-						selectedValue={ variable }
-						data-testid="font-variables-list"
-						menuListTemplate={ VariablesStyledMenuList }
-						menuItemContentTemplate={ ( item: VirtualizedItem< 'item', string > ) => (
-							<MenuItemContent item={ item } />
-						) }
-					/>
-				) }
-
-				{ ! hasSearchResults && hasVariables && (
-					<NoSearchResults
-						searchValue={ searchValue }
-						onClear={ handleClearSearch }
-						icon={ <TextIcon fontSize="large" /> }
-					/>
-				) }
-
-				{ ! hasVariables && (
-					<NoVariables
-						title={ __( 'Create your first font variable', 'elementor' ) }
-						icon={ <TextIcon fontSize="large" /> }
-						onAdd={ onAdd }
-					/>
-				) }
-			</PopoverScrollableContent>
-		</>
+			{ hasVariables && hasSearchResults && (
+				<PopoverMenuList
+					items={ items }
+					onSelect={ handleSetVariable }
+					onClose={ () => {} }
+					selectedValue={ variable }
+					data-testid="font-variables-list"
+					menuListTemplate={ VariablesStyledMenuList }
+					menuItemContentTemplate={ ( item: VirtualizedItem< 'item', string > ) => (
+						<MenuItemContent item={ item } />
+					) }
+				/>
+			) }
+
+			{ ! hasSearchResults && hasVariables && (
+				<NoSearchResults
+					searchValue={ searchValue }
+					onClear={ handleClearSearch }
+					icon={ <TextIcon fontSize="large" /> }
+				/>
+			) }
+
+			{ ! hasVariables && (
+				<NoVariables
+					title={ __( 'Create your first font variable', 'elementor' ) }
+					icon={ <TextIcon fontSize="large" /> }
+					onAdd={ onAdd }
+				/>
+			) }
+		</PopoverBody>
 	);
 };

package/src/components/ui/delete-confirmation-dialog.tsx

@@ -28,23 +28,20 @@ export const DeleteConfirmationDialog = ( {
 		<Dialog open={ open } onClose={ closeDialog } aria-labelledby={ TITLE_ID } maxWidth="xs">
 			<DialogTitle id={ TITLE_ID } display="flex" alignItems="center" gap={ 1 } sx={ { lineHeight: 1 } }>
 				<AlertOctagonFilledIcon color="error" />
-				{ __( 'Delete Variable', 'elementor' ) }
+				{ __( 'Delete this variable?', 'elementor' ) }
 			</DialogTitle>
 			<DialogContent>
 				<DialogContentText variant="body2" color="textPrimary">
-					{ __( 'You are about to delete', 'elementor' ) }
+					{ __( 'All elements using', 'elementor' ) }
 					<Typography variant="subtitle2" component="span">
 						&nbsp;{ label }&nbsp;
 					</Typography>
-					{ __(
-						'Variable. Note that its value is still being used anywhere on your site where it was connected to the variable.',
-						'elementor'
-					) }
+					{ __( 'will keep their current values, but the variable itself will be removed.', 'elementor' ) }
 				</DialogContentText>
 			</DialogContent>
 			<DialogActions>
 				<Button color="secondary" onClick={ closeDialog }>
-					{ __( 'Cancel', 'elementor' ) }
+					{ __( 'Not now', 'elementor' ) }
 				</Button>
 				<Button variant="contained" color="error" onClick={ onConfirm }>
 					{ __( 'Delete', 'elementor' ) }

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

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { useSectionWidth } from '@elementor/editor-editing-panel';
+import { Alert, AlertAction, AlertTitle, ClickAwayListener } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+type DeletedVariableAlertProps = {
+	onClose: () => void;
+	onUnlink?: () => void;
+	onRestore?: () => void;
+	label: string;
+};
+
+export const DeletedVariableAlert = ( { onClose, onUnlink, onRestore, label }: DeletedVariableAlertProps ) => {
+	const sectionWidth = useSectionWidth();
+
+	return (
+		<ClickAwayListener onClickAway={ onClose }>
+			<Alert
+				variant="standard"
+				severity="warning"
+				onClose={ onClose }
+				action={
+					<>
+						{ onUnlink && (
+							<AlertAction variant="contained" onClick={ onUnlink }>
+								{ __( 'Unlink', 'elementor' ) }
+							</AlertAction>
+						) }
+						{ onRestore && (
+							<AlertAction variant="outlined" onClick={ onRestore }>
+								{ __( 'Restore', 'elementor' ) }
+							</AlertAction>
+						) }
+					</>
+				}
+				sx={ { width: sectionWidth } }
+			>
+				<AlertTitle>{ __( 'Deleted variable', 'elementor' ) }</AlertTitle>
+				{ __( 'The variable', 'elementor' ) } &apos;{ label }&apos;{ ' ' }
+				{ __(
+					'has been deleted, but it is still referenced in this location. You may restore the variable or unlink it to assign a different value.',
+					'elementor'
+				) }
+			</Alert>
+		</ClickAwayListener>
+	);
+};

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DetachIcon } from '@elementor/icons';
-import { Box, IconButton, Stack, Typography, UnstableTag as Tag, type UnstableTagProps } from '@elementor/ui';
+import { Box, IconButton, Stack, Tooltip, Typography, UnstableTag as Tag, type UnstableTagProps } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 export const SIZE = 'tiny';
@@ -21,23 +21,25 @@ export const AssignedTag = ( { startIcon, label, onUnlink, ...props }: VariableT
 	}
 
 	return (
-		<Tag
-			fullWidth
-			showActionsOnHover
-			startIcon={
-				<Stack gap={ 0.5 } direction="row" alignItems="center">
-					{ startIcon }
-				</Stack>
-			}
-			label={
-				<Box sx={ { display: 'inline-grid', minWidth: 0 } }>
-					<Typography sx={ { lineHeight: 1.34 } } variant="caption" noWrap>
-						{ label }
-					</Typography>
-				</Box>
-			}
-			actions={ actions }
-			{ ...props }
-		/>
+		<Tooltip title={ label } placement="top">
+			<Tag
+				fullWidth
+				showActionsOnHover
+				startIcon={
+					<Stack gap={ 0.5 } direction="row" alignItems="center">
+						{ startIcon }
+					</Stack>
+				}
+				label={
+					<Box sx={ { display: 'inline-grid', minWidth: 0 } }>
+						<Typography sx={ { lineHeight: 1.34 } } variant="caption" noWrap>
+							{ label }
+						</Typography>
+					</Box>
+				}
+				actions={ actions }
+				{ ...props }
+			/>
+		</Tooltip>
 	);
 };