From f308d9efe07ea1a2be915e1df43bfbb23f7f29b2 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Tue, 14 May 2024 21:29:53 -0700
Subject: [PATCH] fix(types): update TypeScript definitions for Svelte 4
 compatibility

---
 src/Pincode.svelte.d.ts      | 18 ++++++++++++------
 src/PincodeInput.svelte.d.ts | 16 ++++++++++++----
 test/Pincode.test.svelte     |  6 +++---
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/Pincode.svelte.d.ts b/src/Pincode.svelte.d.ts
index 9e0fc2d..9f84995 100644
--- a/src/Pincode.svelte.d.ts
+++ b/src/Pincode.svelte.d.ts
@@ -1,9 +1,11 @@
-/// <reference types="svelte" />
-import { SvelteComponentTyped } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
 export type Code = string[];
 
-export interface PincodeProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface PincodeProps extends RestProps {
   /**
    * @default []
    */
@@ -29,6 +31,8 @@ export interface PincodeProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNa
    * @default false
    */
   selectTextOnFocus?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class Pincode extends SvelteComponentTyped<
@@ -39,7 +43,9 @@ export default class Pincode extends SvelteComponentTyped<
   },
   { default: {} }
 > {
-  focusFirstInput?: () => void;
-  focusNextEmptyInput?: () => void;
-  focusLastInput?: () => void;
+  focusFirstInput: () => void;
+
+  focusNextEmptyInput: () => void;
+
+  focusLastInput: () => void;
 }
diff --git a/src/PincodeInput.svelte.d.ts b/src/PincodeInput.svelte.d.ts
index faa2628..02d270a 100644
--- a/src/PincodeInput.svelte.d.ts
+++ b/src/PincodeInput.svelte.d.ts
@@ -1,7 +1,9 @@
-/// <reference types="svelte" />
-import { SvelteComponentTyped } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface PincodeInputProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
+type RestProps = SvelteHTMLElements["input"];
+
+export interface PincodeInputProps extends RestProps {
   /**
    * @default ""
    */
@@ -16,10 +18,16 @@ export interface PincodeInputProps extends svelte.JSX.HTMLAttributes<HTMLElement
    * @default null
    */
   ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class PincodeInput extends SvelteComponentTyped<
   PincodeInputProps,
-  { focus: WindowEventMap["focus"]; blur: WindowEventMap["blur"]; keydown: WindowEventMap["keydown"] },
+  {
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
+    keydown: WindowEventMap["keydown"];
+  },
   {}
 > {}
diff --git a/test/Pincode.test.svelte b/test/Pincode.test.svelte
index d409b25..819d68e 100644
--- a/test/Pincode.test.svelte
+++ b/test/Pincode.test.svelte
@@ -17,9 +17,9 @@
   $: error = complete && !success;
 
   onMount(() => {
-    ref.focusFirstInput?.();
-    ref.focusNextEmptyInput?.();
-    ref.focusLastInput?.();
+    ref.focusFirstInput();
+    ref.focusNextEmptyInput();
+    ref.focusLastInput();
   });
 </script>