chore: eslint flat config (#2742)

* feat(eslint-config)!: flat config

* feat(eslint-plugin)!: flat config

* chore: eslint 9 flat config

* docs: changeset

* fix(tools): update typescript types

* chore: tweak eslint config

* fix(eslint-config): config

* chore: decruft scripts

* style: lint allll the files

* test(card): fix assertions

assertion labels go in the expect call, not in the getComputedStyle call

* test(chip): fix suite setup for keyboard nav

tab to chip group instead of calling focus on it
this may indicate breakage in delegatesFocus

* fix(eslint-config): html plugin

* style: lint html

Author: bennypowers

.changeset/chilly-plums-shake.md

@@ -0,0 +1,6 @@
+---
+"@patternfly/eslint-config-elements": major
+"@patternfly/eslint-plugin-elements": major
+---
+
+Provide ESLint flat config. Upgrade to ESLint 9.0 to use.

.changeset/rude-kiwis-live.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/pfe-tools": patch
+---
+Update typescript types

.commitlintrc.cjs

@@ -1,5 +1,5 @@
-const fs = require("fs");
-const path = require("path");
+const fs = require('fs');
+const path = require('path');
 const normalizeWorkspace = x =>
   fs.readdirSync(path.join(__dirname, x)).map(x => x.replace('pf-', ''));
 
@@ -23,5 +23,5 @@ module.exports = {
       ...normalizeWorkspace('core'),
       ...normalizeWorkspace('tools'),
     ]],
-  }
+  },
 };

.eslintignore

@@ -70,6 +70,7 @@ tools/*/test/**/*.png
 !scripts/**/*.js
 
 !tools/eslint-plugin/index.js
+!tools/eslint-config/**/*.js
 
 *.tgz
 custom-elements.json

.eslintrc.json

@@ -20,7 +20,7 @@ export class CascadeController<E extends ReactiveElement> implements ReactiveCon
 
   private logger: Logger;
 
-  static instances: WeakMap<ReactiveElement, CascadeController<ReactiveElement>> = new WeakMap();
+  static instances = new WeakMap<ReactiveElement, CascadeController<ReactiveElement>>();
 
   mo = new MutationObserver(this.parse);
 

.gitignore

@@ -15,5 +15,5 @@ export class CssVariableController implements ReactiveController {
     return this.style.getPropertyValue(this.parseProperty(name)).trim() || null;
   }
 
-  hostConnected?(): void
+  hostConnected?(): void;
 }

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

@@ -11,7 +11,7 @@ import {
   offset as offsetMiddleware,
   shift as shiftMiddleware,
   flip as flipMiddleware,
-  arrow as arrowMiddleware
+  arrow as arrowMiddleware,
 } from '@floating-ui/dom';
 
 type Lazy<T> = T | (() => T | null | undefined);
@@ -110,7 +110,12 @@ export class FloatingDOMController implements ReactiveController {
     this.#cleanup?.();
   }
 
-  async #update(placement: Placement = 'top', offset?: Offset, flip = true, fallbackPlacements?: Placement[]) {
+  async #update(
+    placement: Placement = 'top',
+    offset?: Offset,
+    flip = true,
+    fallbackPlacements?: Placement[],
+  ) {
     const { padding, shift } = this.#options;
 
     const invoker = this.#invoker;
@@ -119,15 +124,20 @@ export class FloatingDOMController implements ReactiveController {
     if (!invoker || !content) {
       return;
     }
-    const { x, y, placement: _placement, middlewareData } = await computePosition(invoker, content, {
+    const {
+      x,
+      y,
+      placement: _placement,
+      middlewareData,
+    } = await computePosition(invoker, content, {
       strategy: 'absolute',
       placement,
       middleware: [
         offsetMiddleware(offset),
         shift && shiftMiddleware({ padding }),
         arrow && arrowMiddleware({ element: arrow, padding: arrow.offsetHeight / 2 }),
         flip && flipMiddleware({ padding, fallbackPlacements }),
-      ].filter(Boolean)
+      ].filter(Boolean),
     });
 
     if (arrow) {

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

@@ -4,6 +4,10 @@ function isARIAMixinProp(key: string): key is keyof ARIAMixin {
   return key === 'role' || key.startsWith('aria');
 }
 
+type FACE = HTMLElement & {
+  formDisabledCallback?(disabled: boolean): void;
+};
+
 const protos = new WeakMap();
 
 let constructingAllowed = false;
@@ -38,7 +42,7 @@ function aria(
       // @ts-expect-error: shamone!
       this.attach()[key] = value;
       this.host.requestUpdate();
-    }
+    },
   });
   protos.get(target).add(key);
 }
