fix error

"React does not recognize the `resetTabIndex` & `resetNodeAliases` props on a DOM element."

Author: Tristan-WorkGH

src/components/spreadsheet-view/add-spreadsheet/add-spreadsheet-button.tsx

@@ -5,8 +5,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { FC, MouseEvent, useCallback, useState } from 'react';
-import { Button, Menu, MenuItem, Theme, Tooltip } from '@mui/material';
+import { FC, type FunctionComponent, MouseEvent, useCallback, useState } from 'react';
+import { Button, type ButtonProps, Menu, MenuItem, Theme, Tooltip } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import { useStateBoolean, UseStateBooleanReturn } from '@gridsuite/commons-ui';
 import { FormattedMessage } from 'react-intl';
@@ -15,25 +15,20 @@ import { ResetNodeAliasCallback } from '../hooks/use-node-aliases';
 import AddEmptySpreadsheetDialog from './dialogs/add-empty-spreadsheet-dialog';
 import AddSpreadsheetFromModelDialog from './dialogs/add-spreadsheet-from-model-dialog';
 import AddSpreadsheetsFromCollectionDialog from './dialogs/add-spreadsheets-from-collection-dialog';
+import type { DialogComponent } from './types';
 
-interface AddSpreadsheetButtonProps {
+export type AddSpreadsheetButtonProps = {
     disabled: boolean;
     resetTabIndex: (newTablesDefinitions: SpreadsheetTabDefinition[]) => void;
     resetNodeAliases: ResetNodeAliasCallback;
-}
+};
 
 const styles = {
     addButton: (theme: Theme) => ({
         color: theme.palette.primary.main,
     }),
 };
 
