@purpurds/text-field 4.0.0 → 4.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/text-field",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "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.0",
-    "@purpurds/field-helper-text": "4.0.0",
-    "@purpurds/icon": "4.0.0",
-    "@purpurds/label": "4.0.0",
-    "@purpurds/spinner": "4.0.0",
-    "@purpurds/tokens": "4.0.0"
+    "@purpurds/field-error-text": "4.0.2",
+    "@purpurds/field-helper-text": "4.0.2",
+    "@purpurds/icon": "4.0.2",
+    "@purpurds/spinner": "4.0.2",
+    "@purpurds/label": "4.0.2",
+    "@purpurds/tokens": "4.0.2"
   },
   "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-tone-on-tone-secondary) !important;
+    }
+
     &--disabled {
       background: var(--purpur-color-background-interactive-disabled);
     }
@@ -79,7 +84,7 @@
     background: transparent;
 
     &:hover {
-      ~ #{$root}__frame {
+      ~#{$root}__frame {
         border-width: var(--purpur-border-width-sm);
         border-color: var(--purpur-color-border-interactive-subtle-hover);
       }
@@ -87,7 +92,7 @@
 
     &:active:not(:disabled):not(:read-only),
     &:focus:not(:disabled):not(:read-only) {
-      ~ #{$root}__frame {
+      ~#{$root}__frame {
         outline: var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);
         outline-offset: calc(var(--purpur-spacing-10) * 2);
         border-width: var(--purpur-border-width-xs);
@@ -98,7 +103,7 @@
     &:disabled {
       color: var(--purpur-color-text-weak);
 
-      ~ #{$root}__frame {
+      ~#{$root}__frame {
         border-width: var(--purpur-border-width-xs);
         border-color: var(--purpur-color-border-medium);
       }
@@ -107,25 +112,30 @@
     &:read-only:not(:disabled) {
       color: var(--purpur-color-text-default);
 
-      ~ #{$root}__frame {
+      ~#{$root}__frame {
         border-width: var(--purpur-border-width-xs);
       }
 
       &:not(#{$inputRoot}--valid):not(#{$inputRoot}--error) {
-        ~ #{$root}__frame {
+        ~#{$root}__frame {
           border-color: var(--purpur-color-border-medium);
         }
       }
     }
 
+    &:-internal-autofill-previewed,
+    &:-internal-autofill-selected {
+      box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 100px var(--purpur-color-background-tone-on-tone-secondary);
+    }
+
     &#{$inputRoot}--valid {
-      ~ #{$root}__frame {
+      ~#{$root}__frame {
         border-color: var(--purpur-color-border-status-success);
       }
     }
 
     &#{$inputRoot}--error:not(:hover) {
-      ~ #{$root}__frame {
+      ~#{$root}__frame {
         border-color: var(--purpur-color-border-status-error);
       }
     }
@@ -140,4 +150,4 @@
   &__valid-icon {
     color: var(--purpur-color-text-status-success-medium);
   }
-}
+}

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";
@@ -15,7 +16,7 @@ import c from "classnames";
 import styles from "./text-field.module.scss";
 
 export type TextFieldProps = ComponentPropsWithoutRef<"input"> & {
-  id: string;
+  id: string | undefined;
   ["data-testid"]?: string;
   className?: string;
   /**
@@ -84,15 +85,18 @@ const TextFieldComponent = (
   }: TextFieldProps,
   ref: ForwardedRef<HTMLInputElement>
 ) => {
+  const randomId = useId();
+  const inputId = inputProps.id ?? randomId;
   const getTestId = (name: string) => (dataTestId ? `${dataTestId}-${name}` : undefined);
   const isValid = valid && !errorText;
-  const helperTextId = helperText ? `${inputProps.id}-helper-text` : undefined;
+  const helperTextId = helperText ? `${inputId}-helper-text` : undefined;
 
   const startAdornments: ReactNode[] = [startAdornment].filter((adornment) => !!adornment);
 
   const endAdornments: ReactNode[] = [
     loading && (
       <Spinner
+        key="spinner"
         variant={inputProps.disabled ? "disabled" : "primary"}
         size="xs"
         data-testid={getTestId("spinner")}
@@ -100,6 +104,7 @@ const TextFieldComponent = (
     ),
     isValid && (
       <Icon
+        key="valid-icon"
         data-testid={getTestId("valid-icon")}
         className={styles[`${rootClassName}__valid-icon`]}
         svg={checkCircleFilled}
@@ -124,7 +129,7 @@ const TextFieldComponent = (
     <div className={c(className, styles[rootClassName])}>
       {label && (
         <Label
-          htmlFor={inputProps.id}
+          htmlFor={inputId}
           className={styles[`${rootClassName}__label`]}
           data-testid={getTestId("label")}
           disabled={inputProps.disabled}
@@ -144,6 +149,7 @@ const TextFieldComponent = (
           )}
           <input
             {...inputProps}
+            id={inputId}
             ref={ref}
             data-testid={getTestId("input")}
             aria-describedby={inputProps["aria-describedby"] || helperTextId}