From dffb8312ccab8f873461c449524a7a88d150dfce Mon Sep 17 00:00:00 2001 From: AnnMarueW Date: Thu, 24 Jul 2025 14:27:54 -0700 Subject: [PATCH 1/6] removed deprecated defaultProps --- src/lib/components/AgGrid.react.js | 19 ++-------- src/lib/fragments/AgGrid.react.js | 60 +++++++++++++++++------------- 2 files changed, 38 insertions(+), 41 deletions(-) diff --git a/src/lib/components/AgGrid.react.js b/src/lib/components/AgGrid.react.js index 5813dd3b..8befaf50 100644 --- a/src/lib/components/AgGrid.react.js +++ b/src/lib/components/AgGrid.react.js @@ -52,24 +52,11 @@ function DashAgGrid(props) { DashAgGrid.dashRenderType = true; -DashAgGrid.defaultProps = { - className: 'ag-theme-alpine', - resetColumnState: false, - exportDataAsCsv: false, - selectAll: false, - deselectAll: false, - enableEnterpriseModules: false, - updateColumnState: false, +DashAgGrid.dashPersistence = { persisted_props: ['selectedRows'], persistence_type: 'local', - suppressDragLeaveHidesColumns: true, - dangerously_allow_code: false, - rowModelType: 'clientSide', - dashGridOptions: {}, - filterModel: {}, - paginationGoTo: null, - selectedRows: [], }; + DashAgGrid.propTypes = { /******************************** * DASH PROPS @@ -751,7 +738,7 @@ DashAgGrid.propTypes = { }; export const propTypes = DashAgGrid.propTypes; -export const defaultProps = DashAgGrid.defaultProps; +// export const defaultProps = DashAgGrid.defaultProps; export default DashAgGrid; diff --git a/src/lib/fragments/AgGrid.react.js b/src/lib/fragments/AgGrid.react.js index 7250339f..9850257b 100644 --- a/src/lib/fragments/AgGrid.react.js +++ b/src/lib/fragments/AgGrid.react.js @@ -15,11 +15,7 @@ import { assoc, assocPath, } from 'ramda'; -import { - propTypes as _propTypes, - defaultProps as _defaultProps, - apiGetters, -} from '../components/AgGrid.react'; +import {propTypes as _propTypes, apiGetters} from '../components/AgGrid.react'; import { COLUMN_DANGEROUS_FUNCTIONS, COLUMN_MAYBE_FUNCTIONS, @@ -127,7 +123,11 @@ function usePrevious(value) { return ref.current; } -export function DashAgGrid(props) { +export function DashAgGrid({ + className = 'ag-theme-alpine', + suppressDragLeaveHidesColumns = true, + ...props +}) { const active = useRef(true); // const customSetProps = props.setProps; @@ -680,7 +680,7 @@ export function DashAgGrid(props) { convertAllPropsRef.current = convertAllProps; const virtualRowData = useCallback(() => { - const {rowModelType} = props; + const {rowModelType = 'clientSide'} = props; const virtualRowData = []; if (rowModelType === 'clientSide' && gridApi) { gridApi.forEachNodeAfterFilterAndSort((node) => { @@ -693,7 +693,7 @@ export function DashAgGrid(props) { }, [props.rowModelType, gridApi]); const onFilterChanged = useCallback(() => { - const {rowModelType} = props; + const {rowModelType = 'clientSide'} = props; if (!gridApi) { return; } @@ -731,7 +731,7 @@ export function DashAgGrid(props) { }, [props.rowData, virtualRowData, getRowData, customSetProps]); const onSortChanged = useCallback(() => { - const {rowModelType} = props; + const {rowModelType = 'clientSide'} = props; const propsToSet = {}; if (rowModelType === 'clientSide') { propsToSet.virtualRowData = virtualRowData(); @@ -746,12 +746,17 @@ export function DashAgGrid(props) { const onRowDataUpdated = useCallback(() => { // Handles preserving existing selections when rowData is updated in a callback - const {selectedRows, rowData, rowModelType, filterModel} = props; + const { + selectedRows = [], + rowData, + rowModelType = 'clientSide', + filterModel = {}, + } = props; if (gridApi && !gridApi?.isDestroyed()) { dataUpdates.current = true; pauseSelections.current = true; - setSelection(selectedRows); + setSelection(selectedRows ?? []); if (rowData && rowModelType === 'clientSide') { const virtualRowDataResult = virtualRowData(); @@ -803,7 +808,7 @@ export function DashAgGrid(props) { setTimeout(() => { if (!pauseSelections.current) { const selectedRows = gridApi.getSelectedRows(); - if (!equals(selectedRows, props.selectedRows)) { + if (!equals(selectedRows, props.selectedRows ?? [])) { // Flag that the selection event was fired selectionEventFired.current = true; customSetProps({selectedRows}); @@ -839,7 +844,7 @@ export function DashAgGrid(props) { if (data.async === false) { gridApiParam.applyTransaction(data); if (selectedRows) { - setSelection(selectedRows); + setSelection(selectedRows ?? []); } } else { gridApiParam.applyTransactionAsync(data); @@ -852,7 +857,7 @@ export function DashAgGrid(props) { (params) => { // Applying Infinite Row Model // see: https://www.ag-grid.com/javascript-grid/infinite-scrolling/ - const {rowModelType, eventListeners} = props; + const {rowModelType = 'clientSide', eventListeners} = props; if (rowModelType === 'infinite') { params.api.setGridOption('datasource', getDatasource()); @@ -1255,7 +1260,7 @@ export function DashAgGrid(props) { ); const onAsyncTransactionsFlushed = useCallback(() => { - const {selectedRows} = props; + const {selectedRows = []} = props; if (selectedRows) { setSelection(selectedRows); } @@ -1284,8 +1289,8 @@ export function DashAgGrid(props) { // Apply selections if (gridApi) { const selectedRows = gridApi.getSelectedRows(); - if (!equals(selectedRows, props.selectedRows)) { - setSelection(props.selectedRows); + if (!equals(selectedRows, props.selectedRows ?? [])) { + setSelection(props.selectedRows ?? []); } } }, [props.selectedRows, gridApi]); @@ -1335,8 +1340,12 @@ export function DashAgGrid(props) { // Handle gridApi initialization - filter model application useEffect(() => { - if (gridApi && gridApi !== prevGridApi && !isEmpty(props.filterModel)) { - gridApi.setFilterModel(props.filterModel); + if ( + gridApi && + gridApi !== prevGridApi && + !isEmpty(props.filterModel ?? {}) + ) { + gridApi.setFilterModel(props.filterModel ?? {}); } }, [gridApi, prevGridApi, props.filterModel]); @@ -1429,10 +1438,10 @@ export function DashAgGrid(props) { if ( gridApi && gridApi === prevGridApi && - props.filterModel && - gridApi.getFilterModel() !== props.filterModel + (props.filterModel ?? {}) && + gridApi.getFilterModel() !== (props.filterModel ?? {}) ) { - gridApi.setFilterModel(props.filterModel); + gridApi.setFilterModel(props.filterModel ?? {}); } }, [props.filterModel, gridApi, prevGridApi]); @@ -1526,7 +1535,7 @@ export function DashAgGrid(props) { setColumnState, ]); - const {id, style, className, dashGridOptions, ...restProps} = props; + const {id, style, dashGridOptions = {}, ...restProps} = props; const passingProps = pick(PASSTHRU_PROPS, restProps); const convertedProps = convertAllProps( omit(NO_CONVERT_PROPS, {...dashGridOptions, ...restProps}) @@ -1600,16 +1609,17 @@ export function DashAgGrid(props) { components={components} {...passingProps} {...convertedProps} + suppressDragLeaveHidesColumns={suppressDragLeaveHidesColumns} > ); } -DashAgGrid.defaultProps = _defaultProps; +// DashAgGrid.defaultProps = _defaultProps; DashAgGrid.propTypes = {parentState: PropTypes.any, ..._propTypes}; export const propTypes = DashAgGrid.propTypes; -export const defaultProps = DashAgGrid.defaultProps; +// export const defaultProps = DashAgGrid.defaultProps; var dagfuncs = (window.dash_ag_grid = window.dash_ag_grid || {}); dagfuncs.useGridFilter = useGridFilter; From d8c81e53469733b04b7641d991bdf520d9e81792 Mon Sep 17 00:00:00 2001 From: AnnMarueW Date: Thu, 24 Jul 2025 22:39:31 -0700 Subject: [PATCH 2/6] added dash2 compatibility for persistence --- src/lib/components/AgGrid.react.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/lib/components/AgGrid.react.js b/src/lib/components/AgGrid.react.js index 8befaf50..8acd6153 100644 --- a/src/lib/components/AgGrid.react.js +++ b/src/lib/components/AgGrid.react.js @@ -52,10 +52,20 @@ function DashAgGrid(props) { DashAgGrid.dashRenderType = true; -DashAgGrid.dashPersistence = { +/** Apply persistence settings based on React version for dash 2 compatibility */ +const REACT_VERSION_DASH2_COMPAT = 18.3; +const persistence = { persisted_props: ['selectedRows'], persistence_type: 'local', }; +if ( + parseFloat(React.version.substring(0, React.version.lastIndexOf('.'))) < + REACT_VERSION_DASH2_COMPAT +) { + DashAgGrid.defaultProps = persistence; +} else { + DashAgGrid.dashPersistence = persistence; +} DashAgGrid.propTypes = { /******************************** From 5e9957219322dc26b9e04be77645b56d33d7c09f Mon Sep 17 00:00:00 2001 From: AnnMarueW Date: Thu, 24 Jul 2025 23:17:05 -0700 Subject: [PATCH 3/6] remove className theme default for v33. --- src/lib/fragments/AgGrid.react.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/fragments/AgGrid.react.js b/src/lib/fragments/AgGrid.react.js index c7eb4f2c..4b222fa4 100644 --- a/src/lib/fragments/AgGrid.react.js +++ b/src/lib/fragments/AgGrid.react.js @@ -125,7 +125,6 @@ function usePrevious(value) { } export function DashAgGrid({ - className = 'ag-theme-alpine', suppressDragLeaveHidesColumns = true, ...props }) { From 2b22fcf7b3ba69ec612ae61dc3803be961af1112 Mon Sep 17 00:00:00 2001 From: AnnMarueW Date: Thu, 24 Jul 2025 23:27:13 -0700 Subject: [PATCH 4/6] remove className theme default for v33. --- src/lib/fragments/AgGrid.react.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/fragments/AgGrid.react.js b/src/lib/fragments/AgGrid.react.js index 4b222fa4..a9479192 100644 --- a/src/lib/fragments/AgGrid.react.js +++ b/src/lib/fragments/AgGrid.react.js @@ -125,6 +125,7 @@ function usePrevious(value) { } export function DashAgGrid({ + className = '', suppressDragLeaveHidesColumns = true, ...props }) { From c00b6b5c3475e706a6c06d3b6f2cd8ab7f42347a Mon Sep 17 00:00:00 2001 From: AnnMarueW Date: Thu, 24 Jul 2025 23:39:42 -0700 Subject: [PATCH 5/6] lint --- src/lib/components/AgGrid.react.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/components/AgGrid.react.js b/src/lib/components/AgGrid.react.js index 2cef4684..3535ebd2 100644 --- a/src/lib/components/AgGrid.react.js +++ b/src/lib/components/AgGrid.react.js @@ -56,7 +56,6 @@ function DashAgGrid(props) { DashAgGrid.dashRenderType = true; - /** Apply persistence settings based on React version for dash 2 compatibility */ const REACT_VERSION_DASH2_COMPAT = 18.3; const persistence = { From 49f7dbdd7654df0556d6178ae1f022d57e740365 Mon Sep 17 00:00:00 2001 From: AnnMarueW Date: Fri, 25 Jul 2025 10:47:11 -0700 Subject: [PATCH 6/6] changelog --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 283860ec..d4c6742c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,12 @@ All notable changes to `dash-ag-grid` will be documented in this file. This project adheres to [Semantic Versioning](https://semver.org/). Links "DE#nnn" prior to version 2.0 point to the Dash Enterprise closed-source Dash AG Grid repo +## [UNRELEASED] + +### Fixed + +- [#391](https://github.com/plotly/dash-ag-grid/pull/391) Removed use of defaultProps for improved compatibility with React functional components. Default prop values are now set directly in the component using destructuring or fallback logic. + ## [32.3.0] - 2025-07-23 ### Changed