@peassoft/mnr-web-ui-kit 2.2.1 → 2.3.0

package/dist/input-field/index.d.ts

@@ -1,15 +1,32 @@
 import { type JSX } from 'react';
 import './styles.css';
 type Props = {
-    /** Type of the inner input element */
+    /**
+     * Type of the inner input element
+     *
+     * @default text
+     */
     type?: 'text' | 'email' | 'password';
     /** Label */
     label: string;
+    /**
+     * Description text placed under the input field. Can be used to provide additional
+     * information about the input field, for example, about the expected format of the value.
+     */
+    description?: string;
+    /**
+     * Whether the input field is required. If true, an asterisk will be displayed next to the label.
+     */
+    required?: boolean;
     /** autocomplete attribute */
     autocompleteAttribute?: string;
     /** disabled attribule */
     disabled?: boolean;
-    /** Width in any CSS length value */
+    /**
+     * Width in any CSS length value
+     *
+     * @default 100%
+     */
     width?: string;
     /** Error message */
     errorMessage?: string;

package/dist/input-field/index.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useMemo, useEffect, useId } from 'react';
 import './styles.css';
 import processKeyDown from './process-key-down.js';
 export function InputField(props) {
   const {
     type = 'text',
     label,
+    description,
+    required,
     autocompleteAttribute,
     disabled = false,
     width = '100%',
@@ -18,6 +20,14 @@ export function InputField(props) {
     onBlur
   } = props;
   const [isCapslockOn, setIsCapslockOn] = useState(false);
+  const descriptionId = useId();
+  const errorMessageId = useId();
+  const inputDescribedByAttribute = useMemo(() => {
+    let returnValue = '';
+    if (errorMessage) returnValue = errorMessageId;
+    if (description) returnValue += ` ${descriptionId}`;
+    return returnValue || undefined;
+  }, [errorMessage, description, errorMessageId, descriptionId]);
   const handleChange = useCallback(e => onChange(e.target.value), [onChange]);
   const handleKeyDown = useCallback(e => processKeyDown(e, onTab, onShiftTab, onBlur), [onTab, onShiftTab, onBlur]);
   useEffect(() => {
@@ -52,9 +62,13 @@ export function InputField(props) {
     },
     children: [_jsxs("label", {
       className: 'uikit_InputField_innerCont',
-      children: [_jsx("span", {
+      children: [_jsxs("span", {
         className: 'uikit_InputField_label',
-        children: label
+        children: [label, required && _jsx("span", {
+          className: 'uikit_InputField_required',
+          "aria-hidden": 'true',
+          children: "\u00A0*"
+        })]
       }), _jsx("input", {
         ref: ref,
         className: 'uikit_InputField_input',
@@ -62,6 +76,8 @@ export function InputField(props) {
         autoComplete: autocompleteAttribute,
         disabled: disabled,
         value: value,
+        "aria-describedby": inputDescribedByAttribute,
+        "aria-required": required || undefined,
         onChange: handleChange,
         onKeyDown: handleKeyDown,
         onBlur: onBlur || undefined
@@ -79,9 +95,17 @@ export function InputField(props) {
       }), _jsx("span", {
         children: "CapsLock"
       })]
-    }), !!errorMessage && _jsx("div", {
-      className: 'uikit_InputField_errorMsg',
-      children: errorMessage
+    }), _jsx("div", {
+      "aria-live": 'assertive',
+      children: !!errorMessage && _jsx("div", {
+        className: 'uikit_InputField_errorMsg',
+        id: errorMessageId,
+        children: errorMessage
+      })
+    }), !!description && _jsx("div", {
+      className: 'uikit_InputField_description',
+      id: descriptionId,
+      children: description
     })]
   });
 }

package/dist/input-field/styles.css

@@ -11,13 +11,23 @@
 .uikit_InputField_label {
   display: block;
   margin-bottom: 0.25em;
-  color: #757575;
+  color: #737373;
   width: 100%;
 }
 
 @media (prefers-color-scheme: dark) {
   .uikit_InputField_label {
-    color: #979797;
+    color: #acacac;
+  }
+}
+
+.uikit_InputField_required {
+  color: #a7241b;
+}
+
+@media (prefers-color-scheme: dark) {
+  .uikit_InputField_required {
+    color: #fb827a;
   }
 }
 
@@ -63,7 +73,7 @@
 
 @media (prefers-color-scheme: dark) {
   .uikit_InputField_capslockMsg {
-    color: #979797;
+    color: #acacac;
   }
 }
 
@@ -89,3 +99,15 @@
     color: #fb827a;
   }
 }
+
+.uikit_InputField_description {
+  color: #737373;
+  font-size: 0.85rem;
+  margin-top: 0.2em;
+}
+
+@media (prefers-color-scheme: dark) {
+  .uikit_InputField_description {
+    color: #acacac;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peassoft/mnr-web-ui-kit",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "Peassoft web UI kit for MNR web applications",
   "type": "module",
   "exports": {
@@ -46,7 +46,7 @@
     "react-dom": "^19.0.0",
     "storybook": "^10.1.4",
     "stylelint": "^17.0.0",
-    "typescript": "^5.2.2",
+    "typescript": "^6.0.2",
     "vitest": "^4.0.7"
   },
   "peerDependencies": {