Merge remote-tracking branch 'origin/master' into rkaraivanov/theme-controller-migration

Author: rkaraivanov

package-lock.json

@@ -35,7 +35,7 @@
     "lint": "npm run lint:biome && npm run lint:lit-analyzer && npm run lint:prettier && npm run lint:styles",
     "lint:biome": "biome lint",
     "lint:lit-analyzer": "lit-analyzer",
-    "lint:prettier": "prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "lint:prettier": "prettier \"**/*.ts\" --check --experimental-cli --ignore-path .gitignore",
     "lint:styles": "stylelint \"src/**/*.scss\"",
     "format": "biome check --fix && prettier \"**/*.ts\" --write --ignore-path .gitignore",
     "release": "node scripts/gen-changelog.mjs",
@@ -58,41 +58,41 @@
     "lit": "^3.3.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.0.0",
+    "@biomejs/biome": "~2.0.4",
     "@custom-elements-manifest/analyzer": "^0.10.4",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-a11y": "^9.0.11",
-    "@storybook/addon-docs": "^9.0.11",
-    "@storybook/addon-links": "^9.0.11",
-    "@storybook/web-components-vite": "^9.0.11",
+    "@storybook/addon-a11y": "^9.0.12",
+    "@storybook/addon-docs": "^9.0.12",
+    "@storybook/addon-links": "^9.0.12",
+    "@storybook/web-components-vite": "^9.0.12",
     "@types/mocha": "^10.0.10",
     "@web/dev-server-esbuild": "^1.0.4",
     "@web/test-runner": "^0.20.2",
     "@web/test-runner-playwright": "^0.11.1",
     "autoprefixer": "^10.4.21",
     "browser-sync": "^3.0.4",
     "cem-plugin-expanded-types": "^1.4.0",
-    "concurrently": "^9.1.2",
+    "concurrently": "^9.2.0",
     "custom-element-jet-brains-integration": "^1.7.0",
     "custom-element-vs-code-integration": "^1.5.0",
     "globby": "^14.1.0",
     "husky": "^9.1.7",
-    "ig-typedoc-theme": "^6.1.0",
+    "ig-typedoc-theme": "^6.2.0",
     "igniteui-theming": "^19.0.0",
     "keep-a-changelog": "^2.6.2",
     "lint-staged": "^16.1.2",
     "lit-analyzer": "^2.0.3",
     "madge": "^8.0.0",
     "node-watch": "^0.7.4",
-    "playwright": "^1.53.0",
+    "playwright": "^1.53.1",
     "postcss": "^8.5.6",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.0",
     "rimraf": "^6.0.1",
     "sass-embedded": "~1.78.0",
     "sinon": "^21.0.0",
-    "storybook": "^9.0.11",
-    "stylelint": "^16.20.0",
+    "storybook": "^9.0.12",
+    "stylelint": "^16.21.0",
     "stylelint-config-standard-scss": "^15.0.1",
     "stylelint-prettier": "^5.0.3",
     "stylelint-scss": "^6.12.1",

package.json

@@ -11,7 +11,7 @@ import {
   shiftKey,
 } from '../common/controllers/key-bindings.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { first, last } from '../common/util.js';
+import { addSafeEventListener, first, last } from '../common/util.js';
 import IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';
 import { styles } from './themes/accordion.base.css.js';
 
@@ -52,7 +52,7 @@ export default class IgcAccordionComponent extends LitElement {
   constructor() {
     super();
 
-    this.addEventListener('igcOpening', this.handlePanelOpening);
+    addSafeEventListener(this, 'igcOpening' as any, this.handlePanelOpening);
 
     addKeybindings(this, {
       skip: this.skipKeybinding,

src/components/accordion/accordion.ts

@@ -62,7 +62,7 @@ export default class IgcButtonGroupComponent extends EventEmitterMixin<
 
     const buttons = this.toggleButtons;
     const idx = buttons.indexOf(
-      added.length ? last(added).node : last(attributes)
+      added.length ? last(added).node : last(attributes).node
     );
 
     for (const [i, button] of buttons.entries()) {

src/components/button-group/button-group.ts

@@ -12,7 +12,13 @@ import { createDateTimeFormatters } from '../../common/localization/intl-formatt
 import type { Constructor } from '../../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
 import { partMap } from '../../common/part-map.js';
-import { chunk, first, last, take } from '../../common/util.js';
+import {
+  addSafeEventListener,
+  chunk,
+  first,
+  last,
+  take,
+} from '../../common/util.js';
 import { IgcCalendarBaseComponent } from '../base.js';
 import {
   areSameMonth,
@@ -139,7 +145,7 @@ export default class IgcDaysViewComponent extends EventEmitterMixin<
       bindingDefaults: { preventDefault: true },
     }).setActivateHandler(this.handleInteraction);
 
-    this.addEventListener('click', this.handleInteraction);
+    addSafeEventListener(this, 'click', this.handleInteraction);
   }
 
   public override connectedCallback() {

src/components/calendar/days-view/days-view.ts

@@ -12,7 +12,7 @@ import { createDateTimeFormatters } from '../../common/localization/intl-formatt
 import type { Constructor } from '../../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
 import { partMap } from '../../common/part-map.js';
-import { chunk } from '../../common/util.js';
+import { addSafeEventListener, chunk } from '../../common/util.js';
 import { areSameMonth, getViewElement, MONTHS_PER_ROW } from '../helpers.js';
 import { CalendarDay } from '../model.js';
 import { all } from '../themes/year-month.js';
@@ -91,7 +91,7 @@ export default class IgcMonthsViewComponent extends EventEmitterMixin<
       bindingDefaults: { preventDefault: true },
     }).setActivateHandler(this.handleInteraction);
 
-    this.addEventListener('click', this.handleInteraction);
+    addSafeEventListener(this, 'click', this.handleInteraction);
   }
 
   public override connectedCallback() {

src/components/calendar/months-view/months-view.ts

@@ -10,7 +10,7 @@ import { registerComponent } from '../../common/definitions/register.js';
 import type { Constructor } from '../../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
 import { partMap } from '../../common/part-map.js';
-import { chunk } from '../../common/util.js';
+import { addSafeEventListener, chunk } from '../../common/util.js';
 import { getViewElement, getYearRange, YEARS_PER_ROW } from '../helpers.js';
 import { CalendarDay } from '../model.js';
 import { all } from '../themes/year-month.js';
@@ -72,7 +72,7 @@ export default class IgcYearsViewComponent extends EventEmitterMixin<
       bindingDefaults: { preventDefault: true },
     }).setActivateHandler(this.handleInteraction);
 
