feat(Combo): Add support for groupingDirection: none .Remove the sorting of the items when combo has grouping.

CHANGELOG.md

@@ -4,6 +4,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [4.8.0]
+### Added
+ - Combo component can now set `groupSorting` to `none` which shows the groups in the order of the provided data.
+
+### Changed
+ - Grouping in Combo component no longer sorts the data. `groupSorting` property now affects the sorting direction only of the groups.
+  **Behavioral change**
+  In previous release the sorting directions of the groups sorted the items as well. If you want to achieve this behavior you can pass already sorted data to the Combo component.
+
 ## [4.7.0] - 2024-01-05
 ### Added
 - Tree - Added **`toggleNodeOnClick`** property that determines whether clicking over a node will change its expanded state or not. Defaults to `false`. [#1003](https://github.com/IgniteUI/igniteui-webcomponents/pull/1003).

src/components/combo/combo.spec.ts

@@ -2,6 +2,7 @@ import { elementUpdated, expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
 import { spy } from 'sinon';
 
+import IgcComboHeaderComponent from './combo-header.js';
 import IgcComboItemComponent from './combo-item.js';
 import IgcComboListComponent from './combo-list.js';
 import IgcComboComponent from './combo.js';
@@ -59,6 +60,63 @@ describe('Combo', () => {
     },
   ];
 
+  const citiesWithDiacritics = [
+    {
+      id: 'US01',
+      name: 'New York',
+      country: 'Méxícó',
+      zip: '10001',
+    },
+    {
+      id: 'JP01',
+      name: 'Tokyo',
+      country: 'Ángel',
+      zip: '163-8001',
+    },
+    {
+      id: 'US02',
+      name: 'Boston',
+      country: 'Méxícó',
+      zip: '02108',
+    },
+    {
+      id: 'US03',
+      name: 'San Francisco',
+      country: 'Méxícó',
+      zip: '94103',
+    },
+    {
+      id: 'JP02',
+      name: 'Yokohama',
+      country: 'Ángel',
+      zip: '781-0240',
+    },
+    {
+      id: 'JP03',
+      name: 'Osaka',
+      country: 'Ángel',
+      zip: '552-0021',
+    },
+    {
+      id: 'BG01',
+      name: 'diakritikós',
+      country: 'México',
+      zip: '1000',
+    },
+    {
+      id: 'BG02',
+      name: 'coöperate',
+      country: 'México',
+      zip: '4000',
+    },
+    {
+      id: 'BG03',
+      name: 'Muğams',
+      country: 'México',
+      zip: '9000',
+    },
+  ];
+
   const primitive = [
     0,
     'Sofia',
@@ -88,6 +146,12 @@ describe('Combo', () => {
     await Promise.all([elementUpdated(combo), list.layoutComplete]);
   };
 
+  const headerItems = <T extends object>(combo: IgcComboComponent<T>) =>
+    [
+      ...combo
+        .shadowRoot!.querySelector('igc-combo-list')!
+        .querySelectorAll('[part~="group-header"]'),
+    ] as IgcComboHeaderComponent[];
   before(() => {
     defineComponents(IgcComboComponent);
   });
@@ -419,8 +483,8 @@ describe('Combo', () => {
       const args = {
         cancelable: true,
         detail: {
-          newValue: ['BG02'],
-          items: [cities[1]],
+          newValue: ['BG01'],
+          items: [cities[0]],
           type: 'selection',
         },
       };
@@ -430,7 +494,7 @@ describe('Combo', () => {
       await list.layoutComplete;
 
       items(combo)[0].click();
-      expect(combo.value).to.deep.equal(['BG02']);
+      expect(combo.value).to.deep.equal(['BG01']);
       expect(eventSpy).calledWithExactly('igcChange', args);
     });
 
@@ -439,8 +503,8 @@ describe('Combo', () => {
       const args = {
         cancelable: true,
         detail: {
-          newValue: ['BG01', 'BG03'],
-          items: [cities[1]],
+          newValue: ['BG02', 'BG03'],
+          items: [cities[0]],
           type: 'deselection',
         },
       };
@@ -454,7 +518,7 @@ describe('Combo', () => {
 
       items(combo)[0].click();
       await elementUpdated(combo);
-      expect(combo.value).to.deep.equal(['BG01', 'BG03']);
+      expect(combo.value).to.deep.equal(['BG02', 'BG03']);
 
       expect(eventSpy).calledWithExactly('igcChange', args);
     });
@@ -783,16 +847,16 @@ describe('Combo', () => {
       await elementUpdated(combo);
       await list.layoutComplete;
 
-      expect(items(combo)[0].selected).to.be.true;
+      expect(items(combo)[1].selected).to.be.true;
 
-      pressKey(options, 'ArrowDown');
+      pressKey(options, 'ArrowDown', 2);
       pressKey(options, ' ');
 
       await elementUpdated(combo);
       await list.layoutComplete;
 
-      expect(items(combo)[0].selected).to.be.false;
-      expect(items(combo)[1].selected).to.be.true;
+      expect(items(combo)[1].selected).to.be.false;
+      expect(items(combo)[2].selected).to.be.true;
     });
 
     it('should clear selection upon changing the search term via input', async () => {
@@ -814,7 +878,7 @@ describe('Combo', () => {
       await elementUpdated(combo);
       await list.layoutComplete;
 
-      expect(items(combo)[0].selected).to.be.true;
+      expect(items(combo)[1].selected).to.be.true;
       expect(combo.value).to.deep.equal(['BG02']);
 
       await filterCombo('sof');
@@ -1117,6 +1181,33 @@ describe('Combo', () => {
       expect(combo.selection[0]).to.equal(cities[3]);
       expect(combo.selection[1]).to.equal(cities[4]);
     });
+
+    it('should sort groups with diacritics and none as groupSorting direction', async () => {
+      combo.data = citiesWithDiacritics;
+      combo.groupSorting = 'asc';
+      combo.open = true;
+      await elementUpdated(combo);
+      await list.layoutComplete;
+
+      let comboHeadersLabel = headerItems(combo).map(
+        (header) => header.innerText
+      );
+      expect(comboHeadersLabel).to.eql(['Ángel', 'México', 'Méxícó']);
+
+      combo.groupSorting = 'desc';
+      await elementUpdated(combo);
+      await list.layoutComplete;
+
+      comboHeadersLabel = headerItems(combo).map((header) => header.innerText);
+      expect(comboHeadersLabel).to.eql(['Méxícó', 'México', 'Ángel']);
+
+      combo.groupSorting = 'none';
+      await elementUpdated(combo);
+      await list.layoutComplete;
+
+      comboHeadersLabel = headerItems(combo).map((header) => header.innerText);
+      expect(comboHeadersLabel).to.eql(['Méxícó', 'Ángel', 'México']);
+    });
   });
 
   describe('Form integration', () => {

src/components/combo/combo.ts

@@ -255,7 +255,7 @@ export default class IgcComboComponent<
   /**
    * Sorts the items in each group by ascending or descending order.
    * @attr group-sorting
-   * @type {"asc" | "desc"}
+   * @type {"asc" | "desc" | "none"}
    */
   @property({ attribute: 'group-sorting', reflect: false })
   public groupSorting: GroupingDirection = 'asc';

src/components/combo/controllers/data.ts

@@ -13,6 +13,7 @@ export class DataController<T extends object> implements ReactiveController {
   protected grouping = new GroupDataOperation<T>();
   protected filtering = new FilterDataOperation<T>();
   private _searchTerm = '';
+  private _compareCollator = new Intl.Collator();
 
   constructor(protected host: ComboHost<T>) {
     this.host.addController(this);
@@ -40,6 +41,10 @@ export class DataController<T extends object> implements ReactiveController {
     };
   }
 
+  public get compareCollator(): Intl.Collator {
+    return this._compareCollator;
+  }
+
   private index(data: T[]): ComboRecord<T>[] {
     return data.map((item, index) => ({
       value: item,

src/components/combo/operations/group.ts

@@ -1,6 +1,6 @@
 import { groupBy } from '../../common/util.js';
 import { DataController } from '../controllers/data.js';
-import type { ComboRecord, GroupingDirection, Keys, Values } from '../types.js';
+import type { ComboRecord, Keys } from '../types.js';
 
 export default class GroupDataOperation<T extends object> {
   protected orderBy = new Map(
@@ -10,31 +10,6 @@ export default class GroupDataOperation<T extends object> {
     })
   );
 
-  protected resolveValue(record: T, key: Keys<T>) {
-    return record[key];
-  }
-
-  protected compareValues(first: Values<T>, second: Values<T>) {
-    if (typeof first === 'string' && typeof second === 'string') {
-      return first.localeCompare(second);
-    }
-    return first > second ? 1 : first < second ? -1 : 0;
-  }
-
-  protected compareObjects(
-    first: T,
-    second: T,
-    key: Keys<T>,
-    direction: GroupingDirection
-  ) {
-    const [a, b] = [
-      this.resolveValue(first, key),
-      this.resolveValue(second, key),
-    ];
-
-    return this.orderBy.get(direction)! * this.compareValues(a, b);
-  }
-
   public apply(data: ComboRecord<T>[], controller: DataController<T>) {
     const {
       groupingOptions: { groupKey, valueKey, displayKey, direction },
@@ -46,11 +21,14 @@ export default class GroupDataOperation<T extends object> {
       groupBy(data, (item) => item.value[groupKey] ?? 'Other')
     );
 
-    return groups.flatMap(([group, items]) => {
-      items.sort((a, b) =>
-        this.compareObjects(a.value, b.value, displayKey!, direction)
-      );
+    if (direction !== 'none') {
+      const orderBy = this.orderBy.get(direction);
+      groups.sort((a, b) => {
+        return orderBy! * controller.compareCollator.compare(a[0], b[0]);
+      });
+    }
 
+    return groups.flatMap(([group, items]) => {
       items.unshift({
         dataIndex: -1,
         header: true,

src/components/combo/types.ts

@@ -16,7 +16,7 @@ export type ComboRecord<T extends object> = {
 export type ComboHost<T extends object> = ReactiveControllerHost &
   IgcComboComponent<T>;
 
-export type GroupingDirection = 'asc' | 'desc';
+export type GroupingDirection = 'asc' | 'desc' | 'none';
 export type ComboChangeType = 'selection' | 'deselection' | 'addition';
 export type ComboRenderFunction<T extends object> = RenderItemFunction<
   ComboRecord<T>