@elementor/editor-global-classes 0.21.0 → 0.22.0

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

@@ -0,0 +1,238 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { EXPERIMENTAL_FEATURES } from '@elementor/editor-editing-panel';
+import { validateStyleLabel } from '@elementor/editor-styles-repository';
+import { EditableField, EllipsisWithTooltip, MenuListItem, useEditable, WarningInfotip } from '@elementor/editor-ui';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
+import { DotsVerticalIcon } from '@elementor/icons';
+import {
+	bindMenu,
+	bindTrigger,
+	Box,
+	IconButton,
+	ListItemButton,
+	type ListItemButtonProps,
+	Menu,
+	Stack,
+	styled,
+	type Theme,
+	Tooltip,
+	Typography,
+	usePopupState,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useDeleteConfirmation } from './delete-confirmation-dialog';
+import { SortableTrigger, type SortableTriggerProps } from './sortable';
+
+const isVersion311IsActive = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_31 );
+
+type ClassItemProps = React.PropsWithChildren< {
+	id: string;
+	label: string;
+	renameClass: ( newLabel: string ) => void;
+	selected?: boolean;
+	disabled?: boolean;
+	sortableTriggerProps: SortableTriggerProps;
+	isSearchActive: boolean;
+} >;
+
+export const ClassItem = ( {
+	id,
+	label,
+	renameClass,
+	selected,
+	disabled,
+	sortableTriggerProps,
+	isSearchActive,
+}: ClassItemProps ) => {
+	const itemRef = useRef< HTMLElement >( null );
+
+	const {
+		ref: editableRef,
+		openEditMode,
+		isEditing,
+		error,
+		getProps: getEditableProps,
+	} = useEditable( {
+		value: label,
+		onSubmit: renameClass,
+		validation: validateLabel,
+	} );
+
+	const { openDialog } = useDeleteConfirmation();
+
+	const popupState = usePopupState( {
+		variant: 'popover',
+		disableAutoFocus: true,
+	} );
+
+	const isSelected = ( selected || popupState.isOpen ) && ! disabled;
+	return (
+		<>
+			<Stack p={ 0 }>
+				<WarningInfotip
+					open={ Boolean( error ) }
+					text={ error ?? '' }
+					placement="bottom"
+					width={ itemRef.current?.getBoundingClientRect().width }
+					offset={ [ 0, -15 ] }
+				>
+					<StyledListItemButton
+						ref={ itemRef }
+						dense
+						disableGutters
+						showSortIndicator={ isSearchActive }
+						showActions={ isSelected || isEditing }
+						shape="rounded"
+						onDoubleClick={ openEditMode }
+						selected={ isSelected }
+						disabled={ disabled }
+						focusVisibleClassName="visible-class-item"
+					>
+						<SortableTrigger { ...sortableTriggerProps } />
+						<Indicator isActive={ isEditing } isError={ !! error }>
+							{ isEditing ? (
+								<EditableField
+									ref={ editableRef }
+									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' ) }
+						>
+							<IconButton size="tiny" { ...bindTrigger( popupState ) } aria-label="More actions">
+								<DotsVerticalIcon fontSize="tiny" />
+							</IconButton>
+						</Tooltip>
+					</StyledListItemButton>
+				</WarningInfotip>
+			</Stack>
+			<Menu
+				{ ...bindMenu( popupState ) }
+				anchorOrigin={ {
+					vertical: 'bottom',
+					horizontal: 'right',
+				} }
+				transformOrigin={ {
+					vertical: 'top',
+					horizontal: 'right',
+				} }
+			>
+				<MenuListItem
+					sx={ { minWidth: '160px' } }
+					onClick={ () => {
+						popupState.close();
+						openEditMode();
+					} }
+				>
+					<Typography variant="caption" sx={ { color: 'text.primary' } }>
+						{ __( 'Rename', 'elementor' ) }
+					</Typography>
+				</MenuListItem>
+				<MenuListItem
+					onClick={ () => {
+						popupState.close();
+						openDialog( { id, label } );
+					} }
+				>
+					<Typography variant="caption" sx={ { color: 'error.light' } }>
+						{ __( 'Delete', 'elementor' ) }
+					</Typography>
+				</MenuListItem>
+			</Menu>
+		</>
+	);
+};
+
+// Custom styles for sortable list item, until the component is available in the UI package.
+
+//  Experimental start
+
+const StyledListItemButtonV2 = styled( ListItemButton, {
+	shouldForwardProp: ( prop: string ) => ! [ 'showActions', 'showSortIndicator' ].includes( prop ),
+} )< ListItemButtonProps & { showActions: boolean; showSortIndicator: boolean } >(
+	( { showActions, showSortIndicator } ) =>
+		`
+	min-height: 36px;
+
+	&.visible-class-item {
+		box-shadow: none !important;
+	}
+	.class-item-sortable-trigger {
+		visibility: ${ showSortIndicator && showActions ? 'visible' : 'hidden' };
+	}
+	&:hover&:not(:disabled) {
+		.class-item-sortable-trigger  {
+			visibility: ${ showSortIndicator ? 'visible' : 'hidden' };
+		}
+	}
+`
+);
+
+const StyledListItemButtonV1 = styled( ListItemButton, {
+	shouldForwardProp: ( prop: string ) => ! [ 'showActions', 'showSortIndicator' ].includes( prop ),
+} )< ListItemButtonProps & { showActions: boolean; showSortIndicator: boolean } >(
+	( { showActions } ) => `
+	min-height: 36px;
+	&.visible-class-item {
+		box-shadow: none !important;
+	}
+	.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;
+		}
+	}
+`
+);
+//  Experimental start
+
+const StyledListItemButton = isVersion311IsActive ? StyledListItemButtonV2 : StyledListItemButtonV1;
+
+const Indicator = styled( Box, {
+	shouldForwardProp: ( prop: string ) => ! [ 'isActive', 'isError' ].includes( prop ),
+} )< { isActive: boolean; isError: boolean } >( ( { theme, isActive, isError } ) => ( {
+	display: 'flex',
+	width: '100%',
+	flexGrow: 1,
+	borderRadius: theme.spacing( 0.5 ),
+	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 } ) => {
+	if ( isError ) {
+		return `2px solid ${ theme.palette.error.main }`;
+	}
+
+	if ( isActive ) {
+		return `2px solid ${ theme.palette.secondary.main }`;
+	}
+
+	return 'none';
+};
+
+const validateLabel = ( newLabel: string ) => {
+	const result = validateStyleLabel( newLabel, 'rename' );
+
+	if ( result.isValid ) {
+		return null;
+	}
+
+	return result.errorMessage;
+};

package/src/components/class-manager/class-manager-class-not-found.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Box, Link, Stack, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';
+
+type CssClassNotFoundedProps = {
+	searchValue: string;
+	onClear: () => void;
+};
+
+export const CssClassNotFound = ( { onClear, searchValue }: CssClassNotFoundedProps ) => (
+	<Stack
+		color={ 'text.secondary' }
+		pt={ 5 }
+		alignItems="center"
+		gap={ 1 }
+		overflow={ 'hidden' }
+		maxWidth={ '170px' }
+		justifySelf={ 'center' }
+	>
+		<FlippedColorSwatchIcon color={ 'inherit' } fontSize="large" />
+		<Box>
+			<Typography align="center" variant="subtitle2" color="inherit">
+				{ __( 'Sorry, nothing matched', 'elementor' ) }
+			</Typography>
+			<Typography
+				variant="subtitle2"
+				color="inherit"
+				sx={ {
+					display: 'flex',
+					width: '100%',
+					justifyContent: 'center',
+				} }
+			>
+				<span>&ldquo;</span>
+				<span
+					style={ {
+						maxWidth: '80%',
+						overflow: 'hidden',
+						textOverflow: 'ellipsis',
+					} }
+				>
+					{ searchValue }
+				</span>
+				<span>&rdquo;.</span>
+			</Typography>
+		</Box>
+		<Typography align="center" variant="caption" color="inherit">
+			{ __( 'Try something else.', 'elementor' ) }
+			<Link color="secondary" variant="caption" component="button" onClick={ onClear }>
+				{ __( 'Clear & try again', 'elementor' ) }
+			</Link>
+		</Typography>
+	</Stack>
+);

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

@@ -1,6 +1,7 @@
-import * as React from 'react';
 import { useEffect } from 'react';
+import * as React from 'react';
 import { setDocumentModifiedStatus } from '@elementor/editor-documents';
+import { EXPERIMENTAL_FEATURES } from '@elementor/editor-editing-panel';
 import {
 	__createPanel as createPanel,
 	Panel,
@@ -10,7 +11,7 @@ import {
 	PanelHeaderTitle,
 } from '@elementor/editor-panels';
 import { ThemeProvider } from '@elementor/editor-ui';
-import { changeEditMode } from '@elementor/editor-v1-adapters';
+import { changeEditMode, isExperimentActive } from '@elementor/editor-v1-adapters';
 import { XIcon } from '@elementor/icons';
 import { useMutation } from '@elementor/query';
 import { __dispatch as dispatch } from '@elementor/store';
@@ -19,23 +20,28 @@ import {
 	Box,
 	Button,
 	DialogHeader,
+	Divider,
 	ErrorBoundary,
 	IconButton,
 	type IconButtonProps,
 	Stack,
 } from '@elementor/ui';
+import { useDebounceState } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
 import { useDirtyState } from '../../hooks/use-dirty-state';
 import { saveGlobalClasses } from '../../save-global-classes';
 import { slice } from '../../store';
 import { ClassManagerIntroduction } from './class-manager-introduction';
+import { ClassManagerSearch } from './class-manager-search';
 import { hasDeletedItems, onDelete } from './delete-class';
 import { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';
 import { GlobalClassesList } from './global-classes-list';
 import { blockPanelInteractions, unblockPanelInteractions } from './panel-interactions';
 import { SaveChangesDialog, useDialog } from './save-changes-dialog';
 
+const isVersion311IsActive = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_31 );
+
 const id = 'global-classes-manager';
 
 // We need to disable the app-bar buttons, and the elements overlays when opening the classes manager panel.
@@ -59,6 +65,11 @@ export const { panel, usePanelActions } = createPanel( {
 } );
 
 export function ClassManagerPanel() {
+	const { debouncedValue, inputValue, handleChange } = useDebounceState( {
+		delay: 300,
+		initialValue: '',
+	} );
+
 	const isDirty = useDirtyState();
 
 	const { close: closePanel } = usePanelActions();
@@ -97,9 +108,39 @@ export function ClassManagerPanel() {
 							/>
 						</Stack>
 					</PanelHeader>
-					<PanelBody px={ 2 }>
-						<GlobalClassesList disabled={ isPublishing } />
+					<PanelBody
+						sx={ {
+							display: 'flex',
+							flexDirection: 'column',
+							height: '100%',
+						} }
+					>
+						{ isVersion311IsActive && (
+							<>
+								<ClassManagerSearch searchValue={ inputValue } onChange={ handleChange } />
+								<Divider
+									sx={ {
+										borderWidth: '1px 0 0 0',
+									} }
+								/>
+							</>
+						) }
+
+						<Box
+							px={ 2 }
+							sx={ {
+								flexGrow: 1,
+								overflowY: 'auto',
+							} }
+						>
+							<GlobalClassesList
+								disabled={ isPublishing }
+								searchValue={ debouncedValue }
+								onSearch={ handleChange }
+							/>
+						</Box>
 					</PanelBody>
+
 					<PanelFooter>
 						<Button
 							fullWidth

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { SearchIcon } from '@elementor/icons';
+import { Box, Grid, InputAdornment, Stack, TextField } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+type ClassMangerSearchProps = {
+	searchValue: string;
+	onChange: ( value: string ) => void;
+};
+
+export const ClassManagerSearch = ( { searchValue, onChange }: ClassMangerSearchProps ) => (
+	<Grid item xs={ 6 } px={ 2 } pb={ 1 }>
+		<Stack direction="row" gap={ 0.5 } sx={ { width: '100%' } }>
+			<Box sx={ { flexGrow: 1 } }>
+				<TextField
+					role={ 'search' }
+					fullWidth
+					size={ 'tiny' }
+					value={ searchValue }
+					placeholder={ __( 'Search', 'elementor' ) }
+					onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => onChange( e.target.value ) }
+					InputProps={ {
+						startAdornment: (
+							<InputAdornment position="start">
+								<SearchIcon fontSize={ 'tiny' } />
+							</InputAdornment>
+						),
+					} }
+				/>
+			</Box>
+		</Stack>
+	</Grid>
+);