@elementor/editor-controls 4.4.0-1094 → 4.4.0-1096

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "4.4.0-1094",
+  "version": "4.4.0-1096",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,24 +40,25 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.4.0-1094",
-    "@elementor/editor-elements": "4.4.0-1094",
-    "@elementor/editor-props": "4.4.0-1094",
-    "@elementor/editor-responsive": "4.4.0-1094",
-    "@elementor/editor-ui": "4.4.0-1094",
-    "@elementor/editor-v1-adapters": "4.4.0-1094",
-    "@elementor/env": "4.4.0-1094",
-    "@elementor/events": "4.4.0-1094",
-    "@elementor/http-client": "4.4.0-1094",
+    "@elementor/editor-current-user": "4.4.0-1096",
+    "@elementor/editor-elements": "4.4.0-1096",
+    "@elementor/editor-props": "4.4.0-1096",
+    "@elementor/editor-responsive": "4.4.0-1096",
+    "@elementor/editor-ui": "4.4.0-1096",
+    "@elementor/editor-v1-adapters": "4.4.0-1096",
+    "@elementor/env": "4.4.0-1096",
+    "@elementor/events": "4.4.0-1096",
+    "@elementor/http-client": "4.4.0-1096",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.4.0-1094",
-    "@elementor/query": "4.4.0-1094",
-    "@elementor/schema": "4.4.0-1094",
-    "@elementor/session": "4.4.0-1094",
+    "@elementor/locations": "4.4.0-1096",
+    "@elementor/query": "4.4.0-1096",
+    "@elementor/schema": "4.4.0-1096",
+    "@elementor/session": "4.4.0-1096",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.4.0-1094",
-    "@elementor/wp-media": "4.4.0-1094",
+    "@elementor/utils": "4.4.0-1096",
+    "@elementor/wp-media": "4.4.0-1096",
     "@monaco-editor/react": "^4.7.0",
+    "@tanstack/react-virtual": "^3.13.3",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",
     "@tiptap/extension-hard-break": "^3.11.1",

package/src/controls/icon-library/icon-library-filter.tsx

@@ -20,6 +20,7 @@ import {
 	type FontAwesome7Library,
 	type FontAwesome7LibraryFilter,
 } from './font-awesome-7-catalog';
+import { ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY } from './icon-library-tooltip';
 
 const FILTER_MENU_WIDTH = 280;
 const FILTER_INDICATOR_SIZE = 6;
