Merge branch 'master' into simeonoff/bump-typedoc

Author: rkaraivanov

.storybook/preview.ts

@@ -164,7 +164,7 @@ export default {
   },
   parameters: {
     backgrounds: {
-      disable: true,
+      disabled: true,
     },
   },
   decorators: [themeProvider, withActions, localeProvider],

package-lock.json

@@ -60,14 +60,14 @@
     "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "~2.2.6",
+    "@biomejs/biome": "~2.3.2",
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-a11y": "^9.1.13",
-    "@storybook/addon-docs": "^9.1.13",
-    "@storybook/addon-links": "^9.1.13",
-    "@storybook/web-components-vite": "^9.1.13",
+    "@storybook/addon-a11y": "^10.0.1",
+    "@storybook/addon-docs": "^10.0.1",
+    "@storybook/addon-links": "^10.0.1",
+    "@storybook/web-components-vite": "^10.0.1",
     "@types/mocha": "^10.0.10",
     "@web/dev-server-esbuild": "^1.0.4",
     "@web/test-runner": "^0.20.2",
@@ -84,7 +84,7 @@
     "igniteui-i18n-resources": "0.6.0-alpha.4",
     "igniteui-theming": "^22.1.0",
     "keep-a-changelog": "^2.7.1",
-    "lint-staged": "^16.2.5",
+    "lint-staged": "^16.2.6",
     "lit-analyzer": "^2.0.3",
     "madge": "^8.0.0",
     "node-watch": "^0.7.4",
@@ -94,7 +94,7 @@
     "rimraf": "^6.0.1",
     "sass-embedded": "~1.93.2",
     "sinon": "^21.0.0",
-    "storybook": "^9.1.13",
+    "storybook": "^10.0.1",
     "stylelint": "^16.25.0",
     "stylelint-config-standard-scss": "^16.0.0",
     "stylelint-prettier": "^5.0.3",
@@ -104,13 +104,13 @@
     "typedoc": "~0.28.14",
     "typedoc-plugin-localization": "^3.1.0",
     "typescript": "^5.8.3",
-    "vite": "^7.1.11"
+    "vite": "^7.1.12"
   },
   "peerDependencies": {
     "dompurify": "^3.3.0",
     "marked": "^16.4.1",
     "marked-shiki": "^1.2.1",
-    "shiki": "^3.13.0"
+    "shiki": "^3.14.0"
   },
   "browserslist": [
     "defaults"

package.json

@@ -1,19 +1,19 @@
 import { stdout } from 'node:process';
-import { format } from 'node:util';
+import { format, styleText } from 'node:util';
 
 export default {
-  error: (s) => console.error('\x1b[31m%s\x1b[0m', s),
-  success: (s) => console.info('\x1b[32m%s\x1b[0m', s),
-  warn: (s) => console.warn('\x1b[33m%s\x1b[0m', s),
-  info: (s) => console.info('\x1b[36m%s\x1b[0m', s),
+  error: (s) => console.error(styleText('red', s)),
+  success: (s) => console.info(styleText('green', s)),
+  warn: (s) => console.warn(styleText('yellow', s)),
+  info: (s) => console.info(styleText('cyan', s)),
 
   stdout: {
     clearLine: () => {
       stdout.clearLine(0);
       stdout.cursorTo(0);
     },
-    success: (s) => stdout.write(format('\x1b[32m%s\x1b[0m', s)),
-    warn: (s) => stdout.write(format('\x1b[33m%s\x1b[0m', s)),
-    info: (s) => stdout.write(format('\x1b[36m%s\x1b[0m', s)),
+    success: (s) => stdout.write(format(styleText('green', s))),
+    warn: (s) => stdout.write(format(styleText('yellow', s))),
+    info: (s) => stdout.write(format(styleText('cyan', s))),
   },
 };

scripts/report.mjs

@@ -8,7 +8,7 @@ import { addThemingController } from '../../theming/theming-controller.js';
 import IgcIconButtonComponent from '../button/icon-button.js';
 import IgcChipComponent from '../chip/chip.js';
 import { chatContext, chatUserInputContext } from '../common/context.js';
-import { enterKey } from '../common/controllers/key-bindings.js';
+import { enterKey, tabKey } from '../common/controllers/key-bindings.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
 import { bindIf, hasFiles, isEmpty, trimmedHtml } from '../common/util.js';
@@ -91,6 +91,10 @@ export default class IgcChatInputComponent extends LitElement {
     sendButton: () => this._renderSendButton(),
   });
 
+  private _userIsTyping = false;
+  private _userLastTypeTime = Date.now();
+  private _typingTimeout = 0;
+
   @consume({ context: chatContext, subscribe: true })
   private readonly _state!: ChatState;
 