-    this.addEventListener('click', this.handleInteraction);
+    addSafeEventListener(this, 'click', this.handleInteraction);
   }
 
   public override connectedCallback() {

src/components/calendar/years-view/years-view.ts

@@ -34,6 +34,7 @@ import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { partMap } from '../common/part-map.js';
 import {
+  addSafeEventListener,
   asNumber,
   createCounter,
   findElementFromEventPath,
@@ -162,7 +163,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
       return;
     }
     const idx = this.slides.indexOf(
-      added.length ? last(added).node : last(attributes)
+      added.length ? last(added).node : last(attributes).node
     );
 
     for (const [i, slide] of this.slides.entries()) {
@@ -328,13 +329,12 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
 
     addThemingController(this, all);
 
-    this.addEventListener('pointerenter', this.handlePointerEnter);
-    this.addEventListener('pointerleave', this.handlePointerLeave);
-    this.addEventListener('pointerdown', () => {
+    addSafeEventListener(this, 'pointerenter', this.handlePointerEnter);
+    addSafeEventListener(this, 'pointerleave', this.handlePointerLeave);
+    addSafeEventListener(this, 'pointerdown', () => {
       this._hasInnerFocus = false;
     });
-
-    this.addEventListener('keyup', () => {
+    addSafeEventListener(this, 'keyup', () => {
       this._hasInnerFocus = true;
     });
 

src/components/carousel/carousel.ts

@@ -23,6 +23,7 @@ import {
 } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
 import {
+  addSafeEventListener,
   asArray,
   equal,
   findElementFromEventPath,
@@ -475,8 +476,9 @@ export default class IgcComboComponent<
     super();
 
     addThemingController(this, all);
+    addSafeEventListener(this, 'blur', this._handleBlur);
 
-    this.addEventListener('blur', this._handleBlur);
+    // TODO
     this.addEventListener(
       'keydown',
       this._navigation.navigateHost.bind(this._navigation)

src/components/combo/combo.ts

@@ -0,0 +1,54 @@
+/**
+ * A utility class that wraps AbortController, allowing its signal to be
+ * used for event listeners and providing a mechanism to reset it,
+ * effectively generating a fresh AbortController instance on subsequent access
+ * after an abort call.
+ */
+class AbortHandle {
+  private _controller: AbortController;
+
+  constructor() {
+    this._controller = new AbortController();
+  }
+
+  /**
+   * Returns the AbortSignal associated with the current AbortController instance.
+   * This signal can be passed to functions like `addEventListener` or `fetch`.
+   */
+  public get signal(): AbortSignal {
+    return this._controller.signal;
+  }
+
+  /**
+   * Aborts the current AbortController instance and immediately creates a new,
+   * fresh AbortController.
+   *
+   * Any operations or event listeners associated with the previous signal
+   * will be aborted. Subsequent accesses to `signal` will return the
+   * signal from the new controller.
+   */
+  public abort(reason?: unknown): void {
+    this._controller.abort(reason);
+    this._controller = new AbortController();
+  }
+
+  /**
+   * Resets the controller without triggering an abort.
+   * This is useful if you want to explicitly get a fresh signal without
+   * aborting any ongoing operations from the previous signal.
+   */
+  public reset(): void {
+    this._controller = new AbortController();
+  }
+}
+
+/**
+ * Creates and returns an `AbortHandle` object that wraps an AbortController,
+ * providing a resettable AbortSignal. This allows you to use the signal for event
+ * listeners, fetch requests, or other cancellable operations, and then
+ * reset the underlying AbortController to get a fresh signal without
+ * needing to create a new wrapper object.
+ */
+export function createAbortHandle(): AbortHandle {
+  return new AbortHandle();
+}