diff --git a/package-lock.json b/package-lock.json index f577277d..d298bd46 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@gridsuite/commons-ui", - "version": "0.78.0", + "version": "0.79.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@gridsuite/commons-ui", - "version": "0.78.0", + "version": "0.79.0", "license": "MPL-2.0", "dependencies": { "@react-querybuilder/dnd": "^7.2.0", @@ -61,8 +61,8 @@ "@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/parser": "^7.0.0", "@vitejs/plugin-react": "^4.2.1", - "ag-grid-community": "^31.0.0", - "ag-grid-react": "^31.2.0", + "ag-grid-community": "^33.0.3", + "ag-grid-react": "^33.0.3", "babel-eslint": "^10.1.0", "babel-preset-airbnb": "^5.0.0", "babel-preset-vite": "^1.1.3", @@ -117,8 +117,8 @@ "@mui/material": "^5.15.14", "@mui/system": "^5.15.15", "@mui/x-tree-view": "^6.17.0", - "ag-grid-community": "^31.0.0", - "ag-grid-react": "^31.2.0", + "ag-grid-community": "^33.0.3", + "ag-grid-react": "^33.0.3", "notistack": "^3.0.1", "papaparse": "^5.4.1", "react": "^18.2.0", @@ -6410,24 +6410,33 @@ "node": ">=0.4.0" } }, - "node_modules/ag-grid-community": { - "version": "31.2.0", - "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-31.2.0.tgz", - "integrity": "sha512-Ija6X171Iq3mFZASZlriQIIdEFqA71rZIsjQD6KHy5lMmxnoseZTX2neThBav1gvr6SA6n5B2PD6eUHdZnrUfw==", + "node_modules/ag-charts-types": { + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-11.0.3.tgz", + "integrity": "sha512-q7O2viQXPyO014QVH7KjFCUmQ/NvMBx9ReZtramQ44u+/aAa0ttLi/coK+V0Hse4/MG1eB/2XhgymdooQ0Kalg==", "dev": true }, + "node_modules/ag-grid-community": { + "version": "33.0.3", + "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-33.0.3.tgz", + "integrity": "sha512-HZeVmVieZ5Gm9j09Itecqm+OIX8X6cU4TJToUbsXv3DxdO9SK5/s8aAJAwBHtNRXOhHrhqQYwrY2yc3OtzWwcQ==", + "dev": true, + "dependencies": { + "ag-charts-types": "11.0.3" + } + }, "node_modules/ag-grid-react": { - "version": "31.2.0", - "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-31.2.0.tgz", - "integrity": "sha512-ObFdPmF3EC7/xWZX8NjrZjURePyFa72MWjb1ZgUqDP7Wq09OSXXyKBN1qXmfUIT3h4o5+os6tCQEqoo7Op+3ZA==", + "version": "33.0.3", + "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-33.0.3.tgz", + "integrity": "sha512-6IcraSVqsUG/hzTeZ0D0dtddAcZKcWdN75ek/O+lCA6r22abJPe33nHBYVezkTV8k6D3JhA24mlTwduzn0GZLQ==", "dev": true, "dependencies": { - "ag-grid-community": "31.2.0", + "ag-grid-community": "33.0.3", "prop-types": "^15.8.1" }, "peerDependencies": { - "react": "^16.3.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/agent-base": { diff --git a/package.json b/package.json index fd06df19..cde79e67 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gridsuite/commons-ui", - "version": "0.78.0", + "version": "0.79.0", "description": "common react components for gridsuite applications", "engines": { "npm": ">=9", @@ -54,8 +54,8 @@ "@mui/material": "^5.15.14", "@mui/system": "^5.15.15", "@mui/x-tree-view": "^6.17.0", - "ag-grid-community": "^31.0.0", - "ag-grid-react": "^31.2.0", + "ag-grid-community": "^33.0.3", + "ag-grid-react": "^33.0.3", "notistack": "^3.0.1", "papaparse": "^5.4.1", "react": "^18.2.0", @@ -101,8 +101,8 @@ "@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/parser": "^7.0.0", "@vitejs/plugin-react": "^4.2.1", - "ag-grid-community": "^31.0.0", - "ag-grid-react": "^31.2.0", + "ag-grid-community": "^33.0.3", + "ag-grid-react": "^33.0.3", "babel-eslint": "^10.1.0", "babel-preset-airbnb": "^5.0.0", "babel-preset-vite": "^1.1.3", diff --git a/src/components/customAGGrid/customAggrid.tsx b/src/components/customAGGrid/customAggrid.tsx index 7e2708f6..28f138f6 100644 --- a/src/components/customAGGrid/customAggrid.tsx +++ b/src/components/customAGGrid/customAggrid.tsx @@ -31,7 +31,7 @@ const onColumnResized = (params: ColumnResizedEvent) => { if (column && colDefinedMinWidth && finished) { const newWidth = column?.getActualWidth(); if (newWidth < colDefinedMinWidth) { - column?.setActualWidth(colDefinedMinWidth, params.source); + params.api.setColumnWidths([{ key: column, newWidth: colDefinedMinWidth }], finished, params.source); } } }; @@ -66,9 +66,9 @@ export const CustomAGGrid = React.forwardRef((pr diff --git a/src/components/filter/explicitNaming/ExplicitNamingFilterForm.tsx b/src/components/filter/explicitNaming/ExplicitNamingFilterForm.tsx index 6e71e737..f129e0b5 100644 --- a/src/components/filter/explicitNaming/ExplicitNamingFilterForm.tsx +++ b/src/components/filter/explicitNaming/ExplicitNamingFilterForm.tsx @@ -13,10 +13,7 @@ import { v4 as uuid4 } from 'uuid'; import { UUID } from 'crypto'; import { FieldConstants } from '../../../utils/constants/fieldConstants'; import yup from '../../../utils/yupConfig'; -import { - CustomAgGridTable, - ROW_DRAGGING_SELECTION_COLUMN_DEF, -} from '../../inputs/reactHookForm/agGridTable/CustomAgGridTable'; +import { CustomAgGridTable } from '../../inputs/reactHookForm/agGridTable/CustomAgGridTable'; import { SelectInput } from '../../inputs/reactHookForm/selectInputs/SelectInput'; import { Generator, Load } from '../../../utils/types/equipmentTypes'; import { NumericEditor } from '../../inputs/reactHookForm/agGridTable/cellEditors/numericEditor'; @@ -129,11 +126,11 @@ export function ExplicitNamingFilterForm({ sourceFilterForExplicitNamingConversi const columnDefs = useMemo(() => { const newColumnDefs: any[] = [ - ...ROW_DRAGGING_SELECTION_COLUMN_DEF, { headerName: intl.formatMessage({ id: FieldConstants.EQUIPMENT_ID, }), + rowDrag: true, field: FieldConstants.EQUIPMENT_ID, editable: true, singleClickEdit: true, @@ -246,7 +243,12 @@ export function ExplicitNamingFilterForm({ sourceFilterForExplicitNamingConversi makeDefaultRowData={makeDefaultRowData} pagination paginationPageSize={100} - suppressRowClickSelection + rowSelection={{ + mode: 'multiRow', + enableClickSelection: false, + checkboxes: true, + headerCheckbox: true, + }} alwaysShowVerticalScroll stopEditingWhenCellsLoseFocus csvProps={{ diff --git a/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx b/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx index 094fcd30..306c7c23 100644 --- a/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx +++ b/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx @@ -7,7 +7,7 @@ import { useCallback, useEffect, useState } from 'react'; import { useFieldArray, useFormContext } from 'react-hook-form'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridReact, 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'; @@ -16,15 +16,6 @@ import { CellEditingStoppedEvent, ColumnState, SortChangedEvent } from 'ag-grid- import { BottomRightButtons } from './BottomRightButtons'; import { FieldConstants } from '../../../../utils/constants/fieldConstants'; -export const ROW_DRAGGING_SELECTION_COLUMN_DEF = [ - { - rowDrag: true, - headerCheckboxSelection: true, - checkboxSelection: true, - maxWidth: 50, - }, -]; - const style = (customProps: any) => ({ grid: (theme: any) => ({ width: 'auto', @@ -92,7 +83,7 @@ export interface CustomAgGridTableProps { defaultColDef: unknown; pagination: boolean; paginationPageSize: number; - suppressRowClickSelection: boolean; + rowSelection?: AgGridReactProps['rowSelection']; alwaysShowVerticalScroll: boolean; stopEditingWhenCellsLoseFocus: boolean; } @@ -106,11 +97,11 @@ export function CustomAgGridTable({ defaultColDef, pagination, paginationPageSize, - suppressRowClickSelection, + rowSelection, alwaysShowVerticalScroll, stopEditingWhenCellsLoseFocus, ...props -}: CustomAgGridTableProps) { +}: Readonly) { // FIXME: right type => Theme --> not defined there ( gridStudy and gridExplore definition not the same ) const theme: any = useTheme(); const [gridApi, setGridApi] = useState(null); @@ -243,11 +234,10 @@ export function CustomAgGridTable({ onGridReady={onGridReady} getLocaleText={getLocaleText} cacheOverflowSize={10} - rowSelection="multiple" + rowSelection={rowSelection ?? 'multiple'} rowDragEntireRow rowDragManaged onRowDragEnd={(e) => move(getIndex(e.node.data), e.overIndex)} - suppressBrowserResizeObserver columnDefs={columnDefs} detailRowAutoHeight onSelectionChanged={() => { @@ -259,9 +249,9 @@ export function CustomAgGridTable({ getRowId={(row) => row.data[FieldConstants.AG_GRID_ROW_UUID]} pagination={pagination} paginationPageSize={paginationPageSize} - suppressRowClickSelection={suppressRowClickSelection} alwaysShowVerticalScroll={alwaysShowVerticalScroll} stopEditingWhenCellsLoseFocus={stopEditingWhenCellsLoseFocus} + theme="legacy" {...props} />