Merge pull request #594 from Shopify/rd/add-more-events

add more events

Author: robin-drexler

.changeset/lazy-eggs-happen.md

@@ -0,0 +1,5 @@
+---
+'@remote-dom/polyfill': patch
+---
+
+add `FocusEvent`, `ClipboardEvent` and `ToggleEvent` to polyfill

packages/polyfill/source/ClipboardEvent.ts

@@ -0,0 +1,12 @@
+import {Event} from './Event.ts';
+
+// https://w3c.github.io/clipboard-apis/#clipboardevent-interface
+export class ClipboardEvent extends Event {
+  readonly clipboardData: ClipboardEventInit['clipboardData'];
+
+  constructor(type: string, eventInitDict: ClipboardEventInit = {}) {
+    super(type, eventInitDict);
+
+    this.clipboardData = eventInitDict.clipboardData ?? null;
+  }
+}

packages/polyfill/source/FocusEvent.ts

@@ -0,0 +1,12 @@
+import {Event} from './Event.ts';
+
+// https://w3c.github.io/uievents/#interface-focusevent
+export class FocusEvent extends Event {
+  readonly relatedTarget: FocusEventInit['relatedTarget'];
+
+  constructor(type: string, eventInitDict: FocusEventInit = {}) {
+    super(type, eventInitDict);
+
+    this.relatedTarget = eventInitDict.relatedTarget ?? null;
+  }
+}

packages/polyfill/source/ToggleEvent.ts

@@ -0,0 +1,14 @@
+import {Event} from './Event.ts';
+
+// https://html.spec.whatwg.org/multipage/popover.html#toggleevent
+export class ToggleEvent extends Event {
+  readonly oldState: ToggleEventInit['oldState'];
+  readonly newState: ToggleEventInit['newState'];
+
+  constructor(type: string, eventInitDict: ToggleEventInit) {
+    super(type, eventInitDict);
+
+    this.oldState = eventInitDict.oldState;
+    this.newState = eventInitDict.newState;
+  }
+}

packages/polyfill/source/Window.ts

@@ -4,6 +4,9 @@ import {EventTarget} from './EventTarget.ts';
 import {CustomEvent} from './CustomEvent.ts';
 import {ErrorEvent} from './ErrorEvent.ts';
 import {PromiseRejectionEvent} from './PromiseRejectionEvent.ts';
+import {ToggleEvent} from './ToggleEvent.ts';
+import {FocusEvent} from './FocusEvent.ts';
+import {ClipboardEvent} from './ClipboardEvent.ts';
 import {Node} from './Node.ts';
 import {ParentNode} from './ParentNode.ts';
 import {ChildNode} from './ChildNode.ts';
@@ -44,6 +47,9 @@ export class Window extends EventTarget {
   Event = Event;
   ErrorEvent = ErrorEvent;
   PromiseRejectionEvent = PromiseRejectionEvent;
+  ToggleEvent = ToggleEvent;
+  FocusEvent = FocusEvent;
+  ClipboardEvent = ClipboardEvent;
   EventTarget = EventTarget;
   CustomEvent = CustomEvent;
   Node = Node;