-type DialogComponent = FC<{
-    open: UseStateBooleanReturn;
-    resetTabIndex: (newTablesDefinitions: SpreadsheetTabDefinition[]) => void;
-    resetNodeAliases: ResetNodeAliasCallback;
-}>;
-
 export interface SpreadsheetOption {
     id: string;
     label: string;
@@ -43,7 +38,7 @@ export interface SpreadsheetOption {
 /**
  * Constants for spreadsheet creation options with associated dialog components
  */
-const NEW_SPREADSHEET_CREATION_OPTIONS: Record<string, SpreadsheetOption> = {
+const NEW_SPREADSHEET_CREATION_OPTIONS = {
     EMPTY: {
         id: 'EMPTY',
         label: 'spreadsheet/create_new_spreadsheet/empty_spreadsheet_option',
@@ -59,20 +54,23 @@ const NEW_SPREADSHEET_CREATION_OPTIONS: Record<string, SpreadsheetOption> = {
         label: 'spreadsheet/create_new_spreadsheet/apply_collection_option',
         dialog: AddSpreadsheetsFromCollectionDialog,
     },
-};
+} as const satisfies Record<string, SpreadsheetOption>;
 
-const AddSpreadsheetButton: React.FC<AddSpreadsheetButtonProps> = ({ disabled, resetTabIndex, resetNodeAliases }) => {
+export default function AddSpreadsheetButton({
+    disabled,
+    resetTabIndex,
+    resetNodeAliases,
+}: Readonly<AddSpreadsheetButtonProps>) {
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
     const dialogOpen = useStateBoolean(false);
     const [selectedOption, setSelectedOption] = useState<SpreadsheetOption | undefined>();
 
-    const handleClick = useCallback((event: MouseEvent<HTMLButtonElement>) => {
-        setAnchorEl(event.currentTarget);
-    }, []);
+    const handleClick = useCallback<NonNullable<ButtonProps['onClick']>>(
+        (event) => setAnchorEl(event.currentTarget),
+        []
+    );
 
-    const handleClose = useCallback(() => {
-        setAnchorEl(null);
-    }, []);
+    const handleClose = useCallback(() => setAnchorEl(null), []);
 
     const handleMenuItemClick = useCallback(
         (option: SpreadsheetOption) => {
@@ -101,12 +99,9 @@ const AddSpreadsheetButton: React.FC<AddSpreadsheetButtonProps> = ({ disabled, r
                     </MenuItem>
                 ))}
             </Menu>
-
             {SelectedDialog && (
                 <SelectedDialog open={dialogOpen} resetTabIndex={resetTabIndex} resetNodeAliases={resetNodeAliases} />
             )}
         </>
     );
-};
-
-export default AddSpreadsheetButton;
+}

src/components/spreadsheet-view/add-spreadsheet/dialogs/add-empty-spreadsheet-dialog.tsx

@@ -7,13 +7,7 @@
 
 import { useCallback, useEffect, useMemo } from 'react';
 import { Grid } from '@mui/material';
-import {
-    CustomFormProvider,
-    SelectInput,
-    TextInput,
-    useSnackMessage,
-    UseStateBooleanReturn,
-} from '@gridsuite/commons-ui';
+import { CustomFormProvider, SelectInput, TextInput, useSnackMessage } from '@gridsuite/commons-ui';
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useDispatch, useSelector } from 'react-redux';
@@ -32,10 +26,9 @@ import { addNewSpreadsheet } from './add-spreadsheet-utils';
 import { COLUMN_TYPES } from 'components/custom-aggrid/custom-aggrid-header.type';
 import { ColumnDefinitionDto, SpreadsheetEquipmentType } from '../../types/spreadsheet.type';
 import { v4 as uuid4 } from 'uuid';
+import type { DialogComponentProps } from '../types';
 
-interface AddEmptySpreadsheetDialogProps {
-    open: UseStateBooleanReturn;
-}
+export type AddEmptySpreadsheetDialogProps = Pick<DialogComponentProps, 'open'>;
 
 const TABLES_OPTIONS = Object.values(SpreadsheetEquipmentType).map(
     (elementType) => ({ id: elementType, label: elementType }) as const
@@ -53,7 +46,7 @@ const DEFAULT_ID_COLUMN = {
 /**
  * Dialog for creating an empty spreadsheet
  */
-export default function AddEmptySpreadsheetDialog({ open, ...dialogProps }: Readonly<AddEmptySpreadsheetDialogProps>) {
+export default function AddEmptySpreadsheetDialog({ open }: Readonly<AddEmptySpreadsheetDialogProps>) {
     const dispatch = useDispatch();
     const { snackError } = useSnackMessage();
     const studyUuid = useSelector((state: AppState) => state.studyUuid);
@@ -105,7 +98,6 @@ export default function AddEmptySpreadsheetDialog({ open, ...dialogProps }: Read
                 onSave={onSubmit}
                 onClear={() => {}}
                 PaperProps={{ sx: dialogStyles.dialogContent }}
-                {...dialogProps}
             >
                 <Grid container spacing={2} direction="column" marginTop="auto">
                     <Grid item xs>

src/components/spreadsheet-view/add-spreadsheet/dialogs/add-spreadsheet-from-model-dialog.tsx

@@ -12,38 +12,33 @@ import {
     DirectoryItemsInput,
     ElementType,
     TextInput,
-    UseStateBooleanReturn,
     useSnackMessage,
 } from '@gridsuite/commons-ui';
 import { useForm, useWatch } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppState } from 'redux/reducer';
 import {
-    SPREADSHEET_MODEL,
-    SPREADSHEET_NAME,
     getSpreadsheetFromModelFormSchema,
     initialSpreadsheetFromModelForm,
+    SPREADSHEET_MODEL,
+    SPREADSHEET_NAME,
 } from './add-spreadsheet-form';
 import { addNewSpreadsheet } from './add-spreadsheet-utils';
 import { getSpreadsheetModel } from 'services/study-config';
 import { UUID } from 'crypto';
 import { ModificationDialog } from 'components/dialogs/commons/modificationDialog';
 import { dialogStyles } from '../styles/styles';
-import { ResetNodeAliasCallback } from '../../hooks/use-node-aliases';
+import type { DialogComponentProps } from '../types';
 
-interface AddSpreadsheetFromModelDialogProps {
-    open: UseStateBooleanReturn;
-    resetNodeAliases: ResetNodeAliasCallback;
-}
+export type AddSpreadsheetFromModelDialogProps = Pick<DialogComponentProps, 'open' | 'resetNodeAliases'>;
 
 /**
  * Dialog for creating a spreadsheet from an existing model
  */
 export default function AddSpreadsheetFromModelDialog({
     open,
     resetNodeAliases,
-    ...dialogProps
 }: Readonly<AddSpreadsheetFromModelDialogProps>) {
     const dispatch = useDispatch();
     const { snackError } = useSnackMessage();
@@ -126,7 +121,6 @@ export default function AddSpreadsheetFromModelDialog({
                 onSave={onSubmit}
                 onClear={() => null}
                 PaperProps={{ sx: dialogStyles.dialogContent }}
-                {...dialogProps}
             >
                 <Grid container spacing={2} direction="column" marginTop="auto">
                     <Grid item xs>

src/components/spreadsheet-view/add-spreadsheet/dialogs/add-spreadsheets-from-collection-dialog.tsx

@@ -13,7 +13,6 @@ import {
     ElementType,
     PopupConfirmationDialog,
     RadioInput,
-    UseStateBooleanReturn,
     useSnackMessage,
 } from '@gridsuite/commons-ui';
 import { useForm } from 'react-hook-form';
@@ -26,8 +25,7 @@ import { initTableDefinitions } from 'redux/actions';
 import { UUID } from 'crypto';
 import { ModificationDialog } from 'components/dialogs/commons/modificationDialog';
 import { dialogStyles } from '../styles/styles';
-import { SpreadsheetCollectionDto, SpreadsheetTabDefinition } from 'components/spreadsheet-view/types/spreadsheet.type';
-import { ResetNodeAliasCallback } from 'components/spreadsheet-view/hooks/use-node-aliases';
+import { SpreadsheetCollectionDto } from 'components/spreadsheet-view/types/spreadsheet.type';
 import {
     getSpreadsheetCollectionFormSchema,
     initialSpreadsheetCollectionForm,
@@ -37,12 +35,7 @@ import {
     SpreadsheetCollectionImportMode,
 } from './add-spreadsheet-form';
 import { processSpreadsheetsCollectionData } from './add-spreadsheet-utils';
-
-interface AddSpreadsheetsFromCollectionDialogProps {
-    open: UseStateBooleanReturn;
-    resetTabIndex: (newTablesDefinitions: SpreadsheetTabDefinition[]) => void;
-    resetNodeAliases: ResetNodeAliasCallback;
-}
+import type { DialogComponentProps } from '../types';
 
 /**
  * Dialog for importing a spreadsheet collection
@@ -51,8 +44,7 @@ export default function AddSpreadsheetsFromCollectionDialog({
     open,
     resetTabIndex,
     resetNodeAliases,
-    ...dialogProps
-}: Readonly<AddSpreadsheetsFromCollectionDialogProps>) {
+}: Readonly<DialogComponentProps>) {
     const dispatch = useDispatch();
     const intl = useIntl();
     const { snackError } = useSnackMessage();
@@ -153,7 +145,6 @@ export default function AddSpreadsheetsFromCollectionDialog({
                     onSave={onSubmit}
                     onClear={() => null}
                     PaperProps={{ sx: dialogStyles.dialogContent }}
-                    {...dialogProps}
                 >
                     <Grid container spacing={2} direction="column">
                         <Grid item>{updateModeSelectionField}</Grid>

src/components/spreadsheet-view/add-spreadsheet/types.d.ts

@@ -5,3 +5,15 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+import type { ComponentType } from 'react';
+import type { UseStateBooleanReturn } from '@gridsuite/commons-ui';
+import type { SpreadsheetTabDefinition } from '../types/spreadsheet.type';
+import type { ResetNodeAliasCallback } from '../hooks/use-node-aliases';
+
+export type DialogComponentProps = {
+    open: UseStateBooleanReturn;
+    resetTabIndex: (newTablesDefinitions: SpreadsheetTabDefinition[]) => void;
+    resetNodeAliases: ResetNodeAliasCallback;
+};
+
+export type DialogComponent = ComponentType<DialogComponentProps>;