build(deps): bump @mui/icons-material from 7.3.5 to 9.5.0

package.json

@@ -11,10 +11,10 @@
 		"@emotion/react": "^11.14.0",
 		"@emotion/styled": "^11.14.1",
 		"@minoru/react-dnd-treeview": "^3.5.4",
-		"@mui/icons-material": "^7.3.5",
-		"@mui/lab": "^7.0.0-beta.17",
-		"@mui/material": "^7.0.2",
-		"@mui/system": "^7.0.2",
+		"@mui/icons-material": "^9.5.0",
+		"@mui/lab": "9.0.0-beta.10",
+		"@mui/material": "^9.5.0",
+		"@mui/system": "^9.5.0",
 		"@mui/x-data-grid": "^9.14.0",
 		"@testing-library/jest-dom": "^6.9.1",
 		"@testing-library/react": "^16.3.0",
@@ -33,7 +33,7 @@
 		"jsroot": "^7.10.3",
 		"keycloak-js": "^26.2.1",
 		"ky": "^1.12.0",
-		"material-ui-popup-state": "^5.3.6",
+		"material-ui-popup-state": "^5.3.7",
 		"notistack": "^3.0.2",
 		"object-hash": "^3.0.0",
 		"pyodide": "^0.29.0",

src/App.tsx

@@ -59,6 +59,8 @@ function ServiceTree({ services, children }: { services: ReactElement[]; childre
 	}, children);
 }
 
