feat: Add typing to InputHTMLAttributes autoComplete to react pac…

…kage from the official TS library (#68594)
DefinitelyTyped · Feb 19, 2024 · b121e7c · b121e7c
1 parent 2cf5fa1
commit b121e7c
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 2 deletions.
diff --git a/types/react/index.d.ts b/types/react/index.d.ts
@@ -3177,10 +3177,72 @@ declare namespace React {
         | "week"
         | (string & {});
 
+    type AutoFillAddressKind = "billing" | "shipping";
+    type AutoFillBase = "" | "off" | "on";
+    type AutoFillContactField =
+        | "email"
+        | "tel"
+        | "tel-area-code"
+        | "tel-country-code"
+        | "tel-extension"
+        | "tel-local"
+        | "tel-local-prefix"
+        | "tel-local-suffix"
+        | "tel-national";
+    type AutoFillContactKind = "home" | "mobile" | "work";
+    type AutoFillCredentialField = "webauthn";
+    type AutoFillNormalField =
+        | "additional-name"
+        | "address-level1"
+        | "address-level2"
+        | "address-level3"
+        | "address-level4"
+        | "address-line1"
+        | "address-line2"
+        | "address-line3"
+        | "bday-day"
+        | "bday-month"
+        | "bday-year"
+        | "cc-csc"
+        | "cc-exp"
+        | "cc-exp-month"
+        | "cc-exp-year"
+        | "cc-family-name"
+        | "cc-given-name"
+        | "cc-name"
+        | "cc-number"
+        | "cc-type"
+        | "country"
+        | "country-name"
+        | "current-password"
+        | "family-name"
+        | "given-name"
+        | "honorific-prefix"
+        | "honorific-suffix"
+        | "name"
+        | "new-password"
+        | "one-time-code"
+        | "organization"
+        | "postal-code"
+        | "street-address"
+        | "transaction-amount"
+        | "transaction-currency"
+        | "username";
+    type OptionalPrefixToken<T extends string> = `${T} ` | "";
+    type OptionalPostfixToken<T extends string> = ` ${T}` | "";
+    type AutoFillField = AutoFillNormalField | `${OptionalPrefixToken<AutoFillContactKind>}${AutoFillContactField}`;
+    type AutoFillSection = `section-${string}`;
+    type AutoFill =
+        | AutoFillBase
+        | `${OptionalPrefixToken<AutoFillSection>}${OptionalPrefixToken<
+            AutoFillAddressKind
+        >}${AutoFillField}${OptionalPostfixToken<AutoFillCredentialField>}`;
+    type HTMLInputAutoCompleteAttribute = AutoFill | (string & {});
+
     interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
         accept?: string | undefined;
         alt?: string | undefined;
-        autoComplete?: string | undefined;
+        autoComplete?: HTMLInputAutoCompleteAttribute | undefined;
         capture?: boolean | "user" | "environment" | undefined; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute
         checked?: boolean | undefined;
         disabled?: boolean | undefined;

diff --git a/types/react/ts5.0/index.d.ts b/types/react/ts5.0/index.d.ts
@@ -3175,10 +3175,72 @@ declare namespace React {
         | "week"
         | (string & {});
 
+    type AutoFillAddressKind = "billing" | "shipping";
+    type AutoFillBase = "" | "off" | "on";
+    type AutoFillContactField =
+        | "email"
+        | "tel"
+        | "tel-area-code"
+        | "tel-country-code"
+        | "tel-extension"
+        | "tel-local"
+        | "tel-local-prefix"
+        | "tel-local-suffix"
+        | "tel-national";
+    type AutoFillContactKind = "home" | "mobile" | "work";
+    type AutoFillCredentialField = "webauthn";
+    type AutoFillNormalField =
+        | "additional-name"
+        | "address-level1"
+        | "address-level2"
+        | "address-level3"
+        | "address-level4"
+        | "address-line1"
+        | "address-line2"
+        | "address-line3"
+        | "bday-day"
+        | "bday-month"
+        | "bday-year"
+        | "cc-csc"
+        | "cc-exp"
+        | "cc-exp-month"
+        | "cc-exp-year"
+        | "cc-family-name"
+        | "cc-given-name"
+        | "cc-name"
+        | "cc-number"
+        | "cc-type"
+        | "country"
+        | "country-name"
+        | "current-password"
+        | "family-name"
+        | "given-name"
+        | "honorific-prefix"
+        | "honorific-suffix"
+        | "name"
+        | "new-password"
+        | "one-time-code"
+        | "organization"
+        | "postal-code"
+        | "street-address"
+        | "transaction-amount"
+        | "transaction-currency"
+        | "username";
+    type OptionalPrefixToken<T extends string> = `${T} ` | "";
+    type OptionalPostfixToken<T extends string> = ` ${T}` | "";
+    type AutoFillField = AutoFillNormalField | `${OptionalPrefixToken<AutoFillContactKind>}${AutoFillContactField}`;
+    type AutoFillSection = `section-${string}`;
+    type AutoFill =
+        | AutoFillBase
+        | `${OptionalPrefixToken<AutoFillSection>}${OptionalPrefixToken<
+            AutoFillAddressKind
+        >}${AutoFillField}${OptionalPostfixToken<AutoFillCredentialField>}`;
+    type HTMLInputAutoCompleteAttribute = AutoFill | (string & {});
+
     interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
         accept?: string | undefined;
         alt?: string | undefined;
-        autoComplete?: string | undefined;
+        autoComplete?: HTMLInputAutoCompleteAttribute | undefined;
         capture?: boolean | "user" | "environment" | undefined; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute
         checked?: boolean | undefined;
         disabled?: boolean | undefined;