@sats-group/ui-lib 75.7.0 → 75.9.0

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "75.7.0",
+  "version": "75.9.0",
   "description": "SATS web user interface library",
   "engines": {
     "node": "^18 || ^20",
     "npm": "^8 || ^9 || ^10"
   },
   "scripts": {
-    "build": "run-s clean logos typecheck colour",
+    "build": "run-s clean logos typecheck colour components",
     "clean": "node rimraf.mjs",
     "colour": "node codegen/colours.mjs",
+    "components": "node codegen/components.mjs",
     "dev": "npm run dev --workspace=site",
     "lint": "eslint",
     "lint:ci": "eslint --max-warnings 0",

package/react/components.ts

@@ -0,0 +1,81 @@
+export const names = [
+  'badge',
+  'banner',
+  'bomb',
+  'button',
+  'checkbox',
+  'chip',
+  'chip-selected',
+  'collapse',
+  'confirmation',
+  'context-menu',
+  'cropped-image',
+  'dropdown-list',
+  'expander',
+  'filter',
+  'filter-wrapper',
+  'flag',
+  'form-content',
+  'hidden-input',
+  'link',
+  'link-button',
+  'link-card',
+  'message',
+  'message-field',
+  'modal',
+  'progress-bar',
+  'radio',
+  'scale-bar',
+  'search',
+  'select',
+  'select-option',
+  'tag',
+  'text',
+  'text-area',
+  'text-input',
+  'toggle',
+  'toolbox',
+  'visually-button',
+  'visually-hidden',
+];
+
+export const selectors = [
+  '.badge',
+  '.banner',
+  '.bomb',
+  '.button',
+  '.checkbox',
+  '.chip',
+  '.chip-selected',
+  '.collapse',
+  '.confirmation',
+  '.context-menu',
+  '.cropped-image',
+  '.dropdown-list',
+  '.expander',
+  '.filter',
+  '.filter-wrapper',
+  '.flag',
+  '.form-content',
+  '.hidden-input',
+  '.link',
+  '.link-button',
+  '.link-card',
+  '.message',
+  '.message-field',
+  '.modal',
+  '.progress-bar',
+  '.radio',
+  '.scale-bar',
+  '.search',
+  '.select',
+  '.select-option',
+  '.tag',
+  '.text',
+  '.text-area',
+  '.text-input',
+  '.toggle',
+  '.toolbox',
+  '.visually-button',
+  '.visually-hidden',
+];

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

@@ -5,6 +5,7 @@ import Text from '../text';
 import useInputValidation from '../use-input-validation';
 
 import { themes, variants, TextInput as Props } from './text-input.types';
+import { useEffect } from 'react';
 
 const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
   (
@@ -29,8 +30,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 +47,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 +66,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={

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;