@@ -148,6 +152,11 @@ export default class IgcChatInputComponent extends LitElement {
     this.focusInput();
   }
 
+  private _setTypingStateAndEmit(state: boolean): void {
+    this._userIsTyping = state;
+    this._userInputState.emitUserTypingState(state);
+  }
+
   private _handleAttachmentRemoved(attachment: IgcChatMessageAttachment): void {
     const current = this._userInputState.inputAttachments;
 
@@ -160,16 +169,38 @@ export default class IgcChatInputComponent extends LitElement {
   }
 
   private _handleKeydown(event: KeyboardEvent): void {
-    const isSendRequest =
-      event.key.toLowerCase() === enterKey.toLowerCase() && !event.shiftKey;
+    this._userLastTypeTime = Date.now();
+    const isEnterKey = event.key.toLowerCase() === enterKey.toLowerCase();
+    const isTab = event.key.toLocaleLowerCase() === tabKey.toLowerCase();
 
-    if (isSendRequest) {
+    if (isTab && !this._userIsTyping) {
+      return;
+    }
+
+    if (isEnterKey && !event.shiftKey) {
       event.preventDefault();
       this._sendMessage();
-    } else {
-      // TODO:
-      this._state.handleKeyDown(event);
+
+      if (this._userIsTyping) {
+        clearTimeout(this._typingTimeout);
+        this._setTypingStateAndEmit(false);
+      }
+
+      return;
     }
+
+    clearTimeout(this._typingTimeout);
+    const delay = this._state.stopTypingDelay;
+
+    if (!this._userIsTyping) {
+      this._setTypingStateAndEmit(true);
+    }
+
+    this._typingTimeout = setTimeout(() => {
+      if (this._userIsTyping && this._userLastTypeTime + delay <= Date.now()) {
+        this._setTypingStateAndEmit(false);
+      }
+    }, delay);
   }
 
   private _handleFileInputClick(): void {
@@ -238,6 +269,7 @@ export default class IgcChatInputComponent extends LitElement {
       this._state.attachFilesWithEvent(Array.from(input.files!));
     }
   }
+
   /**
    * Default attachments area template used when no custom template is provided.
    * Renders the list of input attachments as chips.

src/components/chat/chat-input.ts

@@ -46,9 +46,6 @@ export class ChatState {
    */
   private _acceptedTypesCache: ChatAcceptedFileTypes | null = null;
 
-  private _isTyping = false;
-  private _lastTyped = Date.now();
-
   public resourceStrings = IgcChatResourceStringEN;
 
   //#endregion
@@ -217,6 +214,11 @@ export class ChatState {
     return this._host.emitEvent('igcMessageReact', { detail: reaction });
   }
 
+  /** @internal */
+  public emitUserTypingState(state: boolean): boolean {
+    return this._host.emitEvent('igcTypingChange', { detail: state });
+  }
+
   /**
    * @internal
    */
@@ -326,29 +328,5 @@ export class ChatState {
     }
   }
 
-  public handleKeyDown = (_: KeyboardEvent) => {
-    this._lastTyped = Date.now();
-    if (!this._isTyping) {
-      this.emitEvent('igcTypingChange', {
-        detail: { isTyping: true },
-      });
-      this._isTyping = true;
-
-      const stopTypingDelay = this.stopTypingDelay;
-      setTimeout(() => {
-        if (
-          this._isTyping &&
-          stopTypingDelay &&
-          this._lastTyped + stopTypingDelay < Date.now()
-        ) {
-          this.emitEvent('igcTypingChange', {
-            detail: { isTyping: false },
-          });
-          this._isTyping = false;
-        }
-      }, stopTypingDelay);
-    }
-  };
-
   //#endregion
 }

src/components/chat/chat-state.ts

@@ -3,14 +3,15 @@ import { html, nothing } from 'lit';
 import { spy, stub, useFakeTimers } from 'sinon';
 import type IgcIconButtonComponent from '../button/icon-button.js';
 import IgcChipComponent from '../chip/chip.js';
-import { enterKey } from '../common/controllers/key-bindings.js';
+import { enterKey, tabKey } from '../common/controllers/key-bindings.js';
 import { defineComponents } from '../common/definitions/defineComponents.js';
 import { first, last } from '../common/util.js';
 import {
   isFocused,
   simulateBlur,
   simulateClick,
   simulateFocus,
+  simulateInput,
   simulateKeyboard,
 } from '../common/utils.spec.js';
 import { simulateFileUpload } from '../file-input/file-input.spec.js';
