fix(striker-ui): hoist Select and MenuItem

striker-ui/components/Files/FileInfo.tsx

@@ -4,10 +4,6 @@ import {
   FormControl,
   FormControlLabel,
   FormGroup,
-  MenuItem,
-  menuItemClasses,
-  Select,
-  selectClasses,
   styled,
 } from '@mui/material';
 import {
@@ -16,11 +12,13 @@ import {
 } from '@mui/icons-material';
 import { v4 as uuidv4 } from 'uuid';
 
-import { BLUE, GREY, RED, TEXT } from '../../lib/consts/DEFAULT_THEME';
+import { BLUE, RED, TEXT } from '../../lib/consts/DEFAULT_THEME';
 import { UPLOAD_FILE_TYPES_ARRAY } from '../../lib/consts/UPLOAD_FILE_TYPES';
 
+import MenuItem from '../MenuItem';
 import OutlinedInput from '../OutlinedInput';
 import OutlinedInputLabel from '../OutlinedInputLabel';
+import Select from '../Select';
 
 type FileInfoProps = Pick<FileDetailMetadata, 'fileName' | 'fileLocations'> &
   Partial<Pick<FileDetailMetadata, 'fileType'>> & {
@@ -33,30 +31,6 @@ const FILE_INFO_DEFAULT_PROPS: Partial<FileInfoProps> = {
   onChange: undefined,
 };
 
-const StyledSelect = styled(Select)({
-  [`& .${selectClasses.icon}`]: {
-    color: GREY,
-  },
-});
-
-const StyledMenuItem = styled(MenuItem)({
-  backgroundColor: TEXT,
-  paddingRight: '3em',
-
-  [`&.${menuItemClasses.selected}`]: {
-    backgroundColor: GREY,
-    fontWeight: 400,
-
-    '&:hover': {
-      backgroundColor: GREY,
-    },
-  },
-
-  '&:hover': {
-    backgroundColor: GREY,
-  },
-});
-
 const FileLocationActiveCheckbox = styled(Checkbox)({
   color: RED,
 
@@ -105,7 +79,7 @@ const FileInfo = (
           <OutlinedInputLabel htmlFor={fileTypeElementId}>
             {fileTypeElementLabel}
           </OutlinedInputLabel>
-          <StyledSelect
+          <Select
             defaultValue={fileType}
             disabled={isReadonly}
             id={fileTypeElementId}
@@ -118,12 +92,12 @@ const FileInfo = (
           >
             {UPLOAD_FILE_TYPES_ARRAY.map(
               ([fileTypeKey, [, fileTypeDisplayString]]) => (
-                <StyledMenuItem key={fileTypeKey} value={fileTypeKey}>
+                <MenuItem key={fileTypeKey} value={fileTypeKey}>
                   {fileTypeDisplayString}
-                </StyledMenuItem>
+                </MenuItem>
               ),
             )}
-          </StyledSelect>
+          </Select>
         </FormControl>
       )}
       {fileLocations.map(

striker-ui/components/MenuItem.tsx

@@ -0,0 +1,44 @@
+import {
+  MenuItem as MUIMenuItem,
+  menuItemClasses as muiMenuItemClasses,
+  MenuItemProps as MUIMenuItemProps,
+} from '@mui/material';
+
+import { GREY, TEXT } from '../lib/consts/DEFAULT_THEME';
+
+const MenuItem = (menuItemProps: MUIMenuItemProps): JSX.Element => {
+  const { children, sx } = menuItemProps;
+  const combinedSx = {
+    backgroundColor: TEXT,
+    paddingRight: '3em',
+
+    [`&.${muiMenuItemClasses.selected}`]: {
+      backgroundColor: GREY,
+      fontWeight: 400,
+
+      '&:hover': {
+        backgroundColor: GREY,
+      },
+    },
+
+    '&:hover': {
+      backgroundColor: GREY,
+    },
+
+    ...sx,
+  };
+
+  return (
+    <MUIMenuItem
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...{
+        ...menuItemProps,
+        sx: combinedSx,
+      }}
+    >
+      {children}
+    </MUIMenuItem>
+  );
+};
+
+export default MenuItem;

striker-ui/components/Select.tsx

@@ -0,0 +1,32 @@
+import {
+  Select as MUISelect,
+  selectClasses as muiSelectClasses,
+  SelectProps as MUISelectProps,
+} from '@mui/material';
+
+import { GREY } from '../lib/consts/DEFAULT_THEME';
+
+const Select = (selectProps: MUISelectProps): JSX.Element => {
+  const { children, sx } = selectProps;
+  const combinedSx = {
+    [`& .${muiSelectClasses.icon}`]: {
+      color: GREY,
+    },
+
+    ...sx,
+  };
+
+  return (
+    <MUISelect
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...{
+        ...selectProps,
+        sx: combinedSx,
+      }}
+    >
+      {children}
+    </MUISelect>
+  );
+};
+
+export default Select;