Merge remote-tracking branch 'origin/main' into update/eslint

Author: Tristan-WorkGH

package-lock.json

@@ -16,7 +16,7 @@
     "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
-        "@gridsuite/commons-ui": "0.94.0",
+        "@gridsuite/commons-ui": "0.95.0",
         "@hookform/resolvers": "^4.0.0",
         "@mui/icons-material": "^5.16.14",
         "@mui/lab": "5.0.0-alpha.175",

package.json

@@ -66,7 +66,9 @@ const lightTheme: ThemeOptions = {
     link: {
         color: 'blue',
     },
-    agGridTheme: 'ag-theme-alpine',
+    aggrid: {
+        theme: 'ag-theme-alpine',
+    },
 };
 
 const darkTheme: ThemeOptions = {
@@ -92,7 +94,9 @@ const darkTheme: ThemeOptions = {
     link: {
         color: 'green',
     },
-    agGridTheme: 'ag-theme-alpine-dark',
+    aggrid: {
+        theme: 'ag-theme-alpine-dark',
+    },
 };
 
 const getMuiTheme = (theme: GsTheme, locale: GsLangUser): Theme => {

src/components/App/app-wrapper.tsx

@@ -5,9 +5,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import 'ag-grid-community/styles/ag-grid.css';
-import 'ag-grid-community/styles/ag-theme-alpine.css';
-
 import {
     ForwardedRef,
     forwardRef,
@@ -19,18 +16,10 @@ import {
     useImperativeHandle,
     useRef,
 } from 'react';
-import { Box, useTheme } from '@mui/material';
 import { AgGridReact } from 'ag-grid-react';
-import { useIntl } from 'react-intl';
-import { LANG_FRENCH } from '@gridsuite/commons-ui';
-import { AG_GRID_LOCALE_FR } from '../../translations/ag-grid/locales';
-import { GridOptions } from 'ag-grid-community';
+import { CustomAGGrid, type CustomAGGridProps } from '@gridsuite/commons-ui';
 import { useDebugRender } from '../../utils/hooks';
 
-const messages: Record<string, Record<string, string>> = {
-    [LANG_FRENCH]: AG_GRID_LOCALE_FR,
-};
-
 type AccessibleAgGridReact<TData> = Omit<
     AgGridReact<TData>,
     'apiListeners' | 'setGridApi' //private in class
@@ -47,12 +36,13 @@ export type AgGridRef<TData, TContext extends {}> = {
 type ForwardRef<Props, Ref> = typeof forwardRef<Props, Ref>;
 type ForwardRefComponent<Props, Ref> = ReturnType<ForwardRef<Props, Ref>>;
 
-interface AgGridWithRef extends FunctionComponent<GridOptions<unknown>> {
+interface AgGridWithRef extends FunctionComponent<CustomAGGridProps<unknown>> {
     <TData, TContext extends {}>(
-        props: PropsWithoutRef<GridOptions<TData>> & RefAttributes<AgGridRef<TData, TContext>>
-    ): ReturnType<ForwardRefComponent<GridOptions<TData>, AgGridRef<TData, TContext>>>;
+        props: PropsWithoutRef<CustomAGGridProps<TData>> & RefAttributes<AgGridRef<TData, TContext>>
+    ): ReturnType<ForwardRefComponent<CustomAGGridProps<TData>, AgGridRef<TData, TContext>>>;
 }
 
+// TODO move&merge to commons-ui
 const style = {
     // default overridable style
     width: '100%',
@@ -62,13 +52,12 @@ const style = {
     },
 };
 
+// TODO move type generic restoration to commons-ui
+// TODO move useDebug feature from env to commons-ui
 export const AgGrid: AgGridWithRef = forwardRef(function AgGrid<TData, TContext extends {} = {}>(
-    props: GridOptions<TData>,
+    props: CustomAGGridProps<TData>,
     gridRef?: ForwardedRef<AgGridRef<TData, TContext>>
 ): ReactNode {
-    const intl = useIntl();
-    const theme = useTheme();
-
     const id = useId();
     useDebugRender(`ag-grid(${id}) ${props.gridId}`);
 
@@ -84,15 +73,12 @@ export const AgGrid: AgGridWithRef = forwardRef(function AgGrid<TData, TContext
     );
 
     return (
-        // wrapping container with theme & size
-        <Box component="div" className={theme.agGridTheme} sx={style}>
-            <AgGridReact<TData>
-                ref={agGridRef}
-                localeText={messages[intl.locale] ?? messages[intl.defaultLocale] ?? undefined}
-                {...props} //destruct props to optimize react props change detection
-                debug={import.meta.env.VITE_DEBUG_AGGRID === 'true' || props.debug}
-            />
-        </Box>
+        <CustomAGGrid //TODO <TData>
+            ref={agGridRef}
+            {...props} //destruct props to optimize react props change detection
+            debug={import.meta.env.VITE_DEBUG_AGGRID === 'true' || props.debug}
+            sx={style}
+        />
     );
 });
 export default AgGrid;

src/components/Grid/AgGrid.tsx

@@ -31,7 +31,9 @@ type GridTableExposed = {
 
 export type GridTableRef<TData, TContext extends {} = {}> = AgGridRef<TData, TContext & GridTableExposed>;
 
-export interface GridTableProps<TData> extends Omit<GridOptions<TData>, 'rowData'>, PropsWithChildren<{}> {
+export interface GridTableProps<TData>
+    extends Omit<GridOptions<TData>, 'rowData' | 'alwaysShowVerticalScroll' | 'onGridReady'>,
+        PropsWithChildren<{}> {
     //accessRef: RefObject<GridTableRef<TData, TContext>>;
     dataLoader: () => Promise<TData[]>;
 }
@@ -40,8 +42,7 @@ export interface GridTableProps<TData> extends Omit<GridOptions<TData>, 'rowData
  * Restore lost generics from `forwardRef()`<br/>
  * https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
  */
-type ForwardRef<Props, Ref> = typeof forwardRef<Props, Ref>;
-type ForwardRefComponent<Props, Ref> = ReturnType<ForwardRef<Props, Ref>>;
+type ForwardRefComponent<Props, Ref> = ReturnType<typeof forwardRef<Props, Ref>>;
 
 interface GridTableWithRef extends FunctionComponent<PropsWithChildren<GridTableProps<unknown>>> {
     <TData, TContext extends {}>(

src/components/Grid/GridTable.tsx

@@ -18,7 +18,9 @@ declare module '@mui/material/styles/createTheme' {
         circle_hover: CSSObject;
         link: CSSObject;
         mapboxStyle: string;
-        agGridTheme: 'ag-theme-alpine' | 'ag-theme-alpine-dark';
+        aggrid: {
+            theme: 'ag-theme-alpine' | 'ag-theme-alpine-dark';
+        };
         agGridThemeOverride?: CSSObject;
     };