Merge branch 'master' into mpopov/calendar/refactoring

Author: desig9stein

package-lock.json

@@ -60,14 +60,14 @@
     "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "~2.3.2",
-    "@custom-elements-manifest/analyzer": "^0.10.10",
+    "@biomejs/biome": "~2.3.3",
+    "@custom-elements-manifest/analyzer": "^0.11.0",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@open-wc/testing": "^4.0.0",
-    "@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",
+    "@storybook/addon-a11y": "^10.0.4",
+    "@storybook/addon-docs": "^10.0.4",
+    "@storybook/addon-links": "^10.0.4",
+    "@storybook/web-components-vite": "^10.0.4",
     "@types/mocha": "^10.0.10",
     "@web/dev-server-esbuild": "^1.0.4",
     "@web/test-runner": "^0.20.2",
@@ -91,10 +91,10 @@
     "playwright": "^1.56.1",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
-    "rimraf": "^6.0.1",
-    "sass-embedded": "~1.93.2",
+    "rimraf": "^6.1.0",
+    "sass-embedded": "~1.93.3",
     "sinon": "^21.0.0",
-    "storybook": "^10.0.1",
+    "storybook": "^10.0.4",
     "stylelint": "^16.25.0",
     "stylelint-config-standard-scss": "^16.0.0",
     "stylelint-prettier": "^5.0.3",
@@ -104,7 +104,7 @@
     "typedoc": "~0.28.14",
     "typedoc-plugin-localization": "^3.1.0",
     "typescript": "^5.9.3",
