⬆️ deps: Upgrade @mui/x-date-pickers to v6.

Fixes #752.
Had to upgrade react monorepo.
Had to apply workaround found at
testing-library/react-testing-library#1248 (comment).

imports/api/publication/useTracker.ts

@@ -51,24 +51,27 @@ const useTrackerClientImpl = <T = any>(
 ): T => {
 	const [iteration, forceUpdate] = useUniqueObject();
 
-	const data = useMemo(() => {
-		let data: T = shouldNeverBeReturned as T;
-
-		// Use Tracker.nonreactive in case we are inside a Tracker Computation.
-		// This can happen if someone calls `ReactDOM.render` inside a Computation.
-		// In that case, we want to opt out of the normal behavior of nested
-		// Computations, where if the outer one is invalidated or stopped,
-		// it stops the inner one.
-
-		Tracker.nonreactive(() =>
-			Tracker.autorun((c: Tracker.Computation) => {
-				assert(c.firstRun);
-				data = reactiveFn(c);
-			}),
-		).stop();
-
-		return data;
-	}, deps && [iteration, ...deps]);
+	const data = useMemo(
+		() => {
+			let data: T = shouldNeverBeReturned as T;
+
+			// Use Tracker.nonreactive in case we are inside a Tracker Computation.
+			// This can happen if someone calls `ReactDOM.render` inside a Computation.
+			// In that case, we want to opt out of the normal behavior of nested
+			// Computations, where if the outer one is invalidated or stopped,
+			// it stops the inner one.
+
+			Tracker.nonreactive(() =>
+				Tracker.autorun((c: Tracker.Computation) => {
+					assert(c.firstRun);
+					data = reactiveFn(c);
+				}),
+			).stop();
+
+			return data;
+		},
+		deps === undefined ? [] : [iteration, ...deps],
+	);
 
 	useEffect(() => {
 		let prevData = data;

imports/i18n/datetime.ts

@@ -1,5 +1,7 @@
 import {useState, useMemo, useEffect} from 'react';
 
+import {type PickersLocaleText} from '@mui/x-date-pickers';
+
 import dateFormat from 'date-fns/format';
 import dateFormatDistance from 'date-fns/formatDistance';
 import dateFormatDistanceStrict from 'date-fns/formatDistanceStrict';
@@ -28,76 +30,169 @@ const localeLoaders: Readonly<Record<string, () => Promise<Locale>>> = {
 	'fr-BE': async () => import('date-fns/locale/fr/index.js') as Promise<Locale>,
 };
 
-const loadLocale = async (key: string): Promise<Locale | undefined> =>
-	localeLoaders[key]?.();
+type LocaleText = Partial<PickersLocaleText<any>>;
 
-export const dateMaskMap = {
-	'en-US': '__/__/____',
-	'nl-BE': '__.__.____',
-	'fr-BE': '__/__/____',
+type PickersLocalization = {
+	components: {
+		MuiLocalizationProvider: {
+			defaultProps: {
+				localeText: LocaleText;
+			};
+		};
+	};
 };
 
-export const dateTimeMaskMap = {
-	'en-US': `${dateMaskMap['en-US']} __:__ _M`,
-	'nl-BE': `${dateMaskMap['nl-BE']} __:__`,
-	'fr-BE': `${dateMaskMap['fr-BE']} __:__`,
+const pickersLocalizationLoaders: Readonly<
+	Record<string, () => Promise<PickersLocalization>>
+> = {
+	async 'nl-BE'() {
+		const module = await import('@mui/x-date-pickers/locales/nlNL.js');
+		return module.nlNL;
+	},
+	async 'fr-BE'() {
+		const module = await import('@mui/x-date-pickers/locales/frFR.js');
+		return module.frFR;
+	},
 };
 
+const loadLocale = async (key: string): Promise<Locale | undefined> =>
+	localeLoaders[key]?.();
+
+const loadPickersLocalization = async (
+	key: string,
+): Promise<PickersLocalization | undefined> =>
+	pickersLocalizationLoaders[key]?.();
+
+type Cache<T> = Map<string, T>;
+
 const localesCache = new Map<string, Locale | undefined>();
 
-const getLocale = async (owner: string): Promise<Locale | undefined> => {
-	const key = getSetting(owner, 'lang');
-	if (localesCache.has(key)) {
-		return localesCache.get(key);
+const pickersLocalizationsCache = new Map<
+	string,
+	PickersLocalization | undefined
+>();
+
+const _load = async <T>(
+	kind: string,
+	cache: Cache<T>,
+	load: (key: string) => Promise<T>,
+	key: string,
+): Promise<T | undefined> => {
+	if (cache.has(key)) {
+		return cache.get(key);
 	}
 
-	return loadLocale(key).then(
-		(loadedLocale) => {
-			localesCache.set(key, loadedLocale);
-			return loadedLocale;
+	return load(key).then(
+		(value) => {
+			cache.set(key, value);
+			return value;
 		},
 		(error) => {
 			const message = error instanceof Error ? error.message : 'unknown error';
-			console.error(`failed to load locale ${key}: ${message}`);
+			console.error(`failed to load ${kind} ${key}: ${message}`);
 			console.debug({error});
 			return undefined;
 		},
 	);
 };
 
-export const useLocale = () => {
-	const key = useLocaleKey();
-	const [lastLoadedLocale, setLastLoadedLocale] = useState<Locale | undefined>(
+const _getLocale = async (key: string): Promise<Locale | undefined> => {
+	return _load<Locale | undefined>('locale', localesCache, loadLocale, key);
+};
+
+const getLocale = async (owner: string): Promise<Locale | undefined> => {
+	const key = getSetting(owner, 'lang');
+	return _getLocale(key);
+};
+
+const _getPickersLocalization = async (
+	key: string,
+): Promise<PickersLocalization | undefined> => {
+	return _load<PickersLocalization | undefined>(
+		'pickers localization',
+		pickersLocalizationsCache,
+		loadPickersLocalization,
+		key,
+	);
+};
+
+const _pickersLocalizationToLocaleText = (
+	localization: PickersLocalization | undefined,
+) => {
+	return localization?.components.MuiLocalizationProvider.defaultProps
+		.localeText;
+};
+
+export const getLocaleText = async (
+	owner: string,
+): Promise<LocaleText | undefined> => {
+	const key = getSetting(owner, 'lang');
+	const localization = await _getPickersLocalization(key);
+	return _pickersLocalizationToLocaleText(localization);
+};
+
+const useLoadedValue = <T>(
+	kind: string,
+	cache: Cache<T>,
+	load: (key: string) => Promise<T>,
+	key: string,
+): T | undefined => {
+	const [lastLoadedValue, setLastLoadedValue] = useState<T | undefined>(
 		undefined,
 	);
 
 	useEffect(() => {
-		if (localesCache.has(key)) {
-			setLastLoadedLocale(localesCache.get(key));
+		if (cache.has(key)) {
+			setLastLoadedValue(cache.get(key));
 			return undefined;
 		}
 
 		let isCancelled = false;
-		loadLocale(key).then(
-			(loadedLocale) => {
-				localesCache.set(key, loadedLocale);
+		load(key).then(
+			(value) => {
+				cache.set(key, value);
 				if (!isCancelled) {
-					setLastLoadedLocale(loadedLocale);
+					setLastLoadedValue(value);
 				}
 			},
 			(error) => {
 				const message =
 					error instanceof Error ? error.message : 'unknown error';
-				console.error(`failed to load locale ${key}: ${message}`);
+				console.error(`failed to load ${kind} ${key}: ${message}`);
 				console.debug({error});
 			},
 		);
 		return () => {
 			isCancelled = true;
 		};
-	}, [key, setLastLoadedLocale]);
+	}, [key, setLastLoadedValue]);
+
+	return cache.has(key) ? cache.get(key) : lastLoadedValue;
+};
+
+export const useLocale = () => {
+	const key = useLocaleKey();
+	return useLoadedValue<Locale | undefined>(
+		'locale',
+		localesCache,
+		loadLocale,
+		key,
+	);
+};
+
+const usePickersLocalization = (key: string) => {
+	return useLoadedValue<PickersLocalization | undefined>(
+		'pickers localization',
+		pickersLocalizationsCache,
+		loadPickersLocalization,
+		key,
+	);
+};
 
-	return localesCache.has(key) ? localesCache.get(key) : lastLoadedLocale;
+export const useLocaleText = () => {
+	const key = useLocaleKey();
+	const localization = usePickersLocalization(key);
+	return _pickersLocalizationToLocaleText(localization);
 };
 
 export type WeekStartsOn = WeekDay;
@@ -162,16 +257,6 @@ export const useDefaultDateFormatOptions = () => {
 	);
 };
 
-export const useDateMask = () => {
-	const key = useLocaleKey();
-	return dateMaskMap[key];
-};
-
-export const useDateTimeMask = () => {
-	const key = useLocaleKey();
-	return dateTimeMaskMap[key];
-};
-
 const stringifyOptions = (options) => {
 	if (options === undefined) return undefined;
 

imports/ui/App.tsx

@@ -10,11 +10,7 @@ import {SnackbarProvider} from 'notistack';
 
 import CssBaseline from '@mui/material/CssBaseline';
 
-import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
-import {AdapterDateFns} from '@mui/x-date-pickers/AdapterDateFns';
-
-import {useLocale} from '../i18n/datetime';
-
+import DateTimeLocalizationProvider from './i18n/DateTimeLocalizationProvider';
 import CustomWholeWindowDropZone from './input/CustomWholeWindowDropZone';
 import ModalProvider from './modal/ModelProvider';
 import ErrorBoundary from './ErrorBoundary';
@@ -29,12 +25,11 @@ export const muiCache = createCache({
 });
 
 const App = () => {
-	const locale = useLocale();
 	const theme = useUserTheme();
 
 	return (
 		<BrowserRouter>
-			<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={locale}>
+			<DateTimeLocalizationProvider>
 				<CacheProvider value={muiCache}>
 					<ThemeProvider theme={theme}>
 						<ModalProvider>
@@ -51,7 +46,7 @@ const App = () => {
 						</ModalProvider>
 					</ThemeProvider>
 				</CacheProvider>
-			</LocalizationProvider>
+			</DateTimeLocalizationProvider>
 		</BrowserRouter>
 	);
 };

imports/ui/appointments/AppointmentDialog.tsx

@@ -31,8 +31,6 @@ import TextField from '../input/TextField';
 
 import CancelButton from '../button/CancelButton';
 
-import {useDateMask} from '../../i18n/datetime';
-
 import {msToString} from '../../api/duration';
 
 import {type AppointmentDocument} from '../../api/collection/appointments';
@@ -153,8 +151,6 @@ const AppointmentDialog = ({
 	]);
 	const patientIsReadOnly = Boolean(initialPatient);
 
-	const localizedDateMask = useDateMask();
-
 	const datetime = unserializeDatetime(date, time);
 	const appointmentIsInThePast = isBefore(
 		unserializeDate(date),
@@ -257,21 +253,17 @@ const AppointmentDialog = ({
 				<Grid container spacing={3}>
 					<Grid item xs={4}>
 						<DatePicker
-							mask={localizedDateMask}
 							value={unserializeDate(date)}
 							label="Date"
-							renderInput={(props) => (
-								<TextField
-									{...props}
-									InputLabelProps={{shrink: true}}
-									error={!validDate || displayAppointmentIsInThePast}
-									helperText={
-										displayAppointmentIsInThePast
-											? 'Date dans le passé!'
-											: undefined
-									}
-								/>
-							)}
+							slotProps={{
+								textField: {
+									InputLabelProps: {shrink: true},
+									error: !validDate || displayAppointmentIsInThePast,
+									helperText: displayAppointmentIsInThePast
+										? 'Date dans le passé!'
+										: undefined,
+								},
+							}}
 							onChange={(pickedDatetime) => {
 								if (isValid(pickedDatetime)) {
 									setDate(serializeDate(pickedDatetime!));
@@ -284,13 +276,12 @@ const AppointmentDialog = ({
 					</Grid>
 					<Grid item xs={4}>
 						<TimePicker
-							renderInput={(props) => (
-								<TextField
-									{...props}
-									InputLabelProps={{shrink: true}}
-									error={!validTime}
-								/>
-							)}
+							slotProps={{
+								textField: {
+									InputLabelProps: {shrink: true},
+									error: !validTime,
+								},
+							}}
 							label="Time"
 							value={time === '' ? null : unserializeTime(time)}
 							onChange={(pickedDatetime) => {

imports/ui/birthdate/useBirthdatePickerProps.ts

@@ -5,17 +5,14 @@ import endOfToday from 'date-fns/endOfToday';
 import parseISO from 'date-fns/parseISO';
 import subYears from 'date-fns/subYears';
 
-import {useDateMask} from '../../i18n/datetime';
-
 const useBirthdatePickerProps = () => {
-	const mask = useDateMask();
 	const maxDateString = format(endOfToday(), 'yyyy-MM-dd');
 
 	return useMemo(() => {
 		const maxDate = parseISO(maxDateString);
 		const minDate = subYears(maxDate, 200);
-		return {minDate, maxDate, mask};
-	}, [maxDateString, mask]);
+		return {minDate, maxDate};
+	}, [maxDateString]);
 };
 
 export default useBirthdatePickerProps;