chore: typescript 5.5

.changeset/wide-guests-speak.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/eslint-config-elements": major
+---
+Require `@typescript-eslint` ^8.0.0

core/pfe-core/controllers/cascade-controller.ts

@@ -5,28 +5,29 @@ import { debounce } from '../functions/debounce.js';
 import { Logger } from './logger.js';
 
 /**
- * @deprecated: use context, especially via `@patternfly/pfe-core/functions/context.js`;
+ * @deprecated use context, especially via `@patternfly/pfe-core/functions/context.js`;
  */
 export interface Options<E extends ReactiveElement> {
   properties: Partial<Record<keyof E, string | string[]>>;
   prefix?: string;
 }
 
 /**
- * @deprecated: use context, especially via `@patternfly/pfe-core/functions/context.js`;
+ * @deprecated use context, especially via `@patternfly/pfe-core/functions/context.js`;
  */
 export class CascadeController<E extends ReactiveElement> implements ReactiveController {
   private class: typeof ReactiveElement;
 
   private logger: Logger;
 
-  static instances = new WeakMap<ReactiveElement, CascadeController<ReactiveElement>>();
+  static instances: WeakMap<ReactiveElement, CascadeController<ReactiveElement>> =
+    new WeakMap<ReactiveElement, CascadeController<ReactiveElement>>();
 
-  mo = new MutationObserver(this.parse);
+  mo: MutationObserver = new MutationObserver(this.parse);
 
-  cache = new Map<string, string[]>();
+  cache: Map<string, string[]> = new Map<string, string[]>();
 
-  constructor(public host: E, public options?: Options<E>) {
+  constructor(public host: E, public options?: Options<E> | undefined) {
     this.class = host.constructor as typeof ReactiveElement;
     this.logger = new Logger(this.host);
     CascadeController.instances.set(host, this);
@@ -38,24 +39,25 @@ export class CascadeController<E extends ReactiveElement> implements ReactiveCon
     this.cascadeProperties = debounce(this.cascadeProperties, 1);
   }
 
-  hostUpdated() {
+  hostUpdated(): void {
     this.cascadeProperties();
   }
 
-  hostConnected() {
+  hostConnected(): void {
     this.mo.observe(this.host, { attributes: true, childList: true });
     this.cascadeProperties();
   }
 
-  hostDisconnected() {
+  hostDisconnected(): void {
     this.mo.disconnect();
   }
 
   /**
    * Handles the cascading of properties to nested components when new elements are added
    * Attribute updates/additions are handled by the attribute callback
+   * @param [nodeList=this.host.children]
    */
-  cascadeProperties(nodeList: HTMLCollection | NodeList = this.host.children) {
+  cascadeProperties(nodeList: HTMLCollection | NodeList = this.host.children): void {
     if (this.host.isConnected) {
       const selectors = this.cache.keys();
 
@@ -89,8 +91,10 @@ export class CascadeController<E extends ReactiveElement> implements ReactiveCon
    * Gets the configured attribute name for the decorated property,
    * falling back to the lowercased property name, and caches the attribute name
    * with it's designated child selectors for value-propagation on change
+   * @param propName
+   * @param cascade
    */
-  initProp(propName: string, cascade: string | string[]) {
+  initProp(propName: string, cascade: string | string[]): void {
     for (const nodeItem of [cascade].flat(Infinity).filter(Boolean) as string[]) {
       const { attribute } = this.class.getPropertyOptions(propName);
 
@@ -122,6 +126,8 @@ export class CascadeController<E extends ReactiveElement> implements ReactiveCon
 
   /**
    * Copy the named attribute to a target element.
+   * @param name attr name
+   * @param el element
    */
   private async _copyAttribute(name: string, el: Element) {
     this.logger.log(`copying ${name} to ${el}`);

core/pfe-core/controllers/css-variable-controller.ts

@@ -8,10 +8,10 @@ export class CssVariableController implements ReactiveController {
   }
 
   private parseProperty(name: string) {
-    return name.substr(0, 2) !== '--' ? `--${name}` : name;
+    return name.substring(0, 2) !== '--' ? `--${name}` : name;
   }
 
-  getVariable(name: string) {
+  getVariable(name: string): string | null {
     return this.style.getPropertyValue(this.parseProperty(name)).trim() || null;
   }
 

core/pfe-core/controllers/floating-dom-controller.ts

@@ -64,19 +64,19 @@ export class FloatingDOMController implements ReactiveController {
   }
 
   /** The crosswise alignment of the invoker on which to display the floating DOM */
-  get alignment() {
+  get alignment(): Alignment {
     return this.#alignment ?? 'center';
   }
 
   /** The side of the invoker on which to display the floating DOM */
-  get anchor() {
+  get anchor(): Anchor {
     return this.#anchor ?? '';
   }
 
   /**
    * When true, the floating DOM is visible
    */
-  get open() {
+  get open(): boolean {
     return this.#open;
   }
 
@@ -106,7 +106,7 @@ export class FloatingDOMController implements ReactiveController {
     };
   }
 
-  hostDisconnected() {
+  hostDisconnected(): void {
     this.#cleanup?.();
   }
 
@@ -167,8 +167,15 @@ export class FloatingDOMController implements ReactiveController {
     this.host.requestUpdate();
   }
 
-  /** Show the floating DOM */
-  async show({ offset, placement, flip, fallbackPlacements }: ShowOptions = {}) {
+  /**
+   * Show the floating DOM
+   * @param [options={}]
+   * @param options.offset
+   * @param options.placement
+   * @param options.flip
+   * @param options.fallbackPlacements
+   * */
+  async show({ offset, placement, flip, fallbackPlacements }: ShowOptions = {}): Promise<void> {
     const invoker = this.#invoker;
     const content = this.#content;
     if (!invoker || !content) {
@@ -187,7 +194,7 @@ export class FloatingDOMController implements ReactiveController {
   }
 
   /** Hide the floating DOM */
-  async hide() {
+  async hide(): Promise<void> {
     await this.host.updateComplete;
     while (this.#opening && !this.open) {
       await new Promise(requestAnimationFrame);

core/pfe-core/controllers/internals-controller.ts

@@ -21,7 +21,11 @@ interface InternalsControllerOptions extends Partial<ARIAMixin> {
   getHTMLElement?(): HTMLElement;
 }
 
-/** reactively forward the internals object's aria mixin prototype */
+/**
+ * reactively forward the internals object's aria mixin prototype
+ * @param target
+ * @param key
+ */
 function aria(
   target: InternalsController,
   key: keyof InternalsController,
@@ -94,6 +98,8 @@ export class InternalsController implements ReactiveController, ARIAMixin {
   @aria ariaAtomic: string | null = null;
   @aria ariaAutoComplete: string | null = null;
   @aria ariaBusy: string | null = null;
+  @aria ariaBrailleLabel: string | null = null;
+  @aria ariaBrailleRoleDescription: string | null = null;
   @aria ariaChecked: string | null = null;
   @aria ariaColCount: string | null = null;
   @aria ariaColIndex: string | null = null;
@@ -150,24 +156,24 @@ export class InternalsController implements ReactiveController, ARIAMixin {
   @aria ariaOwnsElements: Element[] | null = null;
 
   /** True when the control is disabled via it's containing fieldset element */
-  get formDisabled() {
+  get formDisabled(): boolean {
     if (isServer) {
       return this._formDisabled;
     } else {
       return this.element?.matches(':disabled') || this._formDisabled;
     }
   }
 
-  get labels() {
+  get labels(): NodeList {
     return this.internals.labels;
   }
 
-  get validity() {
+  get validity(): ValidityState {
     return this.internals.validity;
   }
 
   /** A best-attempt based on observed behaviour in FireFox 115 on fedora 38 */
-  get computedLabelText() {
+  get computedLabelText(): string {
     return this.internals.ariaLabel
       || Array.from(this.internals.labels as NodeListOf<HTMLElement>)
           .reduce((acc, label) =>
@@ -249,27 +255,27 @@ export class InternalsController implements ReactiveController, ARIAMixin {
 
   hostConnected?(): void;
 
-  setFormValue(...args: Parameters<ElementInternals['setFormValue']>) {
+  setFormValue(...args: Parameters<ElementInternals['setFormValue']>): void {
     return this.internals.setFormValue(...args);
   }
 
-  setValidity(...args: Parameters<ElementInternals['setValidity']>) {
+  setValidity(...args: Parameters<ElementInternals['setValidity']>): void {
     return this.internals.setValidity(...args);
   }
 
-  checkValidity(...args: Parameters<ElementInternals['checkValidity']>) {
+  checkValidity(...args: Parameters<ElementInternals['checkValidity']>): boolean {
     return this.internals.checkValidity(...args);
   }
 
-  reportValidity(...args: Parameters<ElementInternals['reportValidity']>) {
+  reportValidity(...args: Parameters<ElementInternals['reportValidity']>): boolean {
     return this.internals.reportValidity(...args);
   }
 
-  submit() {
+  submit(): void {
     this.internals.form?.requestSubmit();
   }
 
-  reset() {
+  reset(): void {
     this.internals.form?.reset();
   }
 }

core/pfe-core/controllers/light-dom-controller.ts

@@ -12,14 +12,18 @@ export class LightDOMController implements ReactiveController {
   private logger: Logger;
   private initializer: () => void;
 
-  constructor(private host: ReactiveElement, initializer: () => void, private options?: Options) {
+  constructor(
+    private host: ReactiveElement,
+    initializer: () => void,
+    private options?: Options | undefined,
+  ) {
     this.initializer = initializer.bind(host);
     this.mo = new MutationObserver(this.initializer);
     this.logger = new Logger(this.host);
     host.addController(this);
   }
 
-  hostConnected() {
+  hostConnected(): void {
     if (this.hasLightDOM()) {
       this.initializer();
     } else if (this.options?.emptyWarning) {
@@ -29,7 +33,7 @@ export class LightDOMController implements ReactiveController {
     this.initObserver();
   }
 
-  hostDisconnected() {
+  hostDisconnected(): void {
     this.mo.disconnect();
   }