@@ -87,7 +88,13 @@ export const IconLibraryFilter = ( { value, onChange }: IconLibraryFilterProps )
 
 	return (
 		<>
-			<Tooltip title={ __( 'Filter by library', 'elementor' ) } placement="top">
+			<Tooltip
+				title={ __( 'Filter by library', 'elementor' ) }
+				placement="top"
+				enterDelay={ ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY }
+				enterNextDelay={ ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY }
+				disableInteractive
+			>
 				<ToggleButton
 					aria-label={ filterButtonLabel }
 					value="filter"
@@ -154,6 +161,6 @@ const renderFilterMenuItemContent = ( label: string, Icon: typeof ListIcon, sele
 		<Typography variant="caption" sx={ { flex: 1 } }>
 			{ label }
 		</Typography>
-		{ selected ? <CheckIcon fontSize="tiny" /> : null }
+		{ selected ? <CheckIcon fontSize="tiny" aria-hidden="true" /> : null }
 	</Stack>
 );

package/src/controls/icon-library/icon-library-grid.tsx

@@ -0,0 +1,344 @@
+import * as React from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
+import { Box, Tooltip, useTheme } from '@elementor/ui';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { __ } from '@wordpress/i18n';
+
+import { type FontAwesome7Icon } from './font-awesome-7-catalog';
+import { FontAwesomeGlyph } from './font-awesome-glyph';
+
+export const ICON_LIBRARY_GRID_FALLBACK_COLUMN_COUNT = 4;
+export const ICON_LIBRARY_GRID_MIN_CELL_SIZE = 52;
+export const ICON_LIBRARY_GRID_TOOLTIP_ENTER_DELAY = 1000;
+
+const ICON_GLYPH_SIZE = 20;
+const GRID_OVERSCAN = 6;
+const GRID_COLUMN_GAP = 1;
+const GRID_HORIZONTAL_PADDING = 1;
+const HOME_END_KEYS = new Set( [ 'Home', 'End' ] );
+
+const getGridMetrics = ( containerWidth: number, columnGap: number, inlinePadding: number ) => {
+	const availableWidth = containerWidth - inlinePadding;
+
+	if ( availableWidth <= 0 ) {
+		return {
+			columnCount: ICON_LIBRARY_GRID_FALLBACK_COLUMN_COUNT,
+			cellSize: ICON_LIBRARY_GRID_MIN_CELL_SIZE,
+		};
+	}
+
+	const columnCount = Math.max(
+		1,
+		Math.floor( ( availableWidth + columnGap ) / ( ICON_LIBRARY_GRID_MIN_CELL_SIZE + columnGap ) )
+	);
+	const cellSize = Math.floor( ( availableWidth - columnGap * ( columnCount - 1 ) ) / columnCount );
+
+	return {
+		columnCount,
+		cellSize: Math.max( cellSize, 1 ),
+	};
+};
+
+type IconLibraryGridItem = FontAwesome7Icon & {
+	id: string;
+	value: string;
+};
+
+type IconLibraryGridProps = {
+	items: IconLibraryGridItem[];
+	selectedValue?: string;
+	onSelect: ( id: string ) => void;
+	onClose: () => void;
+	noResultsComponent?: React.ReactNode;
+};
+
+export const IconLibraryGrid = ( {
+	items,
+	selectedValue,
+	onSelect,
+	onClose,
+	noResultsComponent,
+}: IconLibraryGridProps ) => {
+	const theme = useTheme();
+	const containerRef = useRef< HTMLDivElement >( null );
+	const cellRefs = useRef( new Map< string, HTMLButtonElement >() );
+	const shouldRestoreFocusRef = useRef( false );
+	const selectedIndex = items.findIndex( ( item ) => item.id === selectedValue );
+	const [ focusedIndex, setFocusedIndex ] = useState( selectedIndex >= 0 ? selectedIndex : 0 );
+	const [ { columnCount, cellSize }, setGridMetrics ] = useState( () => getGridMetrics( 0, 0, 0 ) );
+	const rowCount = Math.ceil( items.length / columnCount );
+	const virtualizer = useVirtualizer( {
+		count: rowCount,
+		getScrollElement: () => containerRef.current,
+		estimateSize: () => cellSize,
+		overscan: GRID_OVERSCAN,
+	} );
+	const focusedItem = items[ focusedIndex ];
+	const visibleRowIndexes = virtualizer.getVirtualIndexes().join( ',' );
+
+	useLayoutEffect( () => {
+		setFocusedIndex( ( current ) => {
+			if ( items.length === 0 ) {
+				return 0;
+			}
+
+			if ( selectedIndex >= 0 ) {
+				return selectedIndex;
+			}
+
+			return Math.min( current, items.length - 1 );
+		} );
+
+		if ( selectedIndex >= 0 ) {
+			virtualizer.scrollToIndex( Math.floor( selectedIndex / columnCount ) );
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ columnCount, items, selectedIndex, selectedValue ] );
+
+	useLayoutEffect( () => {
+		if ( ! shouldRestoreFocusRef.current || ! focusedItem ) {
+			return;
+		}
+
+		const cell = cellRefs.current.get( focusedItem.id );
+
+		if ( ! cell ) {
+			return;
+		}
+
+		cell.focus();
+		shouldRestoreFocusRef.current = false;
+	}, [ focusedItem, visibleRowIndexes ] );
+
+	useLayoutEffect( () => {
+		const container = containerRef.current;
+
+		if ( ! container ) {
+			return;
+		}
+
+		const measureGrid = () => {
+			const columnGap = Number.parseFloat( theme.spacing( GRID_COLUMN_GAP ) );
+			const inlinePadding = Number.parseFloat( theme.spacing( GRID_HORIZONTAL_PADDING ) ) * 2;
+			setGridMetrics( getGridMetrics( container.clientWidth, columnGap, inlinePadding ) );
+		};
+
+		measureGrid();
+		const resizeObserver = new ResizeObserver( measureGrid );
+		resizeObserver.observe( container );
+
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [ theme, items.length ] );
+
+	useLayoutEffect( () => {
+		virtualizer.measure();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ cellSize, columnCount ] );
+
+	const isRtl = theme.direction === 'rtl' || document.documentElement.dir === 'rtl';
+	const horizontalOffset = isRtl ? -1 : 1;
+
+	const moveFocus = ( nextIndex: number ) => {
+		if ( nextIndex < 0 || nextIndex >= items.length ) {
+			return;
+		}
+
+		shouldRestoreFocusRef.current = true;
+		setFocusedIndex( nextIndex );
+		virtualizer.scrollToIndex( Math.floor( nextIndex / columnCount ) );
+	};
+
+	const handleKeyDown = ( event: React.KeyboardEvent< HTMLButtonElement >, index: number ) => {
+		if ( event.key === 'Enter' || event.key === ' ' ) {
+			event.preventDefault();
+			onSelect( items[ index ].id );
+			onClose();
+			return;
+		}
+
+		if ( event.key === 'ArrowRight' ) {
+			event.preventDefault();
+			moveFocus( index + horizontalOffset );
+			return;
+		}
+
+		if ( event.key === 'ArrowLeft' ) {
+			event.preventDefault();
+			moveFocus( index - horizontalOffset );
+			return;
+		}
+
+		if ( event.key === 'ArrowDown' ) {
+			event.preventDefault();
+			moveFocus( index + columnCount );
+			return;
+		}
+
+		if ( event.key === 'ArrowUp' ) {
+			event.preventDefault();
+			moveFocus( index - columnCount );
+			return;
+		}
+
+		if ( HOME_END_KEYS.has( event.key ) ) {
+			event.preventDefault();
+
+			if ( event.ctrlKey ) {
+				moveFocus( event.key === 'Home' ? 0 : items.length - 1 );
+				return;
+			}
+
+			const rowStart = Math.floor( index / columnCount ) * columnCount;
+			const rowEnd = Math.min( rowStart + columnCount - 1, items.length - 1 );
+
+			moveFocus( event.key === 'Home' ? rowStart : rowEnd );
+		}
+	};
+
+	return (
+		<Box
+			ref={ containerRef }
+			sx={ {
+				width: '100%',
+				height: '100%',
+				minWidth: 0,
+				overflowX: 'hidden',
+				overflowY: 'auto',
+			} }
+		>
+			{ items.length === 0 && noResultsComponent ? (
+				noResultsComponent
+			) : (
+				<Box
+					role="grid"
+					aria-label={ __( 'Icons', 'elementor' ) }
+					aria-rowcount={ rowCount }
+					aria-colcount={ columnCount }
+					data-testid="icon-library-grid"
+					sx={ {
+						width: '100%',
+						minWidth: 0,
+						height: virtualizer.getTotalSize(),
+						position: 'relative',
+					} }
+				>
+					{ virtualizer.getVirtualItems().map( ( virtualRow ) => {
+						const startIndex = virtualRow.index * columnCount;
+						const rowItems = items.slice( startIndex, startIndex + columnCount );
+
+						return (
+							<Box
+								key={ virtualRow.key }
+								role="row"
+								aria-rowindex={ virtualRow.index + 1 }
+								sx={ {
+									position: 'absolute',
+									top: 0,
+									left: 0,
+									width: '100%',
+									height: virtualRow.size,
+									transform: `translateY(${ virtualRow.start }px)`,
+									display: 'grid',
+									gridTemplateColumns: `repeat(${ columnCount }, minmax(0, 1fr))`,
+									gap: GRID_COLUMN_GAP,
+									px: GRID_HORIZONTAL_PADDING,
+									boxSizing: 'border-box',
+								} }
+							>
+								{ rowItems.map( ( item, columnIndex ) => {
+									const index = startIndex + columnIndex;
+									const isSelected = selectedValue === item.id;
+									const tabIndex = focusedIndex === index ? 0 : -1;
+
+									return (
+										<Box
+											key={ item.id }
+											role="presentation"
+											sx={ { minWidth: 0, minHeight: 0, width: '100%', height: '100%' } }
+										>
+											<Tooltip
+												title={ item.label }
+												placement="top"
+												enterDelay={ ICON_LIBRARY_GRID_TOOLTIP_ENTER_DELAY }
+												enterNextDelay={ ICON_LIBRARY_GRID_TOOLTIP_ENTER_DELAY }
+												disableInteractive
+												disableFocusListener
+											>
+												<Box
+													component="button"
+													type="button"
+													role="gridcell"
+													aria-colindex={ columnIndex + 1 }
+													aria-label={ item.label }
+													aria-selected={ isSelected }
+													tabIndex={ tabIndex }
+													ref={ ( node: HTMLButtonElement | null ) => {
+														if ( node ) {
+															cellRefs.current.set( item.id, node );
+														} else {
+															cellRefs.current.delete( item.id );
+														}
+													} }
+													onClick={ () => {
+														onSelect( item.id );
+														onClose();
+													} }
+													onFocus={ () => setFocusedIndex( index ) }
+													onKeyDown={ ( event: React.KeyboardEvent< HTMLButtonElement > ) =>
+														handleKeyDown( event, index )
+													}
+													sx={ {
+														boxSizing: 'border-box',
+														appearance: 'none',
+														m: 0,
+														width: '100%',
+														height: '100%',
+														minWidth: 0,
+														minHeight: 0,
+														display: 'flex',
+														alignItems: 'center',
+														justifyContent: 'center',
+														border: '1px solid',
+														borderColor: 'divider',
+														borderRadius: 1,
+														color: 'text.tertiary',
+														bgcolor: 'transparent',
+														p: 0,
+														cursor: 'pointer',
+														font: 'inherit',
+														lineHeight: 0,
+														overflow: 'hidden',
+														'&:hover, &:focus': {
+															bgcolor: 'action.hover',
+														},
+														'&[aria-selected="true"]': {
+															bgcolor: 'action.selected',
+														},
+														'&[aria-selected="true"]:hover, &[aria-selected="true"]:focus':
+															{
+																bgcolor: 'action.selected',
+															},
+													} }
+												>
+													{ item.paths.length > 0 ? (
+														<FontAwesomeGlyph
+															icon={ item }
+															size={ ICON_GLYPH_SIZE }
+															color="currentColor"
+														/>
+													) : null }
+												</Box>
+											</Tooltip>
+										</Box>
+									);
+								} ) }
+							</Box>
+						);
+					} ) }
+				</Box>
+			) }
+		</Box>
+	);
+};

package/src/controls/icon-library/icon-library-popover.tsx

@@ -9,6 +9,7 @@ import {
 	type VirtualizedItem,
 } from '@elementor/editor-ui';
 import { ComponentsIcon } from '@elementor/icons';
+import { useSessionStorage } from '@elementor/session';
 import { Box, CircularProgress, Divider, Link, Stack, styled, Typography } from '@elementor/ui';
 import { useDebounceState } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
@@ -22,11 +23,20 @@ import {
 } from './font-awesome-7-catalog';
 import { FontAwesomeGlyph } from './font-awesome-glyph';
 import { IconLibraryFilter } from './icon-library-filter';
+import { IconLibraryGrid } from './icon-library-grid';
+import { type IconLibraryView, IconLibraryViewToggle } from './icon-library-view-toggle';
 import { useFontAwesome7Catalog } from './use-font-awesome-7-catalog';
 
 export const ICON_LIBRARY_POPOVER_WIDTH = 300;
 export const ICON_LIBRARY_ROW_HEIGHT = 48;
 export const ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY = 300;
+export const ICON_LIBRARY_VIEW_STORAGE_KEY = 'icon-library-view';
+export const ICON_LIBRARY_VIEW_STORAGE_PREFIX = 'editor-controls';
+const DEFAULT_ICON_LIBRARY_VIEW: IconLibraryView = 'list';
+
+const isIconLibraryView = ( value: unknown ): value is IconLibraryView => {
+	return value === 'grid' || value === 'list';
+};
 const ICON_TILE_SIZE = 40;
 const ICON_GLYPH_SIZE = 20;
 const ICON_LIBRARY_INLINE_SPACING = 1;
@@ -63,6 +73,11 @@ export const IconLibraryPopover = ( {
 		setImmediateValue: setSearchValue,
 	} = useDebounceState( { delay: ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY } );
 	const [ activeLibraries, setActiveLibraries ] = useState< FontAwesome7LibraryFilter >( [] );
+	const [ storedView, setStoredView ] = useSessionStorage< IconLibraryView >(
+		ICON_LIBRARY_VIEW_STORAGE_KEY,
+		ICON_LIBRARY_VIEW_STORAGE_PREFIX
+	);
+	const view = isIconLibraryView( storedView ) ? storedView : DEFAULT_ICON_LIBRARY_VIEW;
 	const { data: icons = [], isLoading } = useFontAwesome7Catalog( open );
 
 	const items = useMemo(
@@ -103,6 +118,7 @@ export const IconLibraryPopover = ( {
 				title={ __( 'Icon library', 'elementor' ) }
 				onClose={ handleClose }
 				icon={ <ComponentsIcon fontSize="tiny" /> }
+				actions={ [ <IconLibraryViewToggle key="view" value={ view } onChange={ setStoredView } /> ] }
 				sx={ { pl: ICON_LIBRARY_INLINE_SPACING, pr: 0.5 } }
 			/>
 			<Stack direction="row" alignItems="center" gap={ 1 } sx={ { px: ICON_LIBRARY_INLINE_SPACING, pb: 1 } }>
@@ -116,13 +132,14 @@ export const IconLibraryPopover = ( {
 				<IconLibraryFilter value={ activeLibraries } onChange={ setActiveLibraries } />
 			</Stack>
 			<Divider />
-			<Box sx={ { flex: 1, overflow: 'auto', minHeight: 0 } }>
+			<Box sx={ { flex: 1, overflow: 'hidden', minHeight: 0, minWidth: 0 } }>
 				<IconLibraryContent
 					isLoading={ isLoading }
 					items={ items }
 					selectedValue={ selectedValue }
 					searchValue={ searchValue }
 					isCatalogAvailable={ icons.length > 0 }
+					view={ view }
 					onSelect={ handleSelect }
 					onClose={ handleClose }
 					onClearSearch={ handleClearSearch }
@@ -138,6 +155,7 @@ type IconLibraryContentProps = {
 	selectedValue: string | undefined;
 	searchValue: string;
 	isCatalogAvailable: boolean;
+	view: IconLibraryView;
 	onSelect: ( id: string ) => void;
 	onClose: () => void;
 	onClearSearch: () => void;
@@ -149,6 +167,7 @@ const IconLibraryContent = ( {
 	selectedValue,
 	searchValue,
 	isCatalogAvailable,
+	view,
 	onSelect,
 	onClose,
 	onClearSearch,
@@ -157,6 +176,28 @@ const IconLibraryContent = ( {
 		return <IconLibraryLoadingState />;
 	}
 
+	const emptyState = (
+		<IconLibraryEmptyState
+			searchValue={ searchValue }
+			isCatalogAvailable={ isCatalogAvailable }
+			onClear={ onClearSearch }
+		/>
+	);
+
+	if ( view === 'grid' ) {
+		return (
+			<Box sx={ { width: '100%', height: '100%', minWidth: 0, minHeight: 0 } }>
+				<IconLibraryGrid
+					items={ items }
+					selectedValue={ selectedValue }
+					onSelect={ onSelect }
+					onClose={ onClose }
+					noResultsComponent={ emptyState }
+				/>
+			</Box>
+		);
+	}
+
 	return (
 		<PopoverMenuList
 			items={ items }
@@ -166,13 +207,7 @@ const IconLibraryContent = ( {
 			onClose={ onClose }
 			itemHeight={ ICON_LIBRARY_ROW_HEIGHT }
 			menuItemContentTemplate={ IconLibraryRow }
-			noResultsComponent={
-				<IconLibraryEmptyState
-					searchValue={ searchValue }
-					isCatalogAvailable={ isCatalogAvailable }
-					onClear={ onClearSearch }
-				/>
-			}
+			noResultsComponent={ emptyState }
 			data-testid="icon-library-list"
 		/>
 	);

package/src/controls/icon-library/icon-library-tooltip.ts

@@ -0,0 +1 @@
+export const ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY = 0;

package/src/controls/icon-library/icon-library-view-toggle.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { useId } from 'react';
+import { CheckIcon, ListIcon, WidgetsIcon } from '@elementor/icons';
+import {
+	bindMenu,
+	bindToggle,
+	Menu,
+	MenuItem,
+	Stack,
+	ToggleButton,
+	Tooltip,
+	Typography,
+	usePopupState,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY } from './icon-library-tooltip';
+
+export type IconLibraryView = 'grid' | 'list';
+
+const VIEW_MENU_WIDTH = 122;
+
+type IconLibraryViewToggleProps = {
+	value: IconLibraryView;
+	onChange: ( value: IconLibraryView ) => void;
+};
+
+export const IconLibraryViewToggle = ( { value, onChange }: IconLibraryViewToggleProps ) => {
+	const popupId = useId();
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId,
+	} );
+	const isGrid = value === 'grid';
+	const ViewIcon = isGrid ? WidgetsIcon : ListIcon;
+	const viewButtonLabel = isGrid ? __( 'Grid view', 'elementor' ) : __( 'List view', 'elementor' );
+
+	return (
+		<>
+			<Tooltip
+				title={ viewButtonLabel }
+				placement="top"
+				enterDelay={ ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY }
+				enterNextDelay={ ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY }
+				disableInteractive
+			>
+				<ToggleButton
+					aria-label={ viewButtonLabel }
+					value="view"
+					size="tiny"
+					selected={ popupState.isOpen }
+					sx={ { flexShrink: 0 } }
+					{ ...bindToggle( popupState ) }
+					aria-expanded={ popupState.isOpen }
+				>
+					<ViewIcon fontSize="tiny" />
+				</ToggleButton>
+			</Tooltip>
+			<Menu
+				{ ...bindMenu( popupState ) }
+				MenuListProps={ {
+					dense: true,
+					autoFocusItem: true,
+					'aria-label': __( 'View', 'elementor' ),
+				} }
+				sx={ { '& .MuiPaper-root': { minWidth: VIEW_MENU_WIDTH } } }
+			>
+				<ViewMenuItem
+					label={ __( 'List', 'elementor' ) }
+					selected={ value === 'list' }
+					onClick={ () => {
+						onChange( 'list' );
+						popupState.close();
+					} }
+				/>
+				<ViewMenuItem
+					label={ __( 'Grid', 'elementor' ) }
+					selected={ value === 'grid' }
+					onClick={ () => {
+						onChange( 'grid' );
+						popupState.close();
+					} }
+				/>
+			</Menu>
+		</>
+	);
+};
+
+type ViewMenuItemProps = {
+	label: string;
+	selected: boolean;
+	onClick: () => void;
+};
+
+const ViewMenuItem = ( { label, selected, onClick }: ViewMenuItemProps ) => (
+	<MenuItem role="menuitemradio" aria-checked={ selected } selected={ selected } onClick={ onClick }>
+		<Stack direction="row" alignItems="center" gap={ 1 } width="100%">
+			<Typography variant="caption" sx={ { flex: 1 } }>
+				{ label }
+			</Typography>
+			{ selected ? <CheckIcon fontSize="tiny" aria-hidden="true" /> : null }
+		</Stack>
+	</MenuItem>
+);