@sats-group/ui-lib 75.8.0 → 75.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "75.8.0",
+  "version": "75.10.0",
   "description": "SATS web user interface library",
   "engines": {
     "node": "^18 || ^20",

package/react/text-input/text-input.scss

@@ -163,12 +163,19 @@
   }
 
   &__help {
+    display: flex;
+    align-items: center;
+    gap: spacing.$xs;
     margin-top: spacing.$xxs;
     color: light.$on-background-primary-disabled;
   }
 
   &__error {
+    display: flex;
+    align-items: center;
+    gap: spacing.$xs;
     margin-top: spacing.$xxs;
+    color: light.$on-surface-error;
   }
 
   &__asterisk {

package/react/text-input/text-input.tsx

@@ -5,6 +5,9 @@ import Text from '../text';
 import useInputValidation from '../use-input-validation';
 
 import { themes, variants, TextInput as Props } from './text-input.types';
+import { useEffect } from 'react';
+import SvgError from '@sats-group/icons/16/error';
+import SvgInfo from '@sats-group/icons/16/info';
 
 const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
   (
@@ -29,8 +32,16 @@ const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
     },
     ref,
   ) => {
-    const [validationOnChange, onInvalid, error] =
-      useInputValidation(customErrorMessages);
+    const [isError, setIsError] = React.useState(hasError);
+    const [validationOnChange, onInvalid, error] = useInputValidation(
+      customErrorMessages,
+      customErrorMessages ? customErrorMessages.defaultError : undefined,
+      isError,
+    );
+
+    useEffect(() => {
+      setIsError(hasError);
+    }, [hasError]);
 
     return (
       <label
@@ -38,7 +49,7 @@ const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
           'text-input--theme-dark': theme === themes.dark,
           'text-input--theme-light': theme === themes.light,
           'text-input--disabled': disabled,
-          'text-input--error': error || hasError,
+          'text-input--error': error || isError,
           'text-input--moving-label': icon ? false : hasMovingLabel,
           'text-input--icon': icon,
           'text-input--variant-small': variant === variants.small,
@@ -57,6 +68,7 @@ const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
             onChange={e => {
               onChange(e);
               validationOnChange(e);
+              setIsError(false); // NOTE: We want to reset error state on change to not confuse users.
             }}
             // NOTE: Using " " as placeholder for moving label theme to enable using `:placeholder-shown` to determine when to move the label
             placeholder={
@@ -87,12 +99,14 @@ const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
 
         {helpText ? (
           <div className="text-input__help">
+            <SvgInfo />
             <Text size={Text.sizes.interface}>{helpText}</Text>
           </div>
         ) : null}
         {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}
         {error ? (
           <div aria-hidden="true" className="text-input__error">
+            <SvgError />
             <Text size={Text.sizes.interface}>{error}</Text>
           </div>
         ) : null}

package/react/use-input-validation.ts

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 
 import { Messages } from './use-input-validation.types';
 
@@ -18,14 +18,28 @@ const getCustomMessage = (validity: ValidityState, messages: Messages) => {
   if (validity.tooShort) return messages.tooShort;
   if (validity.typeMismatch) return messages.typeMismatch;
   if (validity.valueMissing) return messages.valueMissing;
+  return undefined;
 };
 
-export default (customMessages: Messages = {}) => {
+export default (
+  customMessages: Messages = {},
+  defaultError?: string,
+  isError?: boolean,
+) => {
   const [error, setError] = useState<string | undefined>();
   const validationEnabled = useRef(false);
 
+  useEffect(() => {
+    if (isError && defaultError) {
+      setError(defaultError);
+    } else {
+      setError(undefined);
+    }
+  }, [isError, defaultError]);
+
   const onInvalid = (e: React.FormEvent<SupportedElement>) => {
     validationEnabled.current = true;
+
     const message = getCustomMessage(
       (e.target as HTMLInputElement).validity,
       customMessages,
@@ -34,7 +48,6 @@ export default (customMessages: Messages = {}) => {
   };
 
   const onChange = (e: React.ChangeEvent<SupportedElement>) => {
-    if (!validationEnabled.current) return;
     const message = getCustomMessage(e.target.validity, customMessages);
     setError(message || e.target?.validationMessage || undefined);
   };

package/react/use-input-validation.types.ts

@@ -1,6 +1,7 @@
 export type Messages = {
   badInput?: string;
   customError?: string;
+  defaultError?: string;
   patternMismatch?: string;
   rangeOverflow?: string;
   rangeUnderflow?: string;