@@ -888,21 +889,69 @@ describe('Chat', () => {
       const textArea = getChatDOM(chat).input.textarea;
 
       chat.options = { stopTypingDelay: 2500 };
-      simulateKeyboard(textArea, 'a');
+      simulateKeyboard(textArea, 'a', 15);
       await elementUpdated(chat);
 
       expect(eventSpy).calledWith('igcTypingChange');
-      expect(eventSpy.firstCall.args[1]?.detail).to.eql({ isTyping: true });
+      expect(eventSpy.firstCall.args[1]?.detail).to.be.true;
 
       clock.setSystemTime(2501);
       await clock.runAllAsync();
 
       expect(eventSpy).calledWith('igcTypingChange');
-      expect(eventSpy.lastCall.args[1]?.detail).to.eql({ isTyping: false });
+      expect(eventSpy.lastCall.args[1]?.detail).to.be.false;
 
       clock.restore();
     });
 
+    it('emits igcTypingChange after sending a message', async () => {
+      const eventSpy = spy(chat, 'emitEvent');
+      const textArea = getChatDOM(chat).input.textarea;
+      const internalInput = textArea.renderRoot.querySelector('textarea')!;
+
+      chat.options = { stopTypingDelay: 2500 };
+
+      // Simulate typing some text and the event sequence following after sending a message
+
+      // Fires igcTypingChange
+      simulateKeyboard(textArea, 'a', 15);
+      await elementUpdated(textArea);
+
+      // Fires igcInputChange
+      simulateInput(internalInput, { value: 'a'.repeat(15) });
+      await elementUpdated(textArea);
+
+      // Fires igcMessageCreated -> igcTypingChange -> igcInputFocus since sending a message refocuses
+      // the textarea
+      simulateKeyboard(textArea, enterKey);
+      await elementUpdated(chat);
+
+      const expectedEventSequence = [
+        'igcTypingChange',
+        'igcInputChange',
+        'igcMessageCreated',
+        'igcTypingChange',
+        'igcInputFocus',
+      ];
+
+      for (const [idx, event] of expectedEventSequence.entries()) {
+        expect(eventSpy.getCall(idx).firstArg).to.equal(event);
+      }
+    });
+
+    it('should not emit igcTypingChange on Tab key', async () => {
+      const eventSpy = spy(chat, 'emitEvent');
+      const textArea = getChatDOM(chat).input.textarea;
+      const internalInput = textArea.renderRoot.querySelector('textarea')!;
+
+      chat.options = { stopTypingDelay: 2500 };
+
+      simulateKeyboard(internalInput, tabKey);
+      await elementUpdated(chat);
+
+      expect(eventSpy.getCalls()).is.empty;
+    });
+
     it('emits igcInputFocus', async () => {
       const eventSpy = spy(chat, 'emitEvent');
 

src/components/chat/chat.spec.ts

@@ -110,7 +110,6 @@ export function isImageAttachment(
   );
 }
 
-// REVIEW: Maybe put that behind a configuration flag as this is nasty.
 export function chatMessageAdoptPageStyles(
   message: IgcChatMessageComponent
 ): void {
@@ -120,6 +119,10 @@ export function chatMessageAdoptPageStyles(
     try {
       const constructed = new CSSStyleSheet();
       for (const rule of sheet.cssRules) {
+        // https://drafts.csswg.org/cssom/#dom-cssstylesheet-insertrule:~:text=If%20parsed%20rule%20is%20an%20%40import%20rule
+        if (rule.cssText.startsWith('@import')) {
+          continue;
+        }
         constructed.insertRule(rule.cssText);
       }
       sheets.push(constructed);

src/components/chat/utils.ts

@@ -53,14 +53,9 @@ $theme: $bootstrap;
 }
 
 :host(:hover) {
-    [part~='control']::after {
+    [part='control']::after {
         box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'empty-color-hover');
     }
-
-    [part='control checked']::after {
-        background: var-get($theme, 'fill-color-hover');
-        box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'fill-color-hover');
-    }
 }
 
 :host(:focus-visible) ,

src/components/checkbox/themes/shared/checkbox/checkbox.bootstrap.scss

@@ -1,14 +1,26 @@
 @use 'styles/utilities' as *;
 @use '../../light/checkbox/themes' as *;
 
-$theme: $base;
+$theme: $material;
 
 [part~='label'] {
     @include type-style('body-2');
 
     color: var-get($theme, 'label-color');
 }
 
+:host(:not([disabled], :state(ig-invalid)):hover),
+:host(:not([disabled], :state(ig-invalid))[indeterminate]:hover) {
+    [part~='label'] {
+        color: var-get($theme, 'label-color-hover');
+    }
+
+    [part='control checked']::after {
+        background: var-get($theme, 'fill-color-hover');
+        box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'fill-color-hover');
+    }
+}
+
 [part~='control'] {
     background: var-get($theme, 'empty-fill-color');
 }