Merge branch 'master' into rkaraivanov/chat-fix-typing-change-event-behavior

Author: rkaraivanov

src/components/chat/chat.spec.ts

@@ -313,9 +313,9 @@ describe('Chat', () => {
       await elementUpdated(chat);
 
       const { input, suggestionsContainer } = getChatDOM(chat);
-      expect(suggestionsContainer.getBoundingClientRect().top).lessThanOrEqual(
-        input.self.getBoundingClientRect().bottom
-      );
+      expect(
+        suggestionsContainer.getBoundingClientRect().top
+      ).greaterThanOrEqual(input.self.getBoundingClientRect().bottom);
     });
 
     it('should render typing indicator if `isTyping` is true', async () => {

src/components/chat/chat.ts

@@ -502,27 +502,29 @@ export default class IgcChatComponent extends EventEmitterMixin<
             : nothing}
         </div>
 
-        <igc-chat-input
-          exportparts="
-              input-container: input-area-container,
-              input-wrapper: input-container,
-              attachments: input-attachments-container,
-              attachment-wrapper: input-attachment-container,
-              attachment-name: input-attachment-name,
-              attachment-icon: input-attachment-icon,
-              text-input,
-              actions-container: input-actions-container,
-              input-actions-start,
-              input-actions-end,
-              file-upload-container,
-              file-upload,
-              send-button-container,
-              send-button"
-        >
-        </igc-chat-input>
-        ${this._state.suggestionsPosition === 'below-input'
-          ? suggestions
-          : nothing}
+        <div part="input-area-container">
+          <igc-chat-input
+            exportparts="
+                input-container: input-area-container,
+                input-wrapper: input-container,
+                attachments: input-attachments-container,
+                attachment-wrapper: input-attachment-container,
+                attachment-name: input-attachment-name,
+                attachment-icon: input-attachment-icon,
+                text-input,
+                actions-container: input-actions-container,
+                input-actions-start,
+                input-actions-end,
+                file-upload-container,
+                file-upload,
+                send-button-container,
+                send-button"
+          >
+          </igc-chat-input>
+          ${this._state.suggestionsPosition === 'below-input'
+            ? suggestions
+            : nothing}
+        </div>
       </div>
     `;
   }

src/components/chat/themes/chat.base.scss

@@ -25,20 +25,28 @@ $inline-inset: rem(24px);
     height: 100%;
 }
 
+[part='input-area-container'],
 [part='message-area-container'] {
     display: grid;
     grid-template-columns: subgrid;
     overflow: hidden auto;
     grid-column: 1 / -1;
     grid-template-rows: auto 1fr;
     align-items: start;
+}
+
+[part='message-area-container'] {
     grid-row: 2;
 
     &:has([part='empty-state']) {
         grid-template-rows: 1fr auto;
     }
 }
 
+[part='input-area-container'] {
+    grid-row: 3;
+}
+
 [part='message-list'],
 [part='empty-state'],
 [part='suggestions-container'] {
@@ -125,10 +133,6 @@ slot[name='prefix'] {
     margin-inline-end: rem(32px);
 }
 
-igc-chat-input {
-    grid-row: 3;
-}
-
 igc-list {
     --ig-size: 3;
 

src/components/combo/operations/group.ts

@@ -1,45 +1,46 @@
-import { groupBy } from '../../common/util.js';
 import type { DataController } from '../controllers/data.js';
 import type { ComboRecord, Keys } from '../types.js';
 
-export default class GroupDataOperation<T extends object> {
-  protected orderBy = new Map(
-    Object.entries({
-      asc: 1,
-      desc: -1,
-    })
-  );
+const OrderBy = Object.freeze({ asc: 1, desc: -1 });
 
-  public apply(data: ComboRecord<T>[], controller: DataController<T>) {
+export default class GroupDataOperation<T extends object> {
+  public apply(
+    data: ComboRecord<T>[],
+    controller: DataController<T>
+  ): ComboRecord<T>[] {
     const {
       groupingOptions: { groupKey, valueKey, displayKey, direction },
     } = controller;
 
-    if (!groupKey) return data;
+    if (!groupKey) {
+      return data;
+    }
 
-    const groups = Object.entries(
-      groupBy(data, (item) => item.value[groupKey] ?? 'Other')
+    const grouped = Map.groupBy(
+      data,
+      (item) => (item.value[groupKey] as string) ?? 'Other'
     );
 
+    const keys = Array.from(grouped.keys());
+
     if (direction !== 'none') {
-      const orderBy = this.orderBy.get(direction);
-      groups.sort((a, b) => {
-        return orderBy! * controller.compareCollator.compare(a[0], b[0]);
-      });
+      const orderBy = OrderBy[direction];
+      keys.sort((a, b) => orderBy * controller.compareCollator.compare(a, b));
     }
 
-    return groups.flatMap(([group, items]) => {
-      items.unshift({
-        dataIndex: -1,
-        header: true,
-        value: {
-          [valueKey as Keys<T>]: group,
-          [displayKey as Keys<T>]: group,
-          [groupKey as Keys<T>]: group,
-        } as T,
-      });
-
-      return items;
+    return keys.flatMap((key) => {
+      return [
+        {
+          value: {
+            [valueKey as Keys<T>]: key,
+            [displayKey as Keys<T>]: key,
+            [groupKey as Keys<T>]: key,
+          } as T,
+          header: true,
+          dataIndex: -1,
+        },
+        ...(grouped.get(key) ?? []),
+      ];
     });
   }
 }

src/components/common/util.ts

@@ -168,24 +168,6 @@ export function findElementFromEventPath<T extends Element>(
   return getElementsFromEventPath(event).find(func) as T | undefined;
 }
 
-export function groupBy<T>(array: T[], key: keyof T | ((item: T) => any)) {
-  const result: Record<string, T[]> = {};
-  const _get = isFunction(key) ? key : (item: T) => item[key];
-
-  for (const item of array) {
-    const category = _get(item);
-    const group = result[category];
-
-    if (Array.isArray(group)) {
-      group.push(item);
-    } else {
-      result[category] = [item];
-    }
-  }
-
-  return result;
-}
-
 export function first<T>(arr: T[]) {
   return arr.at(0) as T;
 }

stories/select.stories.ts

@@ -5,14 +5,12 @@ import {
 } from '@igniteui/material-icons-extended';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { html } from 'lit';
-
 import {
   IgcIconComponent,
   IgcSelectComponent,
   defineComponents,
   registerIconFromText,
 } from 'igniteui-webcomponents';
-import { groupBy } from '../src/components/common/util.js';
 import {
   disableStoryControls,
   formControls,
@@ -265,8 +263,16 @@ const items = [
     >`
 );
 
+type CountryInfo = {
+  continent: string;
+  country: string;
+  value: string;
+  selected: boolean;
+  disabled: boolean;
+};
+
 const countries = Object.entries(
-  groupBy(
+  Object.groupBy(
     [
       {
         continent: 'Europe',
@@ -310,9 +316,9 @@ const countries = Object.entries(
         selected: false,
         disabled: true,
       },
-    ],
-    'continent'
-  )
+    ] as CountryInfo[],
+    (item) => item.continent
+  ) as Record<string, CountryInfo[]>
 );
 
 export const Basic: Story = {

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es2022",
     "module": "NodeNext",
-    "lib": ["es2023", "DOM", "DOM.Iterable"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "outDir": "dist",
     "rootDir": "./",
     "declaration": true,