+const ROVING_KEYS = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'];
+
 function App() {
 	const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
 	const theme = useMemo(
@@ -88,6 +90,32 @@ function App() {
 				dimensions: {
 					navDrawerWidth: 200
 				},
+				components: {
+					MuiToggleButton: {
+						defaultProps: {
+							tabIndex: 0,
+							onKeyDown: event => {
+								if (ROVING_KEYS.includes(event.key)) event.stopPropagation();
+							}
+						}
+					},
+					MuiAutocomplete: {
+						defaultProps: {
+							onMouseDownCapture: event => {
+								const target = event.target;
+
+								if (
+									event.button !== 0 &&
+									target instanceof HTMLInputElement &&
+									target.classList.contains('MuiAutocomplete-input')
+								)
+									target.dispatchEvent(
+										new MouseEvent('mousedown', { bubbles: true, button: 0 })
+									);
+							}
+						}
+					}
+				},
 				cssVariables: true
 			}),
 		[prefersDarkMode]

src/JsRoot/GraphData.tsx

@@ -142,7 +142,9 @@ function Section({ title, children }: SectionProps) {
 		<>
 			<Typography
 				variant='h6'
-				fontWeight='bold'>
+				sx={{
+					fontWeight: 'bold'
+				}}>
 				{title}:
 			</Typography>
 			<Box sx={{ margin: theme.spacing(1) }}>{children}</Box>

src/ThreeEditor/components/Dialog/OpenFileDialog.tsx

@@ -1,4 +1,4 @@
-import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
+import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutlineOutlined';
 import { TabContext, TabPanel } from '@mui/lab';
 import { Box, Button, IconButton, TextField, Tooltip } from '@mui/material';
 import { ChangeEvent, SyntheticEvent, useCallback, useMemo, useState } from 'react';

src/ThreeEditor/components/Editor/EditorToolbar.tsx

@@ -91,7 +91,9 @@ export function EditorToolbar({ editor, sx }: EditorToolbarProps) {
 			{toolButtons.map(({ label, icon, value, disabled }, idx) => (
 				<Box
 					key={idx}
-					mr={1}>
+					sx={{
+						mr: 1
+					}}>
 					<Tooltip title={label}>
 						{tool === value ? (
 							<SelectedButton

src/ThreeEditor/components/Editor/Header/EditorTitlebar.tsx

@@ -52,12 +52,14 @@ export function EditorTitleBar({ sx }: { sx: SxProps }) {
 				}}
 				disableRipple>
 				<Typography
-					sx={{ color: theme.palette.text.primary }}
 					variant='subtitle1'
 					component='div'
 					align='center'
 					role='heading'
-					textTransform='none'>
+					sx={{
+						textTransform: 'none',
+						color: theme.palette.text.primary
+					}}>
 					{title}
 				</Typography>
 				{saving && (

src/ThreeEditor/components/Sidebar/EditorSidebar.tsx

@@ -98,8 +98,11 @@ export function EditorSidebar(props: EditorSidebarProps) {
 					<>
 						{editor.selected && (
 							<Typography
-								fontSize='1rem'
-								sx={{ marginTop: '1rem', marginBottom: '.5rem' }}>
+								sx={{
+									fontSize: '1rem',
+									marginTop: '1rem',
+									marginBottom: '.5rem'
+								}}>
 								Details
 							</Typography>
 						)}
@@ -112,8 +115,10 @@ export function EditorSidebar(props: EditorSidebarProps) {
 					<Stack spacing={2}>
 						<Box>
 							<Typography
-								fontSize='1rem'
-								sx={{ marginBottom: '.5rem' }}>
+								sx={{
+									fontSize: '1rem',
+									marginBottom: '.5rem'
+								}}>
 								Beam
 							</Typography>
 							<PropertiesPanel
@@ -126,8 +131,10 @@ export function EditorSidebar(props: EditorSidebarProps) {
 						{editor.contextManager.currentSimulator === SimulatorType.SHIELDHIT && (
 							<Box>
 								<Typography
-									fontSize='1rem'
-									sx={{ marginBottom: '.5rem' }}>
+									sx={{
+										fontSize: '1rem',
+										marginBottom: '.5rem'
+									}}>
 									Physics
 								</Typography>
 								<PhysicConfiguration

src/ThreeEditor/components/Sidebar/SidebarTreeList/SidebarTreeListItem.tsx

@@ -193,11 +193,11 @@ export function SidebarTreeListItem(props: {
 				<Stack
 					direction='row'
 					onClick={() => editor.selectById(object.id)}
-					width='100%'
+					{...bindContextMenu(popupState)}
 					sx={{
+						width: '100%',
 						cursor: 'pointer'
-					}}
-					{...bindContextMenu(popupState)}>
+					}}>
 					<Typography
 						component={Box}
 						sx={{

src/ThreeEditor/components/Sidebar/properties/category/ObjectMaterial.tsx

@@ -161,8 +161,10 @@ export function ObjectMaterial(props: { editor: YaptideEditor; object: Object3D
 									<Stack
 										direction='row'
 										spacing={1}
-										justifyContent='center'
-										alignItems='center'>
+										sx={{
+											justifyContent: 'center',
+											alignItems: 'center'
+										}}>
 										<Typography>{editorPhysic.stoppingPowerTable}</Typography>
 									</Stack>
 								</ConditionalPropertyField>

src/ThreeEditor/components/Sidebar/properties/category/ScoringQuantityMaterialOverrides.tsx

@@ -133,8 +133,10 @@ export function ScoringQuantityMaterialOverrides(props: {
 							<Stack
 								direction='row'
 								spacing={1}
-								justifyContent='center'
-								alignItems='center'>
+								sx={{
+									justifyContent: 'center',
+									alignItems: 'center'
+								}}>
 								<Typography>{editorPhysic.stoppingPowerTable}</Typography>
 							</Stack>
 						</ConditionalPropertyField>

src/ThreeEditor/components/Sidebar/properties/fields/SourceFileField.tsx

@@ -51,8 +51,10 @@ export function SourceFileDefinitionField(props: {
 
 			<PropertyField>
 				<Stack
-					gap={1}
-					direction='row'>
+					direction='row'
+					sx={{
+						gap: 1
+					}}>
 					<Button
 						sx={{ flexGrow: 1 }}
 						variant='contained'

src/ThreeEditor/components/Sidebar/tabs/EditorSidebarTabTree.tsx

@@ -50,8 +50,10 @@ function EditorSidebarTabTreeElement(props: TreeElement): ReactElement {
 				<Stack
 					direction='row'
 					spacing={1}
-					alignItems='center'
-					sx={{ marginBottom: theme.spacing(1) }}>
+					sx={{
+						alignItems: 'center',
+						marginBottom: theme.spacing(1)
+					}}>
 					{props.add.map(add => (
 						<Button
 							key={add.label}

src/WrapperApp/components/Header/ProjectMenu.test.ts

@@ -63,7 +63,7 @@ describe('Project Menu', () => {
 		const newProjectDialog = await driver.wait(
 			until.elementLocated(
 				By.xpath(
-					`//div[@role = 'dialog' and @aria-labelledby = '${newProjectTitleId}' and @aria-describedby = '${newProjectContentId}']`
+					`//div[(@role = 'dialog' or @role = 'alertdialog') and @aria-labelledby = '${newProjectTitleId}' and @aria-describedby = '${newProjectContentId}']`
 				)
 			),
 			10_000
@@ -91,7 +91,7 @@ describe('Project Menu', () => {
 		const projectDescriptionDialog = await driver.wait(
 			until.elementLocated(
 				By.xpath(
-					`//div[@role = 'dialog' and @aria-labelledby = '${projectDescriptionTitleId}' and @aria-describedby = '${projectDescriptionContentId}']`
+					`//div[(@role = 'dialog' or @role = 'alertdialog') and @aria-labelledby = '${projectDescriptionTitleId}' and @aria-describedby = '${projectDescriptionContentId}']`
 				)
 			),
 			10_000
@@ -140,7 +140,7 @@ describe('Project Menu', () => {
 		const descriptionText = await driver
 			.findElement(
 				By.xpath(
-					`//div[@role = 'dialog' and @aria-labelledby = '${projectDescriptionTitleId}' and @aria-describedby = '${projectDescriptionContentId}']`
+					`//div[(@role = 'dialog' or @role = 'alertdialog') and @aria-labelledby = '${projectDescriptionTitleId}' and @aria-describedby = '${projectDescriptionContentId}']`
 				)
 			)
 			.findElement(

src/WrapperApp/components/Header/SimulationControls.test.ts

@@ -73,7 +73,7 @@ describe('Simulation Controls', () => {
 		const loadFileDialog = await driver.wait(
 			until.elementLocated(
 				By.xpath(
-					`//div[@role = 'dialog' and @aria-labelledby = '${loadFileTitleId}' and @aria-describedby = '${loadFileContentId}']`
+					`//div[(@role = 'dialog' or @role = 'alertdialog') and @aria-labelledby = '${loadFileTitleId}' and @aria-describedby = '${loadFileContentId}']`
 				)
 			),
 			10_000
@@ -153,7 +153,7 @@ describe('Simulation Controls', () => {
 		const loadFileDialog = await driver.wait(
 			until.elementLocated(
 				By.xpath(
-					`//div[@role = 'dialog' and @aria-labelledby = '${alertTitle}' and @aria-describedby = '${alertContent}']`
+					`//div[(@role = 'dialog' or @role = 'alertdialog') and @aria-labelledby = '${alertTitle}' and @aria-describedby = '${alertContent}']`
 				)
 			),
 			10_000
@@ -193,7 +193,7 @@ describe('Simulation Controls', () => {
 		const loadFileDialog = await driver.wait(
 			until.elementLocated(
 				By.xpath(
-					`//div[@role = 'dialog' and @aria-labelledby = '${alertTitle}' and @aria-describedby = '${alertContent}']`
+					`//div[(@role = 'dialog' or @role = 'alertdialog') and @aria-labelledby = '${alertTitle}' and @aria-describedby = '${alertContent}']`
 				)
 			),
 			10_000
@@ -234,7 +234,7 @@ describe('Simulation Controls', () => {
 		const loadFileDialog = await driver.wait(
 			until.elementLocated(
 				By.xpath(
-					`//div[@role = 'dialog' and @aria-labelledby = '${alertTitle}' and @aria-describedby = '${alertContent}']`
+					`//div[(@role = 'dialog' or @role = 'alertdialog') and @aria-labelledby = '${alertTitle}' and @aria-describedby = '${alertContent}']`
 				)
 			),
 			10_000

src/WrapperApp/components/Header/SimulatorControls.tsx

@@ -52,10 +52,18 @@ function SimulatorSelectItem({ simulator, onClick }: SimulationSelectItemProps)
 			sx={{ '&:hover': { borderRadius: 1 } }}>
 			<ListItemText
 				primary={
-					<Typography fontSize={14}>{SimulatorsDescriptions[simulator].name}</Typography>
+					<Typography
+						sx={{
+							fontSize: 14
+						}}>
+						{SimulatorsDescriptions[simulator].name}
+					</Typography>
 				}
 				secondary={
-					<Typography fontSize={10}>
+					<Typography
+						sx={{
+							fontSize: 10
+						}}>
 						{SimulatorsDescriptions[simulator].description}
 					</Typography>
 				}
@@ -108,8 +116,10 @@ export default function SimulatorControls(props: SimulationControlsProps) {
 		<>
 			<Typography
 				id='simulator-controls-status'
-				color={simulatorReady ? 'primary' : theme.palette.grey['600']}
-				sx={{ userSelect: 'none' }}>
+				sx={{
+					userSelect: 'none',
+					color: simulatorReady ? 'primary.main' : theme.palette.grey['600']
+				}}>
 				{simulatorReady
 					? 'Connected'
 					: demoMode
@@ -130,9 +140,11 @@ export default function SimulatorControls(props: SimulationControlsProps) {
 				<ExpandMoreIcon />
 				{yaptideEditor ? (
 					<Typography
-						textTransform='none'
-						fontSize={14}
-						sx={{ width: '100%' }}>
+						sx={{
+							textTransform: 'none',
+							fontSize: 14,
+							width: '100%'
+						}}>
 						{SimulatorsDescriptions[yaptideEditor.contextManager.currentSimulator].name}
 					</Typography>
 				) : (

src/WrapperApp/components/InputEditor/InputFilesEditor.tsx

@@ -181,8 +181,8 @@ export function InputFilesEditor(props: InputFilesEditorProps) {
 									)}
 									{isLargeFile && (
 										<Box
-											color='error.main'
 											sx={{
+												color: 'error.main',
 												ml: 1,
 												display: 'inline-flex',
 												fontSize: 'initial'

src/WrapperApp/components/Results/Results3D.tsx

@@ -18,12 +18,16 @@ export function Result3D(props: { page: Page3D; title?: string }) {
 				}}>
 				<Stack
 					direction={'row'}
-					gap='1rem'
-					alignItems={'center'}>
+					sx={{
+						gap: '1rem',
+						alignItems: 'center'
+					}}>
 					<Typography variant='h6'>Url on server: </Typography>
 					<Typography
 						variant='h6'
-						fontWeight={'bold'}>
+						sx={{
+							fontWeight: 'bold'
+						}}>
 						{page.resultsUrl}
 					</Typography>
 					<CopyToClipboard text={page.resultsUrl}>

src/WrapperApp/components/Results/ResultsPanel.tsx

@@ -118,7 +118,9 @@ function ResultsPanel(props: { simulation: FullSimulationData | undefined }) {
 							gutterBottom
 							variant='h5'
 							component='div'
-							lineHeight={2}>
+							sx={{
+								lineHeight: 2
+							}}>
 							{title}
 						</Typography>
 						<Divider />

src/WrapperApp/components/Results/ResultsTable.tsx

@@ -106,8 +106,10 @@ export default function TablePage0D(props: { estimator: EstimatorResults }) {
 			<Stack
 				direction='row'
 				spacing={1}
-				alignItems='center'
-				sx={{ marginLeft: '.5rem' }}>
+				sx={{
+					alignItems: 'center',
+					marginLeft: '.5rem'
+				}}>
 				<Typography>Unit: Auto</Typography>
 				<Switch
 					checked={isUnitFixed}