@purpurds/text-field 4.0.1 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/text-field",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/text-field.cjs.js",
   "types": "./dist/text-field.d.ts",
@@ -15,12 +15,12 @@
   "source": "src/text-field.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/field-error-text": "4.0.1",
-    "@purpurds/icon": "4.0.1",
-    "@purpurds/label": "4.0.1",
-    "@purpurds/spinner": "4.0.1",
-    "@purpurds/tokens": "4.0.1",
-    "@purpurds/field-helper-text": "4.0.1"
+    "@purpurds/field-error-text": "4.1.0",
+    "@purpurds/icon": "4.1.0",
+    "@purpurds/field-helper-text": "4.1.0",
+    "@purpurds/label": "4.1.0",
+    "@purpurds/tokens": "4.1.0",
+    "@purpurds/spinner": "4.1.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.7.0",

package/src/text-field.module.scss

@@ -38,6 +38,11 @@
     border-radius: var(--purpur-border-radius-sm);
     background: var(--purpur-color-background-primary);
 
+    &:has(:-internal-autofill-previewed),
+    &:has(:-internal-autofill-selected) {
+      background-color: var(--purpur-color-background-interactive-auto-fill) !important;
+    }
+
     &--disabled {
       background: var(--purpur-color-background-interactive-disabled);
     }
@@ -118,6 +123,12 @@
       }
     }
 
+    &:-internal-autofill-previewed,
+    &:-internal-autofill-selected {
+      box-shadow: inset 0 0 0 1px transparent,
+        inset 0 0 0 100px var(--purpur-color-background-interactive-auto-fill);
+    }
+
     &#{$inputRoot}--valid {
       ~ #{$root}__frame {
         border-color: var(--purpur-color-border-status-success);

package/src/text-field.tsx

@@ -4,6 +4,7 @@ import React, {
   forwardRef,
   HTMLInputTypeAttribute,
   ReactNode,
+  useId,
 } from "react";
 import { FieldErrorText } from "@purpurds/field-error-text";
 import { FieldHelperText } from "@purpurds/field-helper-text";
@@ -14,14 +15,6 @@ import c from "classnames";
 
 import styles from "./text-field.module.scss";
 
-function setOrGenerateRandomId(id: string | undefined) {
-  if (typeof id === "undefined") {
-    const randomId = Math.random().toString(36).substring(2, 10); // Random alphanumeric string
-    return randomId;
-  }
-  return id;
-}
-
 export type TextFieldProps = ComponentPropsWithoutRef<"input"> & {
   id: string | undefined;
   ["data-testid"]?: string;
@@ -92,7 +85,8 @@ const TextFieldComponent = (
   }: TextFieldProps,
   ref: ForwardedRef<HTMLInputElement>
 ) => {
-  const inputId = setOrGenerateRandomId(inputProps.id);
+  const randomId = useId();
+  const inputId = inputProps.id ?? randomId;
   const getTestId = (name: string) => (dataTestId ? `${dataTestId}-${name}` : undefined);
   const isValid = valid && !errorText;
   const helperTextId = helperText ? `${inputId}-helper-text` : undefined;
@@ -102,6 +96,7 @@ const TextFieldComponent = (
   const endAdornments: ReactNode[] = [
     loading && (
       <Spinner
+        key="spinner"
         variant={inputProps.disabled ? "disabled" : "primary"}
         size="xs"
         data-testid={getTestId("spinner")}
@@ -109,6 +104,7 @@ const TextFieldComponent = (
     ),
     isValid && (
       <Icon
+        key="valid-icon"
         data-testid={getTestId("valid-icon")}
         className={styles[`${rootClassName}__valid-icon`]}
         svg={checkCircleFilled}
@@ -153,6 +149,7 @@ const TextFieldComponent = (
           )}
           <input
             {...inputProps}
+            id={inputId}
             ref={ref}
             data-testid={getTestId("input")}
             aria-describedby={inputProps["aria-describedby"] || helperTextId}