change framents to boxes

Author: lewisrenfrew

CHANGELOG.md

@@ -1,4 +1,6 @@
 # Changelog
+## [31.1.0] - 2025-07-07
+- changed some React.Fragments to mui Box components
 ## [31.0.0] - 2025-07-04
 - resurrect storybook
 - simplify Navigation notifications prop - now just accepts one 'notifications' list, as opposed to seen and unseen lists. No longer accepts markNotificationSeen function

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linn-it/linn-form-components-library",
-  "version": "31.1.0-alpha.2",
+  "version": "31.1.0",
   "private": false,
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

src/components/Breadcrumbs.js

@@ -3,9 +3,6 @@ import Typography from '@mui/material/Typography';
 import Link from '@mui/material/Link';
 import Box from '@mui/material/Box';
 
-console.log('Typography:', Typography);
-console.log('Link:', Link);
-console.log('Box:', Box);
 function Breadcrumbs({
     navigate,
     rootPathLength = 2,

src/components/Search.js

@@ -9,7 +9,7 @@ import List from '@mui/material/List';
 import Box from '@mui/material/Box';
 import ListItem from '@mui/material/ListItem';
 import Typography from '@mui/material/Typography';
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 import Loading from './Loading';
 import InputField from './InputField';
 
@@ -126,10 +126,10 @@ function Search({
             return (
                 <List dense>
                     {result.map(r => (
-                        <Fragment key={r.id}>
+                        <Box key={r.id}>
                             {resultItem(r)}
                             <Divider component="li" />
-                        </Fragment>
+                        </Box>
                     ))}
                 </List>
             );

src/components/SearchPanel.js

@@ -1,5 +1,6 @@
-import React, { useState, Fragment } from 'react';
+import React, { useState } from 'react';
 import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import ListItem from '@mui/material/ListItem';
 import Typography from '@mui/material/Typography';
@@ -80,7 +81,7 @@ function SearchPanel({ menu, close }) {
                                         e.href.toLowerCase().includes(searchTerm.toLowerCase())
                                 )
                                 .map(entry => (
-                                    <Fragment key={entry.href}>
+                                    <Box key={entry.href}>
                                         <a href={entry.href} style={{ textDecoration: 'none' }}>
                                             <ListItem
                                                 sx={{
@@ -98,7 +99,7 @@ function SearchPanel({ menu, close }) {
                                                 </Typography>
                                             </ListItem>
                                         </a>
-                                    </Fragment>
+                                    </Box>
                                 ))}
                     </List>
                 </Grid>

src/components/SelectedItemsList.js

@@ -1,5 +1,6 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import List from '@mui/material/List';
+import Box from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import Typography from '@mui/material/Typography';
 import ListItemText from '@mui/material/ListItemText';
@@ -33,7 +34,7 @@ function SelectedItemsList({
                 }}
             >
                 {items.map(item => (
-                    <Fragment key={item.id ? item.id : item}>
+                    <Box key={item.id ? item.id : item}>
                         <ListItem
                             sx={{
                                 display: 'flex',
@@ -57,7 +58,7 @@ function SelectedItemsList({
                             )}
                         </ListItem>
                         <Divider />
-                    </Fragment>
+                    </Box>
                 ))}
             </List>
         </>