Release 19.0.0 dist files created

Merge branch 'master' into latest

# Conflicts:
#	package-lock.json
#	packages/ag-grid-angular/package-lock.json
#	packages/ag-grid-aurelia/package-lock.json
#	packages/ag-grid-docs/package.json
#	packages/ag-grid-enterprise/package.json
#	packages/ag-grid-react/package-lock.json
#	packages/ag-grid-vue/package-lock.json

config/webpack.config.examples.js

@@ -3,16 +3,17 @@ const path = require('path');
 const SRC_DIR = path.resolve(__dirname, '../src-examples');
 
 module.exports = {
+    mode: 'production',
     entry: SRC_DIR + "/index.js",
     output: {
         path: path.resolve(__dirname, '../'),
         filename: "dist/react-examples.js"
     },
     module: {
-        loaders: [
+        rules: [
             {
                 test: /\.css$/,
-                loader: "style!css"
+                loader: "style-loader!css-loader"
             },
             {
                 test: /\.js$|\.jsx$/,
@@ -24,21 +25,22 @@ module.exports = {
             },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
-                loader: 'file?name=[path]/[name].[ext]'
+                loader: 'file-loader?name=[path]/[name].[ext]'
             }
         ]
     },
     resolve: {
         alias: {
-            "ag-grid": path.resolve('./node_modules/ag-grid'),
+            "ag-grid-community": path.resolve('./node_modules/ag-grid-community'),
             "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
             react: path.resolve('./node_modules/react')
         },
-        extensions: ['', '.js', '.jsx']
+        extensions: ['.js', '.jsx']
+    },
+    performance: {
+        hints: false
     },
     devServer: {
-        historyApiFallback: true,
+        port: 8080,
-        contentBase: './',
-        hot: true
     }
 };

config/webpack.config.large.js

@@ -3,16 +3,17 @@ const path = require('path');
 const SRC_DIR = path.resolve(__dirname, '../src-large-data');
 
 module.exports = {
+    mode: 'production',
     entry: SRC_DIR + "/index.js",
     output: {
         path: path.resolve(__dirname, '../'),
         filename: "dist/react-large.js"
     },
     module: {
-        loaders: [
+        rules: [
             {
                 test: /\.css$/,
-                loader: "style!css"
+                loader: "style-loader!css-loader"
             },
             {
                 test: /\.js$|\.jsx$/,
@@ -26,10 +27,16 @@ module.exports = {
     },
     resolve: {
         alias: {
-            "ag-grid": path.resolve('./node_modules/ag-grid'),
+            "ag-grid-community": path.resolve('./node_modules/ag-grid-community'),
             "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
             react: path.resolve('./node_modules/react')
         },
-        extensions: ['', '.js', '.jsx']
+        extensions: ['.js', '.jsx']
+    },
+    performance: {
+        hints: false
+    },
+    devServer: {
+        port: 8080,
     }
 };

config/webpack.config.trader.js

@@ -3,16 +3,17 @@ const path = require('path');
 const SRC_DIR = path.resolve(__dirname, '../src-trader-dashboard');
 
 module.exports = {
+    mode: 'production',
     entry: SRC_DIR + "/index.js",
     output: {
         path: path.resolve(__dirname, '../'),
         filename: "dist/react-trader.js"
     },
     module: {
-        loaders: [
+        rules: [
             {
                 test: /\.css$/,
-                loader: "style!css"
+                loader: "style-loader!css-loader"
             },
             {
                 test: /\.js$|\.jsx$/,
@@ -26,10 +27,16 @@ module.exports = {
     },
     resolve: {
         alias: {
-            "ag-grid": path.resolve('./node_modules/ag-grid'),
+            "ag-grid-community": path.resolve('./node_modules/ag-grid-community'),
             "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
             react: path.resolve('./node_modules/react')
         },
-        extensions: ['', '.js', '.jsx']
+        extensions: ['.js', '.jsx']
+    },
+    performance: {
+        hints: false
+    },
+    devServer: {
+        port: 8080,
     }
 };

package.json

@@ -1,12 +1,12 @@
 {
   "name": "ag-grid-react-example",
-  "version": "18.1.0",
+  "version": "19.0.0",
   "description": "Example Reach applicaiton using ag-Grid.",
   "main": "dist/ag-grid-react-example.js",
   "scripts": {
-    "trader": "webpack-dev-server --content-base src-trader-dashboard/ --config config/webpack.config.trader.js --progress --colors --hot --inline",
+    "trader": "webpack-dev-server --content-base src-trader-dashboard/ --config config/webpack.config.trader.js --mode development --open",
-    "examples": "webpack-dev-server --content-base src-examples/ --config config/webpack.config.examples.js --progress --colors --hot --inline",
+    "examples": "webpack-dev-server --content-base src-examples/ --config config/webpack.config.examples.js --mode development --open",
-    "large": "webpack-dev-server --content-base src-large-data/ --config config/webpack.config.large.js --progress --colors --hot --inline",
+    "large": "webpack-dev-server --content-base src-large-data/ --config config/webpack.config.large.js --mode development --open",
     "clean": "rimraf dist",
     "mkdirs": "mkdirp dist/trader/dist dist/examples/dist",
     "copy-examples": "ncp src-examples/images dist/examples/images && ncp src-examples/index.html dist/examples/index.html && ncp dist/react-examples.js dist/examples/dist/react-examples.js && ncp src-examples/ dist/examples/src",
@@ -37,39 +37,36 @@
   },
   "homepage": "http://www.ag-grid.com/",
   "devDependencies": {
-    "babel-core": "6.24.x",
+    "babel-core": "6.26.3",
-    "babel-loader": "6.4.x",
+    "babel-loader": "7.1.5",
-    "babel-preset-es2015": "6.24.x",
+    "babel-preset-es2015": "6.24.1",
-    "babel-preset-react": "6.24.x",
+    "babel-preset-react": "6.24.1",
-    "babel-preset-stage-0": "6.24.x",
+    "babel-preset-stage-0": "6.24.1",
-    "babel-preset-stage-1": "6.24.x",
+    "babel-preset-stage-1": "6.24.1",
-    "css-loader": "0.23.x",
+    "css-loader": "1.0.0",
+    "file-loader": "1.1.11",
+    "gulp": "3.9.1",
+    "merge2": "1.0.x",
     "mkdirp": "0.5.1",
     "ncp": "2.0.0",
-    "prop-types": "15.6.0",
+    "prop-types": "15.6.2",
     "rimraf": "2.5.x",
-    "style-loader": "0.13.x",
+    "style-loader": "0.21.0",
-    "webpack": "1.12.x",
+    "webpack": "^4.16.1",
-    "webpack-dev-server": "1.14.x",
+    "webpack-cli": "^3.0.8",
-    "gulp": "3.9.x",
+    "webpack-dev-server": "^3.1.4"
-    "gulp-typescript": "3.1.x",
-    "merge2": "1.0.x",
-    "typescript": "2.3.x"
   },
   "dependencies": {
-    "ag-grid": "^18.1.0",
+    "ag-grid-community": "^19.0.0",
-    "ag-grid-enterprise": "^18.1.0",
+    "ag-grid-enterprise": "^19.0.0",
-    "ag-grid-react": "^18.1.0",
+    "ag-grid-react": "^19.0.0",
     "bootstrap": "3.3.7",
     "d3": "4.9.1",
-    "file-loader": "0.11.1",
     "lodash": "4.17.4",
-    "react": "16.0.0",
+    "react": "16.4.1",
-    "react-dom": "16.0.0",
+    "react-dom": "16.4.1",
-    "react-dom-factories": "1.0.2",
+    "react-redux": "5.0.7",
-    "react-redux": "5.0.x",
+    "react-router-dom": "4.3.1",
-    "react-router-dom": "4.2.x",
+    "redux": "4.0.0"
-    "redux": "3.6.x",
-    "url-search-params-polyfill": "1.2.0"
   }
 }

src-examples/index.js

@@ -4,8 +4,8 @@ import React from "react";
 import {render} from "react-dom";
 import {BrowserRouter} from "react-router-dom";
 
-import "ag-grid/dist/styles/ag-grid.css";
+import "ag-grid-community/dist/styles/ag-grid.css";
-import "ag-grid/dist/styles/ag-theme-balham.css";
+import "ag-grid-community/dist/styles/ag-theme-balham.css";
 import "../node_modules/bootstrap/dist/css/bootstrap.css";
 
 import App from "./App";

src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx

@@ -22,7 +22,7 @@ export default class RichGridDeclarativeExample extends Component {
 
         this.state = {
             quickFilterText: null,
-            showToolPanel: false,
+            sideBar: false,
             rowData: new RowDataFactory().createRowData(),
             icons: {
                 columnRemoveFromGroup: '<i class="fa fa-remove"/>',
@@ -50,8 +50,8 @@ export default class RichGridDeclarativeExample extends Component {
     };
 
     /* Demo related methods */
-    onToggleToolPanel = (event) => {
+    onToggleSidebar = (event) => {
-        this.setState({showToolPanel: event.target.checked});
+        this.setState({sideBar: event.target.checked});
     };
 
     deselectAll() {
@@ -142,8 +142,8 @@ export default class RichGridDeclarativeExample extends Component {
                     <div style={{display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10}}>
                         <div style={{float: "left"}}>
                             <label>
-                                <input type="checkbox" onChange={this.onToggleToolPanel} style={{marginRight: 5}}/>
+                                <input type="checkbox" onChange={this.onToggleSidebar} style={{marginRight: 5}}/>
-                                Show Tool Panel
+                                Show Side Bar
                             </label>
                         </div>
                         <div style={{float: "left", marginLeft: 20}}>
@@ -169,7 +169,7 @@ export default class RichGridDeclarativeExample extends Component {
                             onCellClicked={this.onCellClicked}
 
                             // binding to simple properties
-                            showToolPanel={this.state.showToolPanel}
+                            sideBar={this.state.sideBar}
                             quickFilterText={this.state.quickFilterText}
 
                             // binding to an object property
@@ -247,10 +247,10 @@ export default class RichGridDeclarativeExample extends Component {
                                     All
                                     Rows
                                     (expand the Employee column to show the Country column first)</p>
-                                <p><span style={{fontWeight: 500}}>Toggle The Tool Panel</span>: Let your users Pivot,
+                                <p><span style={{fontWeight: 500}}>Toggle The Side Bar</span>: Let your users Pivot,
                                     Group
                                     and
-                                    Aggregate using the Tool Panel</p>
+                                    Aggregate using the Side Bar</p>
                                 <p><span style={{fontWeight: 500}}>Refresh Data</span>: Dynamically Update Grid Data</p>
                                 <p><span style={{fontWeight: 500}}>Quick Filter</span>: Perform Quick Grid Wide
                                     Filtering
@@ -322,12 +322,11 @@ export default class RichGridDeclarativeExample extends Component {
                             <div className="col-sm-4">
                                 <div className="card">
                                     <div className="card-body">
-                                        <h4 className="card-title">Tool Panel</h4>
+                                        <h4 className="card-title">Side Bar</h4>
                                         <p className="card-text">Let your users Pivot, Group and Aggregate using the
-                                            Tool
+                                            Side Bar</p>
-                                            Panel</p>
+                                        <a target="_blank" href="https://www.ag-grid.com//javascript-grid-side-bar/"
-                                        <a target="_blank" href="https://www.ag-grid.com//javascript-grid-tool-panel/"
+                                           className="btn btn-primary">Side Bar</a>
-                                           className="btn btn-primary">Tool Panel</a>
                                     </div>
                                 </div>
                             </div>

src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx

@@ -1,4 +1,5 @@
 import React, {Component} from "react";
+import * as PropTypes from "prop-types";
 
 import {AgGridReact} from "ag-grid-react";
 import {connect} from "react-redux";
@@ -45,6 +46,9 @@ class GridComponent extends Component {
                     columnDefs={this.state.columnDefs}
                     rowData={this.props.rowData}
 
+                    reactNext={true}
+                    reduxStore={this.context.store} // must be supplied when using redux with reactNext
+
                     // events
                     onGridReady={this.onGridReady}>
                 </AgGridReact>
@@ -53,6 +57,10 @@ class GridComponent extends Component {
     }
 }
 
+GridComponent.contextTypes = {
+    store: PropTypes.object                         // must be supplied when using redux with reactNext
+};
+
 // pull off row data changes
 export default connect(
     (state) => {

src-examples/simpleReduxDynamicComponentExample/PriceRenderer.jsx

@@ -33,5 +33,8 @@ export default connect(
             currencySymbol: state.currencySymbol,
             exchangeRate: state.exchangeRate
         }
-    }
+    },
+    null,
+    null,
+    { withRef: true } // must be supplied for react/redux when using GridOptions.reactNext
 )(PriceRenderer);

src-large-data/index.js

@@ -4,8 +4,8 @@ import ReactDOM from 'react-dom';
 import React from 'react';
 import LargeGrid from './largeGrid.jsx';
 
-import 'ag-grid/dist/styles/ag-grid.css';
+import 'ag-grid-community/dist/styles/ag-grid.css';
-import 'ag-grid/dist/styles/theme-fresh.css';
+import 'ag-grid-community/dist/styles/ag-theme-fresh.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

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

src-trader-dashboard/components/FxQuoteMatrix.jsx

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

src-trader-dashboard/components/PriceChangesGrid.jsx

@@ -24,21 +24,21 @@ export default class extends Component {
                     field: 'price',
                     headerName: 'Price',
                     valueFormatter: this.numberFormatter,
-                    cellRenderer: 'animateShowChange',
+                    cellRenderer: 'agAnimateShowChangeCellRenderer',
                     cellStyle: {'text-align': 'right'}
                 },
                 {
                     field: 'bid',
                     headerName: 'Bid',
                     valueFormatter: this.numberFormatter,
-                    cellRenderer: 'animateShowChange',
+                    cellRenderer: 'agAnimateShowChangeCellRenderer',
                     cellStyle: {'text-align': 'right'}
                 },
                 {
                     field: 'ask',
                     headerName: 'Ask',
                     valueFormatter: this.numberFormatter,
-                    cellRenderer: 'animateShowChange',
+                    cellRenderer: 'agAnimateShowChangeCellRenderer',
                     cellStyle: {'text-align': 'right'}
                 }
             ]
@@ -151,7 +151,7 @@ export default class extends Component {
     render() {
         return (
             <div style={{height: 410, width: 800}}
-                 className="ag-fresh">
+                 className="ag-theme-fresh">
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}

src-trader-dashboard/components/TopMoversGrid.jsx

@@ -17,21 +17,21 @@ class TopMoversGrid extends Component {
                     field: 'last',
                     headerName: 'Last',
                     headerClass: 'align-right',
-                    cellRenderer: 'animateShowChange',
+                    cellRenderer: 'agAnimateShowChangeCellRenderer',
                     cellClass: 'align-right'
                 },
                 {
                     field: 'net',
                     headerName: 'Net',
                     headerClass: 'align-right',
-                    cellRenderer: 'animateShowChange',
+                    cellRenderer: 'agAnimateShowChangeCellRenderer',
                     cellClass: 'align-right'
                 },
                 {
                     field: 'pct_net_change',
                     headerName: '% NC',
                     headerClass: 'align-right',
-                    cellRenderer: 'animateShowChange',
+                    cellRenderer: 'agAnimateShowChangeCellRenderer',
                     cellClass: 'align-right',
                     sort: 'desc',
                     valueFormatter(params) {
@@ -62,7 +62,7 @@ class TopMoversGrid extends Component {
     render() {
         return (
             <div style={{height: 410, width: 400}}
-                 className="ag-fresh">
+                 className="ag-theme-fresh">
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}

src-trader-dashboard/index.js

@@ -5,8 +5,8 @@ import {render} from "react-dom";
 
 import {Provider} from "react-redux";
 
-import "ag-grid/dist/styles/ag-grid.css";
+import "ag-grid-community/dist/styles/ag-grid.css";
-import "ag-grid/dist/styles/theme-fresh.css";
+import "ag-grid-community/dist/styles/ag-theme-fresh.css";
 
 import StoreService from './services/StoreService';
 import TraderDashboard from "./components/TraderDashboard.jsx";

src-trader-dashboard/services/FxDataService.jsx

@@ -120,7 +120,7 @@ const FX_DELTA_HEADERS = [
         field: 'last',
         headerName: 'Last',
         headerClass: 'align-right',
-        cellRenderer: 'animateShowChange',
+        cellRenderer: 'agAnimateShowChangeCellRenderer',
         cellClass: 'align-right',
         width: 100
     },
@@ -128,7 +128,7 @@ const FX_DELTA_HEADERS = [
         field: 'net',
         headerName: 'Net',
         headerClass: 'align-right',
-        cellRenderer: 'animateShowChange',
+        cellRenderer: 'agAnimateShowChangeCellRenderer',
         cellClass: 'align-right',
         width: 90
     },
@@ -145,7 +145,7 @@ const FX_DELTA_HEADERS = [
         headerName: symbol,
         width: 67,
         cellClass: 'align-right',
-        cellRenderer: 'animateShowChange',
+        cellRenderer: 'agAnimateShowChangeCellRenderer',
         cellClassRules: {
             'fx-positive': 'x > 0.8',
             'fx-null': 'x === null',