@purpurds/text-field 4.0.0 → 4.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/text-field",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "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.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"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.7.0",

package/src/text-field.tsx

@@ -14,8 +14,16 @@ 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;
+  id: string | undefined;
   ["data-testid"]?: string;
   className?: string;
   /**
@@ -84,9 +92,10 @@ const TextFieldComponent = (
   }: TextFieldProps,
   ref: ForwardedRef<HTMLInputElement>
 ) => {
+  const inputId = setOrGenerateRandomId(inputProps.id);
   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);
 
@@ -124,7 +133,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}