Merge pull request #175 from InseeFr/fix/solve-types-scrollablebox

fix: try to find a better solution for typing Select component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pearl",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.11.1",

src/pages/StatsTracking.tsx

@@ -1,13 +1,13 @@
-import { Box, Card, CardContent, Stack, Typography, Grid, SelectChangeEvent } from '@mui/material';
-import { useState, useMemo, SetStateAction } from 'react';
+import { Box, Card, CardContent, Grid, SelectChangeEvent, Stack, Typography } from '@mui/material';
+import D from 'i18n';
+import { useMemo, useState } from 'react';
+import { SurveyUnit } from 'types/pearl';
+import { ScrollableBox } from 'ui/ScrollableBox';
+import { Select } from 'ui/Select';
 import { CampaignProgress } from 'ui/Stats/CampaignProgress';
 import { CampaignProgressPieChart } from 'ui/Stats/CampaignProgressPieChart';
 import { daysLeftForSurveyUnit } from 'utils/functions';
 import { groupBy } from 'utils/functions/array';
-import D from 'i18n';
-import { SurveyUnit } from 'types/pearl';
-import { Select } from 'ui/Select';
-import { ScrollableBox } from 'ui/ScrollableBox';
 
 type SortDirection = 'asc' | 'desc' | 'deadlineDesc' | 'deadlineAsc';
 
@@ -78,9 +78,7 @@ export function StatsTracking({ surveyUnits }: Readonly<StatsTrackingProps>) {
               <Select
                 options={sortOptions}
                 value={sortDirection}
-                onChange={(e: SelectChangeEvent<SortDirection>) =>
-                  setSortDirection(e.target.value as SortDirection)
-                }
+                onChange={e => setSortDirection(e.target.value as SortDirection)}
                 placeholder={D.noSorting}
                 allowEmpty
                 sx={{ width: '210px' }}

src/pages/TrackingPage.tsx

@@ -58,9 +58,7 @@ export const Component = () => {
                   <>
                     {' | '}
                     <Select
-                      onChange={(e: SelectChangeEvent<unknown>) =>
-                        setCampaign(e.target.value as string)
-                      }
+                      onChange={e => setCampaign(e.target.value as string)}
                       sx={{ minWidth: 210 }}
                       value={campaign}
                       placeholder={D.trackingSelect}

src/ui/Select.tsx

@@ -1,13 +1,10 @@
 import MenuItem from '@mui/material/MenuItem';
-import SelectMaterial, { SelectChangeEvent } from '@mui/material/Select';
-import React, { ReactNode } from 'react';
+import SelectMaterial, { SelectProps as MaterialSelectProps } from '@mui/material/Select';
 
-// extends React.ComponentProps<typeof SelectMaterial>
-interface SelectProps extends React.ComponentProps<typeof SelectMaterial> {
+interface SelectProps extends MaterialSelectProps {
   options: { value: string | number; label: string }[];
   placeholder: string;
   allowEmpty: boolean;
-  onChange: (e: SelectChangeEvent<any>, child: ReactNode) => void;
 }
 
 export function Select({ options, placeholder, allowEmpty, ...props }: Readonly<SelectProps>) {