feat(Pickers): groupBy supports dot notation (#2397)

* Group By Accepts Dot Notation Keys

* Fixing Typescript Error Expected 1 arguments, but got 2

* feat: updated package-lock.json file

* feat: replaced reinforcements with lodash

* fix: restored package-lock.json file

* feat: added test case for the group by function

* feat: added test case for the group by function

* fix: fixed test case expected result

* feat: undone the type alias for the defer call

src/utils/getDataGroupBy.ts

@@ -1,19 +1,26 @@
+import _ from 'lodash';
 import { flattenTree } from '../utils/treeUtils';
 
 const hasSymbol = typeof Symbol === 'function';
 export const KEY_GROUP = hasSymbol ? Symbol('_$grouped') : '_$grouped';
 export const KEY_GROUP_TITLE = 'groupTitle';
 
-export default function getDataGroupBy(data: any[] = [], key: string, sort): any[] {
+export default function getDataGroupBy(data: any[] = [], key: string, sort?): any[] {
   const tempData: { [key: string]: any[] } = {};
   const isSort = typeof sort === 'function';
 
   data.forEach(item => {
-    if (!tempData[item[key]]) {
-      tempData[item[key]] = [];
+    // this will allow getting data using dot notation
+    // i.e groupBy="country.name" as country will be a nested object
+    // to the item and the name will be nested key to the country object
+    // can be used with values in arrays, i.e groupBy="addresses.0.country.name"
+    const groupByValue: any = _.get(item, key, '');
+
+    if (!tempData[groupByValue]) {
+      tempData[groupByValue] = [];
     }
 
-    tempData[item[key]].push(item);
+    tempData[groupByValue].push(item);
   });
 
   let nextData = Object.entries(tempData).map(([groupTitle, children]: [string, any[]]) => ({

src/utils/test/getDataGroupBySpec.js

@@ -20,6 +20,51 @@ describe('[utils] getDataGroupBy', () => {
     assert.equal(groups.length, 3);
   });
 
+  it('Should be grouped by country.name Using dot.notation syntax', () => {
+    const items = [
+      {
+        label: 'Cairo',
+        value: '1',
+        country: {
+          id: '1',
+          name: 'Egypt'
+        }
+      },
+      {
+        label: 'Alexandria',
+        value: '2',
+        country: {
+          id: '1',
+          name: 'Egypt'
+        }
+      },
+      {
+        label: 'New York',
+        value: '3',
+        country: {
+          id: '2',
+          name: 'USA'
+        }
+      },
+      {
+        label: 'Washington',
+        value: '4',
+        country: {
+          id: '2',
+          name: 'USA'
+        }
+      }
+    ];
+
+    const groups = getDataGroupBy(items, 'country.name');
+
+    assert.equal(groups[0].groupTitle, 'Egypt');
+    assert.equal(groups[0][KEY_GROUP], true);
+    assert.equal(groups[3].groupTitle, 'USA');
+    assert.equal(groups[3][KEY_GROUP], true);
+    assert.equal(groups.length, 6);
+  });
+
   it('Should be grouped by title and sorted', () => {
     const items = [
       {