@elementor/editor-variables 4.0.0-552 → 4.0.0-573

package/src/components/variables-manager/variables-manager-table.tsx

@@ -1,10 +1,6 @@
 import * as React from 'react';
-import { createElement, useEffect, useRef } from 'react';
-import { EllipsisWithTooltip } from '@elementor/editor-ui';
-import { GripVerticalIcon } from '@elementor/icons';
+import { useEffect, useRef } from 'react';
 import {
-	IconButton,
-	Stack,
 	type SxProps,
 	Table,
 	TableBody,
@@ -19,10 +15,9 @@ import { __ } from '@wordpress/i18n';
 
 import { type TVariablesList } from '../../storage';
 import { getVariableType } from '../../variables-registry/variable-type-registry';
-import { LabelField } from '../fields/label-field';
-import { VariableEditMenu, type VariableManagerMenuAction } from './ui/variable-edit-menu';
+import { type VariableManagerMenuAction } from './ui/variable-edit-menu';
 import { VariableTableCell } from './ui/variable-table-cell';
-import { VariableEditableCell } from './variable-editable-cell';
+import { type Row, VariableRow } from './ui/variable-table-row';
 
 type Props = {
 	menuActions: ( variableId: string ) => VariableManagerMenuAction[];
@@ -33,13 +28,6 @@ type Props = {
 	onFieldError?: ( hasError: boolean ) => void;
 };
 
-type Row = ReturnType< typeof getVariableType > & {
-	id: string;
-	type: string;
-	name: string;
-	value: string;
-};
-
 export const VariablesManagerTable = ( {
 	menuActions,
 	variables,
@@ -142,179 +130,19 @@ export const VariablesManagerTable = ( {
 							<UnstableSortableItem
 								key={ row.id }
 								id={ row.id }
-								render={ ( {
-									itemProps,
-									showDropIndication,
-									triggerProps,
-									itemStyle,
-									triggerStyle,
-									isDragged,
-									dropPosition,
-									setTriggerRef,
-									isSorting,
-								}: UnstableSortableItemRenderProps ) => {
-									const showIndicationBefore = showDropIndication && dropPosition === 'before';
-									const showIndicationAfter = showDropIndication && dropPosition === 'after';
-
-									return (
-										<TableRow
-											{ ...itemProps }
-											ref={ itemProps.ref }
-											selected={ isDragged }
-											sx={ {
-												...( showIndicationBefore && {
-													'& td, & th': {
-														borderTop: '2px solid',
-														borderTopColor: 'primary.main',
-													},
-												} ),
-												...( showIndicationAfter && {
-													'& td, & th': {
-														borderBottom: '2px solid',
-														borderBottomColor: 'primary.main',
-													},
-												} ),
-												'& [role="toolbar"], & [draggable]': {
-													opacity: 0,
-												},
-												'&:hover, &:focus-within': {
-													backgroundColor: 'action.hover',
-													'& [role="toolbar"], & [draggable]': {
-														opacity: 1,
-													},
-												},
-											} }
-											style={ { ...itemStyle, ...triggerStyle } }
-										>
-											<VariableTableCell noPadding width={ 10 } maxWidth={ 10 }>
-												<IconButton
-													size="small"
-													ref={ setTriggerRef }
-													{ ...triggerProps }
-													disabled={ isSorting }
-													draggable
-												>
-													<GripVerticalIcon fontSize="inherit" />
-												</IconButton>
-											</VariableTableCell>
-											<VariableTableCell>
-												<VariableEditableCell
-													initialValue={ row.name }
-													onChange={ ( value ) => {
-														if ( value !== row.name ) {
-															handleOnChange( {
-																...variables,
-																[ row.id ]: { ...variables[ row.id ], label: value },
-															} );
-														}
-													} }
-													prefixElement={ createElement( row.icon, { fontSize: 'inherit' } ) }
-													editableElement={ ( {
-														value,
-														onChange,
-														onValidationChange,
-														error,
-													} ) => (
-														<LabelField
-															id={ 'variable-label-' + row.id }
-															size="tiny"
-															value={ value }
-															onChange={ onChange }
-															onErrorChange={ ( errorMsg ) => {
-																onValidationChange?.( errorMsg );
-																onFieldError?.( !! errorMsg );
-															} }
-															error={ error }
-															focusOnShow
-															selectOnShow={ autoEditVariableId === row.id }
-															showWarningInfotip={ true }
-															variables={ variables }
-														/>
-													) }
-													autoEdit={ autoEditVariableId === row.id }
-													onRowRef={ handleRowRef( row.id ) }
-													onAutoEditComplete={
-														autoEditVariableId === row.id ? onAutoEditComplete : undefined
-													}
-													fieldType="label"
-												>
-													<EllipsisWithTooltip
-														title={ row.name }
-														sx={ { border: '4px solid transparent' } }
-													>
-														{ row.name }
-													</EllipsisWithTooltip>
-												</VariableEditableCell>
-											</VariableTableCell>
-											<VariableTableCell>
-												<VariableEditableCell
-													initialValue={ row.value }
-													onChange={ ( value ) => {
-														if ( value !== row.value ) {
-															handleOnChange( {
-																...variables,
-																[ row.id ]: { ...variables[ row.id ], value },
-															} );
-														}
-													} }
-													editableElement={ ( {
-														value,
-														onChange,
-														onValidationChange,
-														error,
-													} ) =>
-														row.valueField?.( {
-															value,
-															onChange,
-															onPropTypeKeyChange: ( type ) => {
-																handleOnChange( {
-																	...variables,
-																	[ row.id ]: { ...variables[ row.id ], type },
-																} );
-															},
-															propTypeKey: row.type,
-															onValidationChange: ( errorMsg ) => {
-																onValidationChange?.( errorMsg );
-																onFieldError?.( !! errorMsg );
-															},
-															error,
-														} ) ?? <></>
-													}
-													onRowRef={ handleRowRef( row.id ) }
-													gap={ 0.25 }
-													fieldType="value"
-												>
-													{ row.startIcon && row.startIcon( { value: row.value } ) }
-													<EllipsisWithTooltip
-														title={ row.value }
-														sx={ {
-															border: '4px solid transparent',
-															lineHeight: '1',
-															pt: 0.25,
-														} }
-													>
-														{ row.value }
-													</EllipsisWithTooltip>
-												</VariableEditableCell>
-											</VariableTableCell>
-											<VariableTableCell
-												align="right"
-												noPadding
-												width={ 16 }
-												maxWidth={ 16 }
-												sx={ { paddingInlineEnd: 1 } }
-											>
-												<Stack role="toolbar" direction="row" justifyContent="flex-end">
-													<VariableEditMenu
-														menuActions={ menuActions( row.id ) }
-														disabled={ isSorting }
-														itemId={ row.id }
-													/>
-												</Stack>
-											</VariableTableCell>
-										</TableRow>
-									);
-								} }
+								render={ ( props: UnstableSortableItemRenderProps ) => (
+									<VariableRow
+										{ ...props }
+										row={ row }
+										variables={ variables }
+										handleOnChange={ handleOnChange }
+										autoEditVariableId={ autoEditVariableId }
+										onAutoEditComplete={ onAutoEditComplete }
+										onFieldError={ onFieldError }
+										menuActions={ menuActions }
+										handleRowRef={ handleRowRef }
+									/>
+								) }
 							/>
 						) ) }
 					</UnstableSortableProvider>
@@ -323,6 +151,7 @@ export const VariablesManagerTable = ( {
 		</TableContainer>
 	);
 };
+
 function sortVariablesOrder( variables: TVariablesList ): ( a: string, b: string ) => number {
 	return ( a, b ) => {
 		const orderA = variables[ a ]?.order ?? Number.MAX_SAFE_INTEGER;

package/src/hooks/use-quota-permissions.ts

@@ -1,7 +1,7 @@
 export const useQuotaPermissions = ( variableType: string ) => {
 	const quotaConfig = {
-		...( window.ElementorVariablesQuotaConfig || {} ),
-		...( window.ElementorVariablesQuotaConfigExtended || {} ),
+		...( window.ElementorVariablesQuotaConfig ?? {} ),
+		...( window.ElementorVariablesQuotaConfigExtended ?? {} ),
 	};
 
 	// BC: Remove when 4.01 is released

package/src/components/ui/stop-sync-confirmation-dialog.tsx

@@ -1,77 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { BrushIcon } from '@elementor/icons';
-import {
-	Button,
-	Checkbox,
-	Dialog,
-	DialogActions,
-	DialogContent,
-	DialogContentText,
-	DialogTitle,
-	FormControlLabel,
-	Typography,
-} from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-type StopSyncConfirmationDialogProps = {
-	open: boolean;
-	closeDialog: () => void;
-	onConfirm: () => void;
-	onSuppressMessage?: () => void;
-};
-
-export const StopSyncConfirmationDialog = ( {
-	open,
-	closeDialog,
-	onConfirm,
-	onSuppressMessage,
-}: StopSyncConfirmationDialogProps ) => {
-	const [ dontShowAgain, setDontShowAgain ] = useState( false );
-
-	const handleConfirm = () => {
-		if ( dontShowAgain ) {
-			onSuppressMessage?.();
-		}
-		onConfirm();
-	};
-
-	return (
-		<Dialog open={ open } onClose={ closeDialog } maxWidth="xs">
-			<DialogTitle display="flex" alignItems="center" gap={ 1 }>
-				<BrushIcon color="secondary" />
-				{ __( 'Stop syncing variable color', 'elementor' ) }
-			</DialogTitle>
-			<DialogContent>
-				<DialogContentText variant="body2" color="textPrimary">
-					{ __(
-						'This will disconnect the variable color from version 3. Existing uses on your site will automatically switch to a default color.',
-						'elementor'
-					) }
-				</DialogContentText>
-			</DialogContent>
-			<DialogActions sx={ { justifyContent: 'space-between', alignItems: 'center' } }>
-				<FormControlLabel
-					control={
-						<Checkbox
-							checked={ dontShowAgain }
-							onChange={ ( event: React.ChangeEvent< HTMLInputElement > ) =>
-								setDontShowAgain( event.target.checked )
-							}
-							size="small"
-						/>
-					}
-					label={ <Typography variant="body2">{ __( "Don't show this again", 'elementor' ) }</Typography> }
-				/>
-				<div>
-					<Button color="secondary" onClick={ closeDialog }>
-						{ __( 'Cancel', 'elementor' ) }
-					</Button>
-					<Button variant="contained" color="secondary" onClick={ handleConfirm } sx={ { ml: 1 } }>
-						{ __( 'Got it', 'elementor' ) }
-					</Button>
-				</div>
-			</DialogActions>
-		</Dialog>
-	);
-};