Merge pull request #146 from oddbird/upgrade-to-typescript-5-2-2

upgrade to [email protected]
oddbird · Nov 13, 2023 · 48665d0 · 48665d0
2 parents 01efca6 + 281c230
commit 48665d0
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -98,7 +98,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^3.1.0",
     "ts-node": "^10.9.1",
-    "typescript": "5.1.6"
+    "typescript": "^5.2.2"
   },
   "lint-staged": {
     "*.{js,ts}": [

diff --git a/src/index-fn.ts b/src/index-fn.ts
@@ -1,23 +1,35 @@
 interface PopoverToggleTargetElementInvoker {
-  popoverTargetElement: HTMLElement | null;
-  popoverTargetAction: 'toggle' | 'show' | 'hide';
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLButtonElement/popoverTargetAction) */
+  popoverTargetAction: string;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLButtonElement/popoverTargetElement) */
+  popoverTargetElement: Element | null;
 }
 
 declare global {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent) */
   interface ToggleEvent extends Event {
-    oldState: string;
-    newState: string;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/newState) */
+    readonly newState: string;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/oldState) */
+    readonly oldState: string;
   }
+
   interface HTMLElement {
-    popover: 'auto' | 'manual' | null;
-    showPopover(): void;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/popover) */
+    popover: string | null;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/hidePopover) */
     hidePopover(): void;
-    togglePopover(): void;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/showPopover) */
+    showPopover(): void;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/togglePopover) */
+    togglePopover(force?: boolean): void;
   }
+
   /* eslint-disable @typescript-eslint/no-empty-interface */
   interface HTMLButtonElement extends PopoverToggleTargetElementInvoker {}
   interface HTMLInputElement extends PopoverToggleTargetElementInvoker {}
   /* eslint-enable @typescript-eslint/no-empty-interface */
+
   interface Window {
     ToggleEvent: ToggleEvent;
   }

diff --git a/src/index.ts b/src/index.ts
@@ -1,25 +1,37 @@
 import { apply, isSupported } from './popover.js';
 
 interface PopoverToggleTargetElementInvoker {
-  popoverTargetElement: HTMLElement | null;
-  popoverTargetAction: 'toggle' | 'show' | 'hide';
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLButtonElement/popoverTargetAction) */
+  popoverTargetAction: string;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLButtonElement/popoverTargetElement) */
+  popoverTargetElement: Element | null;
 }
 
 declare global {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent) */
   interface ToggleEvent extends Event {
-    oldState: string;
-    newState: string;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/newState) */
+    readonly newState: string;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/oldState) */
+    readonly oldState: string;
   }
+
   interface HTMLElement {
-    popover: 'auto' | 'manual' | null;
-    showPopover(): void;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/popover) */
+    popover: string | null;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/hidePopover) */
     hidePopover(): void;
-    togglePopover(): void;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/showPopover) */
+    showPopover(): void;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/togglePopover) */
+    togglePopover(force?: boolean): void;
   }
+
   /* eslint-disable @typescript-eslint/no-empty-interface */
   interface HTMLButtonElement extends PopoverToggleTargetElementInvoker {}
   interface HTMLInputElement extends PopoverToggleTargetElementInvoker {}
   /* eslint-enable @typescript-eslint/no-empty-interface */
+
   interface Window {
     ToggleEvent: ToggleEvent;
   }

diff --git a/src/popover-helpers.ts b/src/popover-helpers.ts
@@ -23,7 +23,7 @@ export function popoverTargetAttributeActivationBehavior(
   element: HTMLButtonElement | HTMLInputElement,
 ) {
   const popover = element.popoverTargetElement;
-  if (!popover) {
+  if (!(popover instanceof HTMLElement)) {
     return;
   }
   const visibility = getPopoverVisibilityState(popover);
@@ -125,7 +125,7 @@ function nearestInclusiveTargetPopoverForInvoker(
 ): HTMLElement | undefined {
   while (node) {
     const nodePopover = (node as HTMLButtonElement).popoverTargetElement;
-    if (nodePopover) return nodePopover;
+    if (nodePopover instanceof HTMLElement) return nodePopover;
     node = node.parentElement || getRootNode(node);
     if (node instanceof ShadowRoot) node = node.host;
     if (node instanceof Document) return;
@@ -410,7 +410,7 @@ function setInvokerAriaExpanded(
     initialAriaExpandedValue.set(el, el.getAttribute('aria-expanded'));
   }
   const popover = el.popoverTargetElement;
-  if (popover && popover.popover === 'auto') {
+  if (popover instanceof HTMLElement && popover.popover === 'auto') {
     el.setAttribute('aria-expanded', String(force));
   } else {
     const initialValue = initialAriaExpandedValue.get(el);