Add types for dom-eyedropper (EyeDropper API) (DefinitelyTyped#74253)

Author: nathanbabcock

types/dom-eyedropper/.npmignore

@@ -0,0 +1,5 @@
+*
+!**/*.d.ts
+!**/*.d.cts
+!**/*.d.mts
+!**/*.d.*.ts

types/dom-eyedropper/dom-eyedropper-tests.ts

@@ -0,0 +1,61 @@
+// Basic constructor test
+const eyeDropper = new EyeDropper();
+
+// Test open() with no options
+eyeDropper.open().then((result) => {
+    // $ExpectType ColorSelectionResult
+    result;
+
+    // $ExpectType string
+    result.sRGBHex;
+});
+
+// Test open() with empty options
+eyeDropper.open({}).then((result) => {
+    // $ExpectType ColorSelectionResult
+    result;
+});
+
+// Test open() with AbortSignal
+const controller = new AbortController();
+eyeDropper.open({ signal: controller.signal }).then((result) => {
+    // $ExpectType ColorSelectionResult
+    result;
+
+    // $ExpectType string
+    result.sRGBHex;
+});
+
+// Test aborting the eyedropper
+const controller2 = new AbortController();
+const promise = eyeDropper.open({ signal: controller2.signal });
+controller2.abort();
+promise.catch((error) => {
+    // $ExpectType any
+    error;
+});
+
+// Test using async/await
+async function selectColor() {
+    const eyeDropper = new EyeDropper();
+    const result = await eyeDropper.open();
+
+    // $ExpectType ColorSelectionResult
+    result;
+
+    // $ExpectType string
+    result.sRGBHex;
+
+    return result.sRGBHex;
+}
+
+// Test with user interaction (e.g., button click)
+document.getElementById("color-picker")?.addEventListener("click", async () => {
+    const eyeDropper = new EyeDropper();
+    try {
+        const result = await eyeDropper.open();
+        console.log(result.sRGBHex);
+    } catch (error) {
+        console.error("Color selection failed:", error);
+    }
+});

types/dom-eyedropper/index.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Options passed to the open() method of the EyeDropper API
+ */
+interface ColorSelectionOptions {
+    /**
+     * An AbortSignal. The eyedropper selection is aborted when abort() is called on the associated AbortController.
+     */
+    signal?: AbortSignal;
+}
+
+/**
+ * Result returned from the open() method of the EyeDropper API when a color is successfully selected
+ */
+interface ColorSelectionResult {
+    /**
+     * A string in hexadecimal sRGB format (#RRGGBB) representing the selected color
+     */
+    sRGBHex: string;
+}
+
+/**
+ * The EyeDropper interface provides access to a browser-supplied eyedropper tool.
+ * It allows users to sample colors from their screen, including content outside of the browser window.
+ */
+interface EyeDropper {
+    /**
+     * Initiates the eyedropper mode.
+     * Returns a promise that resolves with the selected color when the user selects a pixel,
+     * or rejects if the operation is cancelled or fails.
+     *
+     * @param options - Optional configuration including an AbortSignal to cancel the operation
+     * @returns A promise that resolves to a ColorSelectionResult containing the selected color in sRGB hex format
+     * @throws {DOMException} NotAllowedError if user activation is required but not present
+     * @throws {DOMException} InvalidStateError if the eyedropper is already open
+     * @throws {DOMException} AbortError if the operation is aborted via the AbortSignal
+     * @throws {DOMException} OperationError if the operation fails for other reasons
+     */
+    open(options?: ColorSelectionOptions): Promise<ColorSelectionResult>;
+}
+
+declare var EyeDropper: {
+    prototype: EyeDropper;
+    /**
+     * Creates a new EyeDropper instance
+     */
+    new(): EyeDropper;
+};

types/dom-eyedropper/package.json

@@ -0,0 +1,19 @@
+{
+    "private": true,
+    "name": "@types/dom-eyedropper",
+    "version": "0.1.9999",
+    "nonNpm": true,
+    "nonNpmDescription": "EyeDropper API",
+    "projects": [
+        "https://wicg.github.io/eyedropper-api/"
+    ],
+    "devDependencies": {
+        "@types/dom-eyedropper": "workspace:."
+    },
+    "owners": [
+        {
+            "name": "Nathan Babcock",
+            "githubUsername": "nathanbabcock"
+        }
+    ]
+}

types/dom-eyedropper/tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "module": "node16",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "dom-eyedropper-tests.ts"
+    ]
+}