Merge branch 'b23.0.0'

.gitignore

@@ -1,3 +1,4 @@
 /node_modules
 /dist
 package-lock.json
+*.nosync

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-grid-react-example",
-  "version": "22.0.0",
+  "version": "23.0.0",
   "description": "Example Reach applicaiton using ag-Grid.",
   "main": "dist/ag-grid-react-example.js",
   "scripts": {
@@ -38,7 +38,7 @@
   },
   "homepage": "http://www.ag-grid.com/",
   "devDependencies": {
-    "@ag-grid-community/core": "~22.0.0",
+    "@ag-grid-community/core": "~23.0.0",
     "@babel/core": "7.4.4",
     "@babel/plugin-proposal-class-properties": "7.4.4",
     "@babel/plugin-proposal-function-bind": "7.2.0",
@@ -62,9 +62,9 @@
     "webpack-dev-server": "3.4.1"
   },
   "dependencies": {
-    "@ag-grid-enterprise/all-modules": "~22.0.0",
+    "@ag-grid-enterprise/all-modules": "~23.0.0",
-    "@ag-grid-community/react": "~22.0.0",
+    "@ag-grid-community/react": "~23.0.0",
-    "bootstrap": "4.3.1",
+    "bootstrap": "4.4.1",
     "d3": "4.9.1",
     "lodash": "4.17.11",
     "react": "16.8.6",

src-examples/index.html

@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <script type="text/javascript" src="../dist/react-examples.js" charset="utf-8"></script>
     <!-- Example uses font awesome icons -->
-    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet">
 
     <style>
         html, body {

src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx

@@ -29,12 +29,12 @@ export default class RichGridDeclarativeExample extends Component {
             rowData: new RowDataFactory().createRowData(),
             rowCount: null,
             icons: {
-                columnRemoveFromGroup: '<i class="fa fa-remove"/>',
+                columnRemoveFromGroup: '<i class="fa fa-times"/>',
                 filter: '<i class="fa fa-filter"/>',
-                sortAscending: '<i class="fa fa-long-arrow-down"/>',
+                sortAscending: '<i class="fa fa-long-arrow-alt-down"/>',
-                sortDescending: '<i class="fa fa-long-arrow-up"/>',
+                sortDescending: '<i class="fa fa-long-arrow-alt-up"/>',
-                groupExpanded: '<i class="fa fa-minus-square-o"/>',
+                groupExpanded: '<i class="far fa-minus-square"/>',
-                groupContracted: '<i class="fa fa-plus-square-o"/>'
+                groupContracted: '<i class="far fa-plus-square"/>'
             }
         };
     }
@@ -140,19 +140,19 @@ export default class RichGridDeclarativeExample extends Component {
                         <span>
                             Grid API:
                             <button onClick={() => {
-                                this.api.selectAll()
+                                this.api.selectAll();
                             }} className="btn btn-primary">Select All</button>
                             <button onClick={() => {
-                                this.api.deselectAll()
+                                this.api.deselectAll();
                             }} className="btn btn-primary">Clear Selection</button>
                         </span>
                         <span style={{ float: "right" }}>
                             Column API:
                             <button onClick={() => {
-                                this.columnApi.setColumnVisible('country', false)
+                                this.columnApi.setColumnVisible('country', false);
                             }} className="btn btn-primary">Hide Country Column</button>
                             <button onClick={() => {
-                                this.columnApi.setColumnVisible('country', true)
+                                this.columnApi.setColumnVisible('country', true);
                             }} className="btn btn-primary">Show Country Column</button>
                         </span>
                     </div>

src-examples/richGridDeclarativeExample/SortableHeaderComponent.jsx

@@ -30,10 +30,10 @@ export default class SortableHeaderComponent extends React.Component {
 
             sortElements.push(<div key={`up${this.props.displayName}`} className={downArrowClass}
                                    onClick={this.onSortRequested.bind(this, 'desc')}><i
-                className="fa fa-long-arrow-down"/></div>);
+                className="fa fa-long-arrow-alt-down"/></div>);
             sortElements.push(<div key={`down${this.props.displayName}`} className={upArrowClass}
                                    onClick={this.onSortRequested.bind(this, 'asc')}><i
-                className="fa fa-long-arrow-up"/></div>);
+                className="fa fa-long-arrow-alt-up"/></div>);
             sortElements.push(<div key={`minus${this.props.displayName}`} className={removeArrowClass}
                                    onClick={this.onSortRequested.bind(this, '')}><i
                 className="fa fa-times"/></div>)

src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx

@@ -1,6 +1,7 @@
 import React, {Component} from "react";
 import {connect} from "react-redux";
 import {AgGridReact} from "@ag-grid-community/react";
+import {AllModules} from "@ag-grid-enterprise/all-modules";
 
 import PriceRenderer from "./PriceRenderer";
 
@@ -43,6 +44,7 @@ class GridComponent extends Component {
                     // properties
                     columnDefs={this.state.columnDefs}
                     rowData={this.props.rowData}
+                    modules={AllModules}
 
                     // events
                     onGridReady={this.onGridReady}>

src-examples/simpleReduxHooksExample/GridComponent.jsx

@@ -1,6 +1,7 @@
 import React, {useContext} from "react";
 import {Context} from "./store";
 import {AgGridReact} from "@ag-grid-community/react";
+import {AllModules} from "@ag-grid-enterprise/all-modules";
 
 /*
  * This component serves to display the row data (provided by redux)
@@ -21,6 +22,7 @@ export default function GridComponent() {
                 // properties
                 columnDefs={columnDefs}
                 rowData={rowData}
+                modules={AllModules}
 
                 defaultColDef={{filter: true}}
 

src-large-data/index.js

@@ -5,7 +5,7 @@ import React from 'react';
 import LargeGrid from './largeGrid.jsx';
 
 import '@ag-grid-community/core/dist/styles/ag-grid.css';
-import '@ag-grid-community/core/dist/styles/ag-theme-fresh.css';
+import '@ag-grid-community/core/dist/styles/ag-theme-balham.css';
 
 // waiting for dom to load before booting react. we could alternatively
 // put the index.js reference at the end fo the index.html, but i prefer this way.

src-large-data/largeGrid.jsx

@@ -63,7 +63,7 @@ export default class MyApp extends Component {
 
     render() {
         return (
-            <div style={{height: '100%'}} className="ag-theme-fresh">
+            <div style={{height: '100%'}} className="ag-theme-balham">
                 <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData} modules={AllModules}/>
             </div>
         );

src-trader-dashboard/components/FxQuoteMatrix.jsx

@@ -61,7 +61,7 @@ class FxQuoteMatrix extends Component {
     render() {
         return (
             <div style={{height: 410, width: 800}}
-                 className="ag-theme-fresh">
+                 className="ag-theme-balham">
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}

src-trader-dashboard/components/PriceChangesGrid.jsx

@@ -152,7 +152,7 @@ export default class extends Component {
     render() {
         return (
             <div style={{height: 410, width: 800}}
-                 className="ag-theme-fresh">
+                 className="ag-theme-balham">
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}

src-trader-dashboard/components/TopMoversGrid.jsx

@@ -63,7 +63,7 @@ class TopMoversGrid extends Component {
     render() {
         return (
             <div style={{height: 410, width: 400}}
-                 className="ag-theme-fresh">
+                 className="ag-theme-balham">
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}

src-trader-dashboard/index.js

@@ -9,7 +9,7 @@ import StoreService from './services/StoreService';
 import TraderDashboard from "./components/TraderDashboard.jsx";
 
 import "@ag-grid-enterprise/all-modules/dist/styles/ag-grid.css";
-import "@ag-grid-enterprise/all-modules/dist/styles/ag-theme-fresh.css";
+import "@ag-grid-enterprise/all-modules/dist/styles/ag-theme-balham.css";
 
 let store = StoreService.STORE;