@@ -63,14 +67,17 @@ export class InternalsController implements ReactiveController, ARIAMixin {
   declare readonly willValidate: ElementInternals['willValidate'];
   declare readonly validationMessage: ElementInternals['validationMessage'];
 
-  public static of(host: ReactiveControllerHost, options?: InternalsControllerOptions): InternalsController {
+  public static of(
+    host: ReactiveControllerHost,
+    options?: InternalsControllerOptions,
+  ): InternalsController {
     constructingAllowed = true;
     // implement the singleton pattern
     // using a public static constructor method is much easier to manage,
     // due to the quirks of our typescript config
     const instance: InternalsController =
-      InternalsController.instances.get(host) ??
-      new InternalsController(host, options);
+      InternalsController.instances.get(host)
+      ?? new InternalsController(host, options);
     instance.initializeOptions(options);
     constructingAllowed = false;
     return instance;
@@ -152,10 +159,10 @@ export class InternalsController implements ReactiveController, ARIAMixin {
 
   /** A best-attempt based on observed behaviour in FireFox 115 on fedora 38 */
   get computedLabelText() {
-    return this.internals.ariaLabel ||
-      Array.from(this.internals.labels as NodeListOf<HTMLElement>)
-        .reduce((acc, label) =>
-          `${acc}${getLabelText(label)}`, '');
+    return this.internals.ariaLabel
+      || Array.from(this.internals.labels as NodeListOf<HTMLElement>)
+          .reduce((acc, label) =>
+            `${acc}${getLabelText(label)}`, '');
   }
 
   private get element() {
@@ -174,7 +181,9 @@ export class InternalsController implements ReactiveController, ARIAMixin {
       throw new Error('InternalsController must be constructed with `InternalsController.for()`');
     }
     if (!this.element) {
-      throw new Error('InternalsController must be instantiated with an HTMLElement or a `getHTMLElement` function');
+      throw new Error(
+        `InternalsController must be instantiated with an HTMLElement or a \`getHTMLElement\` function`,
+      );
     }
     this.attach();
     this.initializeOptions(options);
@@ -190,8 +199,8 @@ export class InternalsController implements ReactiveController, ARIAMixin {
     // START polyfill-disabled
     // We need to polyfill :disabled
     // see https://github.com/calebdwilliams/element-internals-polyfill/issues/88
-    const orig = (this.element as HTMLElement & { formDisabledCallback?(disabled: boolean): void }).formDisabledCallback;
-    (this.element as HTMLElement & { formDisabledCallback?(disabled: boolean): void }).formDisabledCallback = disabled => {
+    const orig = (this.element as FACE).formDisabledCallback;
+    (this.element as FACE).formDisabledCallback = disabled => {
       this._formDisabled = disabled;
       orig?.call(this.host, disabled);
     // END polyfill-disabled
@@ -223,7 +232,7 @@ export class InternalsController implements ReactiveController, ARIAMixin {
     }
   }
 
-  hostConnected?(): void
+  hostConnected?(): void;
 
   setFormValue(...args: Parameters<ElementInternals['setFormValue']>) {
     return this.internals.setFormValue(...args);