From 90f57197f1281367555122492c5be3670351ff22 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Tue, 11 Mar 2025 20:19:56 +0100 Subject: [PATCH 01/17] add standard localizations of mui --- demo/src/app.jsx | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/demo/src/app.jsx b/demo/src/app.jsx index 24942cecf..c61a0272f 100644 --- a/demo/src/app.jsx +++ b/demo/src/app.jsx @@ -24,10 +24,11 @@ import { ThemeProvider, Typography, } from '@mui/material'; +import { enUS, frFR } from '@mui/material/locale'; import CommentIcon from '@mui/icons-material/Comment'; import { BrowserRouter, useLocation, useMatch, useNavigate } from 'react-router-dom'; import { IntlProvider, useIntl } from 'react-intl'; -import { useCallback, useEffect, useRef, useState } from 'react'; +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import translations from './demo_intl'; import PowsyblLogo from '../images/powsybl_logo.svg?react'; // eslint-disable-line import/no-unresolved import AppPackage from '../../package.json'; @@ -98,6 +99,8 @@ import { commonButtonFr, networkModificationsEn, networkModificationsFr, + logout, + equipmentStyles, } from '../../src'; const messages = { @@ -145,23 +148,23 @@ const messages = { }, }; -const lightTheme = createTheme({ +const lightTheme = { palette: { mode: 'light', }, -}); +}; -const darkTheme = createTheme({ +const darkTheme = { palette: { mode: 'dark', }, -}); +}; -const getMuiTheme = (theme) => { - if (theme === LIGHT_THEME) { - return lightTheme; - } - return darkTheme; +const useMuiTheme = (theme, language) => { + return useMemo( + () => createTheme(theme === LIGHT_THEME ? lightTheme : darkTheme, language === LANG_FRENCH ? frFR : enUS), + [language, theme] + ); }; const style = { @@ -811,7 +814,7 @@ function AppContent({ language, onLanguageClick }) { return ( - + From 41b2d648f0621e9f4ba9385a7c5c028ae8bc28a6 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Mon, 17 Mar 2025 12:31:48 +0100 Subject: [PATCH 02/17] refactor --- src/components/customAGGrid/customAggrid.tsx | 97 ++++++++++---------- 1 file changed, 47 insertions(+), 50 deletions(-) diff --git a/src/components/customAGGrid/customAggrid.tsx b/src/components/customAGGrid/customAggrid.tsx index 5d76bf2ab..a0e4aa3db 100644 --- a/src/components/customAGGrid/customAggrid.tsx +++ b/src/components/customAGGrid/customAggrid.tsx @@ -5,70 +5,67 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import React, { useCallback } from 'react'; -import { AgGridReact, AgGridReactProps } from 'ag-grid-react'; +import { forwardRef, useCallback } from 'react'; +import { AgGridReact, type AgGridReactProps } from 'ag-grid-react'; import { useIntl } from 'react-intl'; import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css'; -import { ColumnResizedEvent, GetLocaleTextParams } from 'ag-grid-community'; +import type { ColumnResizedEvent, GetLocaleTextParams } from 'ag-grid-community'; import { Box, type SxProps, type Theme, useTheme } from '@mui/material'; import { mergeSx } from '../../utils/styles'; import { CUSTOM_AGGRID_THEME, styles } from './customAggrid.style'; -interface CustomAGGGridStyleProps { +export type CustomAGGridProps = AgGridReactProps & { shouldHidePinnedHeaderRightBorder?: boolean; showOverlay?: boolean; -} - -export interface CustomAGGridProps extends AgGridReactProps, CustomAGGGridStyleProps {} +}; // We have to define a minWidth to column to activate this feature -const onColumnResized = (params: ColumnResizedEvent) => { - const { column, finished } = params; - const colDefinedMinWidth = column?.getColDef()?.minWidth; - if (column && colDefinedMinWidth && finished) { - const newWidth = column?.getActualWidth(); - if (newWidth < colDefinedMinWidth) { - params.api.setColumnWidths([{ key: column, newWidth: colDefinedMinWidth }], finished, params.source); +function onColumnResized({ api, column, finished, source }: ColumnResizedEvent) { + if (column) { + const colDefinedMinWidth = column.getColDef().minWidth; + if (colDefinedMinWidth && finished && column.getActualWidth() < colDefinedMinWidth) { + api.setColumnWidths([{ key: column, newWidth: colDefinedMinWidth }], finished, source); } } -}; +} -export const CustomAGGrid = React.forwardRef((props, ref) => { - const { shouldHidePinnedHeaderRightBorder = false, showOverlay = false, ...agGridReactProps } = props; - const theme = useTheme(); - const intl = useIntl(); +export const CustomAGGrid = forwardRef( + ({ shouldHidePinnedHeaderRightBorder = false, showOverlay = false, ...agGridReactProps }, ref) => { + const theme = useTheme(); + const intl = useIntl(); - const GRID_PREFIX = 'grid.'; + const GRID_PREFIX = 'grid.'; - const getLocaleText = useCallback( - (params: GetLocaleTextParams) => { - const key = GRID_PREFIX + params.key; - return intl.formatMessage({ - id: key, - defaultMessage: params.defaultValue, - }); - }, - [intl] - ); + const getLocaleText = useCallback( + (params: GetLocaleTextParams) => { + const key = GRID_PREFIX + params.key; + return intl.formatMessage({ + id: key, + defaultMessage: params.defaultValue, + }); + }, + [intl] + ); - return ( - - - - ); -}); + return ( + + + + ); + } +); From ea574876e2e96acac0edcccdee8522af0b3eab97 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Mon, 17 Mar 2025 14:51:39 +0100 Subject: [PATCH 03/17] Add missing Ag-Grid locales --- package-lock.json | 7 + package.json | 1 + src/components/customAGGrid/customAggrid.tsx | 127 ++++++++++++++++--- 3 files changed, 118 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index 26ab49cae..b39a1e2d7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.88.2", "license": "MPL-2.0", "dependencies": { + "@ag-grid-community/locale": "^33.1.0", "@react-querybuilder/dnd": "^8.2.0", "@react-querybuilder/material": "^8.2.0", "autosuggest-highlight": "^3.3.4", @@ -129,6 +130,12 @@ "dev": true, "license": "MIT" }, + "node_modules/@ag-grid-community/locale": { + "version": "33.1.1", + "resolved": "https://registry.npmjs.org/@ag-grid-community/locale/-/locale-33.1.1.tgz", + "integrity": "sha512-YElnMhPJqlPEWKMpwKkAAVL3Z2GeYwEVwFmXz4RW/GZHf7EZQcTREbFXFq9O3y2dYT9LfC7DG4eCjG/+oOI5Gw==", + "license": "MIT" + }, "node_modules/@ampproject/remapping": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz", diff --git a/package.json b/package.json index 7e63b3efc..67c48e984 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "licenses-check": "license-checker --summary --excludePrivatePackages --production --onlyAllow \"$( jq -r .onlyAllow[] license-checker-config.json | tr '\n' ';')\" --excludePackages \"$( jq -r .excludePackages[] license-checker-config.json | tr '\n' ';')\"" }, "dependencies": { + "@ag-grid-community/locale": "^33.1.0", "@react-querybuilder/dnd": "^8.2.0", "@react-querybuilder/material": "^8.2.0", "autosuggest-highlight": "^3.3.4", diff --git a/src/components/customAGGrid/customAggrid.tsx b/src/components/customAGGrid/customAggrid.tsx index a0e4aa3db..7f7033868 100644 --- a/src/components/customAGGrid/customAggrid.tsx +++ b/src/components/customAGGrid/customAggrid.tsx @@ -5,16 +5,123 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { forwardRef, useCallback } from 'react'; +import { forwardRef, useMemo } from 'react'; import { AgGridReact, type AgGridReactProps } from 'ag-grid-react'; import { useIntl } from 'react-intl'; import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css'; -import type { ColumnResizedEvent, GetLocaleTextParams } from 'ag-grid-community'; +import type { ColumnResizedEvent } from 'ag-grid-community'; +import { + AG_GRID_LOCALE_BG, + AG_GRID_LOCALE_BR, + AG_GRID_LOCALE_CN, + AG_GRID_LOCALE_CZ, + AG_GRID_LOCALE_DE, + AG_GRID_LOCALE_DK, + AG_GRID_LOCALE_EG, + AG_GRID_LOCALE_EN, + AG_GRID_LOCALE_ES, + AG_GRID_LOCALE_FI, + AG_GRID_LOCALE_FR, + AG_GRID_LOCALE_GR, + AG_GRID_LOCALE_HK, + AG_GRID_LOCALE_HR, + AG_GRID_LOCALE_HU, + AG_GRID_LOCALE_IL, + AG_GRID_LOCALE_IR, + AG_GRID_LOCALE_IT, + AG_GRID_LOCALE_JP, + AG_GRID_LOCALE_KR, + AG_GRID_LOCALE_NL, + AG_GRID_LOCALE_NO, + AG_GRID_LOCALE_PK, + AG_GRID_LOCALE_PL, + AG_GRID_LOCALE_PT, + AG_GRID_LOCALE_RO, + AG_GRID_LOCALE_SE, + AG_GRID_LOCALE_SK, + AG_GRID_LOCALE_TR, + AG_GRID_LOCALE_TW, + AG_GRID_LOCALE_UA, + AG_GRID_LOCALE_VN, +} from '@ag-grid-community/locale'; import { Box, type SxProps, type Theme, useTheme } from '@mui/material'; import { mergeSx } from '../../utils/styles'; import { CUSTOM_AGGRID_THEME, styles } from './customAggrid.style'; +function useAgGridLocale() { + const intl = useIntl(); + return useMemo(() => { + switch ((intl.locale || intl.defaultLocale).toUpperCase().substring(0, 2)) { + case 'BG': + return AG_GRID_LOCALE_BG; + case 'BR': + return AG_GRID_LOCALE_BR; + case 'CN': + return AG_GRID_LOCALE_CN; + case 'CZ': + return AG_GRID_LOCALE_CZ; + case 'DE': + return AG_GRID_LOCALE_DE; + case 'DK': + return AG_GRID_LOCALE_DK; + case 'EG': + return AG_GRID_LOCALE_EG; + case 'ES': + return AG_GRID_LOCALE_ES; + case 'FI': + return AG_GRID_LOCALE_FI; + case 'FR': + return AG_GRID_LOCALE_FR; + case 'GR': + return AG_GRID_LOCALE_GR; + case 'HK': + return AG_GRID_LOCALE_HK; + case 'HR': + return AG_GRID_LOCALE_HR; + case 'HU': + return AG_GRID_LOCALE_HU; + case 'IL': + return AG_GRID_LOCALE_IL; + case 'IR': + return AG_GRID_LOCALE_IR; + case 'IT': + return AG_GRID_LOCALE_IT; + case 'JP': + return AG_GRID_LOCALE_JP; + case 'KR': + return AG_GRID_LOCALE_KR; + case 'NL': + return AG_GRID_LOCALE_NL; + case 'NO': + return AG_GRID_LOCALE_NO; + case 'PK': + return AG_GRID_LOCALE_PK; + case 'PL': + return AG_GRID_LOCALE_PL; + case 'PT': + return AG_GRID_LOCALE_PT; + case 'RO': + return AG_GRID_LOCALE_RO; + case 'SE': + return AG_GRID_LOCALE_SE; + case 'SK': + return AG_GRID_LOCALE_SK; + case 'TR': + return AG_GRID_LOCALE_TR; + case 'TW': + return AG_GRID_LOCALE_TW; + case 'UA': + return AG_GRID_LOCALE_UA; + case 'VN': + return AG_GRID_LOCALE_VN; + case 'EN': + default: + return AG_GRID_LOCALE_EN; + } + }, [intl.defaultLocale, intl.locale]); +} + export type CustomAGGridProps = AgGridReactProps & { shouldHidePinnedHeaderRightBorder?: boolean; showOverlay?: boolean; @@ -33,20 +140,6 @@ function onColumnResized({ api, column, finished, source }: ColumnResizedEvent) export const CustomAGGrid = forwardRef( ({ shouldHidePinnedHeaderRightBorder = false, showOverlay = false, ...agGridReactProps }, ref) => { const theme = useTheme(); - const intl = useIntl(); - - const GRID_PREFIX = 'grid.'; - - const getLocaleText = useCallback( - (params: GetLocaleTextParams) => { - const key = GRID_PREFIX + params.key; - return intl.formatMessage({ - id: key, - defaultMessage: params.defaultValue, - }); - }, - [intl] - ); return ( ( > Date: Mon, 7 Apr 2025 16:55:21 +0200 Subject: [PATCH 04/17] Adapt eslint config --- .eslintrc.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintrc.json b/.eslintrc.json index 0295fd3d3..1853612f5 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -28,7 +28,7 @@ "warn", { "patterns": [{ - "group": ["@mui/*/*", "!@mui/material/colors"], + "group": ["@mui/*/*", "!@mui/material/colors", "!@mui/material/locale"], "message": "Deep imports from MUI libraries are forbidden. Import only from the library root." }] } From 3c9e13965d22db1872bfdf0a03e67cbe8cfd8259 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Mon, 7 Apr 2025 17:12:17 +0200 Subject: [PATCH 05/17] exclude lang options --- src/components/customAGGrid/customAggrid.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/customAGGrid/customAggrid.tsx b/src/components/customAGGrid/customAggrid.tsx index 8fb477750..cda5e6cd0 100644 --- a/src/components/customAGGrid/customAggrid.tsx +++ b/src/components/customAGGrid/customAggrid.tsx @@ -122,7 +122,7 @@ function useAgGridLocale() { }, [intl.defaultLocale, intl.locale]); } -export type CustomAGGridProps = AgGridReactProps & { +export type CustomAGGridProps = Omit, 'localeText' | 'getLocaleText'> & { shouldHidePinnedHeaderRightBorder?: boolean; }; From 1f18d2b868d2f5f4aacb7f96d2ed413ae24d7156 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Tue, 8 Apr 2025 17:08:37 +0200 Subject: [PATCH 06/17] review --- src/components/customAGGrid/customAggrid.tsx | 95 +------------------- 1 file changed, 1 insertion(+), 94 deletions(-) diff --git a/src/components/customAGGrid/customAggrid.tsx b/src/components/customAGGrid/customAggrid.tsx index cda5e6cd0..062cf54fd 100644 --- a/src/components/customAGGrid/customAggrid.tsx +++ b/src/components/customAGGrid/customAggrid.tsx @@ -11,40 +11,7 @@ import { useIntl } from 'react-intl'; import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css'; import type { ColumnResizedEvent } from 'ag-grid-community'; -import { - AG_GRID_LOCALE_BG, - AG_GRID_LOCALE_BR, - AG_GRID_LOCALE_CN, - AG_GRID_LOCALE_CZ, - AG_GRID_LOCALE_DE, - AG_GRID_LOCALE_DK, - AG_GRID_LOCALE_EG, - AG_GRID_LOCALE_EN, - AG_GRID_LOCALE_ES, - AG_GRID_LOCALE_FI, - AG_GRID_LOCALE_FR, - AG_GRID_LOCALE_GR, - AG_GRID_LOCALE_HK, - AG_GRID_LOCALE_HR, - AG_GRID_LOCALE_HU, - AG_GRID_LOCALE_IL, - AG_GRID_LOCALE_IR, - AG_GRID_LOCALE_IT, - AG_GRID_LOCALE_JP, - AG_GRID_LOCALE_KR, - AG_GRID_LOCALE_NL, - AG_GRID_LOCALE_NO, - AG_GRID_LOCALE_PK, - AG_GRID_LOCALE_PL, - AG_GRID_LOCALE_PT, - AG_GRID_LOCALE_RO, - AG_GRID_LOCALE_SE, - AG_GRID_LOCALE_SK, - AG_GRID_LOCALE_TR, - AG_GRID_LOCALE_TW, - AG_GRID_LOCALE_UA, - AG_GRID_LOCALE_VN, -} from '@ag-grid-community/locale'; +import { AG_GRID_LOCALE_EN, AG_GRID_LOCALE_FR } from '@ag-grid-community/locale'; import { Box, type SxProps, type Theme, useTheme } from '@mui/material'; import { mergeSx } from '../../utils/styles'; import { CUSTOM_AGGRID_THEME, styles } from './customAggrid.style'; @@ -53,68 +20,8 @@ function useAgGridLocale() { const intl = useIntl(); return useMemo(() => { switch ((intl.locale || intl.defaultLocale).toUpperCase().substring(0, 2)) { - case 'BG': - return AG_GRID_LOCALE_BG; - case 'BR': - return AG_GRID_LOCALE_BR; - case 'CN': - return AG_GRID_LOCALE_CN; - case 'CZ': - return AG_GRID_LOCALE_CZ; - case 'DE': - return AG_GRID_LOCALE_DE; - case 'DK': - return AG_GRID_LOCALE_DK; - case 'EG': - return AG_GRID_LOCALE_EG; - case 'ES': - return AG_GRID_LOCALE_ES; - case 'FI': - return AG_GRID_LOCALE_FI; case 'FR': return AG_GRID_LOCALE_FR; - case 'GR': - return AG_GRID_LOCALE_GR; - case 'HK': - return AG_GRID_LOCALE_HK; - case 'HR': - return AG_GRID_LOCALE_HR; - case 'HU': - return AG_GRID_LOCALE_HU; - case 'IL': - return AG_GRID_LOCALE_IL; - case 'IR': - return AG_GRID_LOCALE_IR; - case 'IT': - return AG_GRID_LOCALE_IT; - case 'JP': - return AG_GRID_LOCALE_JP; - case 'KR': - return AG_GRID_LOCALE_KR; - case 'NL': - return AG_GRID_LOCALE_NL; - case 'NO': - return AG_GRID_LOCALE_NO; - case 'PK': - return AG_GRID_LOCALE_PK; - case 'PL': - return AG_GRID_LOCALE_PL; - case 'PT': - return AG_GRID_LOCALE_PT; - case 'RO': - return AG_GRID_LOCALE_RO; - case 'SE': - return AG_GRID_LOCALE_SE; - case 'SK': - return AG_GRID_LOCALE_SK; - case 'TR': - return AG_GRID_LOCALE_TR; - case 'TW': - return AG_GRID_LOCALE_TW; - case 'UA': - return AG_GRID_LOCALE_UA; - case 'VN': - return AG_GRID_LOCALE_VN; case 'EN': default: return AG_GRID_LOCALE_EN; From ce4c63ea7f0b33428e4bdf5ef0a6b7b65357413a Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 10 Apr 2025 08:20:45 +0200 Subject: [PATCH 07/17] locale can be override --- src/components/customAGGrid/customAggrid.tsx | 14 ++++++---- .../agGridTable/CustomAgGridTable.tsx | 27 +++++-------------- 2 files changed, 15 insertions(+), 26 deletions(-) diff --git a/src/components/customAGGrid/customAggrid.tsx b/src/components/customAGGrid/customAggrid.tsx index 062cf54fd..dc7fd0d5f 100644 --- a/src/components/customAGGrid/customAggrid.tsx +++ b/src/components/customAGGrid/customAggrid.tsx @@ -5,6 +5,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +import type { LiteralUnion } from 'type-fest'; import { forwardRef, useMemo } from 'react'; import { AgGridReact, type AgGridReactProps } from 'ag-grid-react'; import { useIntl } from 'react-intl'; @@ -16,21 +17,24 @@ import { Box, type SxProps, type Theme, useTheme } from '@mui/material'; import { mergeSx } from '../../utils/styles'; import { CUSTOM_AGGRID_THEME, styles } from './customAggrid.style'; -function useAgGridLocale() { +export type AgGridLocale = Partial, string>>; + +function useAgGridLocale(overrideLocale?: AgGridLocale) { const intl = useIntl(); return useMemo(() => { switch ((intl.locale || intl.defaultLocale).toUpperCase().substring(0, 2)) { case 'FR': - return AG_GRID_LOCALE_FR; + return { ...AG_GRID_LOCALE_FR, ...overrideLocale }; case 'EN': default: - return AG_GRID_LOCALE_EN; + return { ...AG_GRID_LOCALE_EN, ...overrideLocale }; } - }, [intl.defaultLocale, intl.locale]); + }, [intl.defaultLocale, intl.locale, overrideLocale]); } export type CustomAGGridProps = Omit, 'localeText' | 'getLocaleText'> & { shouldHidePinnedHeaderRightBorder?: boolean; + overrideLocale?: AgGridLocale; }; // We have to define a minWidth to column to activate this feature @@ -44,7 +48,7 @@ function onColumnResized({ api, column, finished, source }: ColumnResizedEvent) } export const CustomAGGrid = forwardRef( - ({ shouldHidePinnedHeaderRightBorder = false, ...agGridReactProps }, ref) => { + ({ shouldHidePinnedHeaderRightBorder = false, overrideLocale, ...agGridReactProps }, ref) => { const theme = useTheme(); return ( diff --git a/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx b/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx index 42bbabfde..c2dfaff6f 100644 --- a/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx +++ b/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx @@ -7,15 +7,11 @@ import { useCallback, useEffect, useState } from 'react'; import { useFieldArray, useFormContext } from 'react-hook-form'; -import { AgGridReactProps } from 'ag-grid-react'; -import 'ag-grid-community/styles/ag-grid.css'; -import 'ag-grid-community/styles/ag-theme-alpine.css'; import { Box, useTheme } from '@mui/material'; -import { useIntl } from 'react-intl'; -import { CellEditingStoppedEvent, ColumnState, SortChangedEvent } from 'ag-grid-community'; +import type { CellEditingStoppedEvent, ColumnState, SortChangedEvent } from 'ag-grid-community'; import { BottomRightButtons } from './BottomRightButtons'; import { FieldConstants } from '../../../../utils/constants/fieldConstants'; -import { CustomAGGrid } from '../../../customAGGrid'; +import { type AgGridLocale, CustomAGGrid, type CustomAGGridProps } from '../../../customAGGrid'; const style = (customProps: any) => ({ grid: (theme: any) => ({ @@ -81,12 +77,12 @@ export interface CustomAgGridTableProps { makeDefaultRowData: any; csvProps: unknown; cssProps: unknown; - defaultColDef: unknown; pagination: boolean; paginationPageSize: number; - rowSelection?: AgGridReactProps['rowSelection']; + rowSelection?: CustomAGGridProps['rowSelection']; alwaysShowVerticalScroll: boolean; stopEditingWhenCellsLoseFocus: boolean; + overrideLocale?: AgGridLocale; } export function CustomAgGridTable({ @@ -95,13 +91,12 @@ export function CustomAgGridTable({ makeDefaultRowData, csvProps, cssProps, - defaultColDef, pagination, paginationPageSize, rowSelection, alwaysShowVerticalScroll, stopEditingWhenCellsLoseFocus, - ...props + overrideLocale, }: Readonly) { // FIXME: right type => Theme --> not defined there ( gridStudy and gridExplore definition not the same ) const theme: any = useTheme(); @@ -182,15 +177,6 @@ export function CustomAgGridTable({ setNewRowAdded(true); }; - const intl = useIntl(); - const getLocaleText = useCallback( - (params: any) => { - const key = `agGrid.${params.key}`; - return intl.messages[key] || params.defaultValue; - }, - [intl] - ); - const onGridReady = (params: any) => { setGridApi(params); }; @@ -227,7 +213,6 @@ export function CustomAgGridTable({ Date: Thu, 10 Apr 2025 08:45:23 +0200 Subject: [PATCH 08/17] fix --- .../agGridTable/CustomAgGridTable.tsx | 46 ++++++++----------- 1 file changed, 20 insertions(+), 26 deletions(-) diff --git a/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx b/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx index c2dfaff6f..235fb7642 100644 --- a/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx +++ b/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx @@ -11,7 +11,7 @@ import { Box, useTheme } from '@mui/material'; import type { CellEditingStoppedEvent, ColumnState, SortChangedEvent } from 'ag-grid-community'; import { BottomRightButtons } from './BottomRightButtons'; import { FieldConstants } from '../../../../utils/constants/fieldConstants'; -import { type AgGridLocale, CustomAGGrid, type CustomAGGridProps } from '../../../customAGGrid'; +import { CustomAGGrid, type CustomAGGridProps } from '../../../customAGGrid'; const style = (customProps: any) => ({ grid: (theme: any) => ({ @@ -71,32 +71,31 @@ const style = (customProps: any) => ({ }), }); -export interface CustomAgGridTableProps { - name: string; - columnDefs: any; - makeDefaultRowData: any; - csvProps: unknown; - cssProps: unknown; - pagination: boolean; - paginationPageSize: number; - rowSelection?: CustomAGGridProps['rowSelection']; - alwaysShowVerticalScroll: boolean; - stopEditingWhenCellsLoseFocus: boolean; - overrideLocale?: AgGridLocale; -} +export type CustomAgGridTableProps = Required< + Pick< + CustomAGGridProps, + | 'columnDefs' + | 'defaultColDef' + | 'pagination' + | 'paginationPageSize' + | 'alwaysShowVerticalScroll' + | 'stopEditingWhenCellsLoseFocus' + > +> & + Pick & { + name: string; + makeDefaultRowData: any; + csvProps: unknown; + cssProps: unknown; + }; export function CustomAgGridTable({ name, - columnDefs, makeDefaultRowData, csvProps, cssProps, - pagination, - paginationPageSize, rowSelection, - alwaysShowVerticalScroll, - stopEditingWhenCellsLoseFocus, - overrideLocale, + ...props }: Readonly) { // FIXME: right type => Theme --> not defined there ( gridStudy and gridExplore definition not the same ) const theme: any = useTheme(); @@ -218,7 +217,6 @@ export function CustomAgGridTable({ rowDragEntireRow rowDragManaged onRowDragEnd={(e) => move(getIndex(e.node.data), e.overIndex)} - columnDefs={columnDefs} detailRowAutoHeight onSelectionChanged={() => { setSelectedRows(gridApi.api.getSelectedRows()); @@ -227,12 +225,8 @@ export function CustomAgGridTable({ onCellEditingStopped={onCellEditingStopped} onSortChanged={onSortChanged} getRowId={(row) => row.data[FieldConstants.AG_GRID_ROW_UUID]} - pagination={pagination} - paginationPageSize={paginationPageSize} - alwaysShowVerticalScroll={alwaysShowVerticalScroll} - stopEditingWhenCellsLoseFocus={stopEditingWhenCellsLoseFocus} theme="legacy" - overrideLocale={overrideLocale} + {...props} /> Date: Thu, 10 Apr 2025 14:24:09 +0200 Subject: [PATCH 09/17] Clean set lang types --- src/components/topBar/TopBar.tsx | 15 +++------------ src/components/topBar/tests/TopBar.test.tsx | 2 +- src/hooks/useLocalizedCountries.ts | 2 +- src/utils/constants/index.ts | 1 - src/utils/index.ts | 1 + .../{constants/browserConstants.ts => langs.ts} | 9 +++++---- src/utils/styles.ts | 4 ++++ src/utils/types/equipmentType.ts | 2 +- 8 files changed, 16 insertions(+), 20 deletions(-) rename src/utils/{constants/browserConstants.ts => langs.ts} (63%) diff --git a/src/components/topBar/TopBar.tsx b/src/components/topBar/TopBar.tsx index f23fc0559..f803595b9 100644 --- a/src/components/topBar/TopBar.tsx +++ b/src/components/topBar/TopBar.tsx @@ -49,14 +49,9 @@ import { LogoutProps } from '../authentication/Logout'; import { useStateBoolean } from '../../hooks/customStates/useStateBoolean'; import UserInformationDialog from './UserInformationDialog'; import UserSettingsDialog from './UserSettingsDialog'; -import { Metadata } from '../../utils'; -import { - DARK_THEME, - LANG_ENGLISH, - LANG_FRENCH, - LANG_SYSTEM, - LIGHT_THEME, -} from '../../utils/constants/browserConstants'; +import { type Metadata } from '../../utils/types/metadata'; +import { DARK_THEME, type GsTheme, LIGHT_THEME } from '../../utils/styles'; +import { type GsLang, LANG_ENGLISH, LANG_FRENCH, LANG_SYSTEM } from '../../utils/langs'; import MessageBanner from './MessageBanner'; const styles = { @@ -155,10 +150,6 @@ const CustomListItemIcon = styled(ListItemIcon)({ borderRadius: '25px', }); -export type GsLangUser = typeof LANG_ENGLISH | typeof LANG_FRENCH; -export type GsLang = GsLangUser | typeof LANG_SYSTEM; -export type GsTheme = typeof LIGHT_THEME | typeof DARK_THEME; - function abbreviationFromUserName(name: string) { const tab = name.split(' ').map((x) => x.charAt(0)); if (tab.length === 1) { diff --git a/src/components/topBar/tests/TopBar.test.tsx b/src/components/topBar/tests/TopBar.test.tsx index 2e5d9963e..5672e74f4 100644 --- a/src/components/topBar/tests/TopBar.test.tsx +++ b/src/components/topBar/tests/TopBar.test.tsx @@ -15,7 +15,7 @@ import { TopBar } from '../TopBar'; import { Metadata } from '../../..'; import PowsyblLogo from './powsybl_logo.svg?react'; -import { LANG_ENGLISH } from '../../../utils/constants/browserConstants'; +import { LANG_ENGLISH } from '../../../utils/langs'; import { topBarEn } from '../../../translations/en'; const apps: Metadata[] = [ diff --git a/src/hooks/useLocalizedCountries.ts b/src/hooks/useLocalizedCountries.ts index d47612373..436f49ad0 100644 --- a/src/hooks/useLocalizedCountries.ts +++ b/src/hooks/useLocalizedCountries.ts @@ -9,7 +9,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; import localizedCountries, { LocalizedCountries } from 'localized-countries'; import countriesFr from 'localized-countries/data/fr'; import countriesEn from 'localized-countries/data/en'; -import { LANG_ENGLISH, LANG_FRENCH, LANG_SYSTEM } from '../utils/constants/browserConstants'; +import { LANG_ENGLISH, LANG_FRENCH, LANG_SYSTEM } from '../utils/langs'; const supportedLanguages = [LANG_FRENCH, LANG_ENGLISH]; diff --git a/src/utils/constants/index.ts b/src/utils/constants/index.ts index f1c893e9b..7b16738a3 100644 --- a/src/utils/constants/index.ts +++ b/src/utils/constants/index.ts @@ -4,7 +4,6 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -export * from './browserConstants'; export * from './fetchStatus'; export * from './fieldConstants'; export * from './uiConstants'; diff --git a/src/utils/index.ts b/src/utils/index.ts index dc79d96e7..6002bfdac 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -8,6 +8,7 @@ export * from './algos'; export * from './constants'; export * from './conversionUtils'; export * from './functions'; +export * from './langs'; export * from './mapper'; export * from './styles'; export * from './types'; diff --git a/src/utils/constants/browserConstants.ts b/src/utils/langs.ts similarity index 63% rename from src/utils/constants/browserConstants.ts rename to src/utils/langs.ts index 777033eb7..509bdb0c9 100644 --- a/src/utils/constants/browserConstants.ts +++ b/src/utils/langs.ts @@ -1,11 +1,12 @@ -/** - * Copyright (c) 2024, RTE (http://www.rte-france.com) +/* + * Copyright © 2025, RTE (http://www.rte-france.com) * This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -export const DARK_THEME = 'Dark'; -export const LIGHT_THEME = 'Light'; + export const LANG_SYSTEM = 'sys'; export const LANG_ENGLISH = 'en'; export const LANG_FRENCH = 'fr'; +export type GsLangUser = typeof LANG_ENGLISH | typeof LANG_FRENCH; +export type GsLang = GsLangUser | typeof LANG_SYSTEM; diff --git a/src/utils/styles.ts b/src/utils/styles.ts index ed86480ab..eed7b121b 100644 --- a/src/utils/styles.ts +++ b/src/utils/styles.ts @@ -6,6 +6,10 @@ */ import { SxProps, Theme } from '@mui/material'; +export const DARK_THEME = 'Dark'; +export const LIGHT_THEME = 'Light'; +export type GsTheme = typeof LIGHT_THEME | typeof DARK_THEME; + // TODO do we need to export this to clients (index.ts) ? // like mui sx(slot)/class merging but simpler with less features // TODO use their system ? But it's named unstable_composeClasses so not supported? diff --git a/src/utils/types/equipmentType.ts b/src/utils/types/equipmentType.ts index 2c679beb6..0f884ea73 100644 --- a/src/utils/types/equipmentType.ts +++ b/src/utils/types/equipmentType.ts @@ -5,7 +5,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ import { type Theme } from '@mui/material'; -import { LIGHT_THEME } from '../constants'; +import { LIGHT_THEME } from '../styles'; export const TYPE_TAG_MAX_SIZE = '90px'; export const VL_TAG_MAX_SIZE = '100px'; From de2496a36a1c4c45f5d7d6a4aecb132db15873fe Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 10 Apr 2025 14:32:05 +0200 Subject: [PATCH 10/17] get all locales by lang --- src/components/customAGGrid/customAggrid.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/customAGGrid/customAggrid.tsx b/src/components/customAGGrid/customAggrid.tsx index dc7fd0d5f..09b80ac90 100644 --- a/src/components/customAGGrid/customAggrid.tsx +++ b/src/components/customAGGrid/customAggrid.tsx @@ -16,18 +16,20 @@ import { AG_GRID_LOCALE_EN, AG_GRID_LOCALE_FR } from '@ag-grid-community/locale' import { Box, type SxProps, type Theme, useTheme } from '@mui/material'; import { mergeSx } from '../../utils/styles'; import { CUSTOM_AGGRID_THEME, styles } from './customAggrid.style'; +import { type GsLangUser, LANG_ENGLISH, LANG_FRENCH } from '../../utils/langs'; export type AgGridLocale = Partial, string>>; +export type AgGridLocales = Record; -function useAgGridLocale(overrideLocale?: AgGridLocale) { +function useAgGridLocale(overrideLocale?: AgGridLocales) { const intl = useIntl(); - return useMemo(() => { - switch ((intl.locale || intl.defaultLocale).toUpperCase().substring(0, 2)) { - case 'FR': - return { ...AG_GRID_LOCALE_FR, ...overrideLocale }; - case 'EN': + return useMemo((): Record => { + switch ((intl.locale || intl.defaultLocale).toLowerCase().substring(0, 2)) { + case LANG_FRENCH: + return { ...AG_GRID_LOCALE_FR, ...overrideLocale?.[LANG_FRENCH] }; + case LANG_ENGLISH: default: - return { ...AG_GRID_LOCALE_EN, ...overrideLocale }; + return { ...AG_GRID_LOCALE_EN, ...overrideLocale?.[LANG_ENGLISH] }; } }, [intl.defaultLocale, intl.locale, overrideLocale]); } From 2f6d2a950953abdc7fcd8b98e2b882fed0976f37 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 10 Apr 2025 14:50:44 +0200 Subject: [PATCH 11/17] fix --- src/components/customAGGrid/customAggrid.tsx | 14 +++++++------- .../agGridTable/CustomAgGridTable.tsx | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/customAGGrid/customAggrid.tsx b/src/components/customAGGrid/customAggrid.tsx index 09b80ac90..514c90f4f 100644 --- a/src/components/customAGGrid/customAggrid.tsx +++ b/src/components/customAGGrid/customAggrid.tsx @@ -21,22 +21,22 @@ import { type GsLangUser, LANG_ENGLISH, LANG_FRENCH } from '../../utils/langs'; export type AgGridLocale = Partial, string>>; export type AgGridLocales = Record; -function useAgGridLocale(overrideLocale?: AgGridLocales) { +function useAgGridLocale(overrideLocales?: AgGridLocales) { const intl = useIntl(); return useMemo((): Record => { switch ((intl.locale || intl.defaultLocale).toLowerCase().substring(0, 2)) { case LANG_FRENCH: - return { ...AG_GRID_LOCALE_FR, ...overrideLocale?.[LANG_FRENCH] }; + return { ...AG_GRID_LOCALE_FR, ...overrideLocales?.[LANG_FRENCH] }; case LANG_ENGLISH: default: - return { ...AG_GRID_LOCALE_EN, ...overrideLocale?.[LANG_ENGLISH] }; + return { ...AG_GRID_LOCALE_EN, ...overrideLocales?.[LANG_ENGLISH] }; } - }, [intl.defaultLocale, intl.locale, overrideLocale]); + }, [intl.defaultLocale, intl.locale, overrideLocales]); } export type CustomAGGridProps = Omit, 'localeText' | 'getLocaleText'> & { shouldHidePinnedHeaderRightBorder?: boolean; - overrideLocale?: AgGridLocale; + overrideLocales?: AgGridLocales; }; // We have to define a minWidth to column to activate this feature @@ -50,7 +50,7 @@ function onColumnResized({ api, column, finished, source }: ColumnResizedEvent) } export const CustomAGGrid = forwardRef( - ({ shouldHidePinnedHeaderRightBorder = false, overrideLocale, ...agGridReactProps }, ref) => { + ({ shouldHidePinnedHeaderRightBorder = false, overrideLocales, ...agGridReactProps }, ref) => { const theme = useTheme(); return ( @@ -63,7 +63,7 @@ export const CustomAGGrid = forwardRef( > > & - Pick & { + Pick & { name: string; makeDefaultRowData: any; csvProps: unknown; From 25c6a02dd7a3d705d67f046302c04bf337c8b55e Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 10 Apr 2025 16:55:22 +0200 Subject: [PATCH 12/17] Bad number settings for FRA --- src/components/customAGGrid/customAggrid.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/customAGGrid/customAggrid.tsx b/src/components/customAGGrid/customAggrid.tsx index 514c90f4f..939b3ec1a 100644 --- a/src/components/customAGGrid/customAggrid.tsx +++ b/src/components/customAGGrid/customAggrid.tsx @@ -26,7 +26,12 @@ function useAgGridLocale(overrideLocales?: AgGridLocales) { return useMemo((): Record => { switch ((intl.locale || intl.defaultLocale).toLowerCase().substring(0, 2)) { case LANG_FRENCH: - return { ...AG_GRID_LOCALE_FR, ...overrideLocales?.[LANG_FRENCH] }; + return { + ...AG_GRID_LOCALE_FR, + thousandSeparator: ' ', + decimalSeparator: ',', + ...overrideLocales?.[LANG_FRENCH], + }; case LANG_ENGLISH: default: return { ...AG_GRID_LOCALE_EN, ...overrideLocales?.[LANG_ENGLISH] }; From 537eb3a886517867ba972f238798936f73a2e08d Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Fri, 11 Apr 2025 13:43:20 +0200 Subject: [PATCH 13/17] only support official translation keys --- src/components/customAGGrid/customAggrid.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/customAGGrid/customAggrid.tsx b/src/components/customAGGrid/customAggrid.tsx index 939b3ec1a..f3290e669 100644 --- a/src/components/customAGGrid/customAggrid.tsx +++ b/src/components/customAGGrid/customAggrid.tsx @@ -5,7 +5,6 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import type { LiteralUnion } from 'type-fest'; import { forwardRef, useMemo } from 'react'; import { AgGridReact, type AgGridReactProps } from 'ag-grid-react'; import { useIntl } from 'react-intl'; @@ -18,7 +17,7 @@ import { mergeSx } from '../../utils/styles'; import { CUSTOM_AGGRID_THEME, styles } from './customAggrid.style'; import { type GsLangUser, LANG_ENGLISH, LANG_FRENCH } from '../../utils/langs'; -export type AgGridLocale = Partial, string>>; +export type AgGridLocale = Partial>; // using EN for keyof because it's the only who has more keys, so more complete export type AgGridLocales = Record; function useAgGridLocale(overrideLocales?: AgGridLocales) { From 4d00c6485ad5e2bfecbe902906020d825abe26ae Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 17 Apr 2025 02:43:19 +0200 Subject: [PATCH 14/17] move specific style to concerned front --- .../customAGGrid/customAggrid.style.ts | 11 +++----- src/components/customAGGrid/customAggrid.tsx | 26 +++++++------------ 2 files changed, 14 insertions(+), 23 deletions(-) diff --git a/src/components/customAGGrid/customAggrid.style.ts b/src/components/customAGGrid/customAggrid.style.ts index 57190a1f5..09960329e 100644 --- a/src/components/customAGGrid/customAggrid.style.ts +++ b/src/components/customAGGrid/customAggrid.style.ts @@ -10,9 +10,12 @@ export const CUSTOM_AGGRID_THEME = 'custom-aggrid-theme'; export const styles = { grid: (theme) => ({ - width: 'auto', + width: 'auto', // TODO 100% height: '100%', position: 'relative', + '@media print': { + pageBreakInside: 'avoid', + }, [`&.${CUSTOM_AGGRID_THEME}`]: { '--ag-value-change-value-highlight-background-color': theme.aggrid.valueChangeHighlightBackgroundColor, @@ -42,10 +45,4 @@ export const styles = { border: 'none !important', }, }), - noBorderRight: { - // hides right border for header of "Edit" column due to column being pinned - '& .ag-pinned-left-header': { - borderRight: 'none', - }, - }, } as const satisfies Record>; diff --git a/src/components/customAGGrid/customAggrid.tsx b/src/components/customAGGrid/customAggrid.tsx index f3290e669..4b8a27ff3 100644 --- a/src/components/customAGGrid/customAggrid.tsx +++ b/src/components/customAGGrid/customAggrid.tsx @@ -6,13 +6,13 @@ */ import { forwardRef, useMemo } from 'react'; -import { AgGridReact, type AgGridReactProps } from 'ag-grid-react'; -import { useIntl } from 'react-intl'; +import { AgGridReact } from 'ag-grid-react'; import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css'; -import type { ColumnResizedEvent } from 'ag-grid-community'; +import type { ColumnResizedEvent, GridOptions } from 'ag-grid-community'; import { AG_GRID_LOCALE_EN, AG_GRID_LOCALE_FR } from '@ag-grid-community/locale'; -import { Box, type SxProps, type Theme, useTheme } from '@mui/material'; +import { useIntl } from 'react-intl'; +import { Box, type BoxProps, type Theme, useTheme } from '@mui/material'; import { mergeSx } from '../../utils/styles'; import { CUSTOM_AGGRID_THEME, styles } from './customAggrid.style'; import { type GsLangUser, LANG_ENGLISH, LANG_FRENCH } from '../../utils/langs'; @@ -38,10 +38,10 @@ function useAgGridLocale(overrideLocales?: AgGridLocales) { }, [intl.defaultLocale, intl.locale, overrideLocales]); } -export type CustomAGGridProps = Omit, 'localeText' | 'getLocaleText'> & { - shouldHidePinnedHeaderRightBorder?: boolean; - overrideLocales?: AgGridLocales; -}; +export type CustomAGGridProps = Omit, 'localeText' | 'getLocaleText'> & + Pick & { + overrideLocales?: AgGridLocales; + }; // We have to define a minWidth to column to activate this feature function onColumnResized({ api, column, finished, source }: ColumnResizedEvent) { @@ -54,17 +54,11 @@ function onColumnResized({ api, column, finished, source }: ColumnResizedEvent) } export const CustomAGGrid = forwardRef( - ({ shouldHidePinnedHeaderRightBorder = false, overrideLocales, ...agGridReactProps }, ref) => { + ({ overrideLocales, sx, ...agGridReactProps }, ref) => { const theme = useTheme(); return ( - + Date: Thu, 17 Apr 2025 09:10:58 +0200 Subject: [PATCH 15/17] specify we want a div as asked by aggrid doc --- src/components/customAGGrid/customAggrid.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/customAGGrid/customAggrid.tsx b/src/components/customAGGrid/customAggrid.tsx index 4b8a27ff3..8c943e527 100644 --- a/src/components/customAGGrid/customAggrid.tsx +++ b/src/components/customAGGrid/customAggrid.tsx @@ -58,7 +58,11 @@ export const CustomAGGrid = forwardRef( const theme = useTheme(); return ( - + Date: Thu, 17 Apr 2025 17:02:20 +0200 Subject: [PATCH 16/17] review --- src/components/customAGGrid/customAggrid.style.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/customAGGrid/customAggrid.style.ts b/src/components/customAGGrid/customAggrid.style.ts index 09960329e..08fe094a1 100644 --- a/src/components/customAGGrid/customAggrid.style.ts +++ b/src/components/customAGGrid/customAggrid.style.ts @@ -10,12 +10,9 @@ export const CUSTOM_AGGRID_THEME = 'custom-aggrid-theme'; export const styles = { grid: (theme) => ({ - width: 'auto', // TODO 100% + width: 'auto', height: '100%', position: 'relative', - '@media print': { - pageBreakInside: 'avoid', - }, [`&.${CUSTOM_AGGRID_THEME}`]: { '--ag-value-change-value-highlight-background-color': theme.aggrid.valueChangeHighlightBackgroundColor, From 20a1cfdfd071246656d81d2ef4aedb335dce20c7 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Fri, 18 Apr 2025 15:11:12 +0200 Subject: [PATCH 17/17] review --- src/components/customAGGrid/customAggrid.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/customAGGrid/customAggrid.tsx b/src/components/customAGGrid/customAggrid.tsx index 8c943e527..8ea10cb8d 100644 --- a/src/components/customAGGrid/customAggrid.tsx +++ b/src/components/customAGGrid/customAggrid.tsx @@ -6,10 +6,10 @@ */ import { forwardRef, useMemo } from 'react'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridReact, type AgGridReactProps } from 'ag-grid-react'; import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css'; -import type { ColumnResizedEvent, GridOptions } from 'ag-grid-community'; +import type { ColumnResizedEvent } from 'ag-grid-community'; import { AG_GRID_LOCALE_EN, AG_GRID_LOCALE_FR } from '@ag-grid-community/locale'; import { useIntl } from 'react-intl'; import { Box, type BoxProps, type Theme, useTheme } from '@mui/material'; @@ -38,7 +38,7 @@ function useAgGridLocale(overrideLocales?: AgGridLocales) { }, [intl.defaultLocale, intl.locale, overrideLocales]); } -export type CustomAGGridProps = Omit, 'localeText' | 'getLocaleText'> & +export type CustomAGGridProps = Omit, 'localeText' | 'getLocaleText'> & Pick & { overrideLocales?: AgGridLocales; };