@peassoft/mnr-web-ui-kit 2.2.1 → 2.4.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/dist/plain-select/icons.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+export declare function UncheckedIcon(): JSX.Element;
+export declare function CheckedIcon(): JSX.Element;

package/dist/plain-select/icons.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function UncheckedIcon() {
+  return _jsx("svg", {
+    width: '24',
+    height: '24',
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: '1',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    className: 'uikit_PlainSelect_icon uikit_PlainSelect_uncheckedIcon',
+    children: _jsx("rect", {
+      width: '18',
+      height: '18',
+      x: '3',
+      y: '3',
+      rx: '2'
+    })
+  });
+}
+export function CheckedIcon() {
+  return _jsxs("svg", {
+    width: '24',
+    height: '24',
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: '2',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    className: 'uikit_PlainSelect_icon uikit_PlainSelect_checkedIcon',
+    children: [_jsx("path", {
+      d: 'M21 10.656V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.344'
+    }), _jsx("path", {
+      d: 'm9 11 3 3L22 4'
+    })]
+  });
+}

package/dist/plain-select/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useId, useCallback, useState, useMemo, useLayoutEffect, createRef } from 'react';
 import './styles.css';
-import Icon from './icon.js';
+import { UncheckedIcon, CheckedIcon } from './icons.js';
 /**
  * Select element implementing Listbox pattern. Presents a list of options and allows
  * a user to select one or more of them.
@@ -177,9 +177,7 @@ export function PlainSelect(props) {
           tabIndex: multiple && currFocusedIdx === idx ? 0 : -1,
           onClick: () => handleItemClick(item.id),
           onKeyDown: multiple ? handleMultiSelectKeyDown : undefined,
-          children: [_jsx(Icon, {
-            selected: isSelected
-          }), _jsxs("div", {
+          children: [isSelected ? _jsx(CheckedIcon, {}) : _jsx(UncheckedIcon, {}), _jsxs("div", {
             className: 'uikit_PlainSelect_itemContent',
             children: [_jsx("div", {
               children: item.title

package/dist/plain-select/styles.css

@@ -1,11 +1,11 @@
 .uikit_PlainSelect_label {
   margin: 0;
-  color: #757575;
+  color: #737373;
 }
 
 @media (prefers-color-scheme: dark) {
   .uikit_PlainSelect_label {
-    color: #979797;
+    color: #acacac;
   }
 }
 
@@ -37,8 +37,12 @@
   flex-shrink: 0;
 }
 
-.uikit_PlainSelect_icon--hidden {
-  visibility: hidden;
+.uikit_PlainSelect_uncheckedIcon {
+  color: #767676;
+}
+
+.uikit_PlainSelect_checkedIcon {
+  color: #337e33;
 }
 
 .uikit_PlainSelect_itemContent {
@@ -51,6 +55,6 @@
 
 .uikit_PlainSelect_description {
   margin-top: 0.5em;
-  color: #757575;
+  color: #737373;
   font-size: 87.5%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peassoft/mnr-web-ui-kit",
-  "version": "2.2.1",
+  "version": "2.4.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": {

package/dist/plain-select/icon.d.ts

@@ -1,6 +0,0 @@
-import type { JSX } from 'react';
-type Props = {
-    selected: boolean;
-};
-export default function Icon(props: Props): JSX.Element;
-export {};

package/dist/plain-select/icon.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function Icon(props) {
-  const {
-    selected
-  } = props;
-  const className = 'uikit_PlainSelect_icon' + (selected ? '' : ' uikit_PlainSelect_icon--hidden');
-  return _jsx("svg", {
-    className: className,
-    width: '24',
-    height: '24',
-    viewBox: '0 0 24 24',
-    children: _jsx("path", {
-      d: 'M9 16.172l10.594-10.594 1.406 1.406-12 12-5.578-5.578 1.406-1.406z',
-      fill: '#24b23e'
-    })
-  });
-}