Add useRandomUUID hook

Change-type: minor

src/components/Form/Widgets/FileWidget.tsx

@@ -28,6 +28,7 @@ import {
 	faTrash,
 	faUpload,
 } from '@fortawesome/free-solid-svg-icons';
+import { useRandomUUID } from '../../../hooks/useRandomUUID';
 import uniq from 'lodash/uniq';
 
 const restingStyle: SxProps = {
@@ -135,8 +136,9 @@ export const FileWidget = ({
 	const [errorFiles, setErrorFiles] = useState<FileRejection[]>([]);
 	const theme = useTheme();
 	const mobile = useMediaQuery(theme.breakpoints.down('md'));
+	const formId = useRandomUUID();
 
-	const fileUploadId = useMemo(() => `file-upload-${crypto.randomUUID()}`, []);
+	const fileUploadId = useMemo(() => `file-upload-${formId}`, []);
 
 	const options = uiSchema?.['ui:options'] as UIOptions | undefined;
 	const accept = options?.accept;

src/hooks/useRandomUUID.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+
+export const useRandomUUID = (): string => {
+	const generateUUID = () => {
+		if (typeof crypto?.randomUUID === 'function') {
+			return crypto.randomUUID();
+		}
+
+		const template = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
+		return template.replace(/x/g, () =>
+			Math.floor(Math.random() * 16).toString(16),
+		);
+	};
+
+	return useMemo(() => generateUUID(), []);
+};

src/index.tsx

@@ -103,4 +103,5 @@ export * as Material from '@mui/material';
 export * as MaterialLab from '@mui/lab';
 export * as MaterialDataGrid from '@mui/x-data-grid';
 export { enqueueSnackbar, closeSnackbar } from 'notistack';
+export { useRandomUUID } from './hooks/useRandomUUID';
 export * as designTokens from '@balena/design-tokens';