-    "vite": "^7.1.12"
+    "vite": "^7.2.0"
   },
   "peerDependencies": {
     "dompurify": "^3.3.0",

package.json

@@ -1,4 +1,4 @@
-import { consume } from '@lit/context';
+import { ContextConsumer, consume } from '@lit/context';
 import { html, LitElement, nothing } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { cache } from 'lit/directives/cache.js';
@@ -24,7 +24,12 @@ import type {
   ChatTemplateRenderer,
   IgcChatMessageAttachment,
 } from './types.js';
-import { getChatAcceptedFiles, getIconName } from './utils.js';
+import {
+  addAdoptedStylesController,
+  type ChatAcceptedFileTypes,
+  getChatAcceptedFiles,
+  getIconName,
+} from './utils.js';
 
 type DefaultInputRenderers = {
   input: ChatTemplateRenderer<ChatInputRenderContext>;
@@ -95,33 +100,53 @@ export default class IgcChatInputComponent extends LitElement {
   private _userLastTypeTime = Date.now();
   private _typingTimeout = 0;
 
-  @consume({ context: chatContext, subscribe: true })
-  private readonly _state!: ChatState;
+  private readonly _adoptedStyles = addAdoptedStylesController(this);
+
+  private readonly _stateChanged = () => {
+    this._adoptedStyles.shouldAdoptStyles(
+      !!this._state.options?.adoptRootStyles &&
+        !this._adoptedStyles.hasAdoptedStyles
+    );
+  };
+
+  private readonly _stateConsumer = new ContextConsumer(this, {
+    context: chatContext,
+    callback: this._stateChanged,
+    subscribe: true,
+  });
 
   @consume({ context: chatUserInputContext, subscribe: true })
   private readonly _userInputState!: ChatState;
 
   @query(IgcTextareaComponent.tagName)
-  private readonly _textInputElement!: IgcTextareaComponent;
+  private readonly _textInputElement?: IgcTextareaComponent;
 
   @query('#input_attachments')
-  protected readonly _fileInput!: HTMLInputElement;
+  protected readonly _fileInput?: HTMLInputElement;
 
   @state()
   private _parts = { 'input-container': true, dragging: false };
 
-  private get _acceptedTypes() {
+  private get _state(): ChatState {
+    return this._stateConsumer.value!;
+  }
+
+  private get _acceptedTypes(): ChatAcceptedFileTypes | null {
     return this._state.acceptedFileTypes;
   }
 
   constructor() {
     super();
-    addThemingController(this, all);
+    addThemingController(this, all, { themeChange: this._adoptPageStyles });
   }
 
   /** @internal */
   public focusInput(): void {
-    this._textInputElement.focus();
+    this._textInputElement?.focus();
+  }
+
+  private _adoptPageStyles(): void {
+    this._adoptedStyles.shouldAdoptStyles(this._adoptedStyles.hasAdoptedStyles);
   }
 
   private _getRenderer<U extends keyof DefaultInputRenderers>(
@@ -204,7 +229,7 @@ export default class IgcChatInputComponent extends LitElement {
   }
 
   private _handleFileInputClick(): void {
-    this._fileInput.showPicker();
+    this._fileInput?.showPicker();
   }
 
   private _handleFocusState(event: FocusEvent): void {

src/components/chat/chat-input.ts

@@ -1,4 +1,4 @@
-import { consume } from '@lit/context';
+import { ContextConsumer } from '@lit/context';
 import { html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { cache } from 'lit/directives/cache.js';
@@ -19,7 +19,7 @@ import type {
   ChatTemplateRenderer,
   IgcChatMessage,
 } from './types.js';
-import { chatMessageAdoptPageStyles } from './utils.js';
+import { addAdoptedStylesController } from './utils.js';
 
 const LIKE_INACTIVE = 'thumb_up_inactive';
 const LIKE_ACTIVE = 'thumb_up_active';
@@ -66,15 +66,31 @@ export default class IgcChatMessageComponent extends LitElement {
     );
   }
 
+  private readonly _adoptedStyles = addAdoptedStylesController(this);
+
   private readonly _defaults = Object.freeze<DefaultMessageRenderers>({
     messageHeader: () => this._renderHeader(),
     messageContent: () => this._renderContent(),
     messageAttachments: () => this._renderAttachments(),
     messageActions: () => this._renderActions(),
   });
 
-  @consume({ context: chatContext, subscribe: true })
-  private readonly _state!: ChatState;
+  private readonly _stateChanged = () => {
+    this._adoptedStyles.shouldAdoptStyles(
+      !!this._state.options?.adoptRootStyles &&
+        !this._adoptedStyles.hasAdoptedStyles
+    );
+  };
+
+  private readonly _stateConsumer = new ContextConsumer(this, {
+    context: chatContext,
+    callback: this._stateChanged,
+    subscribe: true,
+  });
+
+  private get _state(): ChatState {
+    return this._stateConsumer.value!;
+  }
 
   /**
    * The chat message to render.
@@ -84,13 +100,11 @@ export default class IgcChatMessageComponent extends LitElement {
 
   constructor() {
     super();
-    addThemingController(this, all);
+    addThemingController(this, all, { themeChange: this._adoptPageStyles });
   }
 
-  protected override firstUpdated(): void {
-    if (this._state.options?.adoptRootStyles) {
-      chatMessageAdoptPageStyles(this);
-    }
+  private _adoptPageStyles(): void {
+    this._adoptedStyles.shouldAdoptStyles(this._adoptedStyles.hasAdoptedStyles);
   }
 
   private _getRenderer(name: keyof DefaultMessageRenderers) {

src/components/chat/chat-message.ts

@@ -1,6 +1,7 @@
 import { elementUpdated, expect, fixture } from '@open-wc/testing';
 import { html, nothing } from 'lit';
 import { spy, stub, useFakeTimers } from 'sinon';
+import { configureTheme } from '../../theming/config.js';
 import type IgcIconButtonComponent from '../button/icon-button.js';
 import IgcChipComponent from '../chip/chip.js';
 import { enterKey, tabKey } from '../common/controllers/key-bindings.js';
@@ -22,7 +23,12 @@ import IgcChatComponent from './chat.js';
 import IgcChatInputComponent from './chat-input.js';
 import IgcChatMessageComponent from './chat-message.js';
 import IgcMessageAttachmentsComponent from './message-attachments.js';
-import type { IgcChatMessage, IgcChatMessageAttachment } from './types.js';
+import type {
+  ChatMessageRenderContext,
+  IgcChatMessage,
+  IgcChatMessageAttachment,
+  IgcChatOptions,
+} from './types.js';
 
 describe('Chat', () => {
   before(() => {
@@ -1026,7 +1032,30 @@ describe('Chat', () => {
   });
 
   describe('adoptRootStyles behavior', () => {
-    const customStyles = 'custom-background';
+    let chat: IgcChatComponent;
+
+    const renderer = ({ message }: ChatMessageRenderContext) =>
+      html`<div class="custom-background">${message.text}</div>`;
+
+    async function createAdoptedStylesChat(options: IgcChatOptions) {
+      chat = await fixture(html`
+        <igc-chat
+          .messages=${[{ id: 'id', sender: 'bot', text: 'Hello' }]}
+          .options=${{ renderers: { messageContent: renderer }, ...options }}
+        ></igc-chat>
+      `);
+    }
+
+    function verifyCustomStyles(state: boolean) {
+      const { messages } = getChatDOM(chat);
+      const { backgroundColor } = getComputedStyle(
+        getChatMessageDOM(first(messages)).content.querySelector(
+          '.custom-background'
+        )!
+      );
+
+      expect(backgroundColor === 'rgb(255, 0, 0)').to.equal(state);
+    }
 
     beforeEach(async () => {
       const styles = document.createElement('style');
@@ -1039,48 +1068,36 @@ describe('Chat', () => {
       document.head.append(styles);
     });
 
-    it('correctly applies `adoptRootStyles` when set', async () => {
-      chat.options = {
-        adoptRootStyles: true,
-        renderers: {
-          messageContent: ({ message }) =>
-            html`<div class=${customStyles}>${message.text}</div>`,
-        },
-      };
-      chat.messages = [{ id: 'id', sender: 'bot', text: 'Hello' }];
+    afterEach(() => {
+      document.head.querySelector('#adopt-styles-test')?.remove();
+    });
 
+    it('correctly applies `adoptRootStyles` when set', async () => {
+      await createAdoptedStylesChat({ adoptRootStyles: true });
       await elementUpdated(chat);
-
-      const { messages } = getChatDOM(chat);
-      expect(
-        getComputedStyle(
-          getChatMessageDOM(first(messages)).content.querySelector(
-            `.${customStyles}`
-          )!
-        ).backgroundColor
-      ).equal('rgb(255, 0, 0)');
+      verifyCustomStyles(true);
     });
 
     it('skips `adoptRootStyles` when not set', async () => {
-      chat.options = {
-        renderers: {
-          messageContent: ({ message }) =>
-            html`<div class=${customStyles}>${message.text}</div>`,
-        },
-      };
+      await createAdoptedStylesChat({ adoptRootStyles: false });
+      await elementUpdated(chat);
+      verifyCustomStyles(false);
+    });
+
+    it('correctly reapplies `adoptRootStyles` when set and the theme is changed', async () => {
+      await createAdoptedStylesChat({ adoptRootStyles: true });
+      await elementUpdated(chat);
+      verifyCustomStyles(true);
 
-      chat.messages = [{ id: 'id', sender: 'bot', text: 'Hello' }];
+      // Change the theme
+      configureTheme('material');
 
       await elementUpdated(chat);
+      verifyCustomStyles(true);
 
-      const { messages } = getChatDOM(chat);
-      expect(
-        getComputedStyle(
-          getChatMessageDOM(first(messages)).content.querySelector(
-            `.${customStyles}`
-          )!
-        ).backgroundColor
-      ).not.equal('rgb(255, 0, 0)');
+      configureTheme('bootstrap');
+      await elementUpdated(chat);
+      verifyCustomStyles(true);
     });
   });
 });

src/components/chat/chat.spec.ts

@@ -105,7 +105,8 @@ const Slots = setSlots(
   'suggestions',
   'suggestions-actions',
   'suggestion',
-  'empty-state'
+  'empty-state',
+  'typing-indicator'
 );
 
 /**
@@ -133,6 +134,7 @@ const Slots = setSlots(
  * @slot suggestions-actions - Slot for rendering additional actions.
  * @slot suggestion - Slot for rendering a single suggestion item.
  * @slot empty-state - Slot shown when there are no messages.
+ * @slot typing-indicator - Slot for the "is typing" indicator.
  *
  * @csspart chat-container - Styles the main chat container.
  * @csspart header - Styles the chat header container.
@@ -413,7 +415,9 @@ export default class IgcChatComponent extends EventEmitterMixin<
         ${this._state.options?.isTyping
           ? html`
               <div part="typing-indicator">
-                ${this._getRenderer('typingIndicator')(ctx)}
+                <slot name="typing-indicator"
+                  >${this._getRenderer('typingIndicator')(ctx)}</slot
+                >
               </div>
             `
           : nothing}

src/components/chat/chat.ts

@@ -234,6 +234,8 @@ export interface ChatRenderers {
   messageHeader?: ChatTemplateRenderer<ChatMessageRenderContext>;
   /**
    * Custom renderer for the "is typing" indicator.
+   *
+   * @deprecated since 6.4.0. Use the `typing-indicator` slot.
    */
   typingIndicator?: ChatTemplateRenderer<ChatRenderContext>;
   /**