@elementor/editor-global-classes 0.10.0 → 0.11.1

package/src/components/class-manager/global-classes-list.tsx

@@ -2,15 +2,15 @@ import * as React from 'react';
 import { type StyleDefinitionID } from '@elementor/editor-styles';
 import { stylesRepository } from '@elementor/editor-styles-repository';
 import { EditableField, EllipsisWithTooltip, useEditable } from '@elementor/editor-ui';
-import { DotsVerticalIcon, PhotoIcon } from '@elementor/icons';
+import { DotsVerticalIcon } from '@elementor/icons';
 import {
 	bindMenu,
 	bindTrigger,
 	Box,
 	IconButton,
 	List,
-	ListItem,
 	ListItemButton,
+	type ListItemButtonProps,
 	ListItemText,
 	Menu,
 	MenuItem,
@@ -28,7 +28,8 @@ import { globalClassesStylesProvider } from '../../global-classes-styles-provide
 import { useClassesOrder } from '../../hooks/use-classes-order';
 import { useOrderedClasses } from '../../hooks/use-ordered-classes';
 import { DeleteConfirmationProvider, useDeleteConfirmation } from './delete-confirmation-dialog';
-import { SortableItem, SortableItemIndicator, SortableProvider } from './sortable';
+import { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';
+import { SortableItem, SortableProvider, SortableTrigger, type SortableTriggerProps } from './sortable';
 
 export const GlobalClassesList = () => {
 	const cssClasses = useOrderedClasses();
@@ -50,17 +51,15 @@ export const GlobalClassesList = () => {
 
 						return (
 							<SortableItem key={ id } id={ id }>
-								{ ( { isDragged, showDropIndication, dropIndicationStyle } ) => (
+								{ ( { isDragged, isDragPlaceholder, triggerProps, triggerStyle } ) => (
 									<ClassItem
 										id={ id }
 										label={ label }
 										renameClass={ renameClass }
 										selected={ isDragged }
-									>
-										{ showDropIndication && (
-											<SortableItemIndicator style={ dropIndicationStyle } />
-										) }
-									</ClassItem>
+										disabled={ isDragPlaceholder }
+										sortableTriggerProps={ { ...triggerProps, style: triggerStyle } }
+									/>
 								) }
 							</SortableItem>
 						);
@@ -81,18 +80,16 @@ const useReorder = () => {
 	return [ order, reorder ] as const;
 };
 
-const ClassItem = ( {
-	id,
-	label,
-	renameClass,
-	selected,
-	children,
-}: React.PropsWithChildren< {
+type ClassItemProps = React.PropsWithChildren< {
 	id: string;
 	label: string;
 	renameClass: ( newLabel: string ) => void;
-	selected: boolean;
-} > ) => {
+	selected?: boolean;
+	disabled?: boolean;
+	sortableTriggerProps: SortableTriggerProps;
+} >;
+
+const ClassItem = ( { id, label, renameClass, selected, disabled, sortableTriggerProps }: ClassItemProps ) => {
 	const {
 		ref: editableRef,
 		openEditMode,
@@ -112,104 +109,109 @@ const ClassItem = ( {
 		disableAutoFocus: true,
 	} );
 
+	const isSelected = ( selected || popupState.isOpen ) && ! disabled;
+
 	return (
-		<Stack direction="row" alignItems="center" gap={ 1 } flexGrow={ 1 } flexShrink={ 0 }>
-			<StyledListItem
-				component={ 'div' }
-				disablePadding
+		<>
+			<StyledListItemButton
+				dense
 				disableGutters
-				secondaryAction={
-					<Tooltip
-						placement="top"
-						className="class-item-more-actions"
-						title={ __( 'More actions', 'elementor' ) }
-					>
-						<IconButton size="tiny" { ...bindTrigger( popupState ) } aria-label="More actions">
-							<DotsVerticalIcon fontSize="tiny" />
-						</IconButton>
-					</Tooltip>
-				}
+				showActions={ isSelected || isEditing }
+				shape="rounded"
+				onDoubleClick={ openEditMode }
+				selected={ isSelected }
+				disabled={ disabled }
+				focusVisibleClassName="visible-class-item"
 			>
-				<ListItemButton
-					dense
-					disableGutters
-					shape="rounded"
-					onDoubleClick={ openEditMode }
-					selected={ selected || popupState.isOpen }
-					focusVisibleClassName="visible-class-item"
-					sx={ {
-						minHeight: '36px',
-						display: 'flex',
-						'&.visible-class-item': {
-							boxShadow: 'none !important',
-						},
-					} }
+				<SortableTrigger { ...sortableTriggerProps } />
+				<Indicator isActive={ isEditing } isError={ !! error }>
+					{ isEditing ? (
+						<EditableField
+							ref={ editableRef }
+							error={ error }
+							as={ Typography }
+							variant="caption"
+							{ ...getEditableProps() }
+						/>
+					) : (
+						<EllipsisWithTooltip title={ label } as={ Typography } variant="caption" />
+					) }
+				</Indicator>
+				<Tooltip
+					placement="top"
+					className={ 'class-item-more-actions' }
+					title={ __( 'More actions', 'elementor' ) }
 				>
-					<Indicator isActive={ isEditing } isError={ !! error }>
-						{ isEditing ? (
-							<EditableField
-								ref={ editableRef }
-								error={ error }
-								as={ Typography }
-								variant="caption"
-								{ ...getEditableProps() }
-							/>
-						) : (
-							<EllipsisWithTooltip title={ label } as={ Typography } variant="caption" />
-						) }
-					</Indicator>
-				</ListItemButton>
-				{ children }
-				<Menu
-					{ ...bindMenu( popupState ) }
-					anchorOrigin={ {
-						vertical: 'bottom',
-						horizontal: 'right',
+					<IconButton size="tiny" { ...bindTrigger( popupState ) } aria-label="More actions">
+						<DotsVerticalIcon fontSize="tiny" />
+					</IconButton>
+				</Tooltip>
+			</StyledListItemButton>
+			<Menu
+				{ ...bindMenu( popupState ) }
+				anchorOrigin={ {
+					vertical: 'bottom',
+					horizontal: 'right',
+				} }
+				transformOrigin={ {
+					vertical: 'top',
+					horizontal: 'right',
+				} }
+			>
+				<MenuItem
+					sx={ { minWidth: '160px' } }
+					onClick={ () => {
+						popupState.close();
+						openEditMode();
 					} }
-					transformOrigin={ {
-						vertical: 'top',
-						horizontal: 'right',
+				>
+					<ListItemText primary={ __( 'Rename', 'elementor' ) } />
+				</MenuItem>
+				<MenuItem
+					onClick={ () => {
+						popupState.close();
+						openDialog( { id, label } );
 					} }
 				>
-					<MenuItem
-						sx={ { minWidth: '160px' } }
-						onClick={ () => {
-							popupState.close();
-							openEditMode();
-						} }
-					>
-						<ListItemText primary={ __( 'Rename', 'elementor' ) } />
-					</MenuItem>
-					<MenuItem
-						onClick={ () => {
-							popupState.close();
-							openDialog( { id, label } );
-						} }
-					>
-						<ListItemText primary={ __( 'Delete', 'elementor' ) } sx={ { color: 'error.light' } } />
-					</MenuItem>
-				</Menu>
-			</StyledListItem>
-		</Stack>
+					<ListItemText primary={ __( 'Delete', 'elementor' ) } sx={ { color: 'error.light' } } />
+				</MenuItem>
+			</Menu>
+		</>
 	);
 };
 
-const StyledListItem = styled( ListItem )`
-	.class-item-more-actions {
-		visibility: hidden;
+// Custom styles for sortable list item, until the component is available in the UI package.
+const StyledListItemButton = styled( ListItemButton, {
+	shouldForwardProp: ( prop: string ) => ! [ 'showActions' ].includes( prop ),
+} )< ListItemButtonProps & { showActions: boolean } >(
+	( { showActions } ) => `
+	min-height: 36px;
+
+	&.visible-class-item {
+		box-shadow: none !important;
 	}
-	&:hover {
-		.class-item-more-actions {
+
+	.class-item-more-actions, .class-item-sortable-trigger {
+		visibility: ${ showActions ? 'visible' : 'hidden' };
+	}
+
+	.class-item-sortable-trigger {
+		visibility: ${ showActions ? 'visible' : 'hidden' };
+	}
+
+	&:hover&:not(:disabled) {
+		.class-item-more-actions, .class-item-sortable-trigger  {
 			visibility: visible;
 		}
 	}
-`;
+`
+);
 
 const EmptyState = () => (
-	<Stack alignItems="center" gap={ 3 } pt={ 4 } px={ 0.5 }>
-		<PhotoIcon fontSize="large" />
+	<Stack alignItems="center" gap={ 1.5 } pt={ 10 } px={ 0.5 } maxWidth="260px" margin="auto">
+		<FlippedColorSwatchIcon fontSize="large" />
 		<StyledHeader variant="subtitle2" component="h2" color="text.secondary">
-			{ __( 'No CSS classes created yet', 'elementor' ) }
+			{ __( 'There are no global classes yet.', 'elementor' ) }
 		</StyledHeader>
 		<Typography align="center" variant="caption" color="text.secondary">
 			{ __(
@@ -237,6 +239,7 @@ const Indicator = styled( Box, {
 	border: getIndicatorBorder( { isActive, isError, theme } ),
 	padding: `0 ${ theme.spacing( 1 ) }`,
 	marginLeft: isActive ? theme.spacing( 1 ) : 0,
+	minWidth: 0,
 } ) );
 
 const getIndicatorBorder = ( { isActive, isError, theme }: { isActive: boolean; isError: boolean; theme: Theme } ) => {

package/src/components/class-manager/sortable.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { GripVerticalIcon } from '@elementor/icons';
 import {
 	Box,
-	Paper,
 	styled,
 	UnstableSortableItem,
 	type UnstableSortableItemProps,
@@ -15,26 +14,23 @@ export const SortableProvider = < T extends string >( props: UnstableSortablePro
 	<UnstableSortableProvider restrictAxis variant="static" dragPlaceholderStyle={ { opacity: '1' } } { ...props } />
 );
 
-const SortableTrigger = ( props: React.HTMLAttributes< HTMLDivElement > ) => (
-	<div { ...props } role="button" className="class-item-sortable-trigger">
+export type SortableTriggerProps = React.HTMLAttributes< HTMLDivElement >;
+
+export const SortableTrigger = ( props: SortableTriggerProps ) => (
+	<StyledSortableTrigger { ...props } role="button" className="class-item-sortable-trigger">
 		<GripVerticalIcon fontSize="tiny" />
-	</div>
+	</StyledSortableTrigger>
 );
 
-type ItemRenderProps = Record< string, unknown > & {
-	isDragged: boolean;
-	showDropIndication: boolean;
-	dropIndicationStyle: React.CSSProperties;
-};
-
 type SortableItemProps = {
 	id: UnstableSortableItemProps[ 'id' ];
-	children: ( props: ItemRenderProps ) => React.ReactNode;
+	children: ( props: Partial< UnstableSortableItemRenderProps > ) => React.ReactNode;
 };
 
-export const SortableItem = ( { children, id }: SortableItemProps ) => {
+export const SortableItem = ( { children, id, ...props }: SortableItemProps ) => {
 	return (
 		<UnstableSortableItem
+			{ ...props }
 			id={ id }
 			render={ ( {
 				itemProps,
@@ -44,47 +40,45 @@ export const SortableItem = ( { children, id }: SortableItemProps ) => {
 				triggerStyle,
 				dropIndicationStyle,
 				showDropIndication,
+				isDragOverlay,
+				isDragPlaceholder,
 			}: UnstableSortableItemRenderProps ) => {
 				return (
-					<StyledSortableItem { ...itemProps } elevation={ 0 } sx={ itemStyle } role="listitem">
-						<SortableTrigger { ...triggerProps } style={ triggerStyle } />
+					<Box
+						{ ...itemProps }
+						style={ itemStyle }
+						component={ 'li' }
+						role="listitem"
+						sx={ {
+							backgroundColor: isDragOverlay ? 'background.paper' : undefined,
+						} }
+					>
 						{ children( {
 							itemProps,
 							isDragged,
 							triggerProps,
 							itemStyle,
 							triggerStyle,
-							dropIndicationStyle,
-							showDropIndication,
+							isDragPlaceholder,
 						} ) }
-					</StyledSortableItem>
+						{ showDropIndication && <SortableItemIndicator style={ dropIndicationStyle } /> }
+					</Box>
 				);
 			} }
 		/>
 	);
 };
 
-const StyledSortableItem = styled( Paper )`
-	position: relative;
-
-	&:hover {
-		& .class-item-sortable-trigger {
-			visibility: visible;
-		}
-	}
-
-	& .class-item-sortable-trigger {
-		visibility: hidden;
-		position: absolute;
-		left: 0;
-		top: 50%;
-		transform: translate( -75%, -50% );
-	}
-`;
+const StyledSortableTrigger = styled( 'div' )( ( { theme } ) => ( {
+	position: 'absolute',
+	left: 0,
+	top: '50%',
+	transform: `translate( -${ theme.spacing( 1.5 ) }, -50% )`,
+	color: theme.palette.action.active,
+} ) );
 
-export const SortableItemIndicator = styled( Box )`
+const SortableItemIndicator = styled( Box )`
 	width: 100%;
-	height: 3px;
-	border-radius: ${ ( { theme } ) => theme.spacing( 0.5 ) };
+	height: 1px;
 	background-color: ${ ( { theme } ) => theme.palette.text.